/* ============================================================
   GHOST CC — MOBILE-FIRST RESPONSIVE FIX LAYER
   Additive. Loaded LAST (after style.css / admin.css / cyber.css)
   so it overrides every desktop-first rule below 1024px.
   ============================================================ */

/* ---------- GLOBAL HARD GUARD: NO HORIZONTAL SCROLL ---------- */
html,body{max-width:100vw;overflow-x:hidden!important;overflow-x:clip!important}
body{width:100%}
img,svg,video,canvas,iframe,embed,table,pre,code{max-width:100%}
#bg-canvas,.bg-grid,.bg-particles,.bg-code,.fx-stack{max-width:100vw}

/* ---------- TABLES → RESPONSIVE CARDS (mobile only) ----------
   JS (responsive.js) injects data-label on every <td> from the
   matching <th>, so pure CSS can restack rows as cards.
   Applies to .data-table (storefront) and .a-table (admin).      */
@media (max-width:820px){
  .data-table,.a-table,
  .data-table thead,.a-table thead,
  .data-table tbody,.a-table tbody,
  .data-table tr,.a-table tr,
  .data-table td,.a-table td{display:block;width:100%;min-width:0!important;max-width:100%!important}

  .data-table thead,.a-table thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

  .data-table tbody,.a-table tbody{display:flex;flex-direction:column;gap:14px}
  .data-table tbody tr,.a-table tbody tr{
    display:flex;flex-direction:column;gap:0;
    background:var(--bg-2);
    border:1px solid var(--line-2);
    border-radius:14px;
    padding:16px;
    margin:0;
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    position:relative;
    overflow:hidden;
  }
  .data-table tbody tr::before,.a-table tbody tr::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--primary),transparent);
    opacity:.6;
  }
  .data-table td,.a-table td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 2px;
    border-bottom:1px dashed rgba(0,255,102,.12);
    font-size:13.5px;
    overflow-wrap:anywhere;word-break:break-word;
    text-align:right;
  }
  .data-table td:last-child,.a-table td:last-child{border-bottom:none}
  .data-table td::before,.a-table td::before{
    content:attr(data-label);
    font-family:var(--mono);
    font-size:10px;letter-spacing:1.6px;text-transform:uppercase;
    color:var(--text-faint);
    flex-shrink:0;
    text-align:left;
  }
  .data-table td[data-label=""]::before{content:none}
  .data-table td:first-child,.a-table td:first-child{padding-top:6px}
  .data-table .mono,.a-table .mono{font-family:var(--mono);font-size:12.5px}
  .data-table td a.btn,.a-table td a.a-btn{flex-shrink:0}

  /* cell actions / buttons stay full-bleed friendly */
  .data-table td .btn,.a-table td .a-btn{white-space:normal;text-align:center}
  .a-table .actions{justify-content:flex-end;flex-wrap:wrap}
}

/* ---------- VERTICAL STATUS TIMELINE (mobile) ---------- */
@media (max-width:768px){
  .status-timeline{
    display:flex;flex-direction:column;gap:0;
    padding-left:34px;min-width:0!important;
    position:relative;
  }
  .status-timeline::before{
    content:'';position:absolute;left:14px;top:14px;bottom:14px;
    width:2px;background:var(--line);
  }
  .status-timeline .step{
    flex:none;min-width:0;width:100%;
    text-align:left;
    padding:13px 0 13px 4px;
    position:relative;
  }
  .status-timeline .step::before{
    left:-27px;top:17px;transform:none;
    width:14px;height:14px;
    border-width:2px;
  }
  .status-timeline .step::after{display:none}
  .timeline-scroll{overflow:visible;padding:0}
}

/* ---------- MY ACCOUNT: stack vertically, nav grid ---------- */
@media (max-width:1024px){
  .account-layout{grid-template-columns:1fr}
  .account-nav{position:static;width:100%;margin-bottom:18px}
}
@media (max-width:768px){
  .account-nav{padding:14px}
  .account-nav .u-card{flex-wrap:wrap}
  .account-nav .u-card div{min-width:0;overflow-wrap:anywhere}
  .account-nav nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .account-nav nav a{
    width:100%;min-height:48px;
    justify-content:flex-start;
    border:1px solid var(--line);
    background:var(--bg-1);
    border-radius:10px;
    padding:11px 12px;
    font-size:13px;
  }
  .account-nav nav a.active{border-color:var(--primary);box-shadow:var(--glow)}
  .account-nav .danger-link{grid-column:1/-1;justify-content:center;border-color:rgba(255,0,0,.35)}
}
@media (max-width:480px){
  .account-nav nav{grid-template-columns:1fr}
}

/* ---------- ORDER STUCK NOTICE (below order row, storefront) ------
   Shown only when status === 'delayed'. Full message directly under
   the order card; the View button stays for detailed info only.     */
.stuck-note-tr td{border-bottom:none!important;padding:0!important}
.stuck-note-tr td::before{content:none!important}
.stuck-note{
  border:1px solid rgba(255,0,68,.4);
  border-left:4px solid #ff2d55;
  background:rgba(255,0,68,.06);
  border-radius:12px;
  padding:14px 16px;
  margin:2px 0 16px;
}
.stuck-note b{
  color:#ff5252;font-family:var(--mono);
  font-size:12.5px;letter-spacing:1.5px;
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.stuck-note p{
  color:var(--text-dim);font-size:13px;line-height:1.65;
  white-space:pre-line;margin-bottom:8px;
}
@media (max-width:820px){
  .stuck-note-tr{
    background:transparent!important;
    box-shadow:none!important;
    border:none!important;
    padding:0!important;
    margin-top:-4px;
  }
  .stuck-note-tr::before{content:none!important}
  .stuck-note-tr td{display:block!important;padding:0!important;border:none!important}
  .stuck-note{margin:0 10px 2px}
}

/* ---------- BUTTONS: touch friendly ---------- */
@media (max-width:768px){
  .btn,.a-btn{min-height:48px;padding:13px 18px}
  .btn-sm,.a-btn-sm{min-height:44px;padding:10px 14px}
  .btn-lg{min-height:54px}
  .btn-block,.a-btn-block{width:100%}
  .hero-cta .btn,.pd-buy .btn{width:100%}
  .header-actions .btn{min-height:40px}
}

/* ---------- FORMS: 100% width ---------- */
@media (max-width:768px){
  input,select,textarea,.form-control,.a-field input,.a-field select,.a-field textarea,
  .search-bar,.sort-select,.receipt-upload,.qty-control,.pay-method,.terms-box{
    width:100%;max-width:100%;
  }
  .form-row,.a-form-grid{grid-template-columns:1fr;gap:0 0}
  .qty-control{width:auto;max-width:none}
  .qty-control input{width:44px}
}

/* ---------- HEADER: never overflow ---------- */
@media (max-width:480px){
  .header-inner{flex-wrap:nowrap;gap:8px;min-width:0}
  .logo{flex-shrink:1;min-width:0}
  .logo span{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logo img{width:30px;height:30px;flex-shrink:0}
  .header-actions{flex-shrink:0;margin-left:auto}
  .header-actions .btn{padding:8px 10px;font-size:11px}
  .mobile-menu{width:100vw}
  .mobile-menu a{min-height:48px}
}

/* ---------- PRODUCT GRID BREAKPOINTS ---------- */
@media (max-width:1200px){.product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.product-grid{grid-template-columns:1fr}}
@media (min-width:1920px){.product-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- CATEGORY / WHY / TESTI CARDS ---------- */
@media (max-width:600px){
  .cat-grid,.why-grid,.testi-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .head-row{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- CONTAINERS / SECTIONS: perfectly centered, equal gutters ----------
   Bugfix: container was forced to width:100% (0px gutters) while header
   used its own gutter, so page content looked shifted inward vs header.
   Now: symmetric gutters (12px per side on phones, 10px on tiny), same
   gutter as header, margin-inline:auto centering, never overflowing.    */
.cms-body,.order-box,.panel,.summary-card,.auth-card,.popup-box,.terms-box{
  max-width:100%!important;width:100%;
  box-sizing:border-box;overflow-wrap:break-word;
}
.container{
  max-width:100%!important;
  box-sizing:border-box;overflow-wrap:break-word;
  margin-inline:auto;
}
@media (max-width:768px){
  .container{width:calc(100% - 24px);max-width:calc(100% - 24px)!important}
}
@media (max-width:360px){
  .container{width:calc(100% - 20px);max-width:calc(100% - 20px)!important}
  .section{padding:30px 0}
}

/* ---------- HEADER: icons stay right-aligned on all phones ----------
   Bugfix: .main-nav is hidden ≤1024px, so header-actions lost its
   margin-left:auto push and cart/profile/burger sat next to the logo. */
@media (max-width:1024px){
  .header-actions{margin-left:auto}
}

/* ---------- MODALS / POPUPS: scrollable, centered ---------- */
@media (max-width:600px){
  .popup-overlay{padding:10px;align-items:center}
  .popup-box{width:100%;max-height:88dvh;border-radius:14px}
  .popup-body{font-size:13px;line-height:1.6;max-height:50dvh;overflow-y:auto}
  .popup-foot{flex-direction:column;padding:14px}
  .popup-foot .btn{width:100%;min-height:48px}
}

/* ---------- DROPDOWNS: only visible when .dropdown.open ----------
   Bugfix: menu used to be position:static + always visible on phones,
   so it floated/stuck over content forever. Now it is a proper popup
   that only shows while .dropdown.open (toggled by JS), closes on
   outside tap / item click / Escape / Back, and never overflows.
   `.open` is the single source of truth on ALL sizes via JS; the
   desktop hover rule is kept as a convenience but superseded by .open.  */
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
@media (max-width:600px){
  .dropdown-menu{
    position:absolute;left:auto;right:0;
    width:max-content;max-width:calc(100vw - 20px);
    min-width:210px;
    opacity:0;visibility:hidden;
    transform:translateY(8px);
    margin-top:0;
  }
  .dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{
    opacity:0;visibility:hidden;transform:translateY(8px);
  }
  .dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
}

/* ---------- CART / CHECKOUT / PRODUCT MOBILE ---------- */
@media (max-width:640px){
  .cart-item{flex-wrap:wrap;gap:10px}
  .cart-item img{width:92px;max-width:92px;height:70px;border-radius:9px}
  .cart-item > div:first-of-type{flex:1 1 calc(100% - 112px);min-width:0}
  .cart-item > div:last-of-type{flex-basis:100%;justify-content:flex-start;flex-wrap:wrap}
  .cart-item .qty-control{margin-left:0}
  .cart-item > div:last-of-type b{min-width:auto}
  .cart-side{position:static}
  .summary-card{padding:18px}
  .pay-method{padding:13px}
  .pd-wrap{gap:22px;padding:30px 0}
  .pd-main{aspect-ratio:4/3}
  .pd-thumbs img{flex:0 0 auto}
  .pd-price .now{font-size:30px}
  .pd-buy .btn{min-height:50px}
  .digital-info-block{padding:13px;font-size:12.5px;word-break:break-word}
  .digital-info-block pre{white-space:pre-wrap}
}

/* ---------- ORDER / REFUND / DOWNLOAD CARDS ---------- */
@media (max-width:768px){
  .order-box,.panel{padding:18px 14px}
  .ob-head{flex-direction:column;align-items:flex-start}
  .ob-head .badge{align-self:flex-start}
  .locked-zone,.unlocked-zone,.delayed-panel{padding:16px 14px}
  .cart-layout,.account-layout{padding:24px 0}
  .empty-state{padding:34px 12px}
  .notif-item .btn{float:none!important;display:inline-block;margin:4px 0 0}
  .panel > div:first-child[style]{flex-wrap:wrap}
}

/* ---------- TABLES: prevent old min-width rules ---------- */
@media (max-width:820px){
  .data-table{min-width:0!important}
  .a-table{min-width:0!important}
  .table-wrap,.a-table-wrap{overflow-x:visible}
}

/* ---------- 404 / AUTH ---------- */
@media (max-width:600px){
  .cy-404{padding:50px 12px 40px}
  .auth-wrap{padding:30px 10px}
  .auth-card{padding:30px 18px;border-radius:14px}
  .cy-auth-ghost{width:70px;height:70px;top:-36px}
}

/* ---------- WARNING STRIP / FLOATERS: safe zones ---------- */
@media (max-width:640px){
  .cy-warn-strip{width:calc(100% - 20px);bottom:12px;font-size:9.5px;letter-spacing:1.5px}
  .wa-float{bottom:14px;right:14px}
  .back-to-top{bottom:14px;left:14px}
  .cy-snd{bottom:14px!important;left:14px!important}
}

/* ---------- FIX any leftover fixed widths anywhere ---------- */
.a-field input,.a-field select,.a-field textarea{width:100%!important}
.media-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.m-toolbar,.a-filters{flex-wrap:wrap}

/* ---------- ADMIN mobile fine-tuning ---------- */
@media (max-width:820px){
  .admin-content{padding:14px 12px}
  .a-cards{grid-template-columns:1fr 1fr}
  .a-panel{padding:14px}
  .a-panel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .a-form-grid{grid-template-columns:1fr}
  .a-kv{grid-template-columns:1fr}
  .a-filters{flex-direction:column;align-items:stretch}
  .a-filters input[type=text],.a-filters select{width:100%;flex:none}
}
@media (max-width:480px){
  .a-cards{grid-template-columns:1fr}
  .admin-topbar{padding:10px 12px}
  .admin-title small{display:none}
  .a-table td::before,.data-table td::before{font-size:9.5px}
}

/* ---------- RE-ENABLE smooth scrolling guards ---------- */
.hero,.section,.pd-wrap,.cart-layout,.account-layout,.cms-content,.auth-wrap,.toolbar{
  overflow-wrap:break-word;max-width:100vw;
}
h1,h2,h3,h4,h5,p,a,span,b,strong,small,label,div,li,td,th{overflow-wrap:break-word}