/* TamuBN v86.0.4 — Site-wide UI stability contract
   Loaded last on every UI entry point.
   Purpose: one predictable layout/contrast/overflow baseline for Buyer, Mobile,
   Seller Studio, Admin and crawlable public pages without redesigning the brand. */

:root{
  --v8604-page:clamp(14px,2.4vw,34px);
  --v8604-ink:#17131d;
  --v8604-muted:#6d6472;
  --v8604-line:#e9e2ed;
  --v8604-soft:#faf8fc;
  --v8604-purple:#6d28d9;
  --v8604-radius:16px;
  --v8604-shadow:0 10px 30px rgba(45,19,59,.055);
}

html{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
main,section,article,aside,header,footer,nav,div,form,fieldset{min-width:0}
img,picture,video,svg,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;min-width:0}
button,a,[role="button"]{touch-action:manipulation}
:where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,span,b,strong,label){overflow-wrap:anywhere}
:focus-visible{outline:3px solid rgba(109,40,217,.22);outline-offset:2px}

/* ---------- Buyer desktop shell ---------- */
.app-header{
  width:100%;
  min-width:0;
  display:grid!important;
  grid-template-columns:auto minmax(260px,1fr) auto!important;
  align-items:center;
  gap:clamp(12px,2vw,26px)!important;
  padding-inline:var(--v8604-page)!important;
}
.app-brand{min-width:0;display:flex;align-items:center}
.app-brand img{width:clamp(142px,15vw,205px)!important;max-width:100%}
.app-search{min-width:0!important;width:100%!important}
.app-search input{min-width:0!important;width:100%!important}
.app-actions{min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:clamp(6px,1vw,14px);white-space:nowrap}
.app-actions a,.app-actions button{min-width:0}
.app-nav,.mobile-discovery-strip{
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.app-nav::-webkit-scrollbar,.mobile-discovery-strip::-webkit-scrollbar{display:none}
.app-nav a,.mobile-discovery-strip a{flex:0 0 auto;white-space:nowrap}
#app{width:100%;min-width:0;overflow-x:clip}
.shell{width:min(1560px,calc(100% - (var(--v8604-page) * 2)))!important;max-width:1560px!important}

/* Grids should shrink without overflowing. */
.product-grid,.public-product-grid,.seo-product-grid,.cube-directory-grid-list,
.support-category-grid,.academy-course-grid,.academy-lesson-grid,.academy-track-list{
  min-width:0;
}
.public-product-grid,.seo-product-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))!important;
  gap:clamp(12px,1.8vw,22px)!important;
}
.product-card,.public-product,.masonry-item,.shop-card,.cube-directory-card,.seo-product-grid article{min-width:0;max-width:100%}
.product-card img,.public-product img,.seo-card-image img{width:100%;height:100%;object-fit:cover}
.horizontal-products,.v86-product-strip,.mobile-collection-track{max-width:100%;overscroll-behavior-inline:contain}

/* Hero/cube areas: never let fixed-size art break the viewport. */
.hero-cabinet,.cube-signature,.cube-experience-shell,.cube-shop-profile{max-width:100%!important;min-width:0!important}
.hero-cabinet>* ,.cube-experience-shell>* ,.cube-shop-profile>*{min-width:0}

/* ---------- Light/dark surface contract ---------- */
:where(
  .workspace-card,.workspace-stat,.workspace-row,.workspace-form,.workspace-loading,.workspace-empty,
  .seller-order-card,.seller-order-body,.seller-bank-instruction,
  .modal,.buyer-order-card,.cart-commerce-item,.checkout-block,.payment-method-panel,
  .account-card,.profile-stats article,.notification-list article,
  .content-page-header,.content-article,.content-article-side,.content-related a,.content-article-feedback,
  .seo-shop-hero,.seo-confidence,.seo-product-copy,.seo-product-grid article,
  .seo-sell-hero aside,.seo-sell-compare article:not(:last-child),.seo-sell-steps article,.seo-how-paths article,.seo-fee-cards article,
  .v854-info-card,.v854-address-card,.v854-order-card,.v854-payment-card,.v854-form-card,
  .v86-product-content,.v86-product-seller,.v86-product-benefits,.mobile-form,.mobile-drawer,.mobile-product-sheet
){
  color:var(--v8604-ink)!important;
}
:where(
  .workspace-card,.workspace-stat,.seller-order-card,.seller-order-body,.seller-bank-instruction,
  .modal,.buyer-order-card,.cart-commerce-item,.checkout-block,.payment-method-panel,
  .account-card,.content-page-header,.content-related a,.content-article-feedback,
  .seo-shop-hero,.seo-confidence,.seo-product-grid article,.seo-sell-hero aside,.seo-sell-steps article,.seo-how-paths article,.seo-fee-cards article,
  .v854-info-card,.v854-address-card,.v854-order-card,.v854-form-card,.mobile-form,.mobile-drawer
){background-color:#fff}
:where(.workspace-card,.seller-order-card,.modal,.buyer-order-card,.content-related a,.seo-product-grid article) :where(h1,h2,h3,h4,h5,h6,label,legend,summary){color:var(--v8604-ink)!important}
:where(.workspace-muted,.workspace-card small,.content-lead,.content-article p,.content-article li,.seo-product-description,.seo-shop-hero p,.v854-note,.v854-info-card p){color:var(--v8604-muted)!important}

/* Intentionally dark surfaces remain inverse. */
:where(.announcement,.commercial-hero,.hero,.cube-signature,.cube-directory-hero,.marketplace-hero,.seller-public-hero,
  .checkout-hero,.cart-summary-card,.checkout-summary-sticky,.academy-do-now,.seo-sell-cta,.seo-fees-note,
  .social-vs-tamu>.recommended,.seo-sell-compare article:last-child,.portal-auth-brand,.tamu-footer){color:#fff!important}
:where(.announcement,.commercial-hero,.hero,.cube-signature,.cube-directory-hero,.marketplace-hero,.seller-public-hero,
  .checkout-hero,.cart-summary-card,.checkout-summary-sticky,.academy-do-now,.seo-sell-cta,.seo-fees-note,
  .social-vs-tamu>.recommended,.seo-sell-compare article:last-child,.portal-auth-brand,.tamu-footer) :where(h1,h2,h3,h4,h5,h6){color:#fff!important}

/* ---------- Forms ---------- */
:where(.buyer-auth-form,.seller-form,.workspace-form,.portal-auth-form,.mobile-form,.checkout-commerce-form,.compact-form){width:100%;min-width:0}
:where(.buyer-auth-form,.seller-form,.workspace-form,.portal-auth-form,.mobile-form,.checkout-commerce-form,.compact-form) label{min-width:0}
:where(.buyer-auth-form,.seller-form,.workspace-form,.portal-auth-form,.mobile-form,.checkout-commerce-form,.compact-form) :where(input,select,textarea){
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  background:#fff!important;
  color:var(--v8604-ink)!important;
  -webkit-text-fill-color:var(--v8604-ink);
}
:where(.buyer-auth-form,.seller-form,.workspace-form,.portal-auth-form,.mobile-form,.checkout-commerce-form,.compact-form) :where(input,textarea)::placeholder{
  color:#82778a!important;opacity:1;-webkit-text-fill-color:#82778a
}
fieldset{max-width:100%;min-width:0}

/* ---------- Cart / checkout / orders ---------- */
.cart-layout,.checkout-layout,.cart-commerce-layout,.checkout-v85-layout{min-width:0;max-width:100%;align-items:start}
.cart-items-panel,.cart-summary-card,.checkout-commerce-form,.checkout-v85-summary{min-width:0;max-width:100%}
.buyer-order-card,.order-card,.seller-order-card{max-width:100%;overflow:hidden}
.buyer-order-card :where(.buyer-order-head,.buyer-order-meta,.buyer-order-actions),
.seller-order-card :where(.seller-order-head,.seller-order-footer,.seller-order-actions){min-width:0;flex-wrap:wrap}
.buyer-order-actions .button,.seller-order-actions .button{white-space:normal;text-align:center}

/* ---------- Modals / drawers ---------- */
.modal-backdrop,.seller-proof-backdrop{padding:clamp(8px,2vw,22px)!important;overflow:auto!important}
.modal,.seller-proof-modal,[role="dialog"]{
  box-sizing:border-box;
  width:min(760px,calc(100vw - 24px));
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  overflow:auto!important;
  margin:auto!important;
}
.modal img,.seller-proof-modal img,[role="dialog"] img{max-width:100%;height:auto;object-fit:contain}

/* ---------- Public Help / Academy / SEO pages ---------- */
.content-page-header,.seo-commerce-header{
  min-height:68px!important;
  height:auto!important;
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px var(--v8604-page)!important;
}
.content-page-header>a,.seo-commerce-header>a{flex:0 0 auto}
.content-page-header nav,.seo-commerce-header nav{
  min-width:0;
  max-width:100%;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(10px,2vw,22px)!important;
  overflow-x:auto;
  scrollbar-width:none;
}
.content-page-header nav::-webkit-scrollbar,.seo-commerce-header nav::-webkit-scrollbar{display:none}
.content-page-header nav a,.seo-commerce-header nav a{flex:0 0 auto;white-space:nowrap}
.content-article-shell{width:min(1180px,calc(100% - (var(--v8604-page) * 2)))!important;grid-template-columns:minmax(180px,220px) minmax(0,760px)!important;gap:clamp(28px,5vw,65px)!important}
.content-article{min-width:0}
.content-article section,.content-related,.content-help-actions{min-width:0}
.content-related>div{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important}
.seo-product-layout,.seo-shop-page,.seo-sell-hero,.seo-sell-compare,.seo-sell-steps,.seo-sell-cta,.seo-how-paths,.seo-fee-cards,.seo-fees-note{max-width:100%;min-width:0}
.seo-product-layout>* ,.seo-shop-hero>* ,.seo-sell-hero>* ,.seo-how-paths>*{min-width:0}
.seo-product-thumbs{grid-template-columns:repeat(auto-fit,minmax(54px,1fr))!important}

/* ---------- Seller Studio + Admin ---------- */
.workspace-body{min-width:0;background:#f7f5f9!important;color:var(--v8604-ink)!important}
.workspace-shell{width:100%!important;max-width:100%!important;grid-template-columns:238px minmax(0,1fr)!important}
.workspace-sidebar{width:238px!important;min-width:238px!important;max-width:238px!important}
.workspace-main{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:clip!important}
.workspace-topbar{width:100%!important;min-width:0!important;gap:12px!important}
.workspace-topbar>*,.workspace-account-actions,.workspace-user{min-width:0}
.workspace-content{width:100%!important;max-width:1780px!important;min-width:0!important;margin-inline:auto!important;padding:18px 20px 28px!important}
.workspace-grid{width:100%!important;min-width:0!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:12px!important}
.workspace-card{width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important;border-color:var(--v8604-line)!important;box-shadow:var(--v8604-shadow)!important}
.workspace-stat{grid-column:span 3!important;min-width:0!important}
.workspace-wide{grid-column:span 8!important;min-width:0!important}
.workspace-side{grid-column:span 4!important;min-width:0!important}
.workspace-full{grid-column:1/-1!important}
.workspace-tabs{max-width:100%;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.workspace-tabs::-webkit-scrollbar{display:none}
.workspace-tabs button{flex:0 0 auto;white-space:nowrap}
.workspace-row{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:52px minmax(0,1fr) auto!important}
.workspace-row>*{min-width:0}
.workspace-row :where(b,small,span){white-space:normal!important;overflow-wrap:anywhere!important}
.seller-orders-centre,.seller-orders-list,.seller-plan-cards,.seller-bank-card,.growth-dashboard-grid,.commercial-admin-grid,.launch-grid,.campaign-layout,.retention-layout{max-width:100%;min-width:0}
.seller-order-body{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.seller-order-body>div{min-width:0!important}
.seller-order-body span{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.seller-bank-form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.seller-bank-form>*{min-width:0}

/* Tables never force the whole page wider. */
.workspace-card table,.content-article table,.seo-commerce-page table{width:100%!important;max-width:100%;border-collapse:collapse}
.workspace-card:has(>table),.workspace-card:has(.table){overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.workspace-card table th,.workspace-card table td{min-width:110px;white-space:normal;overflow-wrap:anywhere}

/* ---------- Buyer mobile/PWA ---------- */
.mobile-app,.mobile-shell,#mobileContent{width:100%;max-width:100%;min-width:0;overflow-x:clip}
.v85-header,.v85-search-shell,.v85-bottom-nav{max-width:100vw}
#mobileContent{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.mobile-product-grid,.mobile-discovery-grid,.mobile-masonry{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))!important}
.mobile-product-card,.mobile-masonry-card,.mobile-cube-card,.v86-shop-card{min-width:0;max-width:100%}
.mobile-collection-track,.v86-product-strip{display:flex;max-width:100%;overflow-x:auto!important;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mobile-collection-track::-webkit-scrollbar,.v86-product-strip::-webkit-scrollbar{display:none}
.mobile-drawer,.mobile-product-sheet,.mobile-login-sheet,.v854-sheet{max-width:100vw!important;overflow-x:hidden!important}
.mobile-form :where(input,select,textarea){font-size:16px!important}
.v855-product-gallery,.v855-product-gallery-track,.v855-product-gallery-slide{max-width:100%;min-width:0}
.v855-product-gallery-slide img{width:100%;height:100%;object-fit:contain}
.v854-shop-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.v854-shop-actions button{min-width:0!important;white-space:normal;line-height:1.2}
.v854-shop-actions button[data-follow-shop],.v854-shop-actions button.active{background:var(--v8604-purple)!important;border-color:var(--v8604-purple)!important;color:#fff!important}

/* ---------- Breakpoints ---------- */
@media(max-width:1180px){
  .app-header{grid-template-columns:auto minmax(180px,1fr) auto!important}
  .workspace-shell{grid-template-columns:215px minmax(0,1fr)!important}
  .workspace-sidebar{width:215px!important;min-width:215px!important;max-width:215px!important}
  .workspace-stat{grid-column:span 4!important}
  .workspace-wide{grid-column:span 7!important}
  .workspace-side{grid-column:span 5!important}
  .seller-plan-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:900px){
  .app-header{grid-template-columns:auto minmax(0,1fr) auto!important;padding-block:8px!important}
  .app-actions>a:not(.cart-action){display:none}
  .content-article-shell{grid-template-columns:1fr!important;gap:22px!important;padding-top:34px!important}
  .content-article-side{position:static!important}
  .seo-product-layout,.seo-sell-hero,.seo-sell-compare,.seo-how-paths,.seo-fee-cards{grid-template-columns:1fr!important;gap:22px!important}
  .workspace-shell{display:block!important}
  .workspace-sidebar{position:fixed!important;width:min(300px,86vw)!important;min-width:0!important;max-width:min(300px,86vw)!important}
  .workspace-content{padding:16px!important}
  .workspace-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .workspace-stat{grid-column:span 2!important}
  .workspace-wide{grid-column:1/-1!important}
  .workspace-side{grid-column:span 3!important}
  .campaign-layout,.retention-layout,.growth-dashboard-grid,.commercial-admin-grid,.launch-grid{grid-template-columns:1fr!important}
}

@media(max-width:760px){
  .app-header{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:8px 14px!important}
  .app-brand{order:1}
  .app-actions{order:2;margin-left:auto}
  .app-search{order:3;flex:1 0 100%}
  .app-nav{padding-inline:12px!important}
  .shell{width:calc(100% - 24px)!important}
  .cart-layout,.checkout-layout,.checkout-v85-layout{grid-template-columns:1fr!important}
  .cart-summary-card,.checkout-v85-summary{position:static!important;top:auto!important}
  .content-page-header,.seo-commerce-header{align-items:center;padding:8px 14px!important}
  .content-page-header img,.seo-commerce-header img{width:108px!important}
  .content-page-header nav,.seo-commerce-header nav{justify-content:flex-start}
  .content-page-header nav a,.seo-commerce-header nav a{font-size:10px!important}
  .content-article-shell{width:calc(100% - 28px)!important}
  .content-article h1{font-size:clamp(34px,10vw,44px)!important}
  .content-lead{font-size:15px!important}
  .seo-sell-hero,.seo-sell-compare,.seo-sell-steps,.seo-sell-cta,.seo-how-page>section:first-child,.seo-how-paths,.seo-fees-page>section:first-child,.seo-fee-cards,.seo-fees-note{width:calc(100% - 28px)!important}
  .workspace-grid{grid-template-columns:1fr!important}
  .workspace-stat,.workspace-wide,.workspace-side,.workspace-full{grid-column:1/-1!important}
  .workspace-content{padding:12px!important}
  .workspace-card{padding:14px!important;border-radius:14px!important}
  .workspace-row{grid-template-columns:44px minmax(0,1fr)!important;gap:9px!important}
  .workspace-row>div:last-child:not(:nth-child(2)){grid-column:1/-1!important;padding-left:53px!important;display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .seller-order-body{grid-template-columns:1fr!important}
  .seller-order-actions,.seller-order-footer{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .seller-order-actions .button,.seller-order-footer .button{width:100%!important}
  .seller-bank-form{grid-template-columns:1fr!important}
  .seller-bank-full{grid-column:auto!important}
  .seller-plan-cards{grid-template-columns:1fr!important}
  .modal,.seller-proof-modal,[role="dialog"]{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:16px!important;border-radius:18px!important}
}

@media(max-width:480px){
  .app-actions .account-label,.app-actions .account-caret{display:none}
  .public-product-grid,.seo-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 9px!important}
  .mobile-product-grid,.mobile-discovery-grid,.mobile-masonry{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 8px!important}
  .content-page-header,.seo-commerce-header{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important}
  .content-page-header nav,.seo-commerce-header nav{width:100%;justify-content:flex-end}
  .seller-order-actions,.seller-order-footer{grid-template-columns:1fr!important}
  .v854-shop-actions{grid-template-columns:1fr 1fr!important}
  .v854-shop-actions .whatsapp{grid-column:1/-1}
}

@media(max-width:350px){
  .public-product-grid,.seo-product-grid,.mobile-product-grid,.mobile-discovery-grid,.mobile-masonry{grid-template-columns:1fr!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Portal authentication ---------- */
.portal-auth-shell{width:100%;max-width:100%;min-width:0;overflow-x:clip}
.portal-auth-brand,.portal-auth-panel{min-width:0}
.portal-auth-panel{padding:clamp(16px,3vw,35px)!important}
.portal-auth-card{width:min(520px,100%)!important;max-width:100%!important;min-width:0!important}
.portal-auth-links{gap:12px;flex-wrap:wrap}
.portal-auth-tabs{max-width:100%;min-width:0}
.portal-auth-tabs button{min-width:0;white-space:normal}
@media(max-width:850px){
  .portal-auth-shell{grid-template-columns:1fr!important}
  .portal-auth-brand{padding:28px 20px!important}
  .portal-auth-brand h1{font-size:clamp(38px,12vw,52px)!important;letter-spacing:-2px!important}
  .portal-auth-panel{padding:14px!important}
  .portal-auth-card{padding:20px!important;border-radius:18px!important}
}
