/* Reset & Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:root{
  --container: 980px;
  --text:#222; --muted:#666; --line:#e6e6e6;
  --title-font: 'Helvetica Neue', Arial, 'PingFang SC','Microsoft YaHei', sans-serif;
  --body-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'PingFang SC','Microsoft YaHei', sans-serif;
}
body{font-family:var(--body-font);color:var(--text);line-height:1.6;background:#fff}

/* Header */
.header{border-bottom:none;background:#fff;margin-bottom:30px}
.header .bar{max-width:var(--container);margin:0 auto;padding:8px 16px;display:flex;justify-content:space-between;align-items:center;position: relative;}
.header .topnav a{font-size:14px;font-weight:400;font-family:Montserrat,sans-serif;color:#777;margin-right:12px;letter-spacing:.16em;text-transform:uppercase}
.header .topnav{display:flex;align-items:center;justify-content:space-between}
.header .topnav .lang-switch {margin-left:auto;position: absolute;right: 0;z-index: 99;color: #eee;}
.header .topnav .lang-switch a:first-child {margin-right: 0;}
.header .actions a{font-size:11px;color:#777;margin-left:12px;letter-spacing:.14em;text-transform:uppercase}
.header .brandrow{max-width:var(--container);margin:15px auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.logo{font-family:var(--title-font);font-weight:700;font-size:20px;letter-spacing:.02em}
.logo img {display: block;max-height: 22px;max-width: 90%;}
.header .search{display:flex;gap:8px;align-items:center}
 .header .search input{padding:8px;border:1px solid var(--line);border-radius:6px;width:220px}
 .header .search form{position:relative}
 .header .brandrhs .search{position:relative}
  .header .brandrhs .search .search-ico{position:absolute;right:10px;left:auto;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#888;cursor:pointer;background:none;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
  .header .brandrhs .search input{padding:8px 32px 8px 8px}
  .header .brandrhs{display:flex;gap:8px;align-items:center}
 .menu-toggle{display:none;border:1px solid #222;background:#fff;color:#111;padding:6px 10px;border-radius:4px;font-size:14px;line-height:1}
.header .bar .search-inline{display:none}
/* toast message */
.toast-mask{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:1000;min-height:100vh}
.toast-mask.active{opacity:1;pointer-events:auto}
.toast{position:relative;background:#fff;color:#111;border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 14px 40px rgba(0,0,0,.18);font-size:15px;opacity:0;transform:scale(.96);transition:opacity .18s ease,transform .18s ease;text-align:center;max-width:320px;width:calc(100% - 48px)}
.toast.active{opacity:1;transform:scale(1)}
.toast .toast-msg{display:inline-block}
.toast .toast-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#ff5252;color:#fff;font-size:14px;font-weight:600;margin-right:8px}
/* inline toast under search */
.toast-inline{position:absolute;left:0;top:calc(100% + 6px);background:#fff;color:#111;border:1px solid var(--line);border-radius:8px;padding:8px 10px;box-shadow:0 10px 30px rgba(0,0,0,.12);font-size:13px;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;z-index:1000;max-width:320px}
.toast-inline.active{opacity:1;transform:translateY(0)}
.toast-inline .toast-msg{display:inline-block}
.toast-inline .toast-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#ff5252;color:#fff;font-size:12px;font-weight:600;margin-right:6px}
.toast-inline::after{content:"";position:absolute;top:-6px;left:14px;border-width:6px;border-style:solid;border-color:transparent transparent #fff transparent}
/* input error highlight */
.header .search input.error{border-color:#e33;box-shadow:0 0 0 3px rgba(227,51,51,.12)}
.cart-btn{border:1px solid #222;background:#fff;color:#111;padding:6px 10px;border-radius:4px;font-size:12px}

/* phone link in mobile menu */
.header .topnav .phone-link{display:none;color:#111;font-weight:600}
.header .topnav .phone-link svg{width:16px;height:16px;color:#555;margin-right:6px}

@media (max-width: 480px){
  .toast{text-align:center}
  .header{margin-bottom:24px}
  .header .brandrow{margin:0 auto;padding:10px 12px}
  .header .logo{font-size:18px}
  .menu-toggle{display:block}
  /* dropdown panel */
  .header .bar{display:none;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 6px 20px rgba(0,0,0,.06);margin-top:8px}
  .header .brandrhs .search{display:none}
  .header .bar .search{display:none;margin-bottom:8px}
   .header .bar .search form{position:relative}
   .header .bar .search input{width:100%;padding:8px 32px 8px 8px}
   .header .bar .search .search-ico{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#888;background:none;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
   .header.menu-open .bar{display:block;position: absolute;z-index: 99;width: 100%;}
   .header.menu-open .bar .search{display:block}
  /* vertical nav */
  .header .topnav{display:flex;flex-direction:column;align-items:center;gap:8px;overflow-x:visible;white-space:normal;-webkit-overflow-scrolling:auto;padding:15px 0;}
  .header .topnav a{display:block;font-size:14px;margin-right:0;letter-spacing:.08em;padding:8px 0;text-align:center}
  /* keep language links on one line + center alignment */
  .header .topnav .nav-links{display:flex;flex-direction:column;align-items:center}
  .header .topnav .lang-switch{display:flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;align-self:center;margin-left:0;position: inherit;}
  .header .topnav .lang-switch a{display:inline;padding:0;}
  /* phone at bottom */
  .header .topnav .phone-link{display:inline-flex;align-items:center;gap:6px;padding:10px 0;margin-top:6px;border-top:1px solid var(--line)}
}

/* Sections */
.section{max-width:var(--container);margin:26px auto;padding:0 16px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.section-title{font-family:var(--title-font);font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:#111;margin:0}
.section-link{font-size:11px;color:#777;letter-spacing:.18em;text-transform:uppercase}

/* Hero */
.hero{max-width:var(--container);margin:18px auto;padding:0 16px}
.hero .media{height:280px;border-radius:6px;background:#f4f4f4;background-position:center;background-size:cover}

/* Product grid */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{background:transparent}
.card .thumb{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.04);display: flex;justify-content: center;align-items: center;padding:5px;}
.card .thumb img {max-height:100%;max-width:100%}
.card .name{font-size:12px;/* font-weight:600; */margin:8px 0 4px;text-align:center;}
.card .price{font-size:12px;color:#444;text-align:center;margin-bottom:4px}
.card .desc{display:none}
.card .btn{display:block;margin:6px auto 10px;border:1px solid #222;background:#fff;color:#111;padding:6px 10px;border-radius:4px;font-size:12px;width:max-content}

/* Banner */
.banner{position:relative;max-width:var(--container);margin:24px auto;padding:0 16px}
.banner .media{height:500px;border-radius:6px;background-position:center;background-size:cover}
.banner .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.banner .cta{border:1px solid #1890ff;background:#1890ff;color:#fff;padding:10px 18px;border-radius:4px;letter-spacing:.08em;opacity: .9;}


/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{border:1px solid var(--line);border-radius:6px;background:#fff}
.tile .media{height:160px;background:#f5f5f5;border-bottom:1px solid var(--line);overflow: hidden;}
.tile .label{text-align:center;padding:10px 0;font-weight:600}

/* About */
.about{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
.about .photo{border-radius:6px;background-position:center;background-size:cover}
.about p{color:#555;margin:8px 0;font-size: 14px;line-height:2;}
.about .more{border:1px solid #222;background:#fff;color:#111;padding:8px 12px;border-radius:4px;font-size:12px;width:max-content}

/* Store & feed */
.store-feed{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.store-card{border:1px solid var(--line);border-radius:6px;padding:12px}
.store-card .photo{height:160px;border-radius:6px;background-position:center;background-size:cover}
.store-card .controls{display:flex;gap:8px;margin-top:10px}
.feed .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.feed .item{height:80px;border-radius:6px;background:#f4f4f4}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fafafa;margin-top:26px;padding-top: 10px;}
.footer .wrap{max-width:var(--container);margin:0 auto;padding:18px 16px}
.footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.footer h4{font-family:var(--title-font);font-size:14px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.footer ul{list-style:none;margin:0;padding:0;color:#555;font-size: 13px;}
.footer li{margin:6px 0}
.subscribe{display:flex;gap:8px}
.subscribe input{flex:1;padding:8px;border:1px solid var(--line);border-radius:6px}
.footer .legal{margin-top:14px;color:#999;font-size:13px;text-align:center;line-height:2}
.footer .legal a{color:inherit}
.footer .legal a:hover{color:#000}
/* Social icon bar */
.social-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;display:flex;justify-content:center;gap:18px;margin-top:20px}
.social-bar a{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:#999;transition:color .2s ease, transform .2s ease}
.social-bar a:hover{color:#111;transform:scale(1.06)}
.social-bar svg{width:20px;height:20px;display:block}

/* Header with main nav (PLP/PDP) */
.mainnav{border-bottom:1px solid var(--line)}
.mainnav .row{max-width:var(--container);margin:0 auto;padding:12px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center}
.mainnav .brand{font-family:var(--title-font);font-weight:700;font-size:22px}
.mainnav .nav a{font-size:12px;color:#555;margin-right:12px;letter-spacing:.12em;text-transform:uppercase}
.mainnav .tools{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.mainnav input[type=search]{border:1px solid var(--line);padding:6px 8px;border-radius:4px;font-size:12px}
.mainnav .mini{font-size:11px;color:#777}
.mainnav .cart{border:1px solid #222;background:#fff;color:#111;padding:6px 10px;border-radius:4px;font-size:12px}

/* PLP */
.breadcrumbs {max-width:var(--container);margin:8px auto 0;padding:0 16px;color:#888;font-size:12px}
.breadcrumbs div a.crumb {padding-right: 10px;}
.breadcrumbs div a:last-child {padding-left: 10px;}
.plp-head{max-width:var(--container);margin:12px auto;padding:0 16px;display:flex;justify-content:space-between;align-items:center}
.plp-title{font-family:var(--title-font);font-size:18px;letter-spacing:.22em;text-transform:uppercase}
.plp-sort{display:flex;gap:8px;align-items:center;color:#777}
.plp-sort select{border:1px solid #ccc;background:#fff;padding:6px 8px;border-radius:0;font-size:12px}
/* view toggle buttons */
.view-toggle{display:inline-flex;gap:6px;align-items:center}
.view-btn{border:1px solid var(--line);background:#fff;color:#555;width:28px;height:28px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.view-btn:hover{border-color:#bbb;color:#222}
.view-btn.active{border-color:#222;color:#111}
.view-btn svg{display:block}
.pagination{max-width:var(--container);margin:18px auto;padding:0 16px;display:flex;gap:6px;justify-content:center}
.page{padding:6px 10px;border:1px solid var(--line);border-radius:16px;font-size:12px;color:#555}
.page.current{border-color:#222;color:#222}
/*分页相关*/
.pagelist ul{text-align:center;margin:20px 0;font-size:12px;}
.pagelist li{display:inline-block;margin:0 2px;}
.pagelist li a{color:#666;display:inline-block;border:1px solid #ddd;padding:5px 12px; border-radius: 3px;}
.pagelist li a:hover{border-color:#1890ff;background:#1890ff;color:#fff;}
.pagelist li.active a{border-color:#1890ff;background:#1890ff;color:#fff;}

/* List view styles for PLP grid */
  .grid-5.list-view{display:block}
  .grid-5.list-view .card{display:grid;grid-template-columns:120px 1fr max-content;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
  .grid-5.list-view .card .thumb{width:110px;height:110px;aspect-ratio:auto;margin:0}
  .grid-5.list-view .card .meta{grid-column:2}
  .grid-5.list-view .card .name{text-align:left;margin:0;font-size:13px}
  .grid-5.list-view .card .desc{display:block;color:#666;font-size:12px;margin-top:4px;text-align:left}
  .grid-5.list-view .card .price{text-align:right;margin:0;font-weight:600;grid-column:3;grid-row:1/span 2}

@media (max-width: 480px){
  .plp-head{flex-direction:row;align-items:center}
  .plp-title{margin-right:8px}
  .plp-sort{width:auto}
  .plp-sort select{width:auto}
  .view-toggle{display:none}
  .grid-5.list-view .card{grid-template-columns:100px 1fr;}
  .grid-5.list-view .card .price{grid-column:2;justify-self:end}
  .tiles{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr}
}

/* PDP */
/* .pdp{max-width:var(--container);margin:18px auto;padding:0 16px;display:grid;grid-template-columns:1.1fr 1fr;gap:22px} */
.pdp{max-width:var(--container);margin:18px auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:22px}
.pdp .photo {height:360px;border:1px solid var(--line);border-radius:6px;background:#fff;background-position:center;background-size:cover;display:flex;align-items:center;justify-content:center}
.pdp .photo img {display: block;max-width: 98%;max-height: 98%;object-fit: contain;}
.pdp .name{font-size:14px;font-weight:700;margin:0}
.pdp .price{font-size:18px;font-weight:700;margin:6px 0}
.pdp .form .row{margin:10px 0}
.pdp select,input[type=number]{border:1px solid var(--line);padding:8px;border-radius:4px;width:100%}
.pdp .btn{border:1px solid #222;background:#fff;color:#111;padding:8px 12px;border-radius:4px}
.pdp .paypal{background:#f6f9ff;border-color:#9bb7ff;}
.pdp .details{margin-top:10px;color:#555;font-size: 14px;}
.size-table{width:100%;border-collapse:collapse;margin:10px 0}
.size-table th,.size-table td{border:1px solid var(--line);padding:6px 8px;font-size:12px;text-align:center}
.share{display:flex;gap:8px;margin:12px 0}
.share .btn{border:1px solid var(--line);background:#fff;color:#333;padding:6px 10px;border-radius:4px;font-size:12px}
.reco{max-width:var(--container);margin:18px auto;padding:0 16px}

/* Responsive */
@media (max-width:1024px){.grid-5{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){.grid-5{grid-template-columns:repeat(2,1fr)}.about,.pdp{grid-template-columns:1fr}.store-feed{grid-template-columns:1fr}}

/* Slider (Hero banner) */
.slider{height:500px;border-radius:6px;position:relative;overflow:hidden;background:#f4f4f4}
@media (max-width: 480px){
  .slider{height:200px}
}
.slider .track{display:flex;height:100%;transition:transform .5s ease;will-change:transform}
.slider .slide{flex:0 0 100%;height:100%;background-position:center;background-size:cover}
.slider .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.5);border:none;color:#111;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
.slider .prev{left:12px}
.slider .next{right:12px}
.slider .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.slider .dot{width:6px;height:6px;border-radius:50%;background:#ddd;border:1px solid #bbb;cursor:pointer}
.slider .dot.active{background:#111;border-color:#111}
/* dots below hero banner */
.hero .dots{position:static;display:flex;justify-content:center;gap:8px;margin-top:20px}
.hero .dot{width:10px;height:10px;border-radius:50%;background:#ddd;border:1px solid #bbb;cursor:pointer}
.hero .dot.active{background:#111;border-color:#111}

/* PDP gallery (thumbnails under main image) */
.media-group{display:block}
/* PDP gallery layout: arrows on both sides, track centered */
.gallery{
  margin-top:10px;
  position:relative;
  overflow:visible; /* allow arrows to sit outside without being clipped */
}
.gallery .arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  line-height:28px;
  border:1px solid #222;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  color:#111;
  cursor:pointer;
  z-index: 3;
}
.gallery .track{
  display:flex;
  gap:8px;
  padding:4px;
  width:max-content;
  transition: transform .3s ease;
  position: relative;
  z-index: 1;
}
.gallery .mask{
  overflow:hidden; /* clip track content */
  display:inline-block;
  width: 405px;
  margin-left: 35px;
}
.gallery .thumb{
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  border: 1px solid #eee;
  border-radius: 4px;
  flex: 0 0 auto;
}
.gallery .thumb.active{
  outline: 2px solid #007aff;
}
.gallery .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.5);border:1px solid #222;color:#111;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;z-index:3}
.gallery .prev{left:0}
.gallery .next{right:0}
.slider .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.slider .dot{width:6px;height:6px;border-radius:50%;background:#ddd;border:1px solid #bbb;cursor:pointer}
.slider .dot.active{background:#111;border-color:#111}
@media (max-width: 480px){
  .pdp .photo{height:280px}
  .gallery .mask{width: calc(62px*4 + 8px*3); margin-left: 35px}
  .gallery .arrow{width:24px;height:24px;line-height:24px;font-size:14px}
  .hero .dot {width: 10px;height: 13px;}
}
@media (max-width: 360px){
  .gallery .mask{width: calc(60px*3 + 8px*2); margin-left: 12px}
}
@media (max-width: 768px){
  /* Mobile: second and third columns on one row */
  .footer .cols{grid-template-columns: repeat(2, 1fr)}
  .footer .cols > div:nth-child(1){grid-column: 1 / -1}
  .footer .cols > div:nth-child(2){grid-column: 1}
  .footer .cols > div:nth-child(3){grid-column: 2}
  .footer .cols > div:nth-child(4){grid-column: 1 / -1}
}
@media (min-width: 992px){
  .footer .cols > div:nth-child(1){margin-right:30px}
}
@media (min-width: 992px){
  /* Desktop: first column wider, second/third narrower, fourth unchanged */
  .footer .cols{grid-template-columns:1.8fr 0.8fr 0.8fr 1fr}
}


.btn:hover {
background-color: #40a9ff !important;
}
/* 模态框样式 */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-in-out;
  transform: scale(0.95);
}
.modal-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.modal-message {
  margin-bottom: 20px;
  line-height: 1.5;
  color: #666;
}
.modal-button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}
.modal-button:hover {
  background-color: #40a9ff;
}
.gallery-item {padding-bottom: 12px;}
.prgallery img {display:block;max-width: 100%;margin:2px auto;}
.prgallery span {display:block;text-align:center;font-size:14px;color:#666;padding-top: 10px;}