/* TOPINEXUS V22 — MOBILE RESPONSIVE + THEME/BRAND FINAL PATCH
   Loaded after all legacy theme CSS. */

/* Never let a child force the viewport wider. */
html,body{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}
body{overflow-wrap:anywhere}
main,section,article,aside,header,footer,nav,form,.container,.content,.page,.page-wrap,
.panel,.card,.box,.modal,.sheet,.drawer,.dialog,.widget,.table-wrap,.toolbar,
.grid,.grid2,.product-grid,.cat-row,.list,.list-row,.form-row,.field,.actions,.form-actions{
  min-width:0!important;max-width:100%!important;
}

/* Store name: visible on phones and always follows the active theme. */
html[data-theme="dark"] body :where(.brand-name,#brand-name,[data-tn-brand-name],.tn-universal-brand-copy strong){
  color:#f7f4ff!important;-webkit-text-fill-color:#f7f4ff!important;
}
html[data-theme="light"] body :where(.brand-name,#brand-name,[data-tn-brand-name],.tn-universal-brand-copy strong){
  color:#21182d!important;-webkit-text-fill-color:#21182d!important;
}
html[data-theme="dark"] body :where(.brand-name span,.brand span){color:#a78bfa!important;-webkit-text-fill-color:#a78bfa!important}
html[data-theme="light"] body :where(.brand-name span,.brand span){color:#6d28d9!important;-webkit-text-fill-color:#6d28d9!important}

@media(max-width:680px){
  body :where(.topbar-inner){
    width:100%!important;max-width:100%!important;min-width:0!important;
    display:flex!important;align-items:center!important;gap:7px!important;
    flex-wrap:nowrap!important;
  }
  body :where(.topbar-inner>.brand){
    display:flex!important;align-items:center!important;flex:1 1 auto!important;
    min-width:0!important;max-width:calc(100vw - 150px)!important;
  }
  body :where(.topbar-inner>.brand .brand-name){
    display:block!important;visibility:visible!important;opacity:1!important;
    min-width:0!important;max-width:100%!important;
    overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
    font-size:17px!important;line-height:1.15!important;font-weight:800!important;
  }
  body :where(.header-icons){
    flex:0 1 auto!important;min-width:0!important;max-width:55%!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:5px!important;flex-wrap:nowrap!important;
  }
  body :where(.header-icons>*){flex:0 1 auto!important;min-width:0!important;max-width:100%!important}
  body :where(.icon-btn,.tn-topnav-toggle){flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important}
  body :where(.currency-switcher){flex:0 1 72px!important;width:72px!important;min-width:60px!important;max-width:76px!important}
  body :where(.theme-toggle,#themeBtn,#theme,.tn-global-theme-toggle){
    flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;
    height:40px!important;padding:0!important;
  }
  body :where(.theme-toggle .theme-label,.theme-toggle .tn-theme-label,#themeBtn .theme-label,#themeBtn .tn-theme-label,#theme .theme-label,#theme .tn-theme-label,.tn-theme-label){
    display:none!important;
  }
  body :where(.tn-topnav-menu){
    width:min(220px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;
  }

  /* Panels/cards/rows: wrap instead of clipping at the viewport edge. */
  body :where(.panel,.card,.box,.modal,.sheet,.drawer,.dialog,.widget,.ticket-card,.order-card,.product-card,.stat-card){
    width:100%!important;
    overflow:hidden!important;
  }
  body :where(.panel-head,.panel-header,.section-head,.toolbar,.actions,.form-actions,.order-actions,.delivery-actions,.payment-admin-actions,.media-actions,.ticket-actions,.upload-row){
    width:100%!important;max-width:100%!important;min-width:0!important;
    flex-wrap:wrap!important;align-items:flex-start!important;
  }
  body :where(.panel-head>*,.panel-header>*,.section-head>*,.toolbar>*,.actions>*,.form-actions>*,.order-actions>*,.delivery-actions>*,.payment-admin-actions>*,.media-actions>*,.ticket-actions>*,.upload-row>*){
    min-width:0!important;max-width:100%!important;
  }
  body :where(input,textarea,select){width:100%!important;max-width:100%!important;min-width:0!important}
  body :where(button,.btn,.icon-btn,.notice-btn,.tab-btn){
    max-width:100%!important;min-width:0!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
  body :where(.table-wrap){width:100%!important;max-width:100%!important;overflow-x:auto!important}
  body :where(.table-wrap table){width:max-content;min-width:560px;max-width:none}
}

@media(max-width:430px){
  body :where(.topbar-inner>.brand){max-width:calc(100vw - 132px)!important}
  body :where(.topbar-inner>.brand .brand-name){font-size:16px!important}
  body :where(.header-icons){gap:4px!important}
  body :where(.icon-btn,.tn-topnav-toggle){width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important}
  body :where(.currency-switcher){width:64px!important;min-width:56px!important;max-width:68px!important;font-size:11px!important}
  body :where(.theme-toggle,#themeBtn,#theme,.tn-global-theme-toggle){width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important}
  body :where(.grid2,.form-row){grid-template-columns:minmax(0,1fr)!important}
  body :where(.form-actions .btn,.actions .btn,.order-actions .btn,.delivery-actions .btn,.payment-admin-actions .btn,.media-actions .btn,.ticket-actions .btn){
    flex:1 1 100%!important;width:100%!important;
  }
  body :where(.panel-body,.card-body,.box,.content){padding-left:min(16px,4vw)!important;padding-right:min(16px,4vw)!important}
}

/* Fixed/absolute UI must stay inside the viewport. */
body :where(.modal,.sheet,.drawer,.popover,.dropdown,.tn-topnav-menu,.support-menu){
  max-width:calc(100vw - 20px)!important;
}

/* V23 — site-wide mobile integrity: never let controls or typography collide. */
@media (max-width: 680px){
  html,body,#app-shell,.main,.content,main{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
  .panel,.card,.stat-card,.section,.page,.modal,.gate-card,.box,.drawer,.sheet{max-width:calc(100vw - 20px)!important;margin-left:auto!important;margin-right:auto!important}
  .panel-head,.section-head,.card-head,.topbar,.toolbar,.actions,.form-actions{gap:8px!important}
  .panel-head h1,.panel-head h2,.panel-head h3,.section-head h1,.section-head h2,.section-head h3,.topbar h1,.topbar h2,.topbar h3{min-width:0!important;flex:1 1 140px!important;font-size:clamp(15px,4.2vw,20px)!important;line-height:1.25!important;overflow-wrap:anywhere!important}
  .panel-head .btn,.section-head .btn,.toolbar .btn,.actions .btn,.form-actions .btn{flex:1 1 120px!important;font-size:12px!important;padding:9px 10px!important;min-height:38px!important}
  .tn-nav-symbol,.tn-side-symbol{flex:0 0 24px!important;width:24px!important;text-align:center!important}
  .badge,.pill{font-size:10px!important;line-height:1.2!important;padding:4px 7px!important;max-width:100%!important;white-space:normal!important}
  .btn,.link-btn,.notice-btn,.theme-toggle,.icon-btn{font-size:12px!important;letter-spacing:0!important}
  .btn svg,.icon-btn svg,.tn-nav-symbol svg{max-width:18px!important;max-height:18px!important;flex:0 0 auto!important}
  .grid,.product-grid,.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card .label{font-size:10px!important;line-height:1.25!important}
  .stat-card .value{font-size:clamp(18px,6vw,28px)!important;line-height:1.1!important;overflow-wrap:anywhere!important}
  .card-name,.card-cat,.card-price,.card-old{font-size:clamp(11px,3.1vw,14px)!important;line-height:1.3!important}
  .table-wrap{border-radius:12px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  table.data{min-width:620px!important}
  input,textarea,select{font-size:13px!important}
}
@media (max-width:430px){
  .grid,.product-grid,.stat-grid{grid-template-columns:minmax(0,1fr)!important}
  .panel,.card,.stat-card,.section,.page,.modal,.gate-card,.box,.drawer,.sheet{max-width:calc(100vw - 16px)!important}
  .panel-body,.card-body,.content{padding-left:12px!important;padding-right:12px!important}
  .panel-head,.section-head{align-items:stretch!important}
  .panel-head .btn,.section-head .btn{flex:1 1 100%!important}
  .brand-name,.tn-universal-brand-copy strong{font-size:15px!important;max-width:42vw!important;color:var(--text,#f7f3ff)!important;-webkit-text-fill-color:currentColor!important}
  html[data-theme="light"] .brand-name,html[data-theme="light"] .tn-universal-brand-copy strong{color:#21182d!important;-webkit-text-fill-color:#21182d!important}
}


/* V24 — second-pass mobile typography and control containment */
html,body{overflow-x:clip!important}
@media(max-width:680px){
  .topbar-inner{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding-left:12px!important;padding-right:12px!important}
  .topbar-inner>.brand{min-width:0!important;max-width:none!important;width:100%!important}
  .topbar-inner>.brand .brand-name{font-size:clamp(14px,4vw,17px)!important;letter-spacing:-.01em!important}
  .search-wrap{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:100%!important}
  .header-icons{width:auto!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;gap:4px!important}
  .header-icons .track-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:38px!important;min-width:38px!important;height:38px!important;padding:0!important;border-radius:10px!important;font-size:0!important;overflow:hidden!important}
  .header-icons .track-link .track-icon{font-size:17px!important;line-height:1!important}
  .header-icons .track-link .track-label{display:none!important}
  .header-icons .theme-toggle{min-width:38px!important;width:38px!important;height:38px!important;padding:0!important}
  .header-icons .theme-toggle .theme-label{display:none!important}
  .header-icons .icon-btn{width:38px!important;min-width:38px!important;height:38px!important;padding:0!important}

  /* Prevent long copy, IDs, URLs and labels from destroying cards. */
  .panel p,.panel h1,.panel h2,.panel h3,.panel h4,.card p,.card h1,.card h2,.card h3,.card h4,
  .line-info,.summary-row,.order-card,.menu-list a,.menu-list button,.inline-note,
  .ticket-card,.notice-copy,.tn-announcement-copy{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .summary-row{gap:10px!important;align-items:flex-start!important}
  .summary-row>*{min-width:0!important;max-width:65%!important}
  .line-row{min-width:0!important;align-items:flex-start!important;flex-wrap:wrap!important}
  .line-info{flex:1 1 150px!important}
  .line-price{margin-left:auto!important;max-width:40%!important;overflow-wrap:anywhere!important}
  .qty-ctrl{flex-wrap:wrap!important}
  .menu-list .left{min-width:0!important;overflow-wrap:anywhere!important}
  .section-head h3,.section-head h4{font-size:clamp(14px,4vw,18px)!important;line-height:1.3!important}
  .card-add{font-size:11.5px!important;line-height:1.2!important;padding:8px 7px!important}
  .card-wish{flex:0 0 34px!important;width:34px!important;height:34px!important}
  .notice-inner,.tn-announcement{max-width:calc(100vw - 16px)!important;width:calc(100vw - 16px)!important;min-width:0!important}
}
@media(max-width:390px){
  .topbar-inner{grid-template-columns:minmax(0,1fr) auto!important}
  .brand-mark{width:28px!important;height:28px!important;flex:0 0 28px!important}
  .header-icons .icon-btn,.header-icons .theme-toggle,.header-icons .track-link{width:34px!important;min-width:34px!important;height:34px!important}
  .header-icons{gap:3px!important}
}

/* V25 — compact mobile action labels: keep controls usable without text collisions */
@media(max-width:680px){
  .cart-actions,.wishlist-actions,.profile-actions,.order-actions,.ticket-actions{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important}
  .cart-actions .btn,.wishlist-actions .btn,.profile-actions .btn,.order-actions .btn,.ticket-actions .btn{min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .icon-btn[aria-label],button[title],a[title]{overflow:hidden!important;text-overflow:ellipsis!important}
  .table-wrap,.table-scroll,.data-table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table-wrap table,.table-scroll table,.data-table-wrap table{min-width:620px}
}

/* V31 — final mobile header + product grid polish */
@media (max-width: 680px){
  /* Keep the hamburger as one clean, slightly taller button. */
  .tn-topnav-toggle{
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    display:flex!important;
    flex:0 0 42px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .tn-topnav-toggle span{
    display:block!important;
    width:23px!important;
    min-width:23px!important;
    max-width:23px!important;
    height:2.5px!important;
    min-height:2.5px!important;
    max-height:2.5px!important;
    margin:0!important;
    padding:0!important;
    border-radius:999px!important;
    transform-origin:center!important;
  }

  /* Keep the complete product catalogue at two cards per row on phones. */
  .grid,.product-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  .grid>* ,.product-grid>*{min-width:0!important;max-width:100%!important;}
}
@media (max-width:430px){
  .grid,.product-grid,.cat-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tn-topnav-toggle{
    width:42px!important;min-width:42px!important;max-width:42px!important;
    height:42px!important;min-height:42px!important;max-height:42px!important;
  }
}

/* V32 — GLOBAL PRODUCT GRID: same two-column mobile layout on every phone.
   Do not switch product listings to one column based on narrow DPI/viewport. */
@media (max-width: 767px){
  .grid,
  .product-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .grid > *,
  .product-grid > *{
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .grid .card,
  .product-grid .card,
  .grid .product-card,
  .product-grid .product-card{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .grid .card-img,
  .product-grid .card-img{
    width:100%!important;
    aspect-ratio:1/1!important;
    object-fit:cover!important;
  }
  .grid .card-body,
  .product-grid .card-body{
    min-width:0!important;
    padding:10px!important;
  }
  .grid .card-cat,
  .grid .card-name,
  .grid .card-price,
  .grid .card-old,
  .product-grid .card-cat,
  .product-grid .card-name,
  .product-grid .card-price,
  .product-grid .card-old{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}