/* === RESPONSIVE === */
@media(max-width:1024px){
  .main-layout{grid-template-columns:220px 1fr;gap:16px}
  .header-right .hdr-btn span{display:none}
}

/* === MOBILE CATEGORY DRAWER === */
.mob-cat-btn{display:none;align-items:center;gap:8px;padding:12px 16px;background:var(--g0);border:1.5px solid var(--g200);border-radius:var(--r);font-size:14px;font-weight:600;color:var(--g700);width:100%;cursor:pointer;margin-bottom:12px;min-height:48px}
.mob-cat-btn i{color:var(--red)}
.mob-cat-drawer{display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.5)}
.mob-cat-drawer.show{display:flex}
.mob-cat-panel{width:85vw;max-width:340px;background:var(--g0);height:100%;overflow-y:auto;padding:20px;animation:slideInLeft .25s cubic-bezier(.4,0,.2,1)}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mob-cat-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:20px;color:var(--g500);cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center}

@media(max-width:768px){
  .topbar{display:none}

  /* Announcement bar mobile */
  #announcementBar{font-size:11px!important;padding:8px 12px!important;line-height:1.4}
  #announcementBar strong{font-size:11px}
  #announcementText{flex-wrap:wrap;justify-content:center}

  /* Header — mobile: [hamburger] [===logo===] [enquiry][cart] */
  .header .inner{
    gap:6px;flex-wrap:wrap;padding:8px 12px;
    display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;
  }
  .mega-wrap{grid-column:1;grid-row:1;justify-self:start}
  .mega-btn{padding:0;width:44px;height:44px;border-radius:8px;justify-content:center;font-size:0;background:var(--g0);border:1.5px solid var(--g200);color:var(--g700)}
  .mega-btn .ham{gap:4px}
  .mega-btn .ham span{width:18px;height:2px;background:var(--g700)}
  .mega-label{display:none!important}
  .logo-img{height:48px;grid-column:2;grid-row:1;justify-self:center}
  .header-right{grid-column:3;grid-row:1;gap:6px;display:flex;align-items:center;justify-self:end}
  .hdr-btn{padding:0 10px;height:44px;font-size:12px;min-width:44px;justify-content:center}
  .hdr-btn span{display:none}
  .hdr-btn i{font-size:16px}
  .hdr-btn.primary{padding:0 12px;min-width:44px;position:relative}
  .cart-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;font-size:10px;padding:0 5px;display:flex!important;align-items:center;justify-content:center;line-height:1}
  .search-box{grid-column:1/-1;grid-row:2;max-width:100%;margin:4px 0 0}
  .search-box input{padding:10px 48px 10px 14px;font-size:14px;height:44px}
  .search-box .sbtn{top:4px;bottom:4px;right:4px;width:38px}
  .header-nav{display:none}
  /* Mega menu: fullscreen drawer on mobile */
  .mega-dd{position:fixed!important;top:0;left:0;right:0;bottom:0;min-width:100vw;width:100vw;max-height:100vh;overflow-y:auto;border-radius:0;padding:60px 16px 24px;z-index:200;transform:translateY(-100%)!important}
  .mega-dd.show{transform:translateY(0)!important}
  .mega-grid{grid-template-columns:1fr;gap:2px}
  .mega-item{padding:14px 12px;gap:12px;border-bottom:1px solid var(--g100);min-height:48px}
  .mega-item:last-child{border-bottom:none}
  .mi-icon{width:36px;height:36px}
  .mi-icon img{width:20px!important;height:20px!important}
  .mi-text h4{font-size:14px}
  .mi-cnt{font-size:11px;color:var(--g400)}
  .mega-close-mob{display:flex!important;position:fixed;top:0;left:0;right:0;padding:14px 16px;background:var(--g0);font-size:14px;font-weight:600;color:var(--g500);justify-content:space-between;align-items:center;z-index:201;border-bottom:1px solid var(--g100);cursor:pointer}
  .mega-close-mob span{font-size:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center}

  /* Breadcrumb — scroll affordance with gradient mask */
  .breadcrumb-bar .inner{padding:0 12px;font-size:12px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .breadcrumb-bar .inner::-webkit-scrollbar{display:none}
  .breadcrumb-bar{position:relative}
  .breadcrumb-bar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--g0));pointer-events:none}

  /* Main layout — sidebar hidden, mobile cat button shown */
  .main-layout{grid-template-columns:1fr;padding:12px;gap:12px}
  .sidebar-card{display:none}
  .mob-cat-btn{display:flex}
  .page-title{font-size:20px}
  .page-subtitle{font-size:14px}

  /* Medium Finder button on mobile: icon only (Norwegian placeholder
     pushes the red button off-screen otherwise on iPhone Chrome) */
  .hp-mf-search .mf-btn-lbl{display:none}
  .hp-mf-search button{padding:0 14px}

  /* Categories grid */
  .cat-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cat-card{padding:10px;min-height:48px}
  .cat-card h3{font-size:13px}
  .cat-card::before{display:none}
  .cat-card img{height:80px!important}
  .cc-icon{width:28px;height:28px;border-radius:6px}
  .cc-icon img{width:18px!important;height:18px!important}
  .cc-count{font-size:11px}
  .cc-arrow{display:none}

  /* Filter bar */
  .filter-bar{padding:10px 12px;font-size:13px;flex-wrap:wrap;gap:8px;border-radius:var(--r) var(--r) 0 0}
  .sort-wrap{width:100%}
  .sort-sel{width:100%;min-height:44px;font-size:14px}

  /* Product cards */
  .pc-top{flex-direction:column;gap:10px}
  .pc-img{width:100%;height:140px}
  .pc-name{font-size:15px}
  .pc-specs{font-size:12px}

  /* Variant table: hidden by default on mobile listing */
  .product-card .vt-toolbar,
  .product-card .vt-table,
  .product-card .vt-footer,
  .product-card .expand-btn,
  .product-card .vt-header{display:none}
  .mob-variants-btn{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;margin-top:8px;background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--r);font-size:14px;font-weight:600;color:var(--g700);cursor:pointer;transition:all var(--t);min-height:48px}
  .mob-variants-btn:hover,.mob-variants-btn:active{border-color:var(--red);color:var(--red);background:var(--red-light)}
  .mob-variants-btn i{color:var(--red)}
  .product-card.mob-expanded .vt-toolbar,
  .product-card.mob-expanded .vt-table,
  .product-card.mob-expanded .vt-footer,
  .product-card.mob-expanded .expand-btn,
  .product-card.mob-expanded .vt-header{display:block}
  .product-card.mob-expanded .mob-variants-btn{display:none!important}

  /* Variant table card layout when expanded */
  .vt-header{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0}
  /* Toolbar: search 100% + filter always right */
  .vt-toolbar{padding:6px 0;width:100%;flex-wrap:wrap;display:flex;align-items:center}
  .vt-search{max-width:100%!important;flex:1 1 100%!important;margin-bottom:8px}
  .vt-search input{min-height:44px;font-size:14px}
  .vt-filter-btn{margin-left:auto!important;flex-shrink:0;min-height:44px;padding:7px 16px}
  /* PDP: outer toolbar wrapper full-width so filter stays right */
  .pdp-section .vt-toolbar{flex:1 1 100%!important;padding:0!important}

  /* Variant table */
  .vt-table,.vt-table tbody{display:block;width:100%}
  .vt-table thead{display:none}
  .vt-table tbody tr{
    display:flex;flex-wrap:wrap;
    height:auto!important;min-height:0!important;
    padding:12px;border-bottom:1px solid var(--g100);gap:0;
  }
  .vt-table td{padding:0;font-size:13px}
  .vt-table td::before{display:none}
  .vt-table td[data-label="Quantity"]{display:none}

  /* Line 1+2: SKU + name (combined cell) */
  .td-sku-name{flex:1 1 100%;order:1;padding-bottom:4px;max-width:100%}
  .td-sku-code{font-size:13px;font-weight:700;white-space:nowrap}
  .td-name-desc{font-size:12px;color:var(--g500);max-width:100%;white-space:normal;word-break:break-word;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Line 3: specs (DN + bar) — reset desktop width:1px, display inline side by side */
  .td-spec{flex:0 0 auto;width:auto!important;order:3;font-size:13px;font-weight:600;color:var(--g800);padding:0 0 4px 0;margin-right:0;white-space:nowrap}
  .td-spec small{font-size:11px;color:var(--g500);font-weight:400;margin-left:1px;margin-right:0}
  /* Separator dot between spec cells */
  .td-spec+.td-spec::before{content:' · ';color:var(--g300);font-weight:400;font-size:12px}
  /* Line 4: availability — full width, own row */
  .td-avail{flex:1 1 100%;order:4;text-align:left;padding-top:2px;padding-bottom:4px}
  /* Line 5: price — full width, right-aligned */
  .td-price{flex:1 1 100%;order:5;text-align:right;margin-left:0;padding-bottom:4px}
  .td-price .amount{font-size:14px;font-weight:700}
  .td-price .sub{font-size:10px;color:var(--g500)}
  /* Line 6: [info][PDF] left ... [ATC/enquiry] right */
  .td-actions{flex:1 1 100%;order:6;display:flex;gap:6px;align-items:center;padding-top:6px;justify-content:space-between}
  .btn-cart{flex:none;padding:0 14px;height:44px;font-size:12px;justify-content:center;margin-left:auto}
  .btn-icon{height:44px;width:44px;font-size:13px;margin-left:0;padding:0}
  /* Stepper on mobile: compact but tappable — shown before cart button in actions row */
  .qty-stepper{display:inline-flex;flex-shrink:0}
  .qty-stepper button{width:36px;height:36px;font-size:16px}
  .qty-stepper input{width:40px;height:36px;font-size:13px}

  .expand-btn{font-size:13px;padding:12px 16px;min-height:44px}
  .vt-footer{font-size:12px;padding:10px 12px}

  /* Checkout */
  .checkout-layout{grid-template-columns:1fr}
  .checkout-side{order:2}
  .checkout-side .rec-section-hdr{font-size:13px}
  .checkout-side .rec-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
  .checkout-side .rec-card{flex-direction:column}
  .checkout-side .rec-card-img{width:100%;min-width:0;border-right:none;border-bottom:1px solid var(--g100)}

  /* PDP mobile */
  .pdp-hero{grid-template-columns:1fr;gap:0;padding:0;margin-bottom:12px;box-shadow:none;border-radius:0;background:var(--g0)}
  .pdp-img-wrap{max-height:260px;aspect-ratio:auto;border-radius:0;border:none;border-bottom:1px solid var(--g100)}
  .pdp-img-wrap img{padding:16px;object-fit:contain}
  .pdp-details{padding:14px 16px 16px}
  .pdp-details h1{font-size:18px;font-weight:700;margin-bottom:6px;line-height:1.3}
  .pdp-sku{font-size:12px;padding:3px 8px;margin-bottom:10px}
  .pdp-price{font-size:26px;font-weight:800;margin-bottom:2px}
  .pdp-price-sub{font-size:13px;margin-bottom:12px}
  .pdp-meta{font-size:13px;gap:3px;margin-bottom:10px;flex-direction:row;flex-wrap:wrap}
  .pdp-meta span{background:var(--g50);padding:3px 8px;border-radius:4px;font-size:12px}
  .pdp-desc{font-size:13px;line-height:1.6;max-height:80px;overflow:hidden;position:relative;margin-bottom:0;color:var(--g600)}
  .pdp-desc-toggle{display:block;text-align:center;padding:6px;font-size:12px;font-weight:600;color:var(--red);cursor:pointer;background:linear-gradient(transparent,var(--g0) 50%);margin-top:-24px;position:relative;z-index:1;min-height:44px;display:flex;align-items:center;justify-content:center}
  .pdp-desc.expanded{max-height:none}
  .pdp-desc.expanded+.pdp-desc-toggle{background:none;margin-top:0}
  .pdp-actions{flex-direction:row;padding:12px 16px;gap:8px;background:var(--g0);border-top:1px solid var(--g100)}
  .pdp-actions button,.pdp-actions a{flex:1;justify-content:center;padding:12px 8px;font-size:13px;min-width:0;min-height:48px}
  .pdp-actions button i,.pdp-actions a i{margin-right:4px}

  /* PDP sections mobile */
  .pdp-section{margin-bottom:8px;border-radius:0;box-shadow:none;border-top:6px solid var(--g100)}
  .pdp-section-hdr{font-size:14px;padding:10px 16px;min-height:48px;display:flex;align-items:center}

  /* Specs table: single column on mobile */
  .pdp-attrs-grid{grid-template-columns:1fr;padding:0}
  .pdp-attr{padding:10px 16px;gap:8px;min-height:44px}
  .pdp-attr .ak{font-size:13px;min-width:0;flex:1}
  .pdp-attr .av{font-size:13px;text-align:right;flex-shrink:0;max-width:50%}

  /* PDP variants: always expanded on mobile, full width */
  .pdp-mob-variants-btn{display:none!important}
  .pdp-section [style*="overflow-x"]{overflow-x:visible!important}
  .pdp-section .vt-table,.pdp-section .vt-table tbody{display:block;width:100%!important}
  /* tr uses flex layout from above — do NOT override to display:block */

  /* Recommendations mobile: tighter cards in horizontal scroller */
  .rec-grid{gap:10px}
  .rec-grid>.rec-card{min-width:160px;max-width:160px}
  .rec-nav-btn{display:none}
  .rec-card-name{font-size:12px;-webkit-line-clamp:2}
  .rec-card-btn{font-size:11px;padding:8px 10px;min-height:36px}

  /* Modal */
  .modal-grid{grid-template-columns:1fr;gap:12px;padding:16px}
  .modal-img{max-height:180px}
  .modal-details h1{font-size:16px}
  .attrs-grid{grid-template-columns:1fr}
  .modal-actions{padding:0 16px 16px}
  .modal-sec-row .btn-enq{font-size:13px;padding:10px 8px;height:48px}
  .modal-atc{font-size:15px;height:52px}
  .modal-close{width:44px;height:44px}

  /* Multi-cart mobile */
  .mc-bar{padding:0 16px 8px}
  .mc-tab{font-size:11px;padding:5px 10px}
  .mc-add{width:28px;height:28px}
  .oh-item{padding:10px;gap:8px}
  .oh-icon{width:32px;height:32px;font-size:12px}
  .oh-reorder{padding:5px 10px;font-size:10px}

  /* Cart drawer: full width + mobile layout */
  .cart-drawer{width:100vw;max-width:100%;right:-110vw}
  .cd-header .cd-close{width:44px;height:44px}
  /* Cart drawer item on mobile — matches checkout bestilling 3-col layout */
  .cd-item{grid-template-columns:50px 1fr auto;padding:12px 0;gap:4px 10px}
  .cd-item .cd-img-box{width:50px!important;height:50px!important}
  .cd-item .cd-sku{font-size:11px}
  .cd-item .cd-name{font-size:12px;-webkit-line-clamp:2}
  .cd-item .cd-price-net{font-size:13px}
  .cd-item .cd-price-sub,.cd-item .cd-price-unit{font-size:9px}
  .cd-item .cd-actions{gap:8px;margin-top:2px}
  .cd-item .cd-remove{width:36px;height:36px;font-size:12px;margin-top:2px}
  /* Stepper — consistent sizing for cart drawer AND checkout on mobile */
  .qty-stepper.cd-qty button{width:36px;height:36px;font-size:15px;font-weight:700}
  .qty-stepper.cd-qty input{width:48px;height:36px;font-size:13px;font-weight:700}
  /* Volume discount hint — force single line, span full cart item width */
  .cd-item>div[style*="flex-basis:100%"]{grid-column:1/-1!important;grid-row:3;margin:0!important;padding:6px 10px!important;font-size:10px!important;line-height:1.3!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px!important}
  .cd-item>div[style*="flex-basis:100%"]>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .cd-item>div[style*="flex-basis:100%"]>button{flex-shrink:0}

  /* Checkout table: hide header, card layout on mobile */
  #checkoutTable{display:block}
  #checkoutTable tr{display:grid;grid-template-columns:50px 1fr auto auto;grid-template-rows:auto auto;gap:4px 6px;padding:12px 16px;border-bottom:1px solid var(--g100);position:relative}
  thead{display:none}
  #checkoutTable td{padding:4px 0!important;border:none!important}
  /* Image (td 1) — spans both rows */
  #checkoutTable td:nth-child(1){grid-row:1/3;grid-column:1;width:50px}
  #checkoutTable td:nth-child(1) div{width:50px!important;height:50px!important}
  /* SKU + name (td 2) — TOP, left col */
  #checkoutTable td:nth-child(2){grid-row:1;grid-column:2;font-size:13px}
  /* Qty stepper (td 3) — BOTTOM row, col 3 */
  #checkoutTable td:nth-child(3){grid-row:2;grid-column:3;text-align:right!important}
  /* Price (td 4) — TOP, spans cols 3-4 (right-aligned) */
  #checkoutTable td:nth-child(4){grid-row:1;grid-column:3/-1;text-align:right!important;font-size:13px}
  /* Trash (td 5) — BOTTOM row, col 4, tight next to stepper */
  #checkoutTable td:nth-child(5){grid-row:2;grid-column:4;text-align:left!important;padding-left:0!important}
  #checkoutTable td:nth-child(5) button{min-width:36px;min-height:36px;width:36px;height:36px;font-size:12px}
  /* Totals row */
  #checkoutTable tr:last-child{display:flex;justify-content:flex-end;gap:12px}
  #checkoutTable tr:last-child td{padding:12px 0!important}
  /* Form grid */
  .co-form-grid{grid-template-columns:1fr!important}

  /* Footer */
  .footer .inner{padding:0 16px!important}
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important;text-align:center}
  .footer-grid a{justify-content:center;word-break:break-all;font-size:13px;min-height:44px;display:flex;align-items:center}
  .footer-grid>div{display:flex;flex-direction:column;align-items:center}
  .footer-grid>div>div[style*="display:flex"]{justify-content:center!important}
  .footer-grid+div{flex-direction:column!important;align-items:center!important;gap:8px!important}

  /* Pagination */
  .pagination{gap:8px}
  .pg-btn{min-width:44px;height:44px;font-size:13px}
}

@media(max-width:380px){
  .cat-grid{grid-template-columns:1fr}
  .mega-btn span:not(.ham){display:none}
  .hdr-btn.primary{padding:0 8px}
}