/**
 * MHM2-710 — PDP product-info tabs, design 2a.
 * Scoped under .mb-pdp-tabs to avoid collisions with legacy .product.data.items.
 * Lifted from prototype product-info-tabs-2a.html. Brand accent #EF7622, font Manrope.
 */
.mb-pdp-tabs{
  --mb2a-orange:#ef7622; --mb2a-orange-dk:#c85a17; --mb2a-orange-soft:#fbe7d6;
  --mb2a-ink:#16202b; --mb2a-body:#4c565f; --mb2a-muted:#828b93; --mb2a-faint:#a7aeb5;
  --mb2a-line:#eee7dc; --mb2a-surface:#fbf9f6; --mb2a-star:#ef9a22;
  font-family:Manrope,system-ui,sans-serif;
  color:var(--mb2a-body);
  /* Flat chrome: no shadow, top corners rounded 8px, bottom square (MHM2-710).
     overflow:visible (NOT hidden) so the Customise-tab sticky sidebar can stick —
     an overflow:hidden ancestor disables position:sticky. Corners kept clean via
     the tab bar's own top radius below. */
  background:#fff;border:1px solid #e7e2d9;border-radius:8px 8px 0 0;overflow:visible;
  /* Align with the product container above (max-width 1550px, centred) */
  max-width:1550px;
  margin:28px auto;
  /* .column.main is a flex container — min-width:0 lets the module shrink to the
     column instead of being forced wide by the tab bar's natural width (mobile). */
  width:100%;
  min-width:0;
}
.mb-pdp-tabs *{box-sizing:border-box}
.mb-pdp-tabs .panel{min-width:0}
.mb-pdp-tabs .panel img,.mb-pdp-tabs .panel table,.mb-pdp-tabs .panel iframe{max-width:100%;height:auto}
.mb-pdp-tabs .panel table{display:block;overflow-x:auto}
.mb-pdp-tabs h3{margin:0;color:var(--mb2a-ink);font-weight:700;letter-spacing:-.01em}
.mb-pdp-tabs p{margin:0;line-height:1.62}
/* tab bar */
.mb-pdp-tabs .tabsbar{display:flex;gap:2px;padding:0 26px;border-bottom:1px solid #e7e2d9;background:var(--mb2a-surface);overflow-x:auto;overflow-y:hidden;border-radius:8px 8px 0 0}
.mb-pdp-tabs .tab{padding:18px 16px;font:600 14.5px Manrope,sans-serif;color:var(--mb2a-muted);background:none;border:none;border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap}
.mb-pdp-tabs .tab .cnt{font-size:12px;font-weight:600;color:var(--mb2a-faint);background:#efece6;padding:2px 7px;border-radius:20px}
.mb-pdp-tabs .tab.on{color:var(--mb2a-ink);border-bottom-color:var(--mb2a-orange)}
.mb-pdp-tabs .tab.on .cnt{background:var(--mb2a-orange-soft);color:var(--mb2a-orange-dk)}
.mb-pdp-tabs .tab:focus-visible{outline:2px solid var(--mb2a-orange);outline-offset:-4px;border-radius:4px}
.mb-pdp-tabs .panel{display:none;padding:30px 34px 34px}
.mb-pdp-tabs .panel.on{display:block}
.mb-pdp-tabs .lead{font-size:16.5px;line-height:1.6;color:var(--mb2a-body)}
.mb-pdp-tabs .lead b{color:var(--mb2a-ink);font-weight:700}
/* benefits list */
.mb-pdp-tabs .blist{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.mb-pdp-tabs .blist li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--mb2a-body);font-weight:600}
.mb-pdp-tabs .blist .ck{flex:none;width:22px;height:22px;border-radius:50%;background:#e7f5ed;color:#1f9d63;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mb-pdp-tabs .blist .ck svg{width:13px;height:13px}
/* design details grid */
.mb-pdp-tabs .dd{margin-top:26px;border:1px solid var(--mb2a-line);border-radius:14px;overflow:hidden}
.mb-pdp-tabs .dd-h{padding:13px 18px;background:var(--mb2a-surface);font:700 13px Manrope,sans-serif;color:var(--mb2a-ink);border-bottom:1px solid var(--mb2a-line);display:flex;align-items:center;gap:9px}
.mb-pdp-tabs .dd-h svg{width:16px;height:16px;color:var(--mb2a-orange)}
.mb-pdp-tabs .dd-grid{display:grid;grid-template-columns:1fr 1fr}
.mb-pdp-tabs .dd-cell{padding:14px 18px;border-bottom:1px solid #f2ede4}
.mb-pdp-tabs .dd-cell:nth-child(odd){border-right:1px solid #f2ede4}
.mb-pdp-tabs .dd-cell .k{color:var(--mb2a-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.mb-pdp-tabs .dd-cell .v{color:var(--mb2a-ink);font-weight:600;font-size:14px}
/* SKU / manufacturer meta line */
.mb-pdp-tabs .moreinfo{display:flex;gap:24px;flex-wrap:wrap;margin-top:24px;padding-top:18px;border-top:1px solid var(--mb2a-line);font-size:12.5px;color:var(--mb2a-muted);font-weight:500}
.mb-pdp-tabs .moreinfo b{color:var(--mb2a-ink);font-weight:700}
/* shipping & returns */
.mb-pdp-tabs .ship-block{display:flex;flex-direction:column;gap:22px}
.mb-pdp-tabs .ship-item{display:flex;gap:14px}
.mb-pdp-tabs .ship-item .si{flex:none;width:40px;height:40px;border-radius:11px;background:var(--mb2a-orange-soft);color:var(--mb2a-orange-dk);display:flex;align-items:center;justify-content:center}
.mb-pdp-tabs .ship-item .si svg{width:20px;height:20px}
.mb-pdp-tabs .ship-item h4{margin:0 0 4px;font:700 14.5px Manrope,sans-serif;color:var(--mb2a-ink)}
.mb-pdp-tabs .ship-item p{font-size:13.5px;color:#67707a;line-height:1.55}
.mb-pdp-tabs .ship-item a{color:var(--mb2a-orange-dk);font-weight:600;text-decoration:none}
.mb-pdp-tabs .warn{margin-top:4px;padding:12px 15px;background:#fff5ee;border:1px solid #f7dcc6;border-radius:11px;font-size:13px;color:#9a5a22;line-height:1.5}
/* specifications table (Magento attributes render into this panel) */
.mb-pdp-tabs .panel .additional-attributes-wrapper table{width:100%;border-collapse:collapse;font-size:14px}
.mb-pdp-tabs .panel .additional-attributes th{text-align:left;color:var(--mb2a-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid #f2ede4;white-space:nowrap;vertical-align:top}
.mb-pdp-tabs .panel .additional-attributes td{color:var(--mb2a-ink);font-weight:600;padding:12px 16px;border-bottom:1px solid #f2ede4}
/* reviews panel hosts Stamped.io widget — give it breathing room */
.mb-pdp-tabs .panel .stamped-main-widget,.mb-pdp-tabs .panel #stamped-main-widget{min-height:60px}
/* ===== FAQs tab — canonical mb-faq-wrap accordion, scoped to the tab =====
   The tab panel is already the card, so dissolve the outer mb-faq-wrap chrome
   (border/shadow/margin) and restyle the accordion with 2a brand tokens.
   Scoped `.mb-pdp-tabs .mb-faq-wrap` (0,2,0) beats any inline unscoped
   `.mb-faq-wrap` (0,1,0) an author might paste, so it looks native either way.
   Authors paste just the <div class="mb-faq-wrap">…</div> block (no <style>). */
.mb-pdp-tabs .mb2a-faq .mb-faq-wrap{background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin:0;max-width:none}
.mb-pdp-tabs .mb-faq-header{display:flex;align-items:flex-start;gap:14px;margin:0 0 20px;padding-bottom:16px;border-bottom:2px solid var(--mb2a-orange-soft)}
.mb-pdp-tabs .mb-faq-header-text{flex:1}
.mb-pdp-tabs .mb-faq-header h2{margin:0;color:var(--mb2a-ink);font:700 20px Manrope,sans-serif;line-height:1.2}
.mb-pdp-tabs .mb-faq-sub{color:var(--mb2a-muted);font-size:13.5px;margin:4px 0 0;font-weight:400}
.mb-pdp-tabs .mb-faq-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--mb2a-orange-soft) 0%,#fbd5a5 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mb2a-orange-dk);font-size:20px;font-weight:700;flex-shrink:0}
.mb-pdp-tabs .mb-faq-item{border:1px solid var(--mb2a-line);border-radius:10px;margin:10px 0;background:var(--mb2a-surface);transition:background .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.mb-pdp-tabs .mb-faq-item:hover{background:#fff;border-color:#dcd5c8}
.mb-pdp-tabs .mb-faq-item[open]{background:#fff;border-color:var(--mb2a-orange);box-shadow:0 4px 12px rgba(239,118,34,.10)}
.mb-pdp-tabs .mb-faq-item summary{cursor:pointer;list-style:none;padding:16px 20px;font:600 15.5px Manrope,sans-serif;color:var(--mb2a-ink);display:flex;align-items:center;justify-content:space-between;gap:16px;line-height:1.4}
.mb-pdp-tabs .mb-faq-item summary::-webkit-details-marker{display:none}
.mb-pdp-tabs .mb-faq-item summary::marker{content:""}
.mb-pdp-tabs .mb-faq-item summary:hover{color:var(--mb2a-orange-dk)}
.mb-pdp-tabs .mb-faq-q{flex:1}
.mb-pdp-tabs .mb-faq-chevron{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--mb2a-orange-soft);color:var(--mb2a-orange-dk);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;line-height:1;transition:transform .25s,background .25s,color .25s}
.mb-pdp-tabs .mb-faq-item[open] .mb-faq-chevron{transform:rotate(45deg);background:var(--mb2a-orange);color:#fff}
.mb-pdp-tabs .mb-faq-a{color:var(--mb2a-body);font-size:14.5px;line-height:1.7;border-top:1px dashed #f0d7b5;margin:0 20px;padding:14px 0 6px}
.mb-pdp-tabs .mb-faq-a p{margin:0 0 8px}
.mb-pdp-tabs .mb-faq-a p:last-child{margin-bottom:0}
/* ===== Mobile accordion (<=600px) — Fulcrum PDP pattern =====
   display:contents dissolves the tab bar so its tab buttons become direct
   flex-children of .mb-pdp-tabs alongside the panels; inline `order` on each
   tab/panel interleaves them (tab1, panel1, tab2, panel2 ...) so each panel
   expands directly beneath its own label. Same markup + JS as desktop. */
@media(max-width:600px){
  /* width:auto + 5px side margins → 5px breathing room on both edges
     (base rule sets width:100%;margin:…auto which would sit flush to the column) */
  .mb-pdp-tabs{display:flex;flex-direction:column;width:auto;margin-left:5px;margin-right:5px}
  .mb-pdp-tabs .tabsbar{display:contents}
  .mb-pdp-tabs .tab{
    width:100%;justify-content:space-between;
    padding:16px 18px;border:none;border-bottom:1px solid #e7e2d9;
    margin:0;background:var(--mb2a-surface);
  }
  .mb-pdp-tabs .tab.on{border-bottom-color:#e7e2d9;background:#fff}
  /* chevron affordance */
  .mb-pdp-tabs .tab::after{
    content:"";width:9px;height:9px;flex:none;margin-left:auto;
    border-right:2px solid var(--mb2a-muted);border-bottom:2px solid var(--mb2a-muted);
    transform:rotate(45deg);transition:transform .2s ease;
  }
  .mb-pdp-tabs .tab.on::after{transform:rotate(-135deg);border-color:var(--mb2a-orange)}
  .mb-pdp-tabs .tab.on{border-bottom-width:0}
  .mb-pdp-tabs .panel{padding:20px 18px 24px;border-bottom:1px solid #e7e2d9}
  .mb-pdp-tabs .panel.on{border-bottom:1px solid #e7e2d9}
  .mb-pdp-tabs .dd-grid{grid-template-columns:1fr}
  .mb-pdp-tabs .dd-cell:nth-child(odd){border-right:none}
}