@charset "utf-8";
/* =====================================================
   ProductShow.aspx responsive layer (MAIN site only)
   Desktop (>=1280px) is untouched. Breakpoints:
     <=1200px : tablet / small laptop -> stacked detail
     <=1024px : tablet portrait       -> fluid header
     <=767px  : phone                 -> compact mobile UI
   ===================================================== */

/* =====================================================
   TABLET  (<=1200px) : fluid + stacked detail columns
   ===================================================== */
@media (max-width:1200px){
  /* fluid page containers */
  #container.main{width:100% !important;max-width:100% !important;box-sizing:border-box;padding-left:12px !important;padding-right:12px !important;}
  .hd-inner{width:100% !important;max-width:100% !important;box-sizing:border-box;padding-left:12px !important;padding-right:12px !important;}
  .menu .container,.ickey-stage{box-sizing:border-box;}

  /* detail: flatten column wrappers so blocks can reorder
     DOM order inside pd-left is stage + content, pd-right is
     buy card; visual order = stage -> buy -> content */
  .pd-wrap{flex-direction:column !important;gap:12px !important;max-width:100% !important;width:100% !important;margin:10px auto 16px !important;padding:0 2px !important;box-sizing:border-box;}
  .pd-left,.pd-right{display:contents !important;}
  .pd-stage{order:1;width:100%;box-sizing:border-box;}
  .pd-right .pd-buy{order:2;width:100%;box-sizing:border-box;flex:0 0 auto !important;position:static !important;top:auto !important;padding:14px;}
  .pd-content{order:3;width:100%;min-width:0;box-sizing:border-box;}

  /* gallery: responsive square image is the in-flow #picshower; rail + compare bar flow below it */
  .pd-stage #imageViewerFrame.gallery{padding-left:0 !important;margin:0 !important;width:100% !important;max-width:560px !important;}
  .pd-stage #picpointer{position:relative !important;width:100% !important;max-width:560px !important;height:auto !important;aspect-ratio:auto !important;flex:0 0 auto !important;margin:0 auto !important;}
  .pd-stage #picshower{position:relative !important;top:auto !important;left:auto !important;width:100% !important;height:auto !important;aspect-ratio:1/1 !important;}
  .pd-stage #picshower img#smallImage{width:100% !important;height:100% !important;object-fit:contain !important;}
  .pd-stage .pic_small{position:static !important;left:auto !important;top:auto !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:flex-start !important;width:100% !important;max-width:560px !important;height:auto !important;min-height:0 !important;max-height:none !important;margin:10px auto 0 !important;}
  #picpointer .pic_small .bt_before,#picpointer .pic_small .bt_next,
  #picpointer .pic_small.can-scroll .bt_before,#picpointer .pic_small.can-scroll .bt_next{display:none !important;width:0 !important;height:0 !important;margin:0 !important;overflow:hidden !important;}
  /* PK compare entry bar: desktop pins it at top:726/width720; make it a normal fluid row */
  .pd-stage .gallery-compare-bar{position:static !important;top:auto !important;left:auto !important;width:100% !important;max-width:560px !important;height:auto !important;margin:8px auto 0 !important;}
  .pd-stage #list_smallpic{flex:1 1 auto !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:0 !important;max-height:none !important;overflow-x:auto !important;overflow-y:hidden !important;}
  .pd-stage #list_smallpic ul{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;width:auto !important;height:auto !important;min-height:0 !important;}
  .pd-stage #list_smallpic ul li{flex:0 0 auto !important;width:64px !important;height:auto !important;margin:0 6px 0 0 !important;}
  .pd-stage #list_smallpic ul li a{width:60px !important;height:60px !important;}
  .pd-stage #list_smallpic ul li a img{width:54px !important;height:54px !important;}
  #specPanel{width:100% !important;max-width:560px !important;}

  /* outer tabs: single horizontal scroll row, never shrink */
  .pd-outer-tabs{display:flex;flex-wrap:nowrap;position:sticky;top:0;z-index:80;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
  .pd-outer-tabs .jtab{flex:0 0 auto !important;white-space:nowrap;}

  /* parameter list becomes single column */
  .pd-pane #c_introduce .detail-list li,
  .pd-pane #c_parameters .detail-list li{width:100% !important;}

  /* footer fluid */
  .yx_foot .mod_txtlink{height:auto !important;padding-bottom:10px;}
  .yx_foot .mod_txtlink li{height:auto !important;width:16.6% !important;min-width:140px;}
  .yx_foot .mod_slogan{height:auto !important;}
  .yx_foot .mod_slogan li{width:33% !important;height:auto !important;margin-bottom:8px;}
  .yx_foot .mod_copy{height:auto !important;padding:10px 0;}
  .yx_foot .mod_copy ul{width:auto !important;}
}

/* =====================================================
   TABLET PORTRAIT (<=1024px) : static fluid header
   ===================================================== */
@media (max-width:1024px){
  /* turn the fixed header into a natural fluid block. zkh_header.css declares
     these with !important and loads after this layer, so use #topdiv id
     (higher specificity) to win. */
  #topdiv.yx_head{position:static !important;top:auto !important;left:auto !important;right:auto !important;height:auto !important;min-height:0 !important;box-shadow:none !important;border-bottom:1px solid #eee;}
  /* body prefix beats cl/css/ickey_hero.css `#headercontent{height:139px!important}` (fixed placeholder).
     padding-top:35 reserves the fixed #shortcut top bar (35px) so the static logo row clears it. */
  body #headercontent{height:auto !important;min-height:0 !important;padding-top:35px !important;box-sizing:border-box;}
  /* legacy items are absolutely positioned; use bulletproof block+float flow */
  #topdiv .hd-inner{position:static !important;display:block !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:8px 12px !important;box-sizing:border-box;}
  #topdiv .hd-inner::after{content:"";display:block;clear:both;}
  #topdiv .hd-inner > div:nth-child(2){display:none !important;}   /* logo2 diamond (inline absolute) */
  #topdiv .hd-inner .clearfix{display:none !important;}
  #topdiv .logo{position:static !important;float:left !important;top:auto !important;left:auto !important;width:160px !important;height:54px !important;margin:0 !important;}
  #topdiv .logo h1{margin:0;height:100%;}
  #topdiv .logo .logo_bd{display:block !important;float:none !important;width:160px !important;height:54px !important;background-size:contain !important;background-position:left center !important;}
  #topdiv .car{position:relative !important;float:right !important;top:auto !important;right:auto !important;width:132px !important;height:40px !important;margin:6px 0 0 !important;}
  #topdiv .car .car-btn{position:static !important;display:block !important;}
  #topdiv .car .car-content{top:40px !important;}
  #topdiv .batch-btn{position:static !important;float:right !important;top:auto !important;right:auto !important;margin:12px 16px 0 0 !important;}
  #topdiv .search{position:static !important;float:none !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;transform:none !important;clear:both !important;display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;margin:8px 0 0 !important;}
  #topdiv .search-box{width:100% !important;box-sizing:border-box !important;}
  #topdiv .search-box form{box-sizing:border-box !important;}
  #topdiv .search-box input.data_q{width:calc(100% - 96px) !important;box-sizing:border-box !important;}
  #topdiv .search-box button{box-sizing:border-box !important;}
  #topdiv .hot_keywords{position:static !important;top:auto !important;left:auto !important;width:100% !important;box-sizing:border-box !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* nav: horizontal scroll */
  .menu .container{width:100% !important;}
  .ickey-stage{display:flex;align-items:center;}
  .ickey-right{flex:1 1 auto;min-width:0;}
  .menu-main{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .menu-main-left{white-space:nowrap;}
  .nav-tel{display:none;}

  .backtop{bottom:120px !important;}
  /* hide the desktop right-side floating quick toolbar (cart/coupon/follow/history/message); it overlaps content on tablet/phone */
  .toolbar.J-toolbar{display:none !important;}
}

/* =====================================================
   PHONE  (<=767px)
   ===================================================== */
@media (max-width:767px){
  html,body{max-width:100%;overflow-x:hidden;}
  #container.main{padding-left:8px !important;padding-right:8px !important;}
  .hd-inner{padding:8px !important;column-gap:8px;}

  /* ---- top thin bar ---- */
  #shortcut .zkh-topbar{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;}
  .zkh-tb-center{display:none !important;}
  .zkh-tb-right .zkh-drop{display:none !important;}
  .zkh-tb-right .zkh-dd-qr{display:none !important;}
  .zkh-phone,.zkh-tb-left{font-size:12px;}

  /* ---- rights notice (campaign bar) ---- */
  #PageTopNotice .yx_notice{font-size:12px;}
  #PageTopNotice .mod_mask{height:auto !important;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- header: logo + cart on row 1, search on row 2 (block+float). #topdiv id
     prefix is required to beat zkh_header.css !important rules (loaded later). */
  #topdiv.yx_head{padding:0 !important;}
  #topdiv .hd-inner{padding:6px 8px !important;}
  #topdiv .logo{width:132px !important;height:42px !important;}
  #topdiv .logo .logo_bd{width:132px !important;height:42px !important;}
  #topdiv .car{width:40px !important;height:40px !important;margin:0 !important;}
  #topdiv .car .car-btn a{height:40px;}
  #topdiv .car .car-btn a b{display:none !important;}   /* icon-only mini cart on phone */
  #topdiv .car .icon-buy{flex:0 0 40px !important;width:40px !important;}
  #topdiv .car .icon-buy::after{display:none !important;}
  #topdiv .batch-btn{display:none !important;}
  #topdiv .search{margin:6px 0 0 !important;}
  #topdiv .hot_keywords{display:none !important;}
  #topdiv .search-box input.data_q{width:calc(100% - 78px) !important;height:32px;}
  #topdiv .search-box button{width:66px;}

  /* ---- nav ---- */
  .menu{height:auto !important;}
  .menu-class{flex:0 0 auto;}
  .menu-class-title{height:36px !important;line-height:36px !important;}
  .menu-class-body{display:none !important;}
  .ickey-right{flex:1 1 auto;}
  .menu-main .menu-main-left{white-space:nowrap;}
  .menu-main .menu-main-left a{padding:0 12px;line-height:36px;font-size:14px;}
  .ickey-row{display:none !important;}

  /* ---- breadcrumb ---- */
  .crumbs{font-size:12px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- detail wrap ---- */
  .pd-wrap{margin:8px auto 12px !important;padding:0 !important;gap:10px !important;}
  .pd-stage{padding:8px !important;border-radius:6px;}
  .pd-content{border-radius:6px;}
  .pd-right .pd-buy{padding:12px !important;border-radius:6px;}
  .pd-stage #picpointer{max-width:100% !important;}
  #specPanel{max-width:100% !important;}

  /* ---- outer tabs ---- */
  .pd-outer-tabs{padding:0 6px !important;top:0;}
  .pd-outer-tabs .jtab{padding:12px 14px !important;font-size:14px !important;}
  .pd-pane{padding:12px 10px !important;min-height:200px;}

  /* ---- inner intro sub-tabs ---- */
  .pd-pane #introduction .hd li a{padding:9px 12px !important;font-size:13px !important;}
  .pd-pane #c_introduce .detail-list li,
  .pd-pane #c_parameters .detail-list li{display:flex;}
  .pd-pane #c_introduce .detail-list li>*:first-child,
  .pd-pane #c_parameters .detail-list li>*:first-child{min-width:72px !important;}

  /* ---- buy card ---- */
  .pd-shoprow{font-size:12px;}
  .pd-shoprow-ops{gap:10px;}
  .pd-buy .property h1{font-size:16px !important;}
  .pd-buy .price_font{font-size:26px !important;}
  .pd-buy #goods_detail_mate .li{padding-left:0 !important;}
  .pd-buy #goods_detail_mate .li>.t{position:static !important;width:auto !important;text-align:left !important;display:inline-block !important;margin-right:6px !important;}
  .pd-buy #goods_detail_mate .item_icson{padding-top:7px !important;}
  .pd-buy #goods_detail_mate .item_icson .pd-price-tools{position:static !important;margin:0 0 0 8px !important;}
  .pd-buy li.color-zone>.t,.pd-buy li.pack-zone>.t,.pd-buy li.qty-zone>.t{flex:0 0 100% !important;width:auto !important;min-width:0 !important;margin:0 0 6px !important;}
  .pd-buy li.color-zone,.pd-buy li.pack-zone,.pd-buy li.qty-zone{flex-wrap:wrap !important;}
  /* beat aspx L282 "flex-wrap:nowrap!important" (which gains specificity via :has()) so the label wraps to its own line and the option grid drops below instead of being pushed off-screen to the right */
  .pd-buy li.color-zone:has(ul.list_condition li),
  .pd-buy li.pack-zone:has(ul.list_condition li){display:flex !important;flex-wrap:wrap !important;align-items:flex-start !important;}
  .pd-buy li.color-zone:has(ul.list_condition li)>.t,
  .pd-buy li.pack-zone:has(ul.list_condition li)>.t{flex:0 0 100% !important;width:auto !important;min-width:0 !important;margin:0 0 6px !important;}
  .pd-buy li.color-zone:has(ul.list_condition li) ul.list_condition,
  .pd-buy li.pack-zone:has(ul.list_condition li) ul.list_condition{flex:0 0 100% !important;width:100% !important;min-width:0 !important;margin:0 !important;}
  /* option grids: full width, compact columns; collapse empty (anonymous/no-options) rows */
  .pd-buy li.color-zone ul.list_condition,
  .pd-buy li.pack-zone ul.list_condition{flex:0 0 100% !important;width:100% !important;min-width:0 !important;height:auto !important;min-height:0 !important;max-height:none !important;}
  .pd-buy li.color-zone ul.list_condition{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;}
  .pd-buy li.color-zone ul.list_condition li{flex:none !important;width:auto !important;}
  .pd-buy li.color-zone:not(:has(ul.list_condition li)),
  .pd-buy li.pack-zone:not(:has(ul.list_condition li)){display:none !important;}
  .pd-buy ul.list_condition li a{min-height:48px;}
  /* stock row wraps instead of overflowing */
  .pd-buy li.stock{white-space:normal !important;line-height:1.7 !important;}
  /* action buttons full width, stacked */
  .pd-buy .wrap_btn{flex-direction:column;gap:8px;}
  .pd-buy .wrap_btn .btn_cart,.pd-buy .wrap_btn .btn_buynow{flex:1 1 auto !important;width:100%;height:44px;line-height:44px;font-size:16px;}
  .pd-buy .wrap_btn .jd-steward{display:none !important;}
  .pd-buy .wrap_btn .pd-buy-ops{flex:0 0 100%;justify-content:center;margin:4px 0 0 !important;}

  /* ---- shop pane ---- */
  .pd-shop-card{flex-direction:column;align-items:flex-start;padding:14px;}
  .pd-shop-card-btns{width:100%;}
  .pd-shop-card-btns a{flex:1;text-align:center;}

  /* ---- recommend grids ---- */
  .pd-pane .list_goods{grid-template-columns:repeat(2,1fr) !important;}
  .brand-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr)) !important;}

  /* ---- footer ---- */
  .yx_foot{padding-top:20px;}
  .yx_foot .mod_txtlink li{width:33.3% !important;min-width:0;padding:0 6px;box-sizing:border-box;}
  .yx_foot .mod_slogan{display:none !important;}
  .yx_foot .mod_copy ul{width:100% !important;display:flex;flex-wrap:wrap;justify-content:center;}
  .yx_foot .mod_copy li{margin:0 6px;}

  /* ---- floating side / compare bars ---- */
  .backtop{display:none !important;}
  #J-global-toolbar{left:0 !important;right:0 !important;width:100% !important;}
}

/* small phones: tighter */
@media (max-width:380px){
  .pd-pane .list_goods{grid-template-columns:repeat(2,1fr) !important;}
  .pd-buy ul.list_condition li a{padding:5px 6px;}
}