/* BEX component styles. Shipped to consumers via styles.css.
   Values are lifted verbatim from uploads/DESIGN.md §4. Do not round them. */

/* — Button ————————————————————————————————— */
.bex-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:var(--pad-button);min-height:40px;width:var(--hero-cta-width);border:3px solid transparent;border-radius:var(--radius-button);font:var(--type-button);font-family:var(--font-text);letter-spacing:var(--tracking-normal);box-shadow:var(--shadow-button-rest);transition:var(--transition-button);cursor:pointer;text-decoration:none;text-align:center}
.bex-btn--primary{background:var(--action-primary);color:var(--action-primary-text)}
.bex-btn--primary:hover{background:var(--action-primary-hover)}
.bex-btn--primary:active{background:var(--action-primary-active);box-shadow:var(--shadow-button-focus)}
.bex-btn--primary:focus-visible{outline:none;border-color:var(--action-primary-active);box-shadow:var(--shadow-button-focus)}
.bex-btn--secondary{background:var(--action-secondary);color:var(--action-secondary-text)}
.bex-btn--secondary:hover{background:var(--action-secondary-hover)}
.bex-btn--secondary:active{background:var(--color-chalk)}
.bex-btn--secondary:focus-visible{outline:none;border-color:var(--focus-ring)}
.bex-btn[disabled]{color:var(--action-disabled-text);background:var(--color-bone);cursor:default}
.bex-btn[disabled]:hover{background:var(--color-bone)}

/* — IconButton ————————————————————————————— */
.bex-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-size);height:var(--control-size);padding:0;border:3px solid transparent;border-radius:var(--radius-button);background:transparent;color:var(--text-heading);transition:var(--transition-nav);cursor:pointer}
.bex-iconbtn:hover{background:var(--action-quiet-hover)}
.bex-iconbtn:focus-visible{outline:none;border-color:var(--focus-ring)}
.bex-iconbtn--on-image{color:var(--text-on-dark)}
.bex-iconbtn--on-image:hover{background:var(--color-frost);color:var(--text-heading)}
.bex-iconbtn--frost{background:var(--surface-float);color:var(--text-heading)}

/* — TextLink ——————————————————————————————— */
.bex-link{display:inline-block;font:var(--type-sublink);font-family:var(--font-text);color:var(--text-tertiary);text-decoration:none;box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0);transition:var(--transition-link);cursor:pointer;background:none;border:0;padding:0}
.bex-link:hover{color:var(--text-heading);text-decoration:none;box-shadow:inset 0 -1px 0 0 currentColor}
.bex-link:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
.bex-link--on-image{color:var(--text-on-dark)}
.bex-link--on-image:hover{color:var(--text-on-dark)}

/* — Wordmark ——————————————————————————————— */
.bex-wordmark{display:inline-block;font-family:var(--font-display);font-variation-settings:var(--opsz-display);font-weight:var(--weight-medium);color:var(--text-heading);letter-spacing:0.28em;padding-left:0.28em;text-decoration:none;white-space:nowrap}
.bex-wordmark--on-image{color:var(--text-on-dark)}

/* — NavButton —————————————————————————————— */
.bex-navbtn{display:inline-flex;align-items:center;min-height:var(--control-size-sm);padding:var(--pad-nav-button);border:0;border-radius:var(--radius-button);background:transparent;color:var(--text-heading);font:var(--type-nav);font-family:var(--font-text);transition:var(--transition-nav);cursor:pointer}
.bex-navbtn:hover{background:var(--action-quiet-hover)}
.bex-navbtn[aria-expanded="true"]{background:var(--action-quiet-hover)}
.bex-navbtn:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}
.bex-navbtn--on-image{color:var(--text-on-dark)}
.bex-navbtn--on-image:hover,.bex-navbtn--on-image[aria-expanded="true"]{background:var(--color-frost);color:var(--text-heading)}

/* — SiteHeader ————————————————————————————— */
.bex-header{position:sticky;top:0;z-index:var(--z-header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:var(--header-height);padding:0 var(--space-gutter);background:transparent;border:0;box-shadow:none;transition:var(--transition-surface),color var(--duration-standard)}
.bex-header--solid{background:var(--surface-nav)}
.bex-header--frost{background:var(--surface-nav-frost);backdrop-filter:var(--backdrop-frost);-webkit-backdrop-filter:var(--backdrop-frost)}
.bex-header__nav{display:flex;align-items:center;gap:var(--space-1);justify-self:center}
.bex-header__actions{display:flex;align-items:center;gap:var(--space-half);justify-self:end}
.bex-header__burger{display:none}
@media (max-width:768px){.bex-header__nav{display:none}.bex-header__burger{display:inline-flex}}

/* — NavPanel ——————————————————————————————— */
.bex-navpanel{position:absolute;top:100%;left:0;right:0;z-index:var(--z-nav-panel);background:var(--surface-nav);border:0;box-shadow:none;padding:var(--space-6) var(--space-gutter) var(--space-8)}
.bex-navpanel__inner{display:grid;grid-template-columns:70fr 30fr;gap:var(--space-8);max-width:var(--container-max);margin:0 auto}
.bex-navpanel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-product-grid)}
.bex-navpanel__side{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.bex-navpanel__sidegroup{display:flex;flex-direction:column;gap:var(--space-1);align-items:flex-start}
.bex-navpanel__sidetitle{font:var(--type-nav);font-family:var(--font-text);color:var(--text-heading)}
@media (max-width:1024px){.bex-navpanel__inner{grid-template-columns:1fr}.bex-navpanel__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.bex-navpanel__grid{grid-template-columns:1fr}}

/* — ProductCard ———————————————————————————— */
.bex-productcard{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);background:transparent;border:0;box-shadow:none;border-radius:0;text-align:center}
.bex-productcard__media{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.bex-productcard__media img{max-width:100%;max-height:100%;object-fit:contain}
.bex-productcard__name{font:var(--type-product-name);font-family:var(--font-text);color:var(--text-heading)}
.bex-productcard__links{display:flex;gap:var(--space-2);justify-content:center}

/* — CategoryCard ——————————————————————————— */
.bex-categorycard{position:relative;display:block;overflow:hidden;border:0;box-shadow:none;border-radius:var(--radius-card);background:var(--surface-alt);text-decoration:none}
.bex-categorycard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bex-categorycard__label{position:relative;display:inline-block;margin:var(--space-3);font:var(--type-category-label);font-family:var(--font-text);color:var(--text-on-dark);z-index:var(--z-hero-overlay)}

/* — Input —————————————————————————————————— */
.bex-input{display:flex;align-items:center;gap:var(--space-1);min-height:40px;padding:var(--pad-button) var(--space-2);background:transparent;border:1px solid var(--border-hairline);border-radius:var(--radius-button);color:var(--text-heading);transition:var(--transition-button)}
.bex-input:focus-within{border-color:var(--focus-ring)}
.bex-input--bare{border:0;padding-left:0}
.bex-input__field{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--text-heading);font:var(--type-body);font-family:var(--font-text)}
.bex-input__field::placeholder{color:var(--text-placeholder)}

/* — Hero ——————————————————————————————————— */
.bex-hero{position:relative;height:var(--section-height);min-height:520px;width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-8) var(--space-gutter)}
.bex-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bex-hero__content{position:relative;z-index:var(--z-hero-overlay);display:flex;flex-direction:column;align-items:center;gap:var(--space-1);text-align:center}
.bex-hero__title{font:var(--type-hero);font-family:var(--font-display);font-variation-settings:var(--opsz-display);color:var(--text-on-dark);margin:0}
.bex-hero__title--dark{color:var(--text-heading)}
.bex-hero__sub{font:var(--type-body);font-family:var(--font-text);color:var(--text-on-dark)}
.bex-hero__sub--dark{color:var(--text-body)}
.bex-hero__promo{font:var(--type-promo);font-family:var(--font-text);color:var(--text-promo)}
.bex-hero__promo--on-image{color:var(--text-on-dark)}
.bex-hero__ctas{display:flex;gap:var(--gap-cta);margin-top:var(--space-2)}
.bex-hero__ctas .bex-btn+.bex-btn{width:var(--hero-cta-width-secondary)}
@media (max-width:768px){.bex-hero__title{font-size:var(--size-hero-mobile);line-height:var(--leading-hero-mobile)}.bex-hero__ctas{flex-direction:column;width:100%;max-width:280px}.bex-hero__ctas .bex-btn,.bex-hero__ctas .bex-btn+.bex-btn{width:100%}}

/* — Carousel ——————————————————————————————— */
.bex-carousel{position:relative;height:var(--section-height);min-height:520px;overflow:hidden}
.bex-carousel__track{height:100%}
.bex-carousel__slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity var(--duration-standard)}
.bex-carousel__slide--active{opacity:1;pointer-events:auto}
.bex-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:var(--z-carousel-control)}
.bex-carousel__arrow--prev{left:var(--space-2)}
.bex-carousel__arrow--next{right:var(--space-2)}
.bex-carousel__dots{position:absolute;left:0;right:0;bottom:var(--space-6);z-index:var(--z-carousel-control)}
.bex-dots{display:flex;gap:var(--space-1);justify-content:center;align-items:center}
.bex-dot{width:8px;height:8px;padding:0;border:0;border-radius:var(--radius-round);background:var(--color-frost);cursor:pointer;transition:var(--transition-nav)}
.bex-dot--active{background:var(--color-white)}
.bex-dot--dark{background:var(--color-limestone)}
.bex-dot--dark.bex-dot--active{background:var(--color-ink)}

/* — ImagePlaceholder (scaffolding, not a design element) ——— */
.bex-imgph{display:flex;align-items:center;justify-content:center;padding:var(--space-2);background:var(--surface-alt);color:var(--text-placeholder);font:var(--type-body);font-family:var(--font-text);text-align:center}
.bex-imgph--dark{background:var(--surface-dark);color:var(--color-ash)}
.bex-imgph__caption{max-width:36ch;text-wrap:pretty}

/* — ChatBar ———————————————————————————————— */
.bex-chatbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-chat-bar);display:flex;align-items:center;gap:var(--space-2);min-height:var(--chat-bar-height);padding:var(--space-1) var(--space-gutter);background:var(--surface-card);border-top:1px solid var(--border-hairline)}
.bex-chatbar__label{display:flex;align-items:center;gap:var(--space-1);font:var(--type-nav);font-family:var(--font-text);color:var(--text-heading);white-space:nowrap}
.bex-chatbar__field{flex:1;min-width:0}
.bex-chatbar__demo{display:flex;align-items:center;gap:var(--space-1);white-space:nowrap;width:auto;padding:var(--pad-button) var(--space-2)}
.bex-chatbar__demo .bex-icon-accent{color:var(--action-primary)}
@media (max-width:768px){.bex-chatbar__label span{display:none}}