/*
 * 晶瑩寶庫 Storefront UI v1
 * 僅套用於商品列表、商品詳情與購物車；保留既有資料、庫存、付款流程。
 * 設計目標：桌機控制商品圖片尺寸、三頁對齊；手機提供固定導覽與購買操作。
 */

.storefront-page{
  --sf-ink:#261d1b;
  --sf-deep:#3a2724;
  --sf-cocoa:#70483e;
  --sf-copper:#ad745e;
  --sf-blush:#ead8cb;
  --sf-champagne:#f4e9dd;
  --sf-paper:#fffdfa;
  --sf-canvas:#f6f1ea;
  --sf-line:rgba(73,48,42,.14);
  --sf-muted:#7d6c65;
  --sf-shadow:0 24px 70px -48px rgba(52,31,27,.62);
  background:var(--sf-canvas);
}

.storefront-page .commerce-shell{
  --c-ink:var(--sf-ink);
  --c-brown:var(--sf-cocoa);
  --c-clay:var(--sf-copper);
  --c-canvas:var(--sf-canvas);
  --c-surface:var(--sf-paper);
  --c-surface-2:#fbf6f0;
  --c-line:var(--sf-line);
  --c-muted:var(--sf-muted);
  background:
    radial-gradient(circle at 8% 18%,rgba(205,168,143,.10),transparent 23rem),
    var(--sf-canvas);
}

.storefront-page .commerce-shell .c-announcement{
  min-height:32px;
  background:#2a201f;
  color:#f9eee7;
  letter-spacing:.055em;
}

.storefront-page .commerce-shell .c-top{
  min-height:72px;
  padding:12px clamp(20px,3.2vw,50px);
  border-bottom:1px solid rgba(65,42,37,.10);
  background:rgba(255,253,250,.92);
  box-shadow:0 18px 34px -34px rgba(40,25,22,.8);
}

.storefront-page .commerce-shell .c-brand{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  min-width:max-content;
  color:var(--sf-ink);
  font-size:22px;
  line-height:1;
}

.storefront-page .commerce-shell .c-brand small{
  display:block;
  margin-top:6px;
  color:var(--sf-copper);
  font:700 8px/1 var(--c-sans);
  letter-spacing:.32em;
}

.storefront-page .commerce-shell .c-quicknav{
  gap:6px;
  margin-left:28px;
}

.storefront-page .commerce-shell .c-quicknav a{
  padding:10px 14px;
  color:#6f5c55;
  border-radius:999px;
  font-size:15px;   /* Owner：13px 太小 */
}

.storefront-page .commerce-shell .c-quicknav a[aria-current="page"]{
  background:#efe3da;
  color:var(--sf-deep);
}

.storefront-page .commerce-shell .c-cartlink,
.storefront-page .commerce-shell .c-back{
  min-height:42px;
  padding:9px 16px;
  border:1px solid var(--sf-line);
  border-radius:999px;
  background:rgba(255,253,250,.88);
  color:var(--sf-deep);
  box-shadow:none;
}

.storefront-page .commerce-shell .c-cartlink:hover,
.storefront-page .commerce-shell .c-back:hover{
  border-color:rgba(112,72,62,.42);
  background:#fff;
}

.storefront-page .c-bag-icon{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ───────────────────── 商品列表 ───────────────────── */

.shop-page .commerce-shell .c-wrap{
  max-width:1240px;
  padding:34px 28px 110px;
}

.shop-page .commerce-shell .c-hero{
  position:relative;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  min-height:340px;
  max-width:none;
  margin:0 0 18px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(94,59,51,.12);
  border-radius:30px;
  /* 兩色漸層（Owner 指定）。原本是三色（多一個 58% 的中間停點），層次太碎。
     只留「近白的米」到「暖褐」兩端，中間交給瀏覽器自己過渡。 */
  background:
    linear-gradient(118deg,rgba(255,253,249,.96) 0%,rgba(228,199,178,.86) 100%);
  box-shadow:var(--sf-shadow);
}

/* 右下角的暈影。故意擺在卡片外（右 -80px、下 -170px），只讓左上那一角滲進來，
   形成由右下往左上淡開的層次。
   ⚠️ 濃度 .07。歷程：.28 → .16（還是太深）→ .07（Owner 要「再淡很多」）。
   到這個程度只剩「仔細看才注意到」的暖色暈感，不會壓過底色漸層。
   要再淡就往下調這個數字；整團完全不要就把這條 ::after 拿掉（底色漸層仍在）。 */
.shop-page .commerce-shell .c-hero::after{
  content:"";
  position:absolute;
  inset:auto -80px -170px auto;
  width:390px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(112,72,62,.07),rgba(112,72,62,0) 67%);
  pointer-events:none;
}

.shop-page .c-hero-index{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(38px,4vw,52px) 32px;
  border-right:1px solid rgba(93,59,52,.12);
}

.shop-page .c-hero-index strong{
  color:rgba(110,72,61,.3);
  font:400 88px/.78 Georgia,"Times New Roman",serif;
  letter-spacing:-.07em;
}

.shop-page .c-hero-index p{
  margin:0!important;
  color:rgba(91,62,54,.58)!important;
  font:700 8px/2 var(--c-sans)!important;
  letter-spacing:.14em;
}

.shop-page .c-hero-main{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(38px,4vw,52px) clamp(42px,5vw,68px);
}

.shop-page .commerce-shell .c-hero .eyebrow{
  margin-bottom:20px;
  color:#9c6451;
  font-size:10px;
  letter-spacing:.28em;
}

.shop-page .commerce-shell .c-hero h1{
  font-size:clamp(38px,4.5vw,56px);
  line-height:1.13;
  letter-spacing:.025em;
}

.shop-page .commerce-shell .c-hero h1 em{
  color:var(--sf-cocoa);
  font-style:normal;
  font-weight:500;
}

.shop-page .commerce-shell .c-hero p{
  max-width:50ch;
  margin-top:18px;
  color:#6f5d56;
  font-size:15px;
  line-height:1.9;
}

.shop-page .c-hero-bottom{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto;
  gap:32px;
  align-items:end;
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(93,59,52,.14);
}

.shop-page .c-hero-bottom>p{margin-top:0;}

.shop-page .c-hero-actions{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:0;
}

.shop-page .c-hero-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  font-size:13px;
  font-weight:800;
}

.shop-page .c-hero-primary{
  min-width:132px;
  padding:0 24px;
  border-radius:999px;
  background:var(--sf-deep);
  color:#fff!important;
  box-shadow:0 15px 30px -20px rgba(46,29,26,.85);
}

.shop-page .c-hero-primary:hover{background:#563a34;}

.shop-page .c-hero-secondary{
  gap:10px;
  border-bottom:1px solid rgba(58,39,36,.34);
  color:var(--sf-deep)!important;
}

.shop-page .c-hero-secondary span{font-size:17px;}

.shop-page .c-shop-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0 0 32px;
  border:1px solid var(--sf-line);
  border-radius:18px;
  background:rgba(255,253,250,.72);
}

.shop-page .c-shop-values>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:68px;
  padding:12px 22px;
}

.shop-page .c-shop-values>div+div{border-left:1px solid var(--sf-line);}
.shop-page .c-shop-values b{font-family:var(--c-serif);font-size:14px;white-space:nowrap;}
.shop-page .c-shop-values span{color:var(--sf-muted);font-size:11px;}

.shop-page .commerce-shell .c-layout{
  display:block;
  scroll-margin-top:104px;
}

/* ⚠️ overflow 一律 visible。這裡原本是 hidden／overflow-x:auto，
   下拉選單一展開就會被容器裁掉一半——改成下拉式篩選後這兩行是會出事的。*/
.shop-page .commerce-shell .c-side{
  position:static;
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  margin-bottom:18px;
  padding:14px 18px;
  overflow:visible;
  border:1px solid var(--sf-line);
  border-radius:16px;
  background:rgba(255,253,250,.78);
  box-shadow:none;
}

.shop-page .commerce-shell .c-side-h{
  flex:0 0 auto;
  min-width:78px;
  margin:0;
  padding:2px 18px 2px 2px;
  border-right:1px solid var(--sf-line);
}

.shop-page .commerce-shell #fGroups{
  display:flex;
  flex:1;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  min-width:0;
  overflow:visible;
}

.shop-page .commerce-shell .c-group{
  flex:0 0 auto;
  margin:0;
  padding:0;
  border:0;
}

.shop-page .commerce-shell .c-toolbar{min-height:48px;margin-bottom:18px;}
.shop-page .commerce-shell .c-more{display:none;}
.shop-page .commerce-shell #sortSel{background-color:rgba(255,253,250,.9);}

/* ⚠️ 上限一定要是 1fr，不能寫成固定的 300px。
   auto-fill 在上限是「定值」時會拿上限去算欄數：(1184+24)/(300+24)=3 欄，
   於是 1240 的版心只排得下三個、右邊空掉 236px（Owner 回報「應該要四個」）。
   改成 1fr 之後同樣寬度算得出 (1184+24)/(260+24)=4 欄，每欄 278px。 */
.shop-page .commerce-shell .c-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  justify-content:start;
  gap:48px 24px;
}

.shop-page .commerce-shell .c-card{
  display:flex;
  flex-direction:column;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.shop-page .commerce-shell .c-card:hover{
  transform:none;
  border-color:transparent;
  box-shadow:none;
}

.shop-page .commerce-shell .c-thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:20px;
  background:#ede7e0;
  box-shadow:inset 0 0 0 1px rgba(79,50,44,.06),0 22px 42px -38px rgba(42,26,23,.8);
}

.shop-page .commerce-shell .c-thumb img{
  object-fit:cover;
  object-position:center;
}

.shop-page .commerce-shell .c-card:hover .c-thumb{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(79,50,44,.06),0 26px 44px -30px rgba(42,26,23,.58);
}

.shop-page .commerce-shell .c-body{
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:160px;
  padding:16px 3px 0;
}

.shop-page .c-card-kicker{
  margin-bottom:8px;
  color:#ad745e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
}

.shop-page .commerce-shell .c-title{
  min-height:25px;
  color:var(--sf-ink);
  font-size:17px;
}

.shop-page .commerce-shell .c-sub{min-height:20px;}

/* flex-wrap 是關鍵：價格＋兩顆鈕在窄卡片放不下時，讓按鈕整排掉到下一行，
   而不是溢出卡片、疊在價格上、順便把整個頁面撐寬。*/
.shop-page .c-card-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px 16px;
  margin-top:auto;
}

.shop-page .commerce-shell .c-row{margin-top:13px;}
.shop-page .commerce-shell .c-price{font-size:19px;}

.shop-page .commerce-shell .c-card-cta{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  margin:0;
  border:1px solid rgba(112,72,62,.25);
  border-radius:50%;
  color:var(--sf-cocoa);
  font-size:0;
}

.shop-page .commerce-shell .c-card-cta b{font-size:15px;font-weight:500;}
.shop-page .commerce-shell .c-card:hover .c-card-cta{background:var(--sf-deep);color:#fff;}
.shop-page .commerce-shell .c-skel{width:100%;aspect-ratio:1/1;}

/* ───────────────────── 商品詳情 ───────────────────── */

.product-page .commerce-shell .c-wrap{
  max-width:1240px;
  padding:30px 28px 116px;
}

.product-page .c-breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
  color:#8d7971;
  font-size:11px;
}

.product-page .c-breadcrumb a{color:var(--sf-cocoa);font-weight:800;}

.product-page .commerce-shell .c-detail{
  display:grid;
  grid-template-columns:minmax(0,560px) minmax(360px,450px);
  justify-content:center;
  gap:clamp(42px,6vw,82px);
  align-items:start;
}

.product-page .commerce-shell .c-gallery{top:102px;}

.product-page .commerce-shell .c-main-img{
  width:100%;
  max-width:560px;
  aspect-ratio:1/1;
  border-radius:26px;
  background:#ede7df;
  box-shadow:0 28px 72px -45px rgba(48,30,26,.72),inset 0 0 0 1px rgba(75,48,42,.08);
}

.product-page .commerce-shell .c-main-img img{object-position:center;}

.product-page .commerce-shell .c-thumbs{
  display:flex;
  gap:10px;
  max-width:560px;
  margin-top:12px;
  overflow-x:auto;
  padding:2px 2px 5px;
}

.product-page .commerce-shell .c-thumbs button{
  width:76px;
  height:76px;
  flex:0 0 76px;
  border-radius:14px;
}

.product-page .commerce-shell .c-info{
  position:sticky;
  top:102px;
  padding:30px;
  border:1px solid var(--sf-line);
  border-radius:24px;
  background:rgba(255,253,250,.86);
  box-shadow:var(--sf-shadow);
  backdrop-filter:blur(12px);
}

.product-page .c-product-kicker{
  margin-bottom:12px;
  color:var(--sf-copper);
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}

.product-page .commerce-shell h1{
  font-size:clamp(29px,3vw,40px);
  line-height:1.25;
}

.product-page .commerce-shell .c-tagline{
  margin-top:9px;
  color:#78655e;
  font-weight:500;
  line-height:1.7;
}

.product-page .commerce-shell .c-priceline{
  margin:24px 0 12px;
}

.product-page .commerce-shell .c-price{font-size:34px;}

.product-page .c-availability{
  display:flex;
  align-items:center;
  gap:8px;
  color:#5f7167;
  font-size:11px;
  font-weight:700;
}

.product-page .c-availability i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5d806e;
  box-shadow:0 0 0 4px rgba(93,128,110,.12);
}

.product-page .commerce-shell .c-rule{margin:20px 0;}
.product-page .commerce-shell .c-block{margin:18px 0;}

.product-page .c-variant-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:11px;
}

.product-page .c-variant-heading .c-label{margin:0;}
.product-page .c-variant-heading>span{color:var(--sf-muted);font-size:10px;}

.product-page .commerce-shell .c-spec-groups{display:grid;gap:19px;}
.product-page .commerce-shell .c-spec-name{
  margin-bottom:9px;
  color:var(--sf-ink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.product-page .commerce-shell .c-spec-options{display:flex;flex-wrap:wrap;gap:9px;}
.product-page .commerce-shell .c-spec-option{
  position:relative;
  min-width:72px;
  min-height:43px;
  padding:9px 18px;
  border:1px solid var(--sf-line);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:var(--sf-ink);
  font-size:13px;
  font-weight:750;
  text-align:center;
}

.product-page .commerce-shell .c-spec-option:hover{border-color:rgba(112,72,62,.62);transform:translateY(-1px);}
.product-page .commerce-shell .c-spec-option:focus-visible{outline:3px solid rgba(164,105,82,.25);outline-offset:2px;}
.product-page .commerce-shell .c-spec-option.is-on{
  border-color:var(--sf-deep);
  background:var(--sf-deep);
  color:#fff;
  box-shadow:0 14px 26px -20px rgba(46,29,26,.95);
}
.product-page .commerce-shell .c-spec-option.is-off{
  background:repeating-linear-gradient(135deg,rgba(119,91,82,.04) 0 7px,rgba(119,91,82,.09) 7px 8px);
  opacity:.62;
  text-decoration:line-through;
}

.product-page .commerce-shell .c-cta{
  gap:10px;
  margin-top:22px;
}

.product-page .commerce-shell .c-add,
.product-page .commerce-shell .c-buy{
  min-height:54px;
  border-radius:999px;
}

.product-page .commerce-shell .c-buy{background:var(--sf-deep);border-color:var(--sf-deep);}
.product-page .commerce-shell .c-add{background:transparent;border-color:rgba(112,72,62,.55);}

.product-page .c-payment-hint{
  margin-top:12px;
  color:#89756d;
  font-size:10.5px;
  line-height:1.5;
  text-align:center;
}

.product-page .commerce-shell .c-trust{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:24px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--sf-line);
  border-radius:14px;
  background:#faf5ef;
}

.product-page .commerce-shell .c-trust span{
  min-height:44px;
  padding:11px 12px;
  border-bottom:1px solid var(--sf-line);
  font-size:10.5px;
}

.product-page .commerce-shell .c-trust span:nth-child(odd){border-right:1px solid var(--sf-line);}
.product-page .commerce-shell .c-trust span:nth-last-child(-n+2){border-bottom:0;}

.product-page .c-product-story{
  max-width:1120px;
  margin:96px auto 0;
  padding:48px 0 0;
  border-top:1px solid var(--sf-line);
}

.product-page .c-story-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);
  align-items:end;
  gap:48px;
  margin-bottom:42px;
}

.product-page .c-story-head span{
  display:block;
  margin-bottom:9px;
  color:var(--sf-copper);
  font-size:8px;
  font-weight:800;
  letter-spacing:.2em;
}

.product-page .c-story-head h2{font-family:var(--c-serif);font-size:clamp(30px,4vw,46px);line-height:1.2;}
.product-page .c-story-head>p{padding-bottom:5px;color:var(--sf-muted);font-size:14px;line-height:1.7;}
.product-page .c-story-content{display:grid;gap:42px;}
.product-page .c-story-block{margin:0;}
.product-page .c-story-copy{max-width:760px;color:#594943;font-size:17.5px;line-height:1.95;}   /* Owner：15px 太小 */
.product-page .c-story-copy p+p{margin-top:1.4em;}

.product-page .c-story-image img,
.product-page .c-story-split img{
  display:block;
  width:100%;
  max-height:760px;
  border-radius:24px;
  object-fit:cover;
  background:#eee7df;
}

.product-page .c-story-image figcaption{margin-top:11px;color:var(--sf-muted);font-size:12.5px;text-align:center;}
.product-page .c-story-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);align-items:center;gap:48px;}
.product-page .c-story-split.is-reverse figure{order:2;}
.product-page .c-story-split.is-reverse .c-story-copy{order:1;}

.product-page .c-product-story+.c-rel{margin-top:80px;}

.product-page .commerce-shell .c-desc-h,
.product-page .commerce-shell .c-desc{
  display:none;
}

.product-page .commerce-shell .c-rel{
  margin-top:88px;
  padding-top:38px;
}

.product-page .commerce-shell .c-rel-grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,270px));
  justify-content:start;
}

.product-page .commerce-shell .c-rel-thumb{aspect-ratio:1/1;}
.product-page .c-mobile-buybar{display:none;}

/* ───────────────────── 購物車 ───────────────────── */

.cart-page .commerce-shell .c-wrap{
  max-width:1180px;
  padding:42px 28px 110px;
}

.cart-page .c-cart-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.cart-page .c-cart-heading>div>span{
  display:block;
  margin-bottom:9px;
  color:var(--sf-copper);
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
}

.cart-page .commerce-shell .c-cart-heading h1{
  margin:0;
  font-size:clamp(34px,4vw,46px);
}

.cart-page .c-cart-heading p{
  margin-top:8px;
  color:var(--sf-muted);
  font-size:15px;   /* Owner：13px 太小 */
}

.cart-page .c-cart-heading>b{
  padding-bottom:5px;
  color:var(--sf-cocoa);
  font-size:14px;   /* Owner 2026-09-07：12px 太小 */
}

.cart-page .c-cart-benefits{
  display:grid;
  /* 自動欄數：項目增減都不會空出一格（原本寫死三欄，拿掉一項就破版）*/
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  margin-bottom:30px;
  overflow:hidden;
  border:1px solid var(--sf-line);
  border-radius:16px;
  background:rgba(255,253,250,.7);
}

.cart-page .c-cart-benefits span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  color:#6f5c55;
  font-size:13.5px;   /* Owner 2026-09-07：11px 太小 */
  font-weight:700;
}

.cart-page .c-cart-benefits span+span{border-left:1px solid var(--sf-line);}
.cart-page .c-cart-benefits b{margin-right:10px;color:#b17b65;font:500 17px/1 Georgia,serif;}

.cart-page .commerce-shell .c-cartgrid{
  grid-template-columns:minmax(0,1fr) 370px;
  gap:38px;
}

.cart-page .commerce-shell .c-items{gap:12px;}

.cart-page .commerce-shell .c-line{
  grid-template-columns:112px minmax(0,1fr) auto;
  min-height:144px;
  padding:16px;
  border:1px solid var(--sf-line);
  border-radius:18px;
  background:rgba(255,253,250,.78);
}

.cart-page .commerce-shell .c-line:first-child{padding-top:16px;}

.cart-page .commerce-shell .c-thumb{
  width:112px;
  height:112px;
  border-radius:14px;
}

.cart-page .commerce-shell .c-line .t{font-size:17px;}
.cart-page .commerce-shell .qty{margin-top:14px;border-radius:999px;}
.cart-page .commerce-shell .qty button{width:38px;}

.cart-page .commerce-shell .c-summary{
  top:102px;
  padding:26px;
  border-radius:22px;
  background:rgba(255,253,250,.9);
  box-shadow:var(--sf-shadow);
}

.cart-page .commerce-shell .c-summary h2{font-size:20px;}
.cart-page .commerce-shell .srow{padding:9px 0;}
.cart-page .commerce-shell .grand{margin-top:10px;padding-top:17px;}

.cart-page .commerce-shell .btn{
  min-height:54px;
  border-radius:999px;
  background:var(--sf-deep);
}

.cart-page .c-cart-notice{
  margin-top:14px;
  padding:12px 13px;
  border-radius:11px;
  background:#f6eee7;
  color:#806b63;
  font-size:13px;   /* Owner：10.5px 太小，這段是「尚未保留庫存」的重要提醒 */
  line-height:1.7;
}

.cart-page .commerce-shell .c-secure{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px 14px;
  margin-top:15px;
}

.cart-page .commerce-shell .c-secure span::before{
  content:"✓";
  margin-right:4px;
  color:#52705f;
}

.cart-page .commerce-shell .state{
  min-height:360px;
  padding:70px 20px;
  border:1px solid var(--sf-line);
  border-radius:24px;
  background:rgba(255,253,250,.72);
}

.cart-page .c-mobile-cartbar{display:none;}

/* ───────────────────── 平板 ───────────────────── */

@media(max-width:980px){
  .shop-page .commerce-shell .c-hero{grid-template-columns:180px minmax(0,1fr);}
  .shop-page .c-hero-index{padding:40px 26px;}
  .shop-page .c-hero-main{padding:40px;}
  .shop-page .c-hero-bottom{grid-template-columns:1fr;gap:22px;align-items:start;}
  .shop-page .commerce-shell .c-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .product-page .commerce-shell .c-detail{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:30px;}
  .product-page .commerce-shell .c-info{padding:24px;}
  .product-page .commerce-shell .c-spec-option{min-width:68px;}
  .cart-page .commerce-shell .c-cartgrid{grid-template-columns:minmax(0,1fr) 330px;gap:24px;}
}

/* ───────────────────── 手機 ───────────────────── */

@media(max-width:720px){

  .storefront-page .commerce-shell .c-announcement{
    justify-content:flex-start;
    min-height:30px;
    padding-inline:14px;
    overflow:auto;
    white-space:nowrap;
  }

  /* 商城選單放在頁首第二行（Owner 2026-09-20：原本在底部，跟商品頁購買列疊成兩條）*/
  .storefront-page .commerce-shell .c-top{
    flex-wrap:wrap;
    gap:8px;
    row-gap:6px;
    min-height:64px;
    padding:10px 16px 4px;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .storefront-page .commerce-shell .c-brand{font-size:18px!important;}
  .storefront-page .commerce-shell .c-brand small{font-size:6.5px;}
  .storefront-page .commerce-shell .c-cartlink,
  .storefront-page .commerce-shell .c-back{min-height:40px;padding:8px 12px;font-size:12px;}
  .product-page .commerce-shell .c-back{font-size:0;}
  .product-page .commerce-shell .c-back::before{content:"←";font-size:18px;}

  /* 首頁／商城／客製手鍊／我的訂單／會員中心。
     ⚠️ 不要五等分：格子一樣寬、字卻有兩字跟四字，字與字的空隙會變成 46／31／18／18px。
     每格照字的寬度、左右留白一樣，再用 space-between 撐滿整行，空隙才會一樣寬。
     左右各往外推 10px，讓第一個字跟 logo 對齊（選中那格的底色會超出一點）。*/
  .storefront-page .commerce-shell .c-quicknav{
    order:3;
    display:flex;
    justify-content:space-between;
    width:calc(100% + 20px);
    margin:0 -10px;
    padding:4px 0 2px;
    overflow-x:auto;
    scrollbar-width:none;
    border-top:1px solid rgba(68,43,38,.10);
  }
  .storefront-page .commerce-shell .c-quicknav::-webkit-scrollbar{display:none;}

  .storefront-page .commerce-shell .c-quicknav a{
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:999px;
    font-size:14px;   /* Owner：太小。手機更該放大——手指點得到、也看得清 */
  }

  .storefront-page .commerce-shell .c-quicknav a[aria-current="page"]{background:#efe3da;}
  /* 320px 寬的手機五項放不下：字縮到下限 13px、左右留白收窄 */
  @media(max-width:360px){
    .storefront-page .commerce-shell .c-quicknav a{padding:7px 6px;font-size:13px;}
  }

  .shop-page .commerce-shell .c-wrap{padding:18px 16px 82px;}
  .shop-page .commerce-shell .c-hero{
    display:block;
    min-height:0;
    padding:0;
    border-radius:24px;
  }

  .shop-page .c-hero-index{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:24px;
    align-items:center;
    padding:24px;
    border-right:0;
    border-bottom:1px solid rgba(93,59,52,.12);
  }

  .shop-page .c-hero-index strong{font-size:52px;line-height:.8;}
  .shop-page .c-hero-index p{font-size:7px!important;line-height:1.8!important;}
  .shop-page .c-hero-main{padding:32px 24px 30px;}
  .shop-page .commerce-shell .c-hero h1{font-size:39px;}
  .shop-page .commerce-shell .c-hero p{font-size:13px;line-height:1.8;}
  .shop-page .c-hero-bottom{display:block;margin-top:24px;padding-top:20px;}
  .shop-page .c-hero-actions{gap:15px;margin-top:23px;}
  .shop-page .c-hero-actions a{min-height:43px;font-size:11.5px;}
  .shop-page .c-hero-primary{min-width:116px;padding:0 18px;}

  .shop-page .c-shop-values{
    grid-template-columns:1fr;
    margin:12px 0 28px;
    border-radius:14px;
  }

  .shop-page .c-shop-values>div{justify-content:flex-start;min-height:46px;padding:9px 16px;}
  .shop-page .c-shop-values>div+div{border-top:1px solid var(--sf-line);border-left:0;}

  /* top 要等於頁首實際高度（64px）。原本寫 92px，中間那 28px 會露出來，
     捲動時商品文字從兩條黏著列之間穿過去，看起來像破圖。*/
  .shop-page .commerce-shell .c-toolbar{position:sticky;z-index:20;top:64px;padding:8px 0;background:var(--sf-canvas);}

  /* ── 手機：整組篩選收進底部彈出視窗 ──
     五顆下拉直接攤在頁面上會擠成三排、吃掉整個第一屏。改成工具列一顆「篩選」鈕，
     點了才把同一份 DOM 以抽屜形式升起來。*/
  .shop-page .commerce-shell .c-more{display:inline-flex;}
  .shop-page .c-backdrop{
    display:block;
    position:fixed;
    z-index:110;
    inset:0;
    border:0;
    background:rgba(38,24,21,.44);
    opacity:0;
    visibility:hidden;
    transition:opacity .24s ease,visibility .24s ease;
  }
  .shop-page.is-filter-open .c-backdrop{opacity:1;visibility:visible;}
  /* 背景捲動鎖。放在 media query 裡＝寬度一超過斷點就自動失效，
     不會出現「切回桌機卻整頁捲不動」的卡死狀態。*/
  .shop-page.is-filter-open{overflow:hidden;}

  .shop-page .commerce-shell .c-side{
    position:fixed;
    z-index:120;
    /* ⚠️ top:auto 不能省。基礎樣式是 position:sticky; top:88px，不覆蓋掉的話
       抽屜會被 top 定住、離螢幕底部空 58px，看起來像浮在半空中。*/
    top:auto;
    right:0;
    bottom:0;
    left:0;
    display:block;
    max-height:82vh;
    margin:0;
    padding:0;
    overflow:auto;
    border:0;
    border-radius:22px 22px 0 0;
    background:var(--c-surface,#fff);
    box-shadow:0 -26px 60px -28px rgba(40,25,22,.62);
    transform:translateY(101%);
    visibility:hidden;
    transition:transform .26s ease,visibility .26s ease;
  }
  .shop-page.is-filter-open .commerce-shell .c-side{transform:none;visibility:visible;}

  .shop-page .commerce-shell .c-side-h{
    position:sticky;
    z-index:2;
    top:0;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    margin:0;
    padding:17px 16px 13px;
    border-right:0;
    border-bottom:1px solid var(--sf-line);
    background:var(--c-surface,#fff);
  }
  .shop-page .commerce-shell .c-side-h h2{font-size:17px;}
  .shop-page .commerce-shell .c-clear{margin-left:auto;}
  .shop-page .commerce-shell .c-sheet-x{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:none;
    border:0;
    border-radius:50%;
    background:var(--sf-canvas);
    color:var(--sf-cocoa);
    font-family:inherit;
    font-size:14px;
    cursor:pointer;
  }

  /* 抽屜裡不再是「下拉」，而是一次展開一組的摺疊清單：選單改成 static 才會把
     下面的群組推開，而不是浮在上面蓋住它們。展開／收合仍由同一組 is-open 狀態決定。*/
  .shop-page .commerce-shell #fGroups{display:block;padding:2px 8px;}
  .shop-page .commerce-shell .c-group{display:block;border-top:1px solid var(--sf-line);}
  .shop-page .commerce-shell .c-group:first-child{border-top:0;}
  .shop-page .commerce-shell .c-fdrop{position:static;}
  .shop-page .commerce-shell .c-fbtn{
    display:flex;
    width:100%;
    max-width:none;
    gap:10px;
    padding:16px 10px;
    border:0;
    border-radius:0;
    background:none;
    font-size:15px;
  }
  .shop-page .commerce-shell .c-fbtn .n{font-size:15px;color:var(--sf-ink,inherit);}
  .shop-page .commerce-shell .c-fbtn .v{margin-left:auto;color:var(--sf-cocoa);font-weight:700;}
  /* 抽屜裡整條變成咖啡色反而看不清楚——已選狀態靠右邊那個值表達就夠了 */
  .shop-page .commerce-shell .c-fdrop.has-on .c-fbtn{background:none;border-color:transparent;color:inherit;}
  .shop-page .commerce-shell .c-fdrop.has-on .c-fbtn .n{color:var(--sf-ink,inherit);}
  .shop-page .commerce-shell .c-fmenu{
    position:static;
    max-width:none;
    max-height:none;
    margin:0 0 6px;
    padding:0 0 6px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
  }
  .shop-page .commerce-shell .c-fopt{padding:12px 12px;font-size:15px;}

  .shop-page .commerce-shell .c-sheet-foot{
    display:block;
    position:sticky;
    bottom:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--sf-line);
    background:var(--c-surface,#fff);
  }
  .shop-page .commerce-shell .c-sheet-done{
    width:100%;
    min-height:48px;
    border:0;
    border-radius:999px;
    background:var(--sf-deep);
    color:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
  }
  .shop-page .commerce-shell .c-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px;}
  .shop-page .commerce-shell .c-thumb{aspect-ratio:1/1;border-radius:15px;}
  .shop-page .commerce-shell .c-body{min-height:128px;padding-top:12px;}
  .shop-page .c-card-kicker{font-size:6.5px;letter-spacing:.12em;}
  .shop-page .commerce-shell .c-title{font-size:14px;}
  .shop-page .commerce-shell .c-sub{font-size:10.5px;}
  .shop-page .commerce-shell .c-price{font-size:16px;}
  /* 兩顆鈕在 166px 寬的卡片裡並排要 184px——一定放不下。改成佔滿整行的兩欄。*/
  .shop-page .c-card-bottom{flex-direction:column;align-items:stretch;gap:10px;}
  .shop-page .commerce-shell .c-card-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .shop-page .commerce-shell .c-card-acts button{padding:9px 4px;font-size:12px;}
  .shop-page .commerce-shell .c-card-cta{width:38px;height:38px;flex-basis:38px;}

  .product-page .commerce-shell .c-wrap{padding:16px 16px 96px;}
  .product-page .c-breadcrumb{margin:0 2px 14px;font-size:10px;}
  /* ⚠️ 一定要 minmax(0,1fr)，不可以只寫 1fr。
     1fr 的意思是 minmax(auto,1fr)，那個 auto 下限＝內容的最小寬度。
     縮圖列變成六格（影片排進去之後）之後最小寬度是 438px，比手機的
     343px 還寬，欄位就被撐開；上面的 justify-content:center 再把撐開的
     部分往兩邊平均推，整個商品區就往左掉出畫面 31px。
     寫成 minmax(0,1fr) 下限是 0，欄位永遠不會超過容器，過長的內容
     由它自己的 overflow 處理（縮圖列本來就是可以橫向捲的）。
     2026-09-07 Owner 回報「手機版的購買詳情頁面跑版了」。*/
  .product-page .commerce-shell .c-detail{grid-template-columns:minmax(0,1fr);gap:22px;}
  .product-page .commerce-shell .c-gallery{position:static;}
  .product-page .commerce-shell .c-main-img{border-radius:20px;}
  .product-page .commerce-shell .c-thumbs button{width:64px;height:64px;flex-basis:64px;}
  .product-page .commerce-shell .c-info{position:static;padding:23px 19px;border-radius:20px;}
  .product-page .commerce-shell h1{font-size:30px;}
  .product-page .commerce-shell .c-price{font-size:30px;}
  .product-page .commerce-shell .c-cta{grid-template-columns:1fr 1fr;}
  .product-page .commerce-shell .c-add,
  .product-page .commerce-shell .c-buy{min-height:50px;padding:12px 8px;font-size:13px;}
  .product-page .commerce-shell .c-spec-groups{gap:17px;}
  .product-page .commerce-shell .c-spec-options{gap:8px;}
  .product-page .commerce-shell .c-spec-option{min-width:64px;min-height:42px;padding:8px 15px;}
  .product-page .c-variant-heading{align-items:flex-end;}
  .product-page .c-variant-heading>span{max-width:135px;text-align:right;line-height:1.45;}
  .product-page .c-product-story{margin-top:58px;padding-top:30px;}
  .product-page .c-story-head{grid-template-columns:1fr;gap:8px;margin-bottom:26px;}
  .product-page .c-story-head>p{font-size:13px;}
  .product-page .c-story-content{gap:28px;}
  .product-page .c-story-copy{font-size:16px;line-height:1.95;}   /* Owner：太小。手機是主要閱讀裝置，不該比桌機縮太多 */
  .product-page .c-story-image img,
  .product-page .c-story-split img{border-radius:16px;max-height:560px;}
  .product-page .c-story-split,
  .product-page .c-story-split.is-reverse{grid-template-columns:1fr;gap:20px;}
  .product-page .c-story-split.is-reverse figure,
  .product-page .c-story-split.is-reverse .c-story-copy{order:initial;}
  .product-page .commerce-shell .c-rel{margin-top:58px;}
  .product-page .commerce-shell .c-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;}
  .product-page .c-mobile-buybar{
    position:fixed;
    z-index:88;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:68px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid var(--sf-line);
    background:rgba(255,253,250,.96);
    box-shadow:0 -18px 38px -34px rgba(40,25,22,.9);
    backdrop-filter:blur(15px);
  }

  .product-page .c-mobile-buybar small,
  .cart-page .c-mobile-cartbar small{display:block;margin-bottom:2px;color:var(--sf-muted);font-size:9px;}
  .product-page .c-mobile-buybar strong,
  .cart-page .c-mobile-cartbar strong{color:var(--sf-cocoa);font-family:var(--c-serif);font-size:18px;}
  .product-page .c-mobile-buybar button,
  .cart-page .c-mobile-cartbar button{
    min-width:148px;
    min-height:46px;
    border:0;
    border-radius:999px;
    background:var(--sf-deep);
    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
  }
  .product-page .c-mobile-buybar button:disabled,
  .cart-page .c-mobile-cartbar button:disabled{opacity:.45;}

  .cart-page .commerce-shell .c-wrap{padding:30px 16px 100px;}
  .cart-page .c-cart-heading{align-items:flex-start;margin-bottom:20px;}
  .cart-page .commerce-shell .c-cart-heading h1{font-size:36px;}
  .cart-page .c-cart-heading p{max-width:240px;font-size:13px;line-height:1.6;}
  .cart-page .c-cart-heading>b{padding-top:30px;white-space:nowrap;}
  .cart-page .c-cart-benefits{grid-template-columns:1fr;margin-bottom:22px;}
  .cart-page .c-cart-benefits span{justify-content:flex-start;min-height:44px;padding:0 14px;}
  .cart-page .c-cart-benefits span+span{border-top:1px solid var(--sf-line);border-left:0;}
  .cart-page .commerce-shell .c-cartgrid{grid-template-columns:1fr;gap:18px;}
  .cart-page .commerce-shell .c-summary{position:static;padding:21px;}
  .cart-page .commerce-shell .c-line{grid-template-columns:82px minmax(0,1fr);gap:13px;padding:13px;}
  .cart-page .commerce-shell .c-thumb{width:82px;height:82px;grid-row:1 / span 2;}
  .cart-page .commerce-shell .c-r{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;width:100%;}
  .cart-page .commerce-shell .c-line .t{font-size:15px;}
  .cart-page .commerce-shell .c-mobile-cartbar{
    position:fixed;
    z-index:88;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:68px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid var(--sf-line);
    background:rgba(255,253,250,.96);
    box-shadow:0 -18px 38px -34px rgba(40,25,22,.9);
    backdrop-filter:blur(15px);
  }
}

@media(max-width:380px){
  .storefront-page .commerce-shell .c-brand{font-size:16px!important;}
  .storefront-page .commerce-shell .c-cartlink{padding-inline:10px;}
  .shop-page .c-hero-index{padding-inline:20px;}
  .shop-page .c-hero-main{padding-inline:20px;}
  .shop-page .commerce-shell .c-hero h1{font-size:35px;}
  .shop-page .c-hero-secondary{font-size:10px!important;}
  .product-page .commerce-shell .c-spec-option{min-width:60px;padding-inline:13px;}
  .product-page .commerce-shell .c-cta{grid-template-columns:1fr;}
}

@media(prefers-reduced-motion:reduce){
  .storefront-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
}

/* ───────────────────── 結帳 ─────────────────────
   Owner 2026-09-07：「你的結帳畫面怎麼設計成這個樣子？你不能像購物車頁面
   那樣子那麼漂亮嗎？」

   ⚠️ 根本原因不是版型寫得差，是這一頁**根本沒載這支樣式**，body 也沒有
      storefront-page。所以它停在改版前的樣子，跟購物車、商品頁是兩套語言。
      補上之後，下面只需要把結帳特有的區塊接上同一套語彙。 */

.checkout-page .commerce-shell .c-wrap{
  max-width:1180px;
  padding:42px 28px 110px;
}

/* 標題：與購物車同一組（小標眼、大標、說明，右邊一個件數） */
.checkout-page .checkout-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:26px;
}
.checkout-page .checkout-heading>div>span{
  display:block;
  margin-bottom:9px;
  color:var(--sf-copper);
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
}
.checkout-page .commerce-shell .checkout-title{
  margin:0;
  font-size:clamp(34px,4vw,46px);
}
.checkout-page .checkout-lead{
  margin-top:8px;
  color:var(--sf-muted);
  font-size:15px;
}
.checkout-page .checkout-heading>b{
  padding-bottom:5px;
  color:var(--sf-cocoa);
  font-size:14px;   /* Owner 2026-09-07：12px 太小 */
  white-space:nowrap;
}

/* 兩欄：左表單、右摘要。與購物車同寬，兩頁接著看不會位移 */
.checkout-page .checkout-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 370px;
  gap:34px;
  align-items:start;
}

/* 左欄整體是一張紙，不是一堆散落的欄位 */
.checkout-page .checkout-form{
  padding:30px 32px 34px;
  border:1px solid var(--sf-line);
  border-radius:22px;
  background:var(--sf-paper);
  box-shadow:var(--sf-shadow);
}

/* ⚠️ 段落標題要有分隔感。原本 h2 只是加粗的一行字，六個區塊黏成一片，
      客人看不出「填到哪裡了」。改成上方細線＋字距，段落自然分開。 */
.checkout-page .checkout-form h2{
  margin:30px 0 16px;
  padding-top:22px;
  border-top:1px solid var(--sf-line);
  font-size:19px;
  letter-spacing:.02em;
}
.checkout-page .checkout-form h2:first-child{margin-top:0;padding-top:0;border-top:0;}

.checkout-page .checkout-contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px;
}

/* 欄位：與商品頁的輸入框同一個手感 */
.checkout-page .commerce-shell .field{margin-bottom:18px;}
.checkout-page .commerce-shell .field label{
  margin-bottom:8px;
  color:var(--sf-deep);
  font-size:13.5px;
  font-weight:700;
}
.checkout-page .commerce-shell .field input,
.checkout-page .commerce-shell .field textarea,
.checkout-page .commerce-shell .field select{
  padding:13px 15px;
  border:1px solid var(--sf-line);
  border-radius:13px;
  background:var(--sf-canvas);
  font-size:15px;
  transition:border-color .15s,background .15s;
}
.checkout-page .commerce-shell .field input:focus,
.checkout-page .commerce-shell .field textarea:focus,
.checkout-page .commerce-shell .field select:focus{
  outline:none;
  border-color:var(--sf-copper);
  background:var(--sf-paper);
}

/* ⚠️ 配送方式原本是四行光禿禿的圓鈕，選項與說明擠在同一行。
      改成可以整塊點的卡片：手機上手指按得到，選中的那張也一眼看得出來。 */
.checkout-page .commerce-shell .shipopt{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  padding:14px 16px;
  border:1px solid var(--sf-line);
  border-radius:14px;
  background:var(--sf-canvas);
  font-size:15px;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.checkout-page .commerce-shell .shipopt:hover{border-color:var(--sf-copper);}
.checkout-page .commerce-shell .shipopt:has(input:checked){
  border-color:var(--sf-cocoa);
  background:var(--sf-paper);
  box-shadow:inset 0 0 0 1px var(--sf-cocoa);
}
.checkout-page .commerce-shell .shipopt input{accent-color:var(--sf-cocoa);width:18px;height:18px;}

/* ⚠️ 表單裡的 panel（退貨須知、會員折抵）要用底色區分，不要再是白底加框。
      白卡片裡再放一張白卡片，只看得到一條淺灰線，看起來像沒對齊的破圖。 */
.checkout-page .checkout-form .panel{
  border-color:var(--sf-line);
  border-radius:14px;
  background:var(--sf-canvas);
}

/* 右欄摘要：與購物車的摘要卡同一張臉 */
.checkout-page .checkout-summary-card{
  position:sticky;
  top:22px;
  padding:26px;
  border:1px solid var(--sf-line);
  border-radius:22px;
  background:var(--sf-paper);
  box-shadow:var(--sf-shadow);
}
.checkout-page .checkout-summary-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.checkout-page .checkout-summary-head h2{margin:0;font-size:20px;}
.checkout-page .checkout-summary-head a{
  color:var(--sf-copper);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* ⚠️ 摘要裡的 panel 不要再加一層框。卡片裡再套卡片會變成雙重邊框，
      那正是原本看起來雜亂的原因之一。 */
.checkout-page .checkout-summary-card .panel{
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.checkout-page .checkout-summary-card .panel+.panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--sf-line);
}
.checkout-page .commerce-shell .srow{
  gap:14px;
  align-items:baseline;
  padding:8px 0;
  font-size:15px;
}

/* ⚠️ 金額不可以換行，也不可以被品名擠掉。
   品名那一格要 min-width:0，否則 flex 不讓它縮，長品名就會把金額推到下一行——
   Owner 2026-09-07 回報「訂單摘要排版有點跑版了字都換行了」就是這個。 */
.checkout-page .commerce-shell .srow .sname{
  min-width:0;
  line-height:1.45;
}
.checkout-page .commerce-shell .srow .sname small{
  display:block;
  margin-top:2px;
  color:var(--sf-muted);
  font-size:12px;
}
.checkout-page .commerce-shell .srow .samt{
  flex:0 0 auto;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.checkout-page .commerce-shell .srow.grand{
  font-size:21px;
  border-top:1px solid var(--sf-line);
  margin-top:10px;
  padding-top:14px;
}
.checkout-page .commerce-shell .btn{
  margin-top:14px;
  padding:17px;
  border-radius:999px;
  font-size:16px;
  letter-spacing:.02em;
}
.checkout-page .commerce-shell .note{
  margin-top:12px;
  border:1px solid var(--sf-line);
  border-radius:14px;
  background:var(--sf-champagne);
  font-size:13px;
}

/* 900px：右欄是固定的 370px，再窄就擠不下兩欄了 */
@media(max-width:900px){
  .checkout-page .checkout-grid{grid-template-columns:minmax(0,1fr);gap:22px;}
  .checkout-page .checkout-summary-card{position:static;}
}

/* 720px：與購物車同一個手機斷點，兩頁的留白與字級才會一致 */
@media(max-width:720px){
  .checkout-page .commerce-shell .c-wrap{padding:30px 16px 100px;}
  .checkout-page .checkout-heading{align-items:flex-start;margin-bottom:20px;}
  .checkout-page .commerce-shell .checkout-title{font-size:36px;}
  .checkout-page .checkout-lead{max-width:240px;font-size:13px;line-height:1.6;}
  .checkout-page .checkout-heading>b{padding-top:30px;}
  .checkout-page .checkout-form{padding:22px 18px 26px;border-radius:18px;}
  .checkout-page .checkout-summary-card{padding:21px;border-radius:18px;}
  .checkout-page .checkout-contact-grid{grid-template-columns:1fr;gap:0;}
  .checkout-page .checkout-form h2{margin:24px 0 14px;padding-top:18px;font-size:17px;}
}