/* VendiGG Visual Audit v8.1 — consolidated responsive layer.
   Visual-only. This file replaces the previous v8 rules instead of stacking another override layer. */

/* =========================================================
   1) SAFE GLOBAL CONSTRAINTS
   ========================================================= */
html,body{max-width:100%}
body :where(main,section,article,aside,header,footer,nav,form,div){min-width:0}
body :where(img,video,canvas,svg){max-width:100%}
body :where(.table-wrap,.admin-table-wrap,.seller-report-table,.buyer-table-wrap){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body :where(.input,.select,.textarea,input,select,textarea){min-width:0}

/* Wrap long content, not navigation labels/actions. */
body :where(.description,.product-description,.store-description,.notice,.flash,.field-hint,.help-text,.form-hint,pre,code){overflow-wrap:anywhere;word-break:break-word}
body :where(nav a,nav button,.btn,button,label){overflow-wrap:normal;word-break:normal}

/* Floating layers must never be wider than the viewport. */
.account-menu-panel,.workspace-account-panel,.admin-account-panel,.mega-panel,.rm-search-suggest{max-width:calc(100vw - 16px)!important}

/* =========================================================
   2) VISIBILITY CONTRACT — never resurrect hidden actions
   ========================================================= */
@media(max-width:980px){
  body.public-body .market-actions>.hide-tablet{display:none!important}
}
@media(max-width:820px){
  body.public-body .market-actions>.hide-mobile,
  body.public-body .market-cart>.hide-mobile,
  body.public-body .market-action>.hide-mobile{display:none!important}
}

/* =========================================================
   3) PUBLIC MARKETPLACE — MOBILE HEADER / ACCOUNT
   ========================================================= */
@media(max-width:700px){
  /* The desktop assurance strip is redundant with the mobile nav/footer. */
  body.public-body .commerce-strip{display:none!important}

  /* backdrop-filter creates a containing block for fixed descendants in Chromium. */
  body.public-body .market-header{top:0!important;z-index:300!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.public-body .market-header-main{
    width:calc(100% - 16px)!important;
    height:auto!important;min-height:0!important;
    padding:8px 0!important;
    display:grid!important;
    grid-template-columns:minmax(88px,1fr) max-content!important;
    grid-template-rows:auto auto!important;
    gap:7px 8px!important;
    align-items:center!important;
  }
  body.public-body .market-brand{grid-column:1!important;grid-row:1!important;min-width:0!important;max-width:100%!important}
  body.public-body .brand-logo-main{height:28px!important;max-width:min(138px,37vw)!important;width:auto!important}
  body.public-body .brand-support-copy{display:none!important}

  body.public-body .market-actions{
    grid-column:2!important;grid-row:1!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:3px!important;max-width:100%!important;margin-left:0!important;white-space:nowrap!important;
  }

  /* Do not set display here: visibility helpers (.hide-mobile/.hide-tablet) must win. */
  body.public-body .market-action,
  body.public-body .market-cart,
  body.public-body .account-menu>summary{
    box-sizing:border-box!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    flex:0 0 38px!important;padding:0!important;border-radius:10px!important;
    align-items:center!important;justify-content:center!important;gap:0!important;white-space:nowrap!important;
  }
  body.public-body .market-action .ui-icon,
  body.public-body .market-cart .ui-icon{width:18px!important;height:18px!important;flex:none!important}
  body.public-body .account-summary-copy,
  body.public-body .account-chevron{display:none!important}
  body.public-body .market-avatar{width:30px!important;height:30px!important;border-radius:9px!important;flex:none!important}
  body.public-body .market-notifications{position:relative!important}
  body.public-body .market-notifications>b,
  body.public-body .market-cart>b{position:absolute!important;right:-3px!important;top:-3px!important;z-index:2!important}

  /* Logged-out header keeps only essential actions. */
  body.public-body .market-login{
    flex:0 0 auto!important;min-height:38px!important;padding:0 7px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:10.5px!important;white-space:nowrap!important;border-radius:9px!important;
  }

  body.public-body .market-search{
    grid-column:1/-1!important;grid-row:2!important;
    width:100%!important;max-width:none!important;height:42px!important;margin:0!important;
    border-radius:11px!important;overflow:hidden!important;
  }
  body.public-body .market-search>.ui-icon{margin-left:11px!important;flex:none!important}
  body.public-body .market-search input{min-width:0!important;padding:0 8px!important;font-size:12px!important}
  body.public-body .market-search button{flex:none!important;padding:0 14px!important;font-size:11px!important;white-space:nowrap!important}

  /* Compact viewport-anchored account popover. */
  body.public-body details.account-menu{position:static!important}
  body.public-body .account-menu-panel{
    position:fixed!important;z-index:560!important;
    left:auto!important;right:8px!important;top:104px!important;bottom:auto!important;
    width:min(292px,calc(100vw - 16px))!important;max-width:none!important;
    max-height:min(350px,calc(100dvh - 176px))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    padding:7px!important;border-radius:16px!important;
    box-shadow:0 24px 70px rgba(0,0,0,.58)!important;
    overscroll-behavior:contain!important;scrollbar-width:thin;
  }
  body.public-body .account-menu-panel:before{display:none!important}
  body.public-body .account-menu-user{
    position:sticky!important;top:-7px!important;z-index:2!important;
    min-height:52px!important;padding:7px 8px!important;margin:0 0 4px!important;
    background:#111419!important;border-bottom:1px solid #242a32!important;
  }
  body.public-body .account-menu-user .market-avatar.large{width:38px!important;height:38px!important;flex:none!important}
  body.public-body .account-menu-user div{min-width:0!important}
  body.public-body .account-menu-user b,
  body.public-body .account-menu-user small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  body.public-body .account-menu-panel>a,
  body.public-body .account-menu-panel>button,
  body.public-body .account-menu-panel>form button{
    min-height:38px!important;padding:8px 9px!important;font-size:10.5px!important;
    white-space:normal!important;line-height:1.25!important;overflow-wrap:normal!important;
  }
  body.public-body .account-menu-panel :where(.ui-icon,svg){flex:none!important;width:16px!important;height:16px!important}
  body.public-body .account-menu-panel>form{margin:4px 0 0!important}

  /* Bottom navigation is the permanent mobile locomotion layer. */
  body.public-body .mobile-commerce-nav{
    z-index:600!important;left:0!important;right:0!important;bottom:0!important;
    min-height:61px!important;height:calc(61px + env(safe-area-inset-bottom))!important;
    padding:0 4px env(safe-area-inset-bottom)!important;
  }
  body.public-body .mobile-commerce-nav a{min-width:0!important;padding:4px 2px!important;overflow:hidden!important}
  body.public-body .mobile-commerce-nav a b{max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:8px!important}

  body.public-body main{padding-bottom:6px}
  body.public-body .market-footer{padding-bottom:8px!important}
}

@media(max-width:380px){
  body.public-body .market-header-main{width:calc(100% - 12px)!important;gap:6px 5px!important;grid-template-columns:minmax(82px,1fr) max-content!important}
  body.public-body .brand-logo-main{height:25px!important;max-width:108px!important}
  body.public-body .market-action,
  body.public-body .market-cart,
  body.public-body .account-menu>summary{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;flex-basis:36px!important}
  body.public-body .market-actions{gap:2px!important}
  body.public-body .market-login{min-height:36px!important;padding-inline:5px!important;font-size:10px!important}
  body.public-body .market-search button{padding-inline:11px!important}
  body.public-body .account-menu-panel{right:6px!important;top:100px!important;width:min(286px,calc(100vw - 12px))!important;max-height:min(340px,calc(100dvh - 171px))!important}
}

@media(max-width:335px){
  body.public-body .brand-logo-main{max-width:96px!important;height:24px!important}
  body.public-body .market-actions{gap:1px!important}
  body.public-body .market-action,
  body.public-body .market-cart,
  body.public-body .account-menu>summary{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;flex-basis:34px!important}
  body.public-body .market-login{min-height:34px!important;font-size:9.5px!important;padding-inline:4px!important}
}

/* =========================================================
   4) PUBLIC PAGE CONSISTENCY
   ========================================================= */
@media(max-width:700px){
  body.public-body :where(.vd-home,.home-page,.catalog-page,.catalog-v26,.product-page-pro,.store-page,.cart-page,.checkout-page,.payment-page){max-width:100%!important}
  body.public-body :where(.section-head,.catalog-header,.product-title-row,.store-title-line){min-width:0}
  body.public-body :where(.section-head h1,.section-head h2,.catalog-header h1,.buy-panel-pro h1,.store-title-line h1){text-wrap:balance;overflow-wrap:normal;word-break:normal}
  body.public-body :where(.product-card-pro,.catalog-card,.store-card){min-width:0;overflow:hidden}
  body.public-body :where(.product-card-pro .product-info,.catalog-card .product-info){min-width:0}
  body.public-body :where(.product-card-pro h3,.catalog-card h3){overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:normal;word-break:normal}
  body.public-body :where(.buy-panel-pro,.summary-card,.content-card-pro,.seller-profile-card,.safety-card,.cart-item,.checkout-card,.payment-main){max-width:100%;min-width:0}
}

/* =========================================================
   5) PRIVATE WORKSPACES / ADMIN MOBILE
   ========================================================= */
@media(max-width:820px){
  /* Fixed descendants must be viewport-anchored. */
  body.seller-body .workspace-topbar-v1,
  body.account-body .workspace-topbar-v1,
  body.admin-body .admin-topbar-v2{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  body.seller-body .workspace-account-panel,
  body.account-body .workspace-account-panel,
  body.admin-body .admin-account-panel{
    left:8px!important;right:8px!important;top:auto!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:auto!important;max-width:none!important;
    max-height:min(56dvh,350px)!important;overflow:auto!important;
    border-radius:17px!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important;
  }
  body.seller-body .workspace-account-copy,
  body.account-body .workspace-account-copy{display:none!important}
  body :where(.private-mobile-nav){z-index:980!important}
  body :where(.seller-sidebar-v3,.buyer-sidebar,.admin-sidebar-v2){max-width:min(92vw,340px)!important}
  body :where(.private-mobile-nav a,.private-mobile-nav button){overflow-wrap:normal!important;word-break:normal!important}
}

/* =========================================================
   6) EDITOR / FORMS / SMALL SCREEN READABILITY
   ========================================================= */
.seller-product-editor-v4 .seller-quality-card .notice{
  display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;
  gap:6px 10px!important;align-items:start!important;
}
.seller-product-editor-v4 .seller-quality-card .notice>b{white-space:nowrap!important;margin:0!important}
.seller-product-editor-v4 .seller-quality-card .notice>span{min-width:0!important;display:block!important;line-height:1.45!important}

@media(max-width:520px){
  .seller-product-editor-v4 .seller-quality-card .notice{grid-template-columns:1fr!important;gap:4px!important}
  .seller-product-editor-v4 .seller-quality-card .notice>b{white-space:normal!important}
}

@media(max-width:430px){
  body :where(.btn,button,.input,.select,input,select){min-height:38px}
  body :where(.seller-card,.buyer-card,.admin-card,.workspace-card,.content-card-pro,.summary-card){max-width:100%;min-width:0}
  body :where(.form-grid,.seller-form-grid,.buyer-form-grid,.admin-form-grid){min-width:0}
}

/* =========================================================
   7) LIGHT THEME — DARK MARKETPLACE CHROME REMAINS LEGIBLE
   ========================================================= */
@media(max-width:700px){
  html[data-theme="light"] body.public-body .account-menu-panel,
  html[data-theme="light"] body.public-body .account-menu-user{background:#111419!important;color:#edf1f5!important;border-color:#303640!important}
  html[data-theme="light"] body.public-body .account-menu-panel a,
  html[data-theme="light"] body.public-body .account-menu-panel button{color:#d9e0e8!important}
}