/* ============================================================
   JISHI GLOBAL STYLE SYSTEM
   Version 2026
============================================================ */


/* ============================================================
   RESET
============================================================ */


*{

margin:0;

padding:0;

box-sizing:border-box;

}



body{

font-family:

"Segoe UI",
Arial,
"Microsoft YaHei",
sans-serif;

background:#f7f5f2;

color:#333;

}



a{

text-decoration:none;

color:inherit;

}



img{

max-width:100%;

display:block;

}





/* ============================================================
   HEADER / NAVIGATION
============================================================ */


.site-header{

background:#fff;

box-shadow:

0 2px 8px rgba(0,0,0,.06);

position:sticky;

top:0;

z-index:1000;

}




.site-nav{

max-width:1500px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:15px 25px;

gap:18px;

}



.logo{

font-family:Georgia,serif;

font-size:26px;

font-weight:bold;

letter-spacing:3px;

color:#2c5f4f;

white-space:nowrap;

}




.nav-links{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

list-style:none;

flex-wrap:nowrap;

white-space:nowrap;

flex:1 1 auto;

min-width:0;

}




.nav-links a{

font-size:13.5px;

color:#555;

transition:.2s;

white-space:nowrap;

}



.nav-links a:hover,

.nav-links a.active{

color:#2c5f4f;

font-weight:600;

}





.nav-tools{

display:flex;

align-items:center;

gap:18px;

white-space:nowrap;

}





/* ============================================================
   CART ICON
============================================================ */


.cart-icon{

position:relative;

font-size:21px;

cursor:pointer;

display:inline-flex;

align-items:center;

}



.cart-badge{

position:absolute;

top:-10px;

right:-13px;

background:#c0392b;

color:white;

font-size:11px;

font-weight:bold;

line-height:18px;

height:18px;

min-width:18px;

padding:0 5px;

border-radius:20px;

text-align:center;

}





/* ============================================================
   ACCOUNT
============================================================ */


.account-icon{

font-size:14px;

color:#444;

cursor:pointer;

}



.account-icon:hover{

color:#2c5f4f;

}





/* ============================================================
   BUTTON
============================================================ */


.btn{


display:inline-block;

padding:11px 24px;

border:none;

border-radius:8px;

cursor:pointer;

background:#2c5f4f;

color:#fff;

font-size:14px;

transition:.2s;

text-align:center;

}



.btn:hover{

background:#234d3f;

}





.btn-outline{


background:#fff;

color:#2c5f4f;

border:1px solid #2c5f4f;


}



.btn-outline:hover{


background:#eef5f2;


}




.btn-wa{


background:#25D366;

color:#fff;


}



.btn-danger{

background:#c0392b;

color:white;

}







/* ============================================================
   PAGE CONTAINER
============================================================ */


.container{


max-width:1200px;

margin:auto;

padding:40px 20px;


}





.card{


background:#fff;

border-radius:14px;

padding:25px;

box-shadow:

0 3px 12px rgba(0,0,0,.08);


}







/* ============================================================
   TITLE
============================================================ */


.page-title{


font-size:32px;

font-family:Georgia,serif;

color:#2c5f4f;

margin-bottom:10px;


}




.sub{


font-size:14px;

color:#888;


}



/* ============================================================
   PRODUCT CARD
============================================================ */


.product-grid,
.products-grid{


display:grid;

grid-template-columns:

repeat(auto-fill,minmax(260px,1fr));

gap:25px;


}




.product-card{


background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:

0 3px 12px rgba(0,0,0,.08);

transition:.25s;


}




.product-card:hover{


transform:translateY(-5px);


}





.product-image,
.product-img{


height:260px;

background:#f5f5f5;

display:flex;

align-items:center;

justify-content:center;


}




.product-image img,
.product-img img{


width:100%;

height:100%;

object-fit:contain;


}





.product-info{


padding:20px;


}





.product-info h3{


font-size:17px;

line-height:1.5;

margin:10px 0;


}





.price,
.product-price{


font-size:20px;

font-weight:bold;

color:#2c5f4f;


}




.moq,
.product-moq{


font-size:13px;

color:#888;

margin-top:8px;


}




.desc,
.product-desc{


font-size:13px;

line-height:1.6;

color:#777;


}







/* ============================================================
   CART PAGE
============================================================ */


.cart-layout{


display:flex;

gap:30px;

flex-wrap:wrap;

align-items:flex-start;


}




.cart-main{


flex:2;

min-width:320px;


}



.cart-side{


flex:1;

min-width:280px;


}





.cart-item{


display:flex;

align-items:center;

gap:18px;

padding:18px 0;

border-bottom:1px solid #eee;


}




.cart-item img{


width:90px;

height:90px;

object-fit:contain;

background:#f5f5f5;

border-radius:10px;


}




.cart-item .info{


flex:1;


}




.qty{


display:flex;

align-items:center;

gap:10px;


}





.qty button,
.qty-btn{


width:30px;

height:30px;

border:1px solid #ddd;

background:#fff;

cursor:pointer;

border-radius:6px;


}




.qty input{


width:60px;

text-align:center;


}





.line-total{


font-weight:bold;

color:#2c5f4f;


}







/* ============================================================
   SUMMARY
============================================================ */


.summary-row{


display:flex;

justify-content:space-between;

padding:12px 0;

font-size:14px;


}



.summary-row.total{


border-top:2px solid #2c5f4f;

margin-top:15px;

padding-top:18px;

font-size:18px;

font-weight:bold;


}







/* ============================================================
   LOGIN / REGISTER
============================================================ */


.auth-box{


max-width:420px;

margin:60px auto;


}



.auth-box .card{


padding:35px;


}





label{


display:block;

font-size:13px;

color:#555;

margin:12px 0 5px;


}




input,
textarea,
select{


width:100%;

padding:11px;

border:1px solid #ddd;

border-radius:8px;

font-size:14px;

font-family:inherit;


}




input:focus,
textarea:focus,
select:focus{


outline:none;

border-color:#2c5f4f;


}







.err-msg{


color:#c0392b;

font-size:13px;

margin-top:10px;


}







/* ============================================================
   ACCOUNT PAGE
============================================================ */


.tabs{


display:flex;

gap:5px;

border-bottom:2px solid #eee;

margin-bottom:25px;

flex-wrap:wrap;


}





.tab-btn{


padding:10px 20px;

border:none;

background:none;

cursor:pointer;

font-size:14px;

color:#666;


}



.tab-btn.active{


color:#2c5f4f;

border-bottom:3px solid #2c5f4f;

font-weight:bold;


}







.tab-pane{


display:none;


}



.tab-pane.active{


display:block;


}






.address-card{


background:#fff;

padding:18px;

border-radius:10px;

margin-bottom:15px;

box-shadow:

0 2px 8px rgba(0,0,0,.06);


}







/* ============================================================
   EMPTY / LOADING
============================================================ */


.loading,
.empty-cart{


text-align:center;

padding:80px 20px;

color:#999;


}







/* ============================================================
   FOOTER
============================================================ */


.site-footer{


background:#222;

color:#bbb;

text-align:center;

padding:35px 20px;

margin-top:60px;

font-size:13px;


}



.site-footer a{


color:#8fd0b5;


}







/* ============================================================
   DESKTOP NAV SINGLE-ROW LAYOUT
   Keep all primary navigation items on one horizontal line.
============================================================ */
@media (min-width: 801px) and (max-width: 1180px){

.site-nav{
  padding-left:16px;
  padding-right:16px;
  gap:12px;
}

.logo{
  font-size:24px;
  letter-spacing:2px;
}

.nav-links{
  gap:11px;
}

.nav-links a{
  font-size:12px;
}

.nav-tools{
  gap:10px;
}

}


/* ============================================================
   MOBILE
============================================================ */


@media(max-width:800px){



.site-nav{


flex-direction:column;

align-items:flex-start;


}



.nav-links{


display:none;


}



.nav-tools{


width:100%;

justify-content:flex-end;


}




.cart-layout{


flex-direction:column;


}



.product-card{


width:100%;


}



.product-grid,
.products-grid{


grid-template-columns:

1fr;


}



}
/* ============================================================
   TOAST MESSAGE
============================================================ */


.toast-mask{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.45);

z-index:3000;

align-items:center;

justify-content:center;

padding:20px;


}



.toast-mask.show{


display:flex;


}





.toast-box{


background:#fff;

width:360px;

max-width:100%;

border-radius:16px;

padding:35px;

text-align:center;


}



.toast-box .icon{


font-size:50px;

margin-bottom:15px;


}




.toast-box h3{


color:#2c5f4f;

margin-bottom:10px;


}




.toast-box p{


font-size:14px;

color:#777;

line-height:1.6;


}







/* ============================================================
   SIDE CART
============================================================ */


.sidecart-mask{


display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.4);

z-index:2000;


}



.sidecart-mask.show{


display:block;


}






.sidecart{


position:fixed;

top:0;

right:-420px;

width:390px;

max-width:90vw;

height:100%;

background:#fff;

z-index:2001;

transition:.3s;

display:flex;

flex-direction:column;

box-shadow:

-5px 0 20px rgba(0,0,0,.15);


}




.sidecart.show{


right:0;


}





.sidecart-head{


padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

border-bottom:1px solid #eee;


}




.sidecart-head h3{


color:#2c5f4f;


}




.sidecart-close{


background:none;

border:none;

font-size:22px;

cursor:pointer;


}





.sidecart-body{


flex:1;

overflow:auto;

padding:20px;


}





.sidecart-item{


display:flex;

gap:12px;

padding:12px 0;

border-bottom:1px solid #eee;


}





.sidecart-item img{


width:65px;

height:65px;

object-fit:contain;

background:#f5f5f5;

border-radius:8px;


}




.sidecart-item .name{


font-size:13px;

line-height:1.5;


}




.sidecart-item .price{


font-size:13px;

color:#2c5f4f;


}







.sidecart-foot{


padding:20px;

border-top:1px solid #eee;


}





.sidecart-total{


display:flex;

justify-content:space-between;

font-weight:bold;

margin-bottom:15px;


}








/* ============================================================
   TABLE
============================================================ */


.table{


width:100%;

border-collapse:collapse;

font-size:14px;


}




.table th,
.table td{


border-bottom:1px solid #eee;

padding:12px;

text-align:left;


}



.table th{


background:#f7f7f7;


}







/* ============================================================
   PRODUCT DETAIL EXTRA
============================================================ */


.product-layout{


display:flex;

gap:50px;

flex-wrap:wrap;


}




.gallery{


flex:1;

min-width:320px;


}



.info{


flex:1;

min-width:320px;


}







/* ============================================================
   BADGE HIDDEN
============================================================ */


.cart-badge:empty{


display:none;


}







/* ============================================================
   SMALL SCREEN FIX
============================================================ */


@media(max-width:600px){


.logo{

font-size:22px;

}



.nav-tools{

gap:12px;

}



.account-icon{

font-size:13px;

}



.cart-item{

flex-wrap:wrap;

}



.cart-item img{

width:70px;

height:70px;

}


}

/* ============================================================
   JISHI LANGUAGE SWITCHER
============================================================ */
.jishi-language-wrap{
    display:flex;
    align-items:center;
    gap:7px;
    flex-shrink:0;
    white-space:nowrap;
}

.jishi-language-label{
    font-size:12px;
    color:#666;
}

.jishi-language-select{
    appearance:none;
    -webkit-appearance:none;
    min-width:108px;
    height:34px;
    padding:0 28px 0 10px;
    border:1px solid #ddd;
    border-radius:4px;
    background:#fff;
    color:#111;
    font:inherit;
    font-size:12px;
    cursor:pointer;
    outline:none;
    background-image:linear-gradient(45deg,transparent 50%,#555 50%),linear-gradient(135deg,#555 50%,transparent 50%);
    background-position:calc(100% - 12px) 14px,calc(100% - 8px) 14px;
    background-size:4px 4px,4px 4px;
    background-repeat:no-repeat;
}

.jishi-language-select:hover,
.jishi-language-select:focus{
    border-color:#999;
}

#google_translate_element{
    display:none!important;
}

@media(max-width:900px){
    .jishi-language-wrap{
        order:3;
    }

    .jishi-language-label{
        display:none;
    }

    .jishi-language-select{
        min-width:98px;
    }
}

@media(max-width:600px){
    .jishi-language-select{
        min-width:92px;
        height:32px;
        font-size:11px;
    }
}



/* ============================================================
   PRODUCT MANUAL / B2B DETAIL SECTIONS
============================================================ */
.product-manual{max-width:1200px;margin:55px auto 20px;padding:0 20px 70px}
.pm-section{border-top:1px solid #e8e8e8;padding:34px 0}
.pm-section h2{font-size:26px;color:#2c5f4f;margin:0 0 18px;font-family:Georgia,serif;letter-spacing:.2px}
.pm-section p{color:#5f6870;line-height:1.9;font-size:15px;max-width:1000px;margin:0}
.pm-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;max-width:1050px}
.pm-list li{position:relative;padding:13px 16px 13px 38px;background:#f7f8f7;border-radius:8px;color:#4d575d;line-height:1.6}
.pm-list li:before{content:"✓";position:absolute;left:14px;top:12px;color:#2c5f4f;font-weight:700}
.pm-spec-table{width:100%;max-width:900px;border-collapse:collapse;background:#fff;border:1px solid #e6e9e7;border-radius:8px;overflow:hidden}
.pm-spec-table th,.pm-spec-table td{text-align:left;padding:13px 16px;border-bottom:1px solid #eceeed;vertical-align:top}
.pm-spec-table th{width:32%;background:#f7f8f7;color:#2c5f4f;font-weight:600}
.pm-spec-table tr:last-child th,.pm-spec-table tr:last-child td{border-bottom:0}
.pm-faq{max-width:1000px;border:1px solid #e5e8e6;border-radius:8px;margin:10px 0;background:#fff}
.pm-faq summary{cursor:pointer;padding:16px 18px;font-weight:600;color:#33413b;list-style:none}
.pm-faq summary::-webkit-details-marker{display:none}
.pm-faq summary:after{content:"+";float:right;color:#2c5f4f;font-size:20px}
.pm-faq[open] summary:after{content:"−"}
.pm-faq div{padding:0 18px 17px;color:#606a70;line-height:1.8}
.pm-download{background:#f7f8f7;border-radius:10px;padding:30px 24px;margin-top:10px}
.pm-manual-btn{display:inline-block;margin-top:16px;background:#2c5f4f;color:#fff;text-decoration:none;padding:12px 20px;border-radius:7px}
.pm-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pm-related-card{text-decoration:none;border:1px solid #e6e9e7;border-radius:9px;overflow:hidden;background:#fff;color:#33413b;transition:transform .15s ease,box-shadow .15s ease}
.pm-related-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.07)}
.pm-related-card img{width:100%;height:190px;object-fit:contain;background:#f5f5f5;display:block}
.pm-related-card span{display:block;padding:13px 15px;line-height:1.5}
@media(max-width:700px){.pm-list,.pm-related{grid-template-columns:1fr}.pm-section h2{font-size:23px}.pm-spec-table th{width:38%}}


/* ============================================================
   KITCHEN MANUAL VISUAL REFERENCE
============================================================ */
.pm-kitchen-manual{padding-top:46px}
.pm-manual-heading{max-width:1050px;margin-bottom:28px}
.pm-eyebrow{display:inline-block;font-size:11px;letter-spacing:2px;color:#7b765f;font-weight:700;margin-bottom:10px}
.pm-manual-heading h2{font-size:30px;line-height:1.25;margin-bottom:14px}
.pm-manual-heading p{max-width:1000px}
.pm-manual-pages{display:grid;grid-template-columns:1fr;gap:28px}
.pm-manual-page{margin:0;background:#fff;border:1px solid #e6e9e7;border-radius:12px;overflow:hidden;box-shadow:0 5px 22px rgba(0,0,0,.045)}
.pm-manual-page-image{background:#f5f6f4;padding:18px;text-align:center}
.pm-manual-page-image img{display:block;width:100%;max-width:1120px;height:auto;margin:0 auto;border-radius:7px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.pm-manual-page figcaption{padding:18px 22px 20px}
.pm-page-number{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#8a8f8b;font-weight:700}
.pm-manual-page h3{margin:6px 0 7px;color:#2c5f4f;font-family:Georgia,serif;font-size:20px;line-height:1.35}
.pm-manual-page p{font-size:14px;line-height:1.7;color:#667078;margin:0;max-width:980px}
@media(max-width:700px){
  .pm-manual-heading h2{font-size:24px}
  .pm-manual-page-image{padding:9px}
  .pm-manual-page figcaption{padding:14px 15px 16px}
}


/* JISHI 250+ multilingual + mobile additive patch */
.jishi-language-wrap{display:flex;align-items:center;gap:7px;max-width:100%;}.jishi-language-select{max-width:210px;border:1px solid #d8ddda;background:#fff;border-radius:6px;padding:7px 9px;font-size:12px;}.jishi-language-label{font-size:12px;color:#66716d;white-space:nowrap;}
@media(max-width:700px){.jishi-language-wrap{width:100%;justify-content:flex-end}.jishi-language-label{display:none}.jishi-language-select{max-width:190px}.site-nav{flex-wrap:wrap}.nav-links{overflow-x:auto;max-width:100%;}.nav-tools{flex-wrap:wrap;max-width:100%;}.product-layout{grid-template-columns:1fr!important}.gallery,.info{width:100%!important}.main-image img{max-width:100%;height:auto}.thumbs{overflow-x:auto;display:flex;flex-wrap:nowrap}.thumbs .thumb{flex:0 0 72px}.products-grid,.cat-grid,.related-grid{grid-template-columns:1fr!important}.content-section,.detail-card{max-width:100%;overflow-x:auto}.variant-table{min-width:620px}.product-video-grid{grid-template-columns:1fr!important}.product-video-card video{width:100%;height:auto}.modal-box{max-width:calc(100vw - 24px)!important;padding:18px!important}.pimg-grid{grid-template-columns:repeat(4,minmax(55px,1fr))!important}.jishi-language-wrap + .cart-icon,.jishi-language-wrap + .account-icon{margin-left:4px}}

/* JISHI MOBILE NAVIGATION FIX 2026-09 */

/* JISHI MOBILE NAVIGATION FIX 2026-09 */
.mobile-menu-toggle{
  display:none;
  appearance:none;
  border:0;
  background:transparent;
  color:#333;
  width:42px;
  height:42px;
  padding:0;
  margin:0;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  flex:0 0 42px;
}
.mobile-menu-toggle span{
  display:block;
  width:23px;
  height:2px;
  background:#333;
  border-radius:2px;
  transition:.2s ease;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 900px){
  .site-nav{position:relative;padding:12px 16px;gap:10px;min-height:64px}
  .site-nav > nav{display:block;position:absolute;left:0;right:0;top:100%;z-index:1100;background:#fff;border-top:1px solid #eee;box-shadow:0 8px 22px rgba(0,0,0,.10);display:none}
  .site-nav.mobile-menu-open > nav{display:block}
  .site-nav:not(.mobile-menu-open) > .nav-links{display:none !important}
  .site-nav.mobile-menu-open > .nav-links{display:flex !important;position:absolute;left:0;right:0;top:100%;z-index:1100;background:#fff;border-top:1px solid #eee;box-shadow:0 8px 22px rgba(0,0,0,.10);margin:0}
  .nav-links{display:flex !important;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 14px;white-space:normal}
  .nav-links li{width:100%;list-style:none}
  .nav-links a{display:block;padding:13px 10px;font-size:15px;border-bottom:1px solid #f0f0f0;white-space:normal}
  .nav-links li:last-child a{border-bottom:0}
  .mobile-menu-toggle{display:flex}
  .site-nav > .nav-tools{margin-left:auto;gap:9px;flex:0 1 auto}
  .account-icon{font-size:0}
  .account-icon::before{content:'👤';font-size:21px}
  .cart-icon{font-size:20px}
  .jishi-language-wrap{display:flex!important;align-items:center}
  .jishi-language-label{display:none!important}
  .jishi-language-select{max-width:110px;min-height:36px;font-size:12px}
  body{overflow-x:hidden}
}
@media (max-width: 520px){
  .site-nav{padding:10px 12px}
  .logo{font-size:23px;letter-spacing:2.5px}
  .site-nav > .nav-tools{gap:6px}
  .jishi-language-select{max-width:92px;padding:7px 5px}
}


/* JISHI mobile navigation enhancement */
.mobile-menu-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:10px;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.mobile-menu-toggle span{display:block;width:22px;height:2px;background:#1f2b27;transition:.2s}
@media(max-width:800px){
  .site-header{position:sticky;top:0}
  .site-nav{height:auto;min-height:64px;flex-direction:row!important;align-items:center!important;padding:10px 16px!important;gap:8px!important}
  .site-nav .logo{flex:0 0 auto}
  .mobile-menu-toggle{display:flex}
  .site-nav .nav-tools{width:auto!important;margin-left:0;gap:8px!important}
  .site-nav .nav-tools .account-icon{font-size:0}
  .site-nav .nav-tools .account-icon:before{content:'👤';font-size:20px}
  .site-nav .nav-tools .cart-icon{font-size:20px}
  .site-nav .nav-links{display:none!important;position:absolute;left:0;right:0;top:64px;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:10px 16px 16px;flex-direction:column;align-items:stretch;gap:0;z-index:1200}
  .site-nav.mobile-menu-open .nav-links{display:flex!important}
  .site-nav .nav-links li{width:100%}
  .site-nav .nav-links a{display:block;padding:13px 8px;border-bottom:1px solid #eee;font-size:14px}
  .site-nav .nav-links li:last-child a{border-bottom:0}
  .site-nav.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
  .site-nav.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}


/* JISHI MOBILE CATEGORY SAFETY */
@media(max-width:900px){
  #catProducts,.cat-grid,.products-grid{height:auto!important;max-height:none!important;overflow:visible!important;}
  .cat-grid .product-card,.products-grid .product-card{height:auto!important;max-height:none!important;}
  .site-nav{z-index:2000;}
  .site-nav .mobile-menu-toggle{position:relative;z-index:2100;flex:0 0 44px;}
  .site-nav.mobile-menu-open .nav-links,.site-nav.jishi-mobile-open .nav-links{display:flex!important;}
}

.catalog-pagination{max-width:1200px;margin:24px auto 60px;text-align:center;padding:0 20px}.catalog-pagination p{color:#5b6d63;font-size:14px}.catalog-pagination button{background:#2c5f4f;color:white;border:0;border-radius:8px;padding:14px 28px;font:inherit;cursor:pointer;min-height:48px}.catalog-pagination button:disabled{opacity:.6;cursor:wait}.catalog-placeholder{grid-column:1/-1;min-height:220px;display:grid;place-items:center;color:#5b6d63}.product-image{aspect-ratio:4/3}.product-image img{width:100%;height:100%;object-fit:cover}