/* ============================================================
   YANYAN Porcelain — mobile overrides for the celadon premium layer
   Loaded last, media (max-width:767px) only. Desktop: zero load.
   ============================================================ */
@media (max-width:767px){

  /* ---------- header / full-screen drawer ---------- */
  header.nav{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:#0F1712 !important;
  }
  .nav-inner{height:56px !important;gap:12px}
  .logo{font-size:20px !important;letter-spacing:.16em}
  .nav-cta{display:none !important}
  .nav-right{margin-left:auto;gap:8px}
  .nav-burger{width:42px;height:42px}
  .topbar{background:#0F1712}
  .m-nav{background:#F6F5EF !important;color:var(--ink)}
  .m-nav a{color:var(--ink)}
  .m-nav-head{background:#F6F5EF !important}
  .m-nav-close{color:var(--ink)}
  .m-tabbar .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- footer ---------- */
  .foot-grid{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
  .foot-brand{grid-column:auto !important;min-width:0}
  .foot-grid a,.foot-brand p,.foot-contact li{overflow-wrap:anywhere}
  .foot-cta{padding:36px 0 !important}
  .foot-cta-btns{width:100%}
  .foot-cta-btns .btn{flex:1 1 100%;justify-content:center}

  /* ---------- generic grids: 320px safe ---------- */
  .qz-kiln,.qz-mats,.qz-qcgrid,.qz-process,.qz-process.six,.qz-stats,.qz-team,.qz-gallery,.qz-wall,.qz-cats,.qz-sampletypes,.qz-checks{min-width:0}
  .qz-kiln{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .qz-kiln-item{min-width:0;padding:24px 18px}
  .qz-kiln-item p,.qz-mat p,.qz-qc p,.qz-step p{overflow-wrap:anywhere}
  .qz-mats,.qz-qcgrid,.qz-process.six,.qz-team,.qz-gallery{grid-template-columns:minmax(0,1fr) !important}
  .qz-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .qz-wall{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:26px 14px}
  .qz-wall-item{min-width:0}
  .qz-cats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .qz-cat{min-width:0}
  .qz-sampletypes,.qz-checks{grid-template-columns:minmax(0,1fr) !important}
  .qz-reglist{grid-template-columns:minmax(0,1fr) !important}
  .qz-reglist .full{grid-column:auto !important}

  /* ---------- contact ---------- */
  .contact-cards{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
  .contact-cards>*{min-width:0}

  /* ---------- product page ---------- */
  .pd{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
  .pd-gallery,.pd-info{min-width:0 !important}
  .pd-gallery .main img{width:100%;height:auto}
  .pd-pricebox{min-width:0;flex-wrap:wrap;gap:8px;padding:16px 18px}
  .pd-pricemeta{text-align:left;flex:1 1 100%}
  .pd-specs{grid-template-columns:minmax(0,1fr) !important}
  .pd-sticky{max-width:100vw;min-width:0;flex-wrap:wrap;gap:8px;padding:8px 10px;left:0;right:0}
  .pd-sticky-price{font-size:20px;flex:1 1 auto}
  .pd-sticky .stepper{flex:0 0 auto}
  .pd-sticky-add,.pd-sticky-buy{flex:1 1 45%;min-height:44px;padding:0 8px;font-size:10.5px}
  .pd-cta .btn{flex:1 1 46%;min-height:44px;padding:12px 10px;font-size:10.5px}
  .pd-buy-btns .btn{flex:1}
  .pd-thumbs{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .pd-thumbs img{scroll-snap-align:start}

  /* ---------- forms: iOS 16px rule ---------- */
  .qz-formgrid{grid-template-columns:minmax(0,1fr) !important}
  .qz-formgrid input,.qz-formgrid select,.qz-formgrid textarea{font-size:16px !important}
  .co-main input,.co-main select,.co-main textarea{font-size:16px !important}

  /* ---------- tap targets ---------- */
  summary{min-height:44px;display:flex;align-items:center}
  .faq-q{min-height:44px;display:flex;align-items:center;padding-top:12px;padding-bottom:12px}
  .qz-faq .faq-q{min-height:44px}

  /* ---------- tiny labels ---------- */
  .qz-reglist dt,.qz-kiln-item .no,.qz-hero-stats .l,.qz-stats span,.qz-index,.foot-h{font-size:11px !important}

  /* ---------- RTL ---------- */
  html[lang="ar"] .qz-hero-art{border-left:0 !important;border-right:1px solid rgba(246,245,239,.16) !important}
  html[lang="ar"] .qz-hero-copy{padding-right:0 !important;padding-left:0 !important}
  html[lang="ar"] .m-nav a{border-inline-start:0;border-inline-end:3px solid transparent}
}

@media (max-width:359px){
  .qz-kiln{grid-template-columns:minmax(0,1fr) !important}
  .logo{font-size:18px !important}
}

/* mobile final fixes (round 2) */
@media (max-width:767px){
  .qz-bankcard dt,.qz-reglist dt{font-size:11px !important}
  .lang{overflow:visible}
  .lang-drop{width:0;min-width:0;overflow:hidden}
  .lang:hover .lang-drop,.lang:focus-within .lang-drop{width:auto;min-width:150px;overflow:visible}
}

/* mobile fixes (round 3) */
@media (max-width:767px){
  .faq-list{grid-template-columns:minmax(0,1fr) !important;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
  .faq-list .faq-item{min-width:0}
  .qz-cat{min-width:0;overflow:hidden}
  .qz-cat .t{max-width:100%;min-width:0}
  .qz-cat h3,.qz-cat .t span{overflow-wrap:anywhere;word-break:break-word}
}

/* mobile polish (round 4) */
@media (max-width:767px){
  .qz-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .qz-tabs::-webkit-scrollbar{display:none}
  .qz-tab{flex:0 0 auto;white-space:nowrap}
  .qz-cat::after{background:linear-gradient(180deg,rgba(15,23,18,.02) 0%,rgba(15,23,18,.38) 45%,rgba(15,23,18,.9) 100%) !important}
  .qz-cat .t,.qz-cat h3{text-shadow:0 1px 14px rgba(15,23,18,.6)}
}
@media (max-width:359px){
  .guides{grid-template-columns:minmax(0,1fr) !important}
}

/* mobile polish (round 5): readable category captions + viewport */
@media (max-width:767px){
  .qz-cat .t{background:rgba(15,23,18,.58);padding:10px 12px;margin:0 -12px -12px}
  .qz-cat h3,.qz-cat .t span{text-shadow:none}
}

/* mobile polish (round 6): drawer must cover the topbar */
@media (max-width:767px){
  header.nav{z-index:210 !important}
  .m-nav{z-index:220 !important}
}

/* mobile polish (round 7): checkout stack + cart tap targets */
@media (max-width:767px){
  .co-layout{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:18px}
  .co-main{order:1;width:100% !important;max-width:none !important;min-width:0 !important}
  .co-side{order:2;width:100% !important;max-width:none !important;min-width:0 !important;position:static !important}
  .cart-del{width:44px;height:44px;min-height:44px;font-size:20px}
  .cart-count{font-size:11px !important}
}

/* tablet touch polish (768–1024) */
@media (min-width:768px) and (max-width:1024px){
  .foot-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) !important;gap:20px !important}
  .foot-brand p,.foot-contact li{overflow-wrap:anywhere}
  .lang-trigger,.foot-h{min-height:44px;display:flex;align-items:center}
  .faq-q,summary.faq-q,summary{min-height:44px;align-items:center}
  .qz-reglist dt,.qz-bankcard dt{font-size:11px !important}
  .lang-drop{width:0;min-width:0;overflow:hidden}
  .lang:hover .lang-drop,.lang:focus-within .lang-drop{width:auto;min-width:150px;overflow:visible}
}