/* ============================================================
   MY SILVER SHOP — Mobile / Responsive Stylesheet
   ============================================================ */

/* Global mobile smoothness */
@media(max-width:600px){
  *{-webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth}
  body{-webkit-overflow-scrolling:touch}

  /* Eliminate tap delay and enable hardware acceleration */
  .card, .cat-card, .cb, .tab-btn, .cur-btn, .zoom-btn, .fav-btn, .pg-btn, .op-btn, .benq, .bclr, button, a {
    touch-action: manipulation;
  }
  .cat-card {
    will-change: transform;
  }

  /* Currency bar — compact layout on small screens */
  .cur-label{display:none}
  .currency-bar{padding:5px 8px;gap:5px}
  .cur-btn{font-size:10px;padding:4px 8px}

  /* Refresh button — show only the icon (no label). !important is needed
     because the refresh button has inline styles in the HTML. */
  .refresh-btn .refresh-text,
  .refresh-text{display:none !important}
  .refresh-btn{padding:4px 9px !important;font-size:14px !important;gap:0 !important}

  /* User pill — hide the 👤 icon, just show the name */
  #user-pill span:first-child{display:none}
  #user-pill{padding:3px 8px !important}
}

@media(max-width:600px){
  .zoom-btn{opacity:1;width:24px;height:24px;font-size:11px}
}

@media(max-width:600px){
  header{padding:28px 14px 20px}
  main{padding:12px 8px 80px}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* Stacked, tidy filters — no sideways scrolling */
  .sbar{padding:10px;gap:8px;flex-wrap:wrap;overflow:visible;transition:transform .28s ease,opacity .28s ease}
  .sw{flex:1 1 100%;min-width:0}
  .sw input{padding:11px 12px 11px 34px;font-size:16px;border-radius:10px}
  .fsel{flex:1 1 0;min-width:0;padding:10px 6px;font-size:13px;text-align:center;text-align-last:center;border-radius:10px}
  .rc{display:none}

  .cnav{padding:0 6px}
  .cb{padding:9px 9px;font-size:9px;letter-spacing:.08em}

  .card{border-radius:10px}
  .cimg{aspect-ratio:1}
  .cinfo{padding:7px 9px}
  .ccat{font-size:7px;letter-spacing:.1em;margin-bottom:2px}
  .cname{font-size:11px;margin-bottom:5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cwt{font-size:10px}
  .cprice{font-size:13px}
  .cbadge{font-size:7px;padding:2px 5px}
  .tbadge{font-size:7px;padding:2px 5px}
  .cchk{width:22px;height:22px;font-size:10px;opacity:0}
  .card.sel .cchk{opacity:1}
  .fav-btn{width:24px;height:24px;font-size:12px}
  .qrow{margin-top:6px;padding-top:6px}
  .qrow label{font-size:10px}
  .qrow input{width:48px;font-size:11px;padding:4px 5px}

  #cart{bottom:0;left:0;right:0;transform:translate3d(0,100%,0);border-radius:14px 14px 0 0;padding:10px 14px;gap:8px;width:100%;max-width:100%;flex-wrap:nowrap;justify-content:space-between;border-left:none;border-right:none;border-bottom:none;box-shadow:0 -4px 20px rgba(23,18,10,.3);will-change:transform}
  #cart.show{transform:translate3d(0,0,0)}
  .cc{font-size:11px;white-space:nowrap;flex-shrink:0}
  .ct{font-size:13px;font-weight:500;white-space:nowrap;flex:1}
  .benq{padding:9px 16px;font-size:11px;border-radius:20px;white-space:nowrap;flex-shrink:0}
  .bshr{display:none}
  .bclr{padding:9px 10px;font-size:18px;border-radius:20px;flex-shrink:0;border:none;color:rgba(184,151,58,.5)}

  .sh{margin-bottom:12px}
  .sh h2{font-size:18px}
  .sh .cnt{font-size:10px}
  .tab-btn{font-size:10px;padding:10px 12px}

  header h1{font-size:26px}
  .htag{font-size:9px}
  .rpill{font-size:11px;padding:7px 16px}
  .rpill strong{font-size:13px}

  /* CATEGORY HOME — 2 columns, compact like item cards */
  .cat-home-header{padding:14px 10px 8px}
  .cat-home-header h2{font-size:18px}
  .cat-home-header span{font-size:10px}
  .cat-home-search{padding:0 8px 12px;gap:8px}
  .cat-home-search-wrap input{padding:11px 14px 11px 38px;font-size:16px;border-radius:10px}
  .cat-home-search-wrap::before{font-size:15px;left:11px}
  .cat-home-search-hint{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 8px 60px}
  .cat-card{border-radius:10px}
  /* Landscape 4:3 (was 1:1) so customers see ~3 rows of categories at once on mobile */
  .cat-card-img{aspect-ratio:4/3}
  .cat-card-info{padding:7px 9px}
  .cat-card-name{font-size:11px;margin-bottom:3px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cat-card-count{font-size:10px}
  /* Carousel dots — dash style, compact on mobile */
  .cs-dots{bottom:7px;gap:3px}
  .cs-dot{width:10px;height:2px}
  .cs-dot.cs-dot-active{width:16px}
  /* Type badges — compact on mobile */
  .cat-type-badges{gap:2px;margin-top:4px}
  .type-badge{font-size:8px;padding:2px 5px;letter-spacing:.03em}

  /* Inside category on mobile: tab-bar scrolls away, back button sticks to top */
  body.in-category .tab-bar{position:relative;top:auto}
  body.in-category .back-btn{position:sticky;top:8px;z-index:95;margin:8px 0 0 8px}

  .back-btn{margin:10px 0 0 8px;font-size:11px;padding:6px 12px}
  .pagination{padding:20px 8px 90px;gap:4px}
  .pg-btn{padding:7px 10px;font-size:12px;min-width:34px}
}

@media(max-width:600px){
  .co-item{gap:10px;padding:10px}
  .co-item-img,.co-item-img-ph{width:64px;height:64px}
  .co-item-name{font-size:13px}
  .co-actions{flex-direction:column}
  .co-body{padding:14px 14px}
  .co-footer{padding:12px 14px}
}

/* How to Order — mobile */
@media(max-width:600px){
  .how-wrap{padding:20px 12px 80px}
  .how-hero{padding:20px 0 24px}
  .how-steps{flex-direction:column;gap:0;padding:20px 16px}
  .how-step{max-width:100%;width:100%;text-align:left;display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid rgba(184,151,58,.1)}
  .how-step:last-child{border-bottom:none}
  .how-step-num{font-size:20px;min-width:32px;margin-bottom:0;padding-top:2px}
  .how-step-arrow{display:none}
  .how-grid{grid-template-columns:1fr}
  .how-card-featured{grid-column:span 1}
  .how-card-title{font-size:18px}
  .how-card-featured .how-card-title{font-size:22px}
}

/* How to Order — PDF card mobile */
@media(max-width:600px){
  .how-card-pdf{grid-column:span 1}
  .pdf-inner{flex-direction:column;gap:10px}
  .how-pdf-icon{font-size:24px}
  .how-pdf-steps{flex-direction:column;gap:6px}
  .how-pdf-step{min-width:0;width:100%}
  .how-pdf-arrow{transform:rotate(90deg);align-self:center}
}