:root{
  --bg:#efebe5;
  --bg-soft:#f7f4ef;
  --paper:#ffffff;
  --paper-2:#f3efe9;
  --ink:#181513;
  --ink-soft:#4e433c;
  --line:rgba(24,21,19,.10);
  --line-strong:rgba(24,21,19,.18);
  --accent:#f15a29;
  --accent-deep:#dc4f21;
  --accent-soft:#ffe1d5;
  --chip:#fff6f1;
  --dark:#211c18;
  --dark-2:#2e2823;
  --success:#eaf7ef;
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --shadow:0 18px 48px rgba(33,28,24,.08);
  --shadow-strong:0 22px 60px rgba(33,28,24,.12);
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(241,90,41,.10), transparent 24%),
    linear-gradient(180deg, #f4f1ec 0%, #efebe5 46%, #f7f4ef 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.section{padding:72px 0}
.eyebrow{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:800}
.kicker{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.text-muted{color:var(--ink-soft)}
.hide{display:none !important}

.top-shell{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(247,244,239,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(24,21,19,.08);
}
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  min-height:84px;
  padding:12px 0;
}
.logo-wrap{
  display:block;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 10px;
  box-shadow:var(--shadow);
}
.logo-wrap img.logo{width:250px;height:auto;object-fit:contain}
.logo-wrap img.mark{display:none}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
}
.nav-links a{
  padding:11px 14px;
  border-radius:999px;
  font-weight:700;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:.2s ease;
}
.nav-links a:hover{background:var(--paper); color:var(--ink); box-shadow:var(--shadow)}
.nav-cta{display:flex;align-items:center;gap:12px}
.cart-pill,.solid-btn,.ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  font-weight:800;
  border:none;
  cursor:pointer;
  transition:.2s ease;
}
.cart-pill,.solid-btn{
  background:linear-gradient(135deg, var(--accent), #ff7a4d);
  color:#fff;
  box-shadow:0 14px 32px rgba(241,90,41,.24);
}
.cart-pill:hover,.solid-btn:hover{transform:translateY(-1px); box-shadow:0 20px 36px rgba(241,90,41,.28)}
.ghost-btn{background:var(--paper); color:var(--ink); border:1px solid var(--line-strong)}
.ghost-btn:hover{border-color:rgba(241,90,41,.35); color:var(--accent-deep)}

.hero{
  padding:34px 0 26px;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:24px;
  align-items:stretch;
}
.hero-copy-shell,
.hero-slider-shell,
.card-panel,
.products-shell,
.info-card,
.footer-card,
.checkout-shell,
.cart-shell,
.detail-gallery,
.detail-main,
.page-banner,
.about-panel,
.strip-card,
.empty-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
.hero-copy-shell{
  overflow:hidden;
  position:relative;
}
.hero-copy-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:linear-gradient(90deg, var(--accent), #ff865d 55%, rgba(241,90,41,.08));
}
.hero-copy{
  padding:42px;
  display:grid;
  gap:22px;
}
.hero-copy h1{font-size:clamp(2.5rem,4.6vw,5.2rem);line-height:.93;margin:0;letter-spacing:-.04em}
.hero-copy p{margin:0;color:var(--ink-soft);font-size:1.08rem;line-height:1.8;max-width:58ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap}
.hero-tags span,
.info-pills span,
.feature-item,
.hero-note,
.roller-meta span,
.meta-line span,
.filters button,
.searchbox span{
  border-radius:999px;
  border:1px solid rgba(241,90,41,.18);
  background:var(--chip);
  color:var(--accent-deep);
}
.hero-tags span{padding:10px 14px;font-weight:700}
.hero-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.board-card{
  background:var(--paper-2);
  border:1px solid rgba(24,21,19,.08);
  border-radius:22px;
  padding:18px;
}
.board-card small{display:block;color:var(--ink-soft);margin-bottom:8px}
.board-card strong{font-size:1.1rem}
.hero-note{padding:14px 18px;font-weight:700;display:inline-flex;width:max-content;max-width:100%}

.hero-slider-shell{padding:18px; display:grid; gap:14px; min-height:100%}
.slider-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.slider-top h2{margin:8px 0 0;font-size:1.5rem}
.slider-status{padding:10px 14px;border-radius:999px;background:var(--dark);color:#fff;font-weight:800;white-space:nowrap}
.hero-roller{overflow:hidden;border-radius:26px;background:linear-gradient(135deg,#fff8f4,#f6f1eb);border:1px solid rgba(241,90,41,.14);min-height:440px}
.roller-track{display:flex;width:100%;transition:transform .45s ease}
.roller-slide{min-width:100%;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;align-items:stretch}
.roller-copy{padding:28px 28px 30px;display:grid;gap:16px}
.roller-copy h3{font-size:clamp(1.7rem,2.2vw,2.5rem);margin:0;line-height:1.08}
.roller-copy p{margin:0;color:var(--ink-soft);line-height:1.8}
.roller-meta{display:flex;gap:10px;flex-wrap:wrap}
.roller-meta span{padding:8px 12px;font-size:.92rem;font-weight:700}
.roller-price{font-size:2rem;font-weight:900;color:var(--dark)}
.roller-actions{display:flex;gap:12px;flex-wrap:wrap}
.roller-media{
  min-height:440px;
  background-size:cover;
  background-position:center;
  position:relative;
  border-left:1px solid rgba(24,21,19,.08);
}
.roller-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(24,21,19,.08));
}
.floating-badge,.floating-tag{
  position:absolute;
  z-index:2;
  left:18px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  backdrop-filter:blur(10px);
}
.floating-badge{top:18px;background:rgba(255,255,255,.92);color:var(--accent-deep);border:1px solid rgba(241,90,41,.14)}
.floating-tag{bottom:18px;background:rgba(24,21,19,.82);color:#fff}
.roller-dots{display:flex;gap:8px;justify-content:center;margin-top:2px}
.roller-dots button,.roller-btn{
  border:none;cursor:pointer;transition:.2s ease
}
.roller-dots button{width:10px;height:10px;border-radius:999px;background:rgba(24,21,19,.14)}
.roller-dots button.active{width:28px;background:var(--accent)}
.roller-controls{display:flex;gap:10px}
.roller-btn{
  width:44px;height:44px;border-radius:14px;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);
}
.roller-btn:hover{background:var(--accent);color:#fff;border-color:transparent}

.strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}
.strip-card{padding:22px 22px 20px}
.strip-card strong{display:block;font-size:1.2rem;margin-bottom:10px}
.strip-card small{display:block;color:var(--ink-soft);line-height:1.7;font-size:1rem}

.mosaic{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:24px;
}
.shelf-panel,.trade-panel{background:transparent}
.shelf-head,.trade-head,.products-top{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:18px}
.shelf-head h2,.trade-head h2,.products-top h2{font-size:clamp(2rem,3vw,3rem)}
.shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mini-product,.trade-item,.order-line,.cart-line{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}
.mini-product{overflow:hidden}
.mini-product .pic{aspect-ratio:1.2/1;background-size:cover;background-position:center}
.mini-product .meta{padding:18px}
.mini-product h3{margin:10px 0 14px;font-size:1.15rem;line-height:1.35}
.mini-product .price{font-weight:900;color:var(--accent-deep)}
.trade-list{display:grid;gap:14px}
.trade-item{padding:18px 20px;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:start}
.trade-item strong{font-size:2rem;color:var(--accent)}
.trade-item span:last-child{font-size:.9rem;color:var(--ink-soft);font-weight:800}
.trade-item div span{display:block;font-size:1.15rem;font-weight:800;color:var(--ink);margin-bottom:6px}
.trade-item small{display:block;color:var(--ink-soft);line-height:1.65}

.products-shell{padding:26px}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.product-card{display:grid;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);transition:.2s ease}
.product-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}
.product-card .image{aspect-ratio:1/1;background-size:cover;background-position:center;position:relative}
.badge,.category-pill{
  position:absolute;left:14px;padding:8px 12px;border-radius:999px;font-size:.84rem;font-weight:800
}
.badge{top:14px;background:rgba(255,255,255,.94);color:var(--accent-deep)}
.category-pill{bottom:14px;background:rgba(24,21,19,.84);color:#fff}
.product-card .body{padding:16px 16px 18px;display:grid;gap:14px}
.product-card h3{margin:0;font-size:1.06rem;line-height:1.4;min-height:3.0em}
.meta-line{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.meta-line span{padding:6px 10px;font-size:.82rem;font-weight:700}
.price-row strong{font-size:1.15rem;color:var(--accent-deep)}
.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card-actions a,.card-actions button{
  min-height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--paper);font-weight:800;cursor:pointer
}
.card-actions a{display:flex;align-items:center;justify-content:center}
.card-actions button{background:var(--accent);color:#fff;border-color:transparent}

.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.info-card{overflow:hidden}
.info-card .inner{padding:30px}
.info-card h3{margin:10px 0 12px;font-size:1.7rem}
.info-card p{color:var(--ink-soft);line-height:1.8}
.info-card ul{margin:16px 0 0;padding-left:20px;color:var(--ink-soft);line-height:1.9}

.page-hero{padding:28px 0 0}
.page-banner{
  padding:44px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}
.page-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(24,21,19,.68), rgba(24,21,19,.32) 55%, rgba(24,21,19,.08))}
.page-banner .content{position:relative;z-index:1;max-width:700px;color:#fff}
.page-banner h1{font-size:clamp(2.3rem,4vw,4.3rem);margin:10px 0 0;line-height:.98}
.page-banner p{font-size:1.06rem;line-height:1.85;color:rgba(255,255,255,.88)}
.searchbox{display:flex;align-items:center;gap:12px;background:var(--paper-2);padding:8px;border-radius:999px;border:1px solid var(--line)}
.searchbox span{padding:10px 14px;font-size:.9rem;font-weight:800}
.searchbox input{border:none;outline:none;background:transparent;min-width:260px;color:var(--ink)}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{padding:11px 16px;font-weight:800;cursor:pointer}
.filters button.active{background:var(--accent);color:#fff;border-color:transparent}

.product-page,.cart-page,.checkout-page{padding:32px 0 72px}
.detail-shell{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px}
.detail-gallery,.detail-main,.checkout-shell{padding:28px}
.detail-image{border-radius:24px;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:var(--paper-2)}
.detail-main h1{margin:10px 0 12px;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.02}
.detail-price{font-size:2.1rem;font-weight:900;color:var(--accent-deep)}
.info-pills{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.info-pills span,.feature-item{padding:10px 14px;font-size:.92rem;font-weight:800}
.feature-list{display:flex;gap:10px;flex-wrap:wrap}
.notice{
  padding:18px 20px;border-radius:22px;background:var(--paper-2);border:1px solid rgba(241,90,41,.16);line-height:1.75;color:var(--ink-soft)
}
.qty-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}
.qty-box{display:inline-grid;grid-template-columns:46px 72px 46px;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--paper)}
.qty-box button,.qty-box input{height:48px;border:none;background:transparent;text-align:center}
.qty-box input{outline:none;width:100%}

.cart-shell,.checkout-shell{padding:28px}
.cart-table,.checkout-order{display:grid;gap:14px}
.cart-line{padding:14px;display:grid;grid-template-columns:92px 1fr auto auto auto;gap:16px;align-items:center}
.cart-thumb{width:92px;height:92px;border-radius:18px;background-size:cover;background-position:center}
.cart-title strong{display:block;font-size:1.05rem;margin-bottom:8px}
.cart-title small{color:var(--ink-soft)}
.qty-inline{display:inline-grid;grid-template-columns:36px 40px 36px;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper-2)}
.qty-inline button{height:38px;border:none;background:transparent;cursor:pointer}
.qty-inline span{text-align:center;font-weight:800}
.remove-btn{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.cart-summary{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 0 0}
.cart-summary strong{font-size:2rem}
.order-line{padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.order-line strong:last-child{color:var(--accent-deep)}
.success-box{display:none;margin-top:20px;padding:18px 20px;border-radius:22px;background:var(--success);border:1px solid rgba(46,125,50,.14);color:#21592b;line-height:1.7}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:8px}
.field.full{grid-column:1 / -1}
.field label{font-weight:800}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:14px 16px;border-radius:18px;border:1px solid var(--line-strong);outline:none;background:var(--paper)
}
.field textarea{min-height:138px;resize:vertical}

.about-blocks{display:grid;gap:24px}
.about-panel{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);overflow:hidden}
.about-photo{min-height:430px;background-size:cover;background-position:center}
.about-copy{padding:32px}
.about-copy h2{font-size:clamp(2rem,3.5vw,3.8rem);line-height:1.02;margin:10px 0 14px}
.about-copy p{color:var(--ink-soft);line-height:1.85}
.points{display:grid;gap:14px;margin-top:24px}
.point{padding:18px 20px;border-radius:22px;background:var(--paper-2);border:1px solid var(--line)}
.point strong{display:block;margin-bottom:6px;font-size:1.06rem}

.footer{padding:0 0 34px}
.footer-card{padding:28px 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:20px}
.footer-grid h3{font-size:1.8rem;margin:10px 0 12px}
.footer-grid p,.footer-box div,.footer-note{color:var(--ink-soft);line-height:1.8}
.footer-box{padding:18px;border-radius:22px;background:var(--paper-2);border:1px solid var(--line)}
.footer-box strong{display:block;margin-bottom:12px}
.footer-logo{width:250px;border-radius:16px;border:1px solid var(--line)}

.hot-roller-section{padding-top:24px}

@media (max-width: 1100px){
  .hero-grid,.mosaic,.detail-shell,.about-panel,.footer-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-board,.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roller-slide{grid-template-columns:1fr}
  .roller-media{min-height:320px;border-left:none;border-top:1px solid rgba(24,21,19,.08)}
}

@media (max-width: 820px){
  .section{padding:52px 0}
  .top-shell{position:static}
  .topbar{grid-template-columns:1fr;justify-items:start;gap:12px;padding:12px 0 14px}
  .logo-wrap{padding:6px 8px;border-radius:18px}
  .logo-wrap img.logo{width:min(100%, 210px)}
  .nav-links{justify-content:flex-start;overflow:auto;gap:8px;padding-bottom:2px;width:100%;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{padding:10px 13px;background:var(--paper)}
  .nav-cta{width:100%}
  .cart-pill{min-height:42px;padding:0 16px}
  .hero-copy{padding:26px}
  .hero-copy h1{font-size:clamp(2.2rem,12vw,4rem)}
  .hero-copy p{font-size:1rem}
  .hero-board,.strip,.info-grid,.form-grid{grid-template-columns:1fr}
  .products-shell,.detail-gallery,.detail-main,.checkout-shell,.footer-card,.page-banner,.about-copy{padding:22px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf-grid{grid-template-columns:1fr}
  .trade-item{grid-template-columns:54px 1fr}
  .trade-item span:last-child{grid-column:2}
  .cart-line{grid-template-columns:76px 1fr;align-items:start}
  .cart-thumb{width:76px;height:76px}
  .qty-inline,.remove-btn,.cart-line strong:last-of-type{grid-column:2}
  .order-line{flex-direction:column;align-items:flex-start}
}

@media (max-width: 560px){
  .container{width:min(calc(100% - 20px), var(--max))}
  .topbar{min-height:unset}
  .logo-wrap img.logo{width:180px}
  .hero{padding-top:18px}
  .hero-copy{padding:22px}
  .hero-copy h1{font-size:2.4rem}
  .board-card{padding:16px}
  .slider-status{font-size:.88rem;padding:8px 12px}
  .hero-roller{min-height:unset}
  .roller-copy{padding:22px}
  .roller-copy h3{font-size:1.55rem}
  .roller-price{font-size:1.6rem}
  .roller-actions,.hero-actions{display:grid;grid-template-columns:1fr}
  .roller-actions a,.hero-actions a,.hero-actions button{width:100%}
  .product-grid{grid-template-columns:1fr}
  .products-top,.shelf-head,.trade-head,.slider-top{align-items:flex-start;flex-direction:column}
  .searchbox{width:100%}
  .searchbox input{min-width:0;width:100%}
  .page-banner h1,.about-copy h2,.detail-main h1{font-size:2.2rem}
  .footer-grid h3{font-size:1.5rem}
}