/* ============ PRODUCT PAGE TWEAKS (Ray-Ban style on Hongo classic theme) ============
   We rely on Hongo's NATIVE two-column product layout (gallery col + summary col).
   Our PHP hook replaces the gallery output with the configurator stage, and the
   wizard root is rendered inside .summary. Therefore we only need to:
     1. Make sure the stage looks good in the gallery slot (sticky + clean bg).
     2. Allow the title block to wrap normally (no word-break).
     3. Hide Stripe Link / express-checkout buttons.
   No DOM rewrap, no custom grid. */
/* Two-column product layout: stage (gallery shim) on left, summary on right.
   We render an .eightb-cfg-gallery-shim wrapper around #eightb-cfg-stage on the
   server side, sibling to .summary inside .product, so we can use a CSS grid on
   the product container itself — no JS DOM rewrap. */
/* Hongo wraps the gallery + summary inside .hongo-carousel-content-images-wrap.
   Apply the 2-col grid on THAT wrapper. Tabs/related sit outside this wrapper
   as siblings inside .product, so they keep their normal full-width layout. */
/* Force the outer Hongo/page containers to span the full viewport width
   so the configurator can really go edge-to-edge. */
body.eightb-configurable .container,
body.eightb-configurable .container-fluid,
body.eightb-configurable main .container,
body.eightb-configurable .site-content > .container,
body.eightb-configurable .single-product-content,
body.eightb-configurable .product-page-wrapper,
body.eightb-configurable .hongo-product-content,
body.eightb-configurable .hongo-product-image-content{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:40px !important;
  align-items:start !important;
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:8px 32px 24px !important;
  float:none !important;
  box-sizing:border-box !important;
}
body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .eightb-cfg-gallery-shim{
  grid-column:1;width:100% !important;max-width:none !important;float:none !important;
  margin:0 !important;padding:0 !important;position:static !important;
}
body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .summary.entry-summary{
  grid-column:2;width:100% !important;max-width:none !important;float:none !important;
  margin:0 !important;padding:0 !important;min-width:0;
  position:sticky !important;top:24px !important;align-self:start !important;
  max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;box-sizing:border-box;
}
/* Force every descendant inside the sticky right column to respect its width */
body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .summary.entry-summary *{
  max-width:100%;box-sizing:border-box;
}
/* Hongo divides .summary into TWO inner sub-columns (.hongo-summary-left-content
   holding the title + wizard, and .hongo-summary-right-content holding the
   stock cart form, express-checkout, meta, etc). On the configurator we want
   them stacked so the wizard takes the full right-column width and the native
   cart form sits below it. */
body.eightb-configurable .product.type-product .summary > .hongo-summary-left-content,
body.eightb-configurable .product.type-product .summary > .hongo-summary-right-content{
  width:100% !important;max-width:none !important;flex:0 0 100% !important;float:none !important;
  padding-left:0 !important;padding-right:0 !important;margin-left:0 !important;margin-right:0 !important;
  display:block !important;min-width:0 !important;
}
body.eightb-configurable .product.type-product .summary > .hongo-summary-left-content .hongo-summary-left-wrap,
body.eightb-configurable .product.type-product .summary > .hongo-summary-right-content .hongo-summary-right-wrap{
  width:100% !important;max-width:none !important;min-width:0 !important;
}
body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .hongo-rich-snippet{grid-column:1 / span 2;display:none !important}
/* Make sure the inner Hongo summary wrappers also fill width */
body.eightb-configurable .summary.entry-summary .hongo-summary-left-content,
body.eightb-configurable .summary.entry-summary .hongo-summary-left-wrap{width:100% !important;max-width:none !important;float:none !important;padding:0 !important;margin:0 !important;display:block !important}
/* Stack title on its own row so it can use the full right-column width */
body.eightb-configurable .summary-main-title{display:block !important}
body.eightb-configurable .summary-main-title-left,
body.eightb-configurable .summary-main-title-right{display:block !important;width:100% !important;flex:none !important;text-align:left !important}
/* Hide breadcrumbs + prev/next nav inside the right column (visually noisy on a configurator) */
body.eightb-configurable .summary.entry-summary .breadcrumb-navigation-wrap,
body.eightb-configurable .summary.entry-summary .navigation-wrap{display:none !important}
/* Hongo's snippet block + any other miscellany: hide from grid via display:none on the snippet (it's display-none anyway) */
body.eightb-configurable .woocommerce div.product div.summary,
body.eightb-configurable .woocommerce div.product div.summary *{word-break:normal !important;overflow-wrap:normal !important}
body.eightb-configurable .summary.entry-summary > *{width:100% !important;max-width:none !important;float:none !important;clear:both;margin-left:0 !important;margin-right:0 !important}
body.eightb-configurable .summary-main-title{display:flex !important;flex-wrap:wrap;align-items:baseline;gap:16px;width:100% !important}
body.eightb-configurable .summary-main-title-left{flex:1 1 60%;width:auto !important}
body.eightb-configurable .summary-main-title-right{flex:0 0 auto;width:auto !important;text-align:right}
body.eightb-configurable .summary-main-title h1.product_title{font-size:26px !important;line-height:1.2 !important;margin:0 0 6px !important}
body.eightb-configurable #eightb-cfg-stage{margin:0 !important;width:100% !important}
body.eightb-configurable #eightb-cfg-root,
body.eightb-configurable .eightb-wizard{width:100% !important;max-width:none !important;min-width:0}
/* Collapse to single column when the viewport can't comfortably fit the
   480px wizard column AND a usable stage on its left. Below 1200px the
   stage stacks above the wizard and both take the full content width. */
@media (max-width:1024px){
  body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap{grid-template-columns:1fr !important;padding:8px 16px 16px !important;gap:24px !important}
  body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .eightb-cfg-gallery-shim{position:static !important;grid-column:1 !important}
  body.eightb-configurable .product.type-product .hongo-carousel-content-images-wrap > .summary.entry-summary{
    grid-column:1 !important;margin:0 auto !important;
    position:static !important;max-height:none;overflow:visible;
  }
}
/* Hide Woo's old "navigation-wrap" prev/next inside .summary on configurator pages */
body.eightb-configurable .product.type-product .summary > .navigation-wrap{display:none}
/* Hide Stripe Link / Apple Pay / Google Pay / express-checkout buttons on the
   configurator product (the standard Add-to-cart still works). */
body.eightb-configurable .wc-stripe-payment-request-wrapper,
body.eightb-configurable .wcpay-payment-request-wrapper,
body.eightb-configurable .wp-block-woocommerce-checkout-express-payment-block,
body.eightb-configurable [class*="payment-request-button"],
body.eightb-configurable [id^="wc-stripe-payment-request"],
body.eightb-configurable [id*="stripe-link"],
body.eightb-configurable #wc-stripe-express-checkout-element,
body.eightb-configurable [id^="wc-stripe-express-checkout"],
body.eightb-configurable .wc-stripe-express-checkout-wrapper,
body.eightb-configurable .stripe-link-button,
body.eightb-configurable .stripe-link-checkout-button{display:none !important}
@media (max-width:880px){
  body.eightb-configurable .product.type-product{display:block;padding:0}
  body.eightb-configurable .product.type-product > #eightb-cfg-stage{position:static}
}

/* ============ CROSS-THEME 2-COLUMN FALLBACK ============
   When the product page is NOT inside Hongo's .hongo-carousel-content-images-wrap
   (e.g. block themes like Twenty Twenty-Five, vanilla classic themes, the local
   dev WP), the stage would take 100% width and the wizard would stack below as a
   giant image. Use CSS Grid with `:has()` to make the nearest container that holds
   BOTH the stage and the root a 2-column layout, OR fall back to floating the
   stage left so anything that comes after it (title, wizard root, cart form)
   wraps to the right.
   The Hongo rules above use !important and override these safely. */

/* Strategy 1: any common container with both stage and root → CSS Grid 50/50 full-width */
body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root){
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:40px !important;
  align-items:start !important;
  max-width:none !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 32px !important;
  box-sizing:border-box !important;
}
/* Reset the inline flex-basis WP injects on each column so they really are 50/50 */
body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root) > .wp-block-column{
  flex-basis:auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
}
/* Right column (the one holding the wizard root) sticks to the top while scrolling */
body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root) > .wp-block-column:has(#eightb-cfg-root){
  position:sticky !important;
  top:24px !important;
  align-self:start !important;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  box-sizing:border-box;
}
/* Force every descendant of the sticky column to respect the column width */
body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root) > .wp-block-column:has(#eightb-cfg-root) *{
  max-width:100%;
  box-sizing:border-box;
}
body.eightb-configurable #eightb-cfg-root{width:100% !important;min-width:0 !important;max-width:100% !important}
/* The whole single-product container should also span full viewport width */
body.eightb-configurable .wp-block-post-content,
body.eightb-configurable main.wp-block-group,
body.eightb-configurable .entry-content{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Strategy 2: floated fallback on the stage / shim itself.
   Hongo overrides this with float:none !important on its own selectors. */
body.eightb-configurable .eightb-cfg-gallery-shim,
body.eightb-configurable :not(.eightb-cfg-gallery-shim) > #eightb-cfg-stage{
  float:left;
  width:calc(60% - 16px);
  max-width:720px;
  margin:0 32px 24px 0;
  box-sizing:border-box;
}

/* The stage host should never explode beyond its column */
body.eightb-configurable #eightb-cfg-stage,
body.eightb-configurable .eightb-stage-host,
body.eightb-configurable .eightb-stage-img{max-width:100%}

/* Stop the float at the bottom of the product so related/tabs render full-width */
body.eightb-configurable .product.type-product::after,
body.eightb-configurable .wp-block-woocommerce-single-product::after,
body.eightb-configurable .wp-block-post-content::after{content:"";display:block;clear:both}

@media (max-width:1024px){
  body.eightb-configurable .eightb-cfg-gallery-shim,
  body.eightb-configurable :not(.eightb-cfg-gallery-shim) > #eightb-cfg-stage{
    float:none;width:100%;max-width:760px;margin:0 auto 24px;
  }
  body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root){
    grid-template-columns:1fr !important;
    padding:0 16px !important;
  }
  body.eightb-configurable .wp-block-columns:has(#eightb-cfg-stage):has(#eightb-cfg-root) > .wp-block-column:has(#eightb-cfg-root){
    position:static !important;
    max-height:none;
    overflow:visible;
  }
}

/* ============ STAGE — Ray-Ban style: full-width stacked natural photos ============ */
.eightb-stage-wrap{display:flex;flex-direction:column;gap:16px;width:100%}
.eightb-stage-host{position:relative;background:#f4f4f2;border-radius:14px;width:100%;overflow:hidden}
.eightb-stage-img{display:block;width:100%;height:auto}
.eightb-stage-empty{padding:80px 20px;display:flex;align-items:center;justify-content:center;color:#999;font-family:Inter,system-ui,sans-serif;background:#f4f4f2;border-radius:14px}
.eightb-stage-header{position:absolute;left:14px;top:14px;display:flex;gap:6px;z-index:2}
.eightb-stage-overlay{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;z-index:2}
.eightb-stage-mini-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(17,17,17,.85);color:#fff;font:11px/1.3 Inter,system-ui,sans-serif;padding:4px 10px 4px 4px;border-radius:999px;backdrop-filter:blur(6px)}
.eightb-stage-mini-chip b{font-weight:700}
.eightb-chip-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:inline-block;flex:0 0 auto}

/* Additional gallery views — full column width, stacked vertically, natural aspect */
.eightb-stage-thumbs{display:flex;flex-direction:column;gap:16px}
.eightb-stage-thumb{padding:0;border:0;border-radius:14px;overflow:hidden;background:#f4f4f2;cursor:default;width:100%;display:block;line-height:0}
.eightb-stage-thumb img{display:block;width:100%;height:auto}
/* Desktop: hide the duplicate matched-photo thumb (the big host already shows it) */
@media (min-width:1025px){
  .eightb-stage-thumb.is-matched{display:none}
}

/* Mobile: 1-at-a-time horizontal carousel with snap-scroll.
   The current photo fills ~88% of the viewport so a slice of the next photo
   peeks on the right, hinting that the user can swipe. */
@media (max-width:1024px){
  .eightb-stage-wrap{gap:8px;flex-direction:column}
  .eightb-stage-thumbs{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding:0 0 8px;
    margin:0 -16px;
    padding-left:16px;
    padding-right:16px;
    scroll-padding-left:16px;
    scrollbar-width:none;
  }
  .eightb-stage-thumbs::-webkit-scrollbar{display:none}
  .eightb-stage-thumb{
    flex:0 0 88%;
    width:auto;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    border-radius:12px;
    overflow:hidden;
  }
  .eightb-stage-thumb img{
    width:100%;
    height:auto;
    object-fit:cover;
    aspect-ratio:1/1;
    background:#f4f4f2;
  }
  /* Hide the big main stage image on mobile — the swipe row is the gallery. */
  .eightb-stage-host{display:none}
}

/* ============ STICKY RIGHT COLUMN (Ray-Ban behavior) ============ */
#eightb-cfg-root{position:sticky;top:20px;align-self:start;z-index:5}

/* Pin Woo's quantity + Add-to-cart bar to the viewport bottom.
   JS sets left/width to mirror the right column so it lines up perfectly. */
body.single-product form.cart.eightb-pinned-cart{
  position:fixed;
  bottom:16px;
  background:#fff;
  padding:14px 16px !important;
  margin:0 !important;
  border:1px solid #ececec;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  z-index:50;
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
}
body.single-product form.cart .quantity{margin:0 !important}
body.single-product form.cart .quantity input.qty{
  width:72px;height:46px;border:1px solid #ddd;border-radius:10px;
  text-align:center;font:600 15px Inter,system-ui,sans-serif;background:#fff
}
body.single-product form.cart button.single_add_to_cart_button{
  flex:1;min-width:200px;height:46px;border:0;border-radius:10px;
  background:#111;color:#fff;font:700 14px/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  transition:background .15s
}
body.single-product form.cart button.single_add_to_cart_button:hover{background:#000}

@media (max-width:880px){
  #eightb-cfg-root{position:static}
  body.single-product form.cart.eightb-pinned-cart{left:8px !important;right:8px !important;width:auto !important;bottom:8px}
}

/* ============ ROOT ============ */
#eightb-cfg-root{font-family:Inter,DM Sans,system-ui,sans-serif;color:#111;width:100%;display:flex;flex-direction:column;gap:18px;margin:8px 0 20px}
.eightb-loading{padding:18px;text-align:center;color:#888;border:1px dashed #ddd;border-radius:12px;background:#fafafa}
.eightb-error{color:#b00020;font-size:13px;padding:8px 12px;background:#fdecef;border-radius:8px;margin-top:8px}
.hint{font-size:12px;color:#666;font-weight:400}

/* ============ PRESETS — compact horizontal row, exactly 4 in line ============ */
.eightb-presets{border:1px solid #ececec;border-radius:14px;padding:14px;background:#fbfbfa}
.eightb-presets-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.eightb-presets-header h4{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#333}
.eightb-preset-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:880px){.eightb-preset-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eightb-preset-chip{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border:1.5px solid #e2e2e2;border-radius:12px;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s;font-family:inherit;min-width:0}
.eightb-preset-chip:hover:not(:disabled){border-color:#111;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.05)}
.eightb-preset-chip.active{border-color:#111;box-shadow:0 0 0 2px #111 inset}
.eightb-preset-chip.out{opacity:.5;cursor:not-allowed}
.eightb-preset-thumb{flex:0 0 48px;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#f3f3f3}
.eightb-preset-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.eightb-preset-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.eightb-preset-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111}
.eightb-preset-meta{display:flex;flex-direction:column;gap:1px;font-size:11px;line-height:1.3}
.eightb-preset-price{font-weight:700;color:#111}
.eightb-preset-stock{color:#2a7c3a;text-transform:uppercase;letter-spacing:.04em;font-size:10px}
.eightb-preset-stock.out{color:#b00020}

/* ============ WIZARD ============ */
.eightb-wizard{border:1.5px solid #111;border-radius:16px;padding:20px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.eightb-wizard-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.eightb-wizard-head h3{margin:0 0 2px;font-size:20px;font-weight:800;color:#111}
.eightb-wizard-head .hint{font-size:12px;color:#666}
.eightb-wizard-price{text-align:right;flex:0 0 auto}
.eightb-wizard-price .amount{font-size:26px;font-weight:800;color:#111;display:block;line-height:1}
.eightb-wizard-price small{font-size:11px;color:#888;font-weight:600;letter-spacing:.04em}

/* Stepper — clickable pills, ALL on one row on desktop */
.eightb-stepper{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #eee}
.eightb-stepper .eightb-step-pill{flex:1 1 auto}
.eightb-step-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border:1px solid #e2e2e2;border-radius:999px;background:#fff;cursor:pointer;font:12px/1.2 inherit;color:#666;transition:border-color .15s,color .15s,background .15s;min-width:0}
.eightb-step-pill:hover{border-color:#111;color:#111}
.eightb-step-pill .eightb-step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#f0f0ee;color:#666;font-weight:700;font-size:11px;flex:0 0 auto}
.eightb-step-pill.done{border-color:#111;color:#111}
.eightb-step-pill.done .eightb-step-num{background:#111;color:#fff}
.eightb-step-pill.current{border-color:#111;background:#111;color:#fff}
.eightb-step-pill.current .eightb-step-num{background:#fff;color:#111}
.eightb-step-pill-name{font-weight:600;white-space:nowrap;overflow:visible;min-width:0}

/* Step content */
.eightb-step{padding:6px 0 4px}
.eightb-step h3{margin:0 0 2px;font-size:15px;font-weight:700;color:#111}
.eightb-step .hint{margin:0 0 12px}
.eightb-input{padding:10px 12px;border:1.5px solid #ddd;border-radius:8px;font-size:16px;font-weight:700;width:160px;text-transform:uppercase;letter-spacing:.16em;text-align:center;background:#fff}
.eightb-input:focus{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}

/* Swatches — clean responsive grid (default ~5 cols, dense for >12 options) */
.eightb-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.eightb-swatches.dense{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.eightb-swatches.ultra{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;max-height:340px;overflow-y:auto;padding:6px 4px;scrollbar-width:thin}
.eightb-swatches.ultra .eightb-swatch-btn{padding:6px 3px;gap:3px}
.eightb-swatches.ultra .eightb-swatch-dot{width:28px;height:28px}
.eightb-swatches.ultra .eightb-swatch-label{font-size:10px}
.eightb-swatch-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;border:2px solid transparent;border-radius:10px;background:#fafafa;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;font-family:inherit;text-align:center;min-width:0}
.eightb-swatch-btn:hover{transform:translateY(-2px);background:#fff}
.eightb-swatch-btn.selected{border-color:#111;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.06)}
.eightb-swatch-dot{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 0 0 2px #fff;background-size:cover;background-position:center}
.eightb-swatches.dense .eightb-swatch-dot{width:32px;height:32px}
.eightb-swatch-label{font-size:11px;line-height:1.2;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.eightb-swatch-delta{font-size:10px;color:#888;font-weight:600}

/* Summary + step nav */
.eightb-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:4px 16px;margin:16px 0 12px;padding:10px 12px;background:#fafafa;border-radius:10px;font-size:12px}
.eightb-summary.inline{margin-top:12px}
.eightb-summary .row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed #ececec}
.eightb-summary .row:last-child{border-bottom:0}
.eightb-summary .row span{color:#666}
.eightb-summary .row strong{color:#111;font-weight:600}

.eightb-stepnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.eightb-finish-hint{font-size:13px;color:#444}
.eightb-finish-hint b{color:#111}

/* Preset selected panel — focused on initials */
.eightb-preset-block{display:flex;flex-direction:column;gap:10px;padding:14px;background:#fafafa;border-radius:12px;margin-bottom:14px}
.eightb-initials-label{font-size:13px;font-weight:700;color:#111}
.eightb-initials-label .hint{font-weight:400;margin-left:6px}

.eightb-btn{appearance:none;border:0;cursor:pointer;font:600 13px/1 Inter,system-ui,sans-serif;padding:10px 16px;border-radius:8px;transition:transform .12s,opacity .15s}
.eightb-btn:disabled{opacity:.4;cursor:not-allowed}
.eightb-btn-primary{background:#111;color:#fff}
.eightb-btn-primary:hover:not(:disabled){transform:translateY(-1px)}
.eightb-btn-ghost{background:transparent;color:#666;border:1px solid #ddd}
.eightb-btn-ghost:hover:not(:disabled){border-color:#111;color:#111}