/* ==========================================================================
   Luma Pro — mobile layer (phones & small tablets), loaded on every page.
   Desktop is untouched: every layout rule sits inside a max-width media query,
   and the mobile menu / filter-drawer elements are hidden above 900px.
   ========================================================================== */

/* ---------- elements that only exist on mobile ---------- */
.mnav-btn,.mnav,.mnav-bg,.mf-btn,.mf-head,.mf-foot,.mf-bg{display:none}

@media (max-width:900px){

  /* ================= HEADER ================= */
  header .hd{gap:8px 10px;padding:8px 14px}
  header .logo-box{width:36px;height:36px;border-radius:9px}
  header .logo-box svg{width:19px;height:19px}
  header .hd-act{gap:2px}
  .srch input,.srch-sel,.srch-btn{height:40px}
  /* iPhone zooms into any field with text smaller than 16px — keep all fields at 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
  .srch input::placeholder{font-size:14px}
  .srch-sel{padding:0 4px 0 8px!important;font-weight:600}

  /* ================= MOBILE MENU (replaces the sideways-scrolling nav) ================= */
  body>nav,header+nav{display:none}
  .mnav-btn{display:flex}
  .mnav-btn .mnav-ic{width:22px;height:16px;position:relative;display:block}
  .mnav-btn .mnav-ic i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--txt)}
  .mnav-btn .mnav-ic i:nth-child(1){top:0}.mnav-btn .mnav-ic i:nth-child(2){top:7px}.mnav-btn .mnav-ic i:nth-child(3){top:14px}
  .mnav-bg{display:block;position:fixed;inset:0;z-index:1240;background:rgba(8,12,26,.5);opacity:0;pointer-events:none;transition:opacity .25s}
  .mnav{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;z-index:1250;width:min(88vw,380px);background:#fff;
        box-shadow:-12px 0 40px rgba(0,0,0,.2);transform:translateX(104%);visibility:hidden;
        transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s}
  body.mnav-open{overflow:hidden}
  body.mnav-open .mnav{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s}
  body.mnav-open .mnav-bg{opacity:1;pointer-events:auto}
  .mnav-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--brd);flex-shrink:0}
  .mnav-top .logo-n{font-size:17px}
  .mnav-x{width:40px;height:40px;border:none;border-radius:50%;background:var(--bg);font-size:24px;line-height:1;color:var(--mut);cursor:pointer;flex-shrink:0}
  .mnav-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 0 10px}
  .mnav-link,.mnav-sub>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 18px;
        font:600 16px 'Outfit',sans-serif;color:var(--blk);text-decoration:none;border-bottom:1px solid #F3F4F6;cursor:pointer;list-style:none}
  .mnav-sub>summary::-webkit-details-marker{display:none}
  .mnav-sub>summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s;flex-shrink:0}
  .mnav-sub[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
  .mnav-link.on,.mnav-sub.on>summary{color:var(--g)}
  .mnav-link.on{box-shadow:inset 3px 0 0 var(--g);background:var(--gl)}
  .mnav-sub[open]>summary{background:var(--bg);border-bottom-color:transparent}
  .mnav-panel{background:var(--bg);padding:2px 18px 14px;border-bottom:1px solid #F3F4F6}
  .mnav-all{display:flex;align-items:center;justify-content:space-between;min-height:46px;margin:0 0 4px;padding:0 14px;border-radius:10px;
        background:#fff;border:1.5px solid var(--gll);color:var(--g);font:700 14.5px 'Outfit',sans-serif;text-decoration:none}
  .mnav-h{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin:14px 0 2px}
  .mnav-panel a:not(.mnav-all){display:flex;align-items:center;min-height:42px;padding:0 2px;font-size:15px;font-weight:500;color:var(--txt);text-decoration:none;border-bottom:1px solid #E9EBEF}
  .mnav-panel a:not(.mnav-all):last-child{border-bottom:none}
  .mnav-foot{flex-shrink:0;border-top:1px solid var(--brd);padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;background:#fff}
  .mnav-call{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;background:var(--g);color:#fff;font:700 15.5px 'Outfit',sans-serif;text-decoration:none}
  .mnav-call svg,.mnav-mail svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mnav-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mnav-mail{display:inline-flex;align-items:center;gap:6px;color:var(--txt);font-size:14px;font-weight:600;text-decoration:none}
  .mnav-lang{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--brd);border-radius:9px;padding:3px}
  .mnav-lang button{border:none;background:transparent;border-radius:7px;padding:6px 11px;font:700 12px 'Outfit',sans-serif;letter-spacing:.04em;color:var(--mut);cursor:pointer}
  .mnav-lang button.on{background:var(--g);color:#fff}
  .mnav-addr{font-size:12.5px;color:var(--mut);line-height:1.45}
  .mnav-theme{display:flex;align-items:center;gap:10px;width:100%;height:46px;padding:0 14px;border:1.5px solid var(--brd);border-radius:12px;background:transparent;color:var(--txt);font:600 14.5px 'Outfit',sans-serif;cursor:pointer;text-align:left}
  .mnav-theme svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

  /* ================= PAGE HERO / BREADCRUMB ================= */
  .bc{margin-bottom:14px;flex-wrap:wrap;row-gap:2px}
  .sec-hd{flex-wrap:wrap;gap:6px 12px}
  .sec-t{font-size:20px}
  .page-2col>div{min-width:0}

  /* ================= PRODUCT GRIDS: 2 columns on phones (printers had an inline 3-column grid) ================= */
  .prod-grid:not(.is-list){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}

  /* ================= FILTER SIDEBAR -> slide-in drawer (printers, parts) ================= */
  .mf-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1.5px solid var(--g);background:var(--gl);color:var(--g);
        border-radius:9px;font:700 14px 'Outfit',sans-serif;cursor:pointer;flex-shrink:0}
  .mf-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .page-2col>.sidebar.mf-drawer{position:fixed;top:0;bottom:0;left:0;z-index:1150;width:min(88vw,380px);margin:0;background:var(--bg);overflow-y:auto;
        overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 14px;box-shadow:10px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;
        transform:translateX(-104%);visibility:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s}
  body.mf-open .page-2col>.sidebar.mf-drawer{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s}
  body.mf-open{overflow:hidden}
  .sidebar.mf-drawer .sb-box{flex-shrink:0}
  .sidebar.mf-drawer .sb-promo{display:none}
  .sidebar.mf-drawer .sb-cats a{min-height:44px}
  .sidebar.mf-drawer .sb-brand{min-height:40px;font-size:14.5px}
  .sidebar.mf-drawer .sb-brand input{width:18px;height:18px}
  .mf-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3;background:var(--bg);padding:16px 2px 12px;margin-bottom:10px;
        border-bottom:1px solid var(--brd);font:800 17px 'Syne',sans-serif;color:var(--blk)}
  .mf-x{width:38px;height:38px;border-radius:50%;border:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);font-size:22px;line-height:1;color:var(--mut);cursor:pointer}
  .mf-foot{display:flex;position:sticky;bottom:0;z-index:3;background:var(--bg);margin-top:auto;padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--brd)}
  .mf-apply{flex:1;height:48px;border-radius:10px;border:none;background:var(--g);color:#fff;font:700 15px 'Outfit',sans-serif;cursor:pointer}
  .mf-bg{display:block;position:fixed;inset:0;z-index:1140;background:rgba(8,12,26,.5);opacity:0;pointer-events:none;transition:opacity .28s}
  body.mf-open .mf-bg{opacity:1;pointer-events:auto}
  .sort-bar.has-mf{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .sort-bar.has-mf .sort-bar-l{order:3;flex-basis:100%;font-size:12.5px}
  .sort-bar.has-mf .sort-bar-r{flex:1 1 0;min-width:0;justify-content:flex-end}
  .sort-bar.has-mf .sort-sel{min-width:0;flex:1 1 auto;max-width:240px}

  /* ================= PRINTER DETAIL POP-UP (printers.html): bottom sheet, one column ================= */
  [id^="modal_"]{padding:0!important;align-items:flex-end!important}
  [id^="modal_"]>div{max-width:none!important;max-height:92vh!important;max-height:92dvh!important;border-radius:18px 18px 0 0!important}
  [id^="modal_"]>div>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  [id^="modal_"]>div>div[style*="grid-template-columns"]>div:first-child{border-radius:18px 18px 0 0!important;min-height:0!important;padding:22px 18px!important}
  [id^="modal_"]>div>div[style*="grid-template-columns"]>div:first-child img{max-height:210px!important}
  [id^="modal_"]>div>div[style*="grid-template-columns"]>div:last-child{padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px))!important}
  [id^="modal_"]>div>button:first-child{position:sticky!important;top:10px!important;right:auto!important;margin:10px 10px -50px auto!important;
        width:40px!important;height:40px!important;font-size:22px!important;box-shadow:0 2px 8px rgba(0,0,0,.12)}

  /* ================= RENTAL PACKAGES + FAQ + inline multi-column blocks ================= */
  .pkg-grid-home[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-wrap div[style*="grid-template-columns:repeat(3,1fr)"]:not(.prod-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* ================= CART DRAWER ================= */
  #cart-drawer{width:100%!important;max-width:420px!important}
}

@media (max-width:640px){
  /* rental packages: one full-width card each, so prices and texts are readable */
  .pkg-grid-home[style]{grid-template-columns:minmax(0,1fr)!important;gap:12px}
  .pkg-grid-home[style] .pkg{padding:20px 18px}
  .pkg-grid-home[style] .pkg-nm{font-size:22px}
  .pkg-grid-home[style] .pkg-price{font-size:30px}
  .pkg-grid-home[style] .pkg-btn{height:46px;font-size:14.5px}
  .pkg-grid-home[style] .pop-tag{top:14px;right:14px}
  /* FAQ and other 2/3-column inline blocks -> one column */
  .page-wrap div[style*="grid-template-columns:1fr 1fr"],
  .page-wrap div[style*="grid-template-columns:repeat(3,1fr)"]:not(.prod-grid){grid-template-columns:minmax(0,1fr)!important}
  .section-wrap{padding:20px 16px;border-radius:14px}
  .how-steps{gap:10px}
  .step{padding:16px 10px}
  .step h3{font-size:14px}
  .step p{font-size:12.5px}

  /* product & brand pages (generated) */
  #product-content h1,.page-wrap>h1{font-size:23px!important;line-height:1.25!important}

  /* footer: contact on top, link groups two per row */
  .ft-cols{grid-template-columns:1fr 1fr!important;gap:22px 16px;padding:0 18px}
  .ft-cols>div:first-child{grid-column:1/-1}
  .ft-col a{padding:3px 0}
  .ft-bottom{flex-direction:column;align-items:center;gap:4px;padding:16px 18px 0;text-align:center}
}

@media (max-width:640px){
  /* home: rental packages as a swipeable row (one card + a peek of the next) */
  .pkg-center{display:block}
  .pkg-grid-home:not([style]){display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;
        overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
        margin:14px -12px 0;padding:4px 12px 14px;scroll-padding:0 12px}
  .pkg-grid-home:not([style])::-webkit-scrollbar{display:none}
  .pkg-grid-home:not([style])>.pkg{scroll-snap-align:start;display:flex;flex-direction:column}
  .pkg-grid-home:not([style])>.pkg .pkg-btn{margin-top:auto}
  /* home slider: swipe instead of arrows that covered the banner text */
  .harr{display:none}
  .hdot{width:9px;height:9px}
  .hdot.on{width:26px}
  /* listing toolbars */
  .sort-bar.has-mf .view-btns{display:none}
}

@media (max-width:420px){
  /* home category tiles: icon above the text so names fit on one line */
  .cat-tile{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px}
  .ct-icon{width:36px;height:36px}
  .ct-icon svg{width:19px;height:19px}
}

@media (max-width:380px){
  /* rental "Како функционира": one step per row, number on the left */
  .how-steps{grid-template-columns:minmax(0,1fr)!important}
  .step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;text-align:left;align-items:start;padding:14px}
  .step-num{grid-row:1 / span 2;margin:0}
  .step h3{margin-bottom:4px}
  header .logo-s{display:none}
  header .hdb{width:36px;height:36px}
  .prod-grid:not(.is-list){gap:8px}
}


/* ==========================================================================
   PRODUCT FONT — names and prices of toners, printers and parts use Inter.
   Syne and Outfit (the other site fonts) have no Cyrillic letters, so Macedonian product names
   used to be drawn with a plain system font next to the Latin ones. Inter has both alphabets.
   ========================================================================== */
.pcard-name,.pcard-name a,.pcard-brand,.pcard-compat,.pcard-stock,.pcard-old,.pcard-badge,.spec-tag,.pcard-cart,
.pcard-price,.pcard-price span,.bh-grid .pcard,.rel-grid .pdp-rel,#cart-items,#cart-total{font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
.pcard-price{font-weight:800;letter-spacing:-.02em}

/* ── wishlist drawer (shared.js: header heart) ── */
.lpd-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1100;opacity:0;pointer-events:none;transition:opacity .3s}
.lpd-ov.on{opacity:1;pointer-events:auto}
.lpd{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:95vw;background:#fff;z-index:1200;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.12);font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif}
.lpd.on{transform:none}
.lpd-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #F3F4F6}
.lpd-hd h2{font-size:18px;font-weight:800;color:#0A0A0A;margin:0}
.lpd-close{width:36px;height:36px;border:none;background:#F5F6F8;border-radius:50%;font-size:20px;cursor:pointer;color:#6B7280}
.lpd-body{flex:1;overflow-y:auto;padding:0 24px}
.lpd-row{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #F3F4F6}
.lpd-name{flex:1;min-width:0;font-size:14px;font-weight:600;color:#111827;text-decoration:none;line-height:1.4}
.lpd-name:hover{color:#2563EB}
.lpd-x{flex:none;width:36px;height:36px;border:none;background:none;color:#EF4444;font-size:24px;line-height:1;cursor:pointer}
.lpd-empty{text-align:center;padding:48px 12px;color:#6B7280;font-size:14px;line-height:1.5}
.lpd-empty strong{display:block;color:#374151;font-size:15px;margin-bottom:4px}
.lpd-ft{padding:20px 24px;border-top:1px solid #F3F4F6}
.lpd-btn{display:block;background:#2563EB;color:#fff;text-align:center;padding:14px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none}