/* v47.1 — Mobile Catalog only. Desktop and Mobile Home are intentionally untouched. */
@media (max-width:760px){
  #catalogModal{
    z-index:310 !important;
    overflow:hidden !important;
  }
  #catalogModal .backdrop{position:fixed !important;inset:0 !important;}
  #catalogModal .panel{
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    top:max(8px, env(safe-area-inset-top)) !important;
    bottom:max(8px, env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:14px 12px 16px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    border-radius:12px !important;
    transform:none !important;
  }
  #catalogModal .close{
    position:sticky !important;
    float:right !important;
    top:0 !important;
    right:0 !important;
    z-index:25 !important;
    width:40px !important;
    height:40px !important;
    margin:-5px -3px 0 6px !important;
    display:grid !important;
    place-items:center !important;
    font-size:32px !important;
    line-height:1 !important;
    border-radius:50% !important;
    background:#fbf7ef !important;
  }
  #catalogModal .modal-brand{
    min-width:0 !important;
    gap:9px !important;
    padding:0 0 10px !important;
    align-items:center !important;
  }
  #catalogModal .modal-brand img{width:46px !important;height:46px !important;flex:0 0 46px !important;}
  #catalogModal .modal-brand>div{min-width:0 !important;}
  #catalogModal .modal-brand small{font-size:8px !important;letter-spacing:1.2px !important;}
  #catalogModal .modal-brand h2{
    margin:2px 0 0 !important;
    font-size:clamp(20px,5.8vw,24px) !important;
    line-height:1.05 !important;
    overflow-wrap:anywhere !important;
  }

  /* 1–2. All five categories stay inside the phone width; long labels wrap inside their button. */
  #catalogModal .tabs{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
    margin:0 0 12px !important;
    padding:10px 0 0 !important;
    overflow:visible !important;
    border-top:1px solid #dfd2b2 !important;
  }
  #catalogModal .tabs button{
    min-width:0 !important;
    width:100% !important;
    min-height:40px !important;
    padding:7px 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    font-size:12px !important;
    line-height:1.12 !important;
    border-radius:20px !important;
  }
  #catalogModal .tabs button:nth-child(5){grid-column:1/-1 !important;justify-self:center !important;width:calc(50% - 4px) !important;}

  /* 3. One clean card per row; photos keep proportions and never escape their frame. */
  #catalogModal .products{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  #catalogModal .product{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:132px !important;
    overflow:hidden !important;
    border-radius:10px !important;
  }
  #catalogModal .product-image-frame{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:100% !important;
    min-height:132px !important;
    max-height:none !important;
    align-self:stretch !important;
    overflow:hidden !important;
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    contain:layout paint !important;
  }
  #catalogModal .stock-badge{
    left:7px !important;top:7px !important;
    max-width:calc(100% - 14px) !important;
    padding:4px 7px !important;
    font-size:9px !important;
    white-space:normal !important;
    text-align:center !important;
  }
  #catalogModal .product .copy{
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:10px !important;
    overflow:visible !important;
  }
  #catalogModal .product h3{
    margin:0 0 4px !important;
    font-size:17px !important;
    line-height:1.12 !important;
    overflow-wrap:anywhere !important;
  }
  #catalogModal .product p{
    margin:3px 0 !important;
    min-height:0 !important;
    font-size:11px !important;
    line-height:1.28 !important;
    overflow-wrap:anywhere !important;
  }
  #catalogModal .product strong{
    margin:6px 0 !important;
    font-size:14px !important;
    line-height:1.2 !important;
    overflow-wrap:anywhere !important;
  }

  /* 4–5. Availability and size rows stay obvious and usable. */
  #catalogModal .quick-variant{margin:5px 0 7px !important;gap:4px !important;font-size:10px !important;min-width:0 !important;}
  #catalogModal .quick-variant select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:7px 8px !important;
    font-size:12px !important;
    text-overflow:ellipsis !important;
  }
  #catalogModal .product-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    margin-top:auto !important;
  }
  #catalogModal .product-actions button{
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
    font-size:11px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #catalogModal .product.is-unavailable [data-add]{opacity:.55 !important;cursor:not-allowed !important;}

  /* 6. RF shipping remains present but compact. */
  #catalogModal .catalog-actions{margin:12px 0 0 !important;justify-content:stretch !important;}
  #catalogModal .catalog-actions button{width:100% !important;min-height:42px !important;font-size:12px !important;}
  #catalogModal .shipping{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    margin:10px 0 2px !important;
    padding:10px 11px !important;
    font-size:10.5px !important;
    line-height:1.35 !important;
  }
  #catalogModal .shipping b{font-size:11px !important;}

  /* No horizontal leakage anywhere in the mobile catalog. */
  #catalogModal, #catalogModal *{box-sizing:border-box !important;}
  #catalogModal .panel, #catalogModal .tabs, #catalogModal .products,
  #catalogModal .product, #catalogModal .copy, #catalogModal select,
  #catalogModal button{max-width:100% !important;}
}

@media (max-width:370px){
  #catalogModal .panel{left:5px !important;right:5px !important;padding-left:9px !important;padding-right:9px !important;}
  #catalogModal .product{grid-template-columns:82px minmax(0,1fr) !important;}
  #catalogModal .product-image-frame{width:82px !important;min-width:82px !important;max-width:82px !important;}
  #catalogModal .product h3{font-size:15px !important;}
  #catalogModal .product-actions{grid-template-columns:1fr !important;}
}

/* v47.1 — smaller catalog photos + clickable preview */
@media(max-width:760px){
  #catalogModal .product-image-frame{cursor:zoom-in!important;}
  #catalogModal .product-image-frame:focus-visible{outline:2px solid #b18b2e!important;outline-offset:-3px!important;}
}

/* v47.1.4 — mobile photo refinement: smaller catalogue preview + full-screen viewer */
@media (max-width:760px){
  #catalogModal .product{
    grid-template-columns:78px minmax(0,1fr) !important;
    min-height:118px !important;
  }
  #catalogModal .product-image-frame{
    width:78px !important;
    min-width:78px !important;
    max-width:78px !important;
    min-height:118px !important;
    height:118px !important;
    max-height:118px !important;
    align-self:start !important;
    background-size:contain !important;
    background-position:center !important;
    background-color:#f7f3ea !important;
    border-right:1px solid #eee4cf !important;
  }
  #catalogModal .stock-badge{
    left:5px !important;
    top:5px !important;
    max-width:calc(100% - 10px) !important;
    padding:3px 5px !important;
    font-size:8px !important;
    line-height:1.05 !important;
  }
}
@media (max-width:370px){
  #catalogModal .product{grid-template-columns:70px minmax(0,1fr) !important;}
  #catalogModal .product-image-frame{
    width:70px !important;
    min-width:70px !important;
    max-width:70px !important;
    height:110px !important;
    min-height:110px !important;
    max-height:110px !important;
  }
}
