/* ==== from post_content style#tallizen-home-images ==== */

.home-figure { margin: 0; display: block; }



.home-figure img { display: block; max-width: 100%; height: auto; border-radius: 6px; }



.hero-section .hero-inner {



  display: flex; flex-direction: column; gap: 24px;



  max-width: 1200px; margin: 0 auto; padding: 40px 20px;



}



.hero-section .hero-content { flex: 1; }



.hero-section .hero-visual { flex: 1; width: 100%; }



.hero-section .hero-visual img {



  width: 100%; height: auto;



  box-shadow: 0 8px 24px rgba(20,80,74,0.18);



}



.cs-banner { width: 100%; height: auto; max-width: 100%; margin: 12px 0; }



.lineup-banner { margin-top: 32px; }



.lineup-banner img { width: 100%; height: auto; }



.occasions-grid-img { width: 100%; height: auto; margin-bottom: 24px; border-radius: 6px; }



.concept-image { width: 100%; height: auto; margin-top: 32px; border-radius: 6px; }



.about-teaser .about-grid { display: flex; flex-direction: column; gap: 24px; align-items: center; }



.about-visual img { width: 100%; max-width: 800px; height: auto; border-radius: 6px; }



@media (min-width: 769px) {



  .hero-section .hero-inner { flex-direction: row; align-items: center; gap: 48px; padding: 80px 40px; }



  .hero-section .hero-content { flex: 1.1; }



  .hero-section .hero-visual { flex: 1; }



  .about-teaser .about-grid { flex-direction: row; gap: 40px; }



  .about-visual { flex: 1.2; }



  .about-content { flex: 1; }



}



/* ==== from post_content style#tz-home-hero-css ==== */

.tz-home-hero{max-width:1300px;margin:0 auto 56px}



.tz-home-hero-banner{position:relative;display:block;width:100%;border-radius:20px;overflow:hidden;box-shadow:0 20px 56px rgba(58,36,16,.24)}



.tz-home-hero-banner img{width:100%;height:auto;display:block}



.tz-home-hero-cta{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:inline-block;padding:15px 40px;background:#F5B301;color:#2A1A0E;font-weight:800;font-size:17px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:.2s;white-space:nowrap}



.tz-home-hero-cta:hover{background:#FFC92E;transform:translateX(-50%) translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.34)}



.tz-home-hero-cta b{font-size:20px;margin-left:4px}



.tz-home-hero-badge{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(30,18,8,.82);color:#F5E6D2;padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:600;backdrop-filter:blur(8px);border:1px solid rgba(245,179,1,.32)}



.tz-home-hero-badge i{width:8px;height:8px;background:#F5B301;border-radius:50%;box-shadow:0 0 8px #F5B301}



.tz-home-hero-text{max-width:1000px;margin:38px auto 0;text-align:center}



.tz-home-hero-eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;padding:6px 15px;background:rgba(245,179,1,.14);color:#A9761A;border-radius:99px;font-weight:700;margin-bottom:16px}



.tz-home-hero-text h1{font-size:42px;font-weight:800;line-height:1.18;color:#0F2A28;margin:0 0 14px;letter-spacing:-.5px}



.tz-home-hero-sub{font-size:17px;line-height:1.75;color:#4C554F;margin:0 0 26px}



.tz-home-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;justify-content:center}



.tz-home-hero-btns .btn-primary,.tz-home-hero-btns .btn-ghost{padding:15px 32px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px;transition:.18s;border:2px solid transparent;display:inline-block}



.tz-home-hero-btns .btn-primary{background:#F5B301;color:#2A1A0E;box-shadow:0 8px 22px rgba(245,179,1,.28)}



.tz-home-hero-btns .btn-primary:hover{background:#FFC92E;transform:translateY(-2px)}



.tz-home-hero-btns .btn-ghost{background:transparent;color:#14504A;border-color:rgba(20,80,74,.32)}



.tz-home-hero-btns .btn-ghost:hover{background:rgba(20,80,74,.06);border-color:#14504A}



.tz-home-hero-stats{list-style:none;padding:24px 0 0;margin:0;display:flex;gap:36px;justify-content:center;border-top:1px solid #e6dfc9}



.tz-home-hero-stats li{text-align:center}



.tz-home-hero-stats b{display:block;font-size:24px;font-weight:800;color:#A9761A;line-height:1}



.tz-home-hero-stats span{display:block;font-size:12px;color:#838C85;margin-top:4px;letter-spacing:.5px}



@media(max-width:768px){.tz-home-hero{margin-bottom:40px}.tz-home-hero-banner{border-radius:14px}.tz-home-hero-cta{bottom:5%;padding:12px 26px;font-size:14.5px}.tz-home-hero-cta b{font-size:17px}.tz-home-hero-badge{right:10px;bottom:10px;padding:6px 11px;font-size:11px}.tz-home-hero-text{margin-top:26px}.tz-home-hero-text h1{font-size:28px}.tz-home-hero-sub{font-size:15px}.tz-home-hero-btns{gap:10px;margin-bottom:24px}.tz-home-hero-btns .btn-primary,.tz-home-hero-btns .btn-ghost{padding:13px 20px;font-size:15px;width:100%}.tz-home-hero-stats{gap:14px;padding-top:18px;flex-wrap:wrap}.tz-home-hero-stats b{font-size:18px}}



/* ==========================================================



   Hero 防遮挡 + 顶部留白



   Kadence 首页用 transparent-header, header 浮在内容上。



   这里给 hero 留出 header 高度, 保证 header 永远可见、



   banner 图永远从 header 下方开始, 两者不重叠。



   ========================================================== */



/* Hero 容器自身: 永远在 header 之下 */



.tz-home-hero{



  position:relative;



  z-index:1;



  clear:both;



  max-width:1300px;



  margin-left:auto;



  margin-right:auto;



  /* 顶部留白 = header 高度 */



  padding-top:90px;



  margin-bottom:56px;



}



.tz-home-hero-banner{



  position:relative;



  z-index:1;



  isolation:isolate;



  display:block;



  width:100%;



  border-radius:20px;



  overflow:hidden;



  box-shadow:0 20px 56px rgba(58,36,16,.24);



}



.tz-home-hero-banner img{width:100%;height:auto;display:block}



}



/* 平板 */



@media (min-width:768px) and (max-width:1023px){



  .tz-home-hero{padding-top:82px}



}



/* 移动端 */



@media (max-width:767px){



  :root{--tz-header-h:64px}



  .tz-home-hero{



    padding-top:72px;



    margin-bottom:40px;



  }



  .tz-home-hero-banner{border-radius:14px}



  



}



/* ==== from post_content style#tz-hero-v3-css ==== */

.tz-hero-v3 {position:relative;background:linear-gradient(135deg,#0F2A28 0%,#1A4038 50%,#14504A 100%);color:#fff;border-radius:24px;overflow:hidden;padding:64px 40px;margin:0 0 64px}



.tz-hero-v3::before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(245,179,1,.18) 0%,transparent 60%);pointer-events:none}



.tz-hero-v3-inner {position:relative;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1140px;margin:0 auto}



@media(max-width:768px){.tz-hero-v3{padding:48px 24px}.tz-hero-v3-inner{grid-template-columns:1fr;gap:32px}}



.tz-hero-v3-eyebrow {display:inline-block;font-size:12px;letter-spacing:2px;padding:6px 14px;background:rgba(245,179,1,.18);color:#F5B301;border-radius:99px;font-weight:600;margin-bottom:18px}



.tz-hero-v3-title {font-size:48px;font-weight:800;line-height:1.15;color:#fff;margin:0 0 16px;letter-spacing:-.5px}



@media(max-width:768px){.tz-hero-v3-title{font-size:34px}}



.tz-hero-v3-title .accent {color:#F5B301}



.tz-hero-v3-sub {font-size:18px;line-height:1.7;color:#c5d4ce;margin:0 0 28px}



@media(max-width:768px){.tz-hero-v3-sub{font-size:15px}}



.tz-hero-v3-cta {display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}



.tz-hero-v3-cta .btn-primary,.tz-hero-v3-cta .btn-ghost {padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px;transition:.18s;border:2px solid transparent;display:inline-block}



.tz-hero-v3-cta .btn-primary {background:#F5B301;color:#0F2A28}



.tz-hero-v3-cta .btn-primary:hover {background:#FFC92E;transform:translateY(-1px)}



.tz-hero-v3-cta .btn-ghost {background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}



.tz-hero-v3-cta .btn-ghost:hover {background:rgba(255,255,255,.08);border-color:#fff}



.tz-hero-v3-stats {display:flex;gap:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}



.tz-hero-v3-stats .stat {text-align:left}



.tz-hero-v3-stats .stat-num {font-size:24px;font-weight:800;color:#F5B301;line-height:1}



.tz-hero-v3-stats .stat-label {font-size:12px;color:#9eb1aa;margin-top:4px;letter-spacing:.5px;text-transform:uppercase}



.tz-hero-v3-visual {position:relative;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);aspect-ratio:4/5}



.tz-hero-v3-visual img {width:100%;height:100%;object-fit:cover;display:block}



.tz-hero-v3-badge {position:absolute;bottom:16px;left:16px;background:rgba(15,42,40,.92);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px)}



.tz-hero-v3-badge .dot {width:8px;height:8px;background:#5bd99f;border-radius:50%;box-shadow:0 0 8px #5bd99f}



@media(max-width:768px){.tz-hero-v3-stats{gap:18px}.tz-hero-v3-stats .stat-num{font-size:18px}}



/* ==== from post_content style#tz-ba-css ==== */

.tz-ba {max-width:1180px;margin:64px auto;padding:48px 32px;background:#FAF9F6;border-radius:24px;border:1px solid #e6dfc9;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative}



@media(max-width:860px){.tz-ba{grid-template-columns:1fr;padding:32px 24px;gap:32px}}



.tz-ba-header {grid-column:1 / -1;text-align:center;margin-bottom:8px}



.tz-ba-header h2 {font-size:30px;font-weight:800;color:#0F2A28;margin:0 0 12px;letter-spacing:-.5px}



.tz-ba-header p {font-size:16px;color:#666;margin:0}



@media(max-width:768px){.tz-ba-header h2{font-size:24px}}



.tz-ba-side {text-align:center;padding:32px 16px;border-radius:16px;position:relative;transition:.2s}



.tz-ba-side.before {background:#fff;border:1px solid #e6e6e6}



.tz-ba-side.after {background:#0F2A28;color:#fff;border:1px solid #14504A}



.tz-ba-side .label {display:inline-block;font-size:11px;letter-spacing:2px;padding:4px 12px;border-radius:99px;margin-bottom:18px;text-transform:uppercase;font-weight:700}



.tz-ba-side.before .label {background:#f0f0f0;color:#666}



.tz-ba-side.after .label {background:rgba(245,179,1,.18);color:#F5B301}



.tz-ba-figure {width:140px;height:140px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;font-weight:800;line-height:1}



.tz-ba-side.before .tz-ba-figure {background:#f0f0f0;color:#888}



.tz-ba-side.after .tz-ba-figure {background:#F5B301;color:#0F2A28;box-shadow:0 8px 24px rgba(245,179,1,.35)}



.tz-ba-caption {font-size:14px;line-height:1.7;color:inherit;opacity:.85}



.tz-ba-side.after .tz-ba-caption {color:#c5d4ce}



.tz-ba-divider {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:#F5B301;color:#0F2A28;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:2}



@media(max-width:860px){.tz-ba-divider{position:relative;left:auto;top:auto;transform:none;margin:0 auto}}



.tz-ba-footnote {grid-column:1/-1;text-align:center;margin-top:20px;font-size:13px;color:#888}



.tz-ba-footnote strong {color:#14504A;font-weight:700}



.tz-ba-arrow {position:absolute;left:calc(50% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;color:#F5B301;z-index:1}



@media(max-width:860px){.tz-ba-arrow{display:none}}



/* ==== from post_content style#tz-xray-css ==== */

.tz-xray {max-width:1180px;margin:64px auto;padding:48px 32px;background:#0F2A28;border-radius:24px;color:#fff;overflow:hidden;position:relative}



.tz-xray::before {content:"";position:absolute;top:0;right:0;width:60%;height:100%;background:radial-gradient(circle at top right,rgba(245,179,1,.12) 0%,transparent 60%);pointer-events:none}



.tz-xray-inner {position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;max-width:1140px;margin:0 auto}



@media(max-width:860px){.tz-xray-inner{grid-template-columns:1fr;gap:32px}.tz-xray{padding:32px 24px}}



.tz-xray-header h2 {font-size:30px;font-weight:800;color:#fff;margin:0 0 16px;letter-spacing:-.5px}



.tz-xray-header h2 .accent {color:#F5B301}



.tz-xray-header p {font-size:16px;color:#c5d4ce;margin:0;line-height:1.7}



.tz-xray-figure {background:#0a1c1a;border-radius:16px;padding:24px;border:1px solid rgba(245,179,1,.15);position:relative}



.tz-xray-figure svg {width:100%;height:auto;display:block}



.tz-xray-legend {margin-top:24px;display:flex;flex-wrap:wrap;gap:8px;font-size:12px}



.tz-xray-legend span {display:inline-flex;align-items:center;gap:6px;color:#c5d4ce}



.tz-xray-legend span::before {content:"";display:inline-block;width:10px;height:10px;border-radius:2px}



.tz-xray-legend span:nth-child(1)::before {background:#E8DFC9}



.tz-xray-legend span:nth-child(2)::before {background:#A9761A}



.tz-xray-legend span:nth-child(3)::before {background:#5B7E73}



.tz-xray-legend span:nth-child(4)::before {background:#1A4038}



/* ==== unnamed-9525 ==== */

.tz-lineup-overlay{position:relative;max-width:1200px;margin:0 auto}



.tz-lineup-overlay .tz-lineup-bg{display:block;width:100%;height:auto}



.tz-lineup-overlay .tz-lineup-grid{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(6,1fr)}



.tz-lineup-overlay .tz-lineup-grid a{grid-row:1;display:block;overflow:hidden;transition:transform .3s ease,opacity .3s ease;z-index:1}



.tz-lineup-overlay .tz-lineup-grid a:hover{transform:scale(1.06);z-index:2;opacity:.92}



.tz-lineup-overlay .tz-lineup-grid img{width:100%;height:100%;object-fit:cover;display:block}



.tz-lineup-overlay .tz-tile-6cm{grid-column:3}



.tz-lineup-overlay .tz-tile-7cm{grid-column:4}



.tz-lineup-overlay .tz-tile-8cm{grid-column:5}



.tz-lineup-overlay .tz-tile-10cm{grid-column:6}



@media (max-width:768px){



.tz-lineup-overlay .tz-lineup-grid{display:none}



}



/* ==========================================================

   HEADER / BANNER OVERLAP FIX

   Kadence 首页用 transparent-header: #masthead 是

   position:absolute (out of flow), 所以页面正文从 y=0 开始,

   header 直接浮在内容上 -> banner 会被压在 header 底下。

   解决办法: 给 .tz-home-hero 预留 header 高度作为 padding-top。

   header 的定位/透明行为完全不动 (保持 Kadence 原样)。



   实测 (bsk + getBoundingClientRect):

     #masthead height = 80px (Kadence .site-main-header-inner-wrap min-height:80px)

     position = absolute (脱离文档流), 正文从 y=0 开始

   所以 padding-top 必须 >= 80px, 这里留 12~28px 余量,

   保证即使 wpautop 给 banner 包了 <p>(带来额外 margin) 也不会压到 header。

   ========================================================== */

:root{

  --tz-header-h: 75px;

}

.tz-home-hero{

  position: relative;

  z-index: 1;

  clear: both;

  margin-top: 0 !important;

  padding-top: var(--tz-header-h);

}

/* banner 自身保持在文档流内, 不做任何 absolute 逃逸 */

.tz-home-hero-banner{

  position: relative;

  z-index: 1;

  isolation: isolate;

}

/* 有 admin bar 的登录态: WordPress 给 html 加了偏移,

   #masthead 随之下移, hero 也跟着下移, 无需额外补偿。 */



@media (min-width:1024px){

  :root{ --tz-header-h: 75px; }

}

@media (min-width:768px) and (max-width:1023px){

  :root{ --tz-header-h: 72px; }

}

@media (max-width:767px){

  :root{ --tz-header-h: 59px; }



  /* ---------------------------------------------------------------

     移动端 banner 内 CTA / badge 重新排布

     移动端 banner 实测 375x500 (tz_mobile_banner.webp 1086x1448)

     原布局: CTA 居中 bottom:5% + badge 右下 bottom:10px

             -> CTA x85-290 / y562-613, badge x142-365 / y597-629, 互相压叠

     新布局: 两者改为左下角上下堆叠

             CTA   -> 左下, 缩小 (左侧是深色沙发, 黄底对比度最好)

             badge -> CTA 正上方, 缩小

     右下角 291-366px 是「+8CM 鞋图圆标」, 刻意避开不遮挡

     --------------------------------------------------------------- */

  .tz-home-hero-cta{

    left:16px;

    right:auto;

    bottom:18px;

    transform:none;

    padding:10px 18px;

    font-size:14px;

    box-shadow:0 6px 18px rgba(0,0,0,.3);

  }

  .tz-home-hero-cta b{font-size:16px;margin-left:3px}

  .tz-home-hero-cta:hover{transform:translateY(-2px)}



  .tz-home-hero-badge{

    left:16px;

    right:auto;

    bottom:76px;

    padding:5px 10px;

    font-size:10.5px;

    gap:6px;

    background:rgba(28,16,6,.9);

    white-space:nowrap;

  }

  .tz-home-hero-badge i{width:7px;height:7px}

}



/* ==========================================================

   Banner 下方賣點圖

   PC + 平板 >=768px : 橫屏整圖 (男女模特對比 + 結構原理 合一)

   移動端 <=767px    : 拆成兩張, 上=男女模特對比, 下=鞋子尺寸

   ========================================================== */

.tz-home-feature-pc,

.tz-home-feature-mb{display:none}

.tz-home-feature-pc img,

.tz-home-feature-mb img{

  display:block;

  width:100%;

  height:auto;

  background:#fff;

  border-radius:14px;

  box-shadow:0 8px 28px rgba(20,80,74,.10);

}

@media (min-width:768px){

  .tz-home-feature-pc{display:block;margin-top:20px}

}

@media (max-width:767px){

  .tz-home-feature-mb{display:block;margin-top:14px}

  .tz-home-feature-mb img{border-radius:12px}

  .tz-home-feature-mb img + img{margin-top:10px}

}



/* ==========================================================

   男鞋 / 女鞋 分類導購 (兩張並排, PC + 移動端都並排)

   ========================================================== */

.tz-home-shopby{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;

  margin-top:18px;

}

.tz-shopby-card{

  position:relative;

  display:block;

  overflow:hidden;

  border-radius:16px;

  background:#0F2A28;

  text-decoration:none;

  box-shadow:0 8px 26px rgba(20,80,74,.12);

  transition:transform .25s ease, box-shadow .25s ease;

}

.tz-shopby-card:hover{

  transform:translateY(-4px);

  box-shadow:0 16px 38px rgba(20,80,74,.22);

}

.tz-shopby-img{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  aspect-ratio:4/3;

  transition:transform .5s ease;

}

.tz-shopby-card:hover .tz-shopby-img{transform:scale(1.05)}

.tz-shopby-body{

  position:absolute;

  left:0;right:0;bottom:0;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:4px;

  padding:44px 20px 18px;

  background:linear-gradient(to top,rgba(9,26,24,.92) 0%,rgba(9,26,24,.72) 45%,rgba(9,26,24,0) 100%);

}

.tz-shopby-title{

  font-size:24px;

  font-weight:800;

  color:#fff;

  letter-spacing:2px;

  line-height:1.2;

}

.tz-shopby-sub{

  font-size:13px;

  color:rgba(255,255,255,.82);

  letter-spacing:.5px;

}

.tz-shopby-cta{

  display:inline-block;

  margin-top:8px;

  padding:7px 16px;

  background:#F5B301;

  color:#2A1A0E;

  font-size:13px;

  font-weight:700;

  border-radius:999px;

}

.tz-shopby-cta b{font-size:15px;margin-left:3px}

.tz-shopby-card:hover .tz-shopby-cta{background:#FFC92E}



@media (max-width:767px){

  .tz-home-shopby{gap:10px;margin-top:12px}

  .tz-shopby-card{border-radius:12px}

  .tz-shopby-img{aspect-ratio:3/4}

  .tz-shopby-body{padding:34px 12px 12px;gap:2px}

  .tz-shopby-title{font-size:17px;letter-spacing:1px}

  .tz-shopby-sub{font-size:10.5px;line-height:1.4}

  .tz-shopby-cta{margin-top:6px;padding:5px 11px;font-size:11px}

  .tz-shopby-cta b{font-size:13px}

}



/* ==========================================================

   依高度挑鞋 — 6 宫格 (4/6/7/8/9/10)

   PC 一排 6 个; 平板/手机 2 排 x 3 个

   ========================================================== */

.tz-lineup{

  display:grid;

  grid-template-columns:repeat(6,1fr);

  gap:10px;

  margin:22px 0 8px;

  padding:22px 16px 18px;

  background:linear-gradient(180deg,#FAF6F0 0%,#F6F1E8 100%);

  border:1px solid #EFE7D8;

  border-radius:20px;

}

.tz-lineup-tile{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  padding:10px 6px 12px;

  border-radius:14px;

  text-decoration:none;

  transition:background .22s ease, transform .22s ease, box-shadow .22s ease;

}

.tz-lineup-tile:hover{

  background:rgba(255,255,255,.72);

  transform:translateY(-3px);

  box-shadow:0 8px 22px rgba(120,95,50,.12);

}

.tz-lineup-pill{

  display:inline-block;

  min-width:52px;

  padding:5px 14px;

  background:#4A4238;

  color:#F7F1E6;

  font-size:13px;

  font-weight:800;

  letter-spacing:.5px;

  text-align:center;

  border-radius:999px;

}

.tz-lineup-shoe{

  display:block;

  width:100%;

  max-width:210px;

  height:auto;

}

.tz-lineup-meta{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:2px;

  text-align:center;

  line-height:1.35;

}

.tz-lineup-meta b{font-size:13px;font-weight:700;color:#3A332A}

.tz-lineup-meta i{font-size:11px;font-style:normal;color:#8A8175}



/* 7cm 主力款高亮 */

.tz-lineup-tile--hot .tz-lineup-pill{

  background:#B8860B;

  color:#FFF8E7;

  box-shadow:0 4px 14px rgba(184,134,11,.32);

}

.tz-lineup-tile--hot .tz-lineup-meta b{color:#B8860B}



@media (max-width:1023px){

  .tz-lineup{grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 10px 14px;border-radius:16px}

  .tz-lineup-shoe{max-width:150px}

  .tz-lineup-pill{font-size:12px;padding:4px 11px;min-width:44px}

  .tz-lineup-meta b{font-size:12px}

  .tz-lineup-meta i{font-size:10px}

}

@media (max-width:767px){

  .tz-lineup{gap:6px;padding:12px 8px 12px;margin-top:18px}

  .tz-lineup-tile{padding:8px 4px 9px;gap:6px;border-radius:11px}

  .tz-lineup-shoe{max-width:104px}

  .tz-lineup-meta i{display:none}

}



/* ==========================================================

   服務承諾 — 圖標與承諾內容一一對應

   ========================================================== */

.tz-service{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:16px;

  margin:20px 0 8px;

}

.tz-service-item{

  display:flex;

  flex-direction:column;

  align-items:center;

  text-align:center;

  gap:6px;

  padding:30px 20px 28px;

  background:linear-gradient(180deg,#FFFFFF 0%,#FAF8F3 100%);

  border:1px solid #EFE9DC;

  border-radius:18px;

  box-shadow:0 4px 16px rgba(120,95,50,.06);

  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;

}

.tz-service-item:hover{

  transform:translateY(-4px);

  border-color:#E3D9C4;

  box-shadow:0 12px 28px rgba(120,95,50,.13);

}

.tz-service-icon{

  display:block;

  width:92px;

  height:92px;

  object-fit:contain;

  margin-bottom:6px;

}

.tz-service-val{

  display:block;

  font-size:25px;

  font-weight:800;

  line-height:1.2;

  color:#B8860B;

  letter-spacing:.5px;

}

.tz-service-label{

  display:block;

  font-size:14px;

  font-weight:700;

  color:#3A332A;

  letter-spacing:1px;

}

.tz-service-desc{

  margin:4px 0 0;

  font-size:12.5px;

  line-height:1.6;

  color:#8A8175;

}



@media (max-width:1023px){

  .tz-service{grid-template-columns:repeat(2,1fr);gap:12px}

  .tz-service-icon{width:76px;height:76px}

  .tz-service-val{font-size:21px}

}

@media (max-width:767px){

  .tz-service{gap:10px;margin-top:16px}

  .tz-service-item{padding:20px 12px 18px;border-radius:14px;gap:4px}

  .tz-service-icon{width:60px;height:60px;margin-bottom:2px}

  .tz-service-val{font-size:17px}

  .tz-service-label{font-size:12px;letter-spacing:.5px}

  .tz-service-desc{font-size:11px;line-height:1.5;margin-top:2px}

}



/* ==========================================================

   依場合挑鞋 — 4 張場合圖與名稱一一對應

   ========================================================== */

.tz-occ{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:16px;

  margin:20px 0 8px;

}

.tz-occ-card{

  position:relative;

  display:block;

  overflow:hidden;

  border-radius:18px;

  text-decoration:none;

  background:#1A1A1A;

  box-shadow:0 4px 16px rgba(30,25,18,.10);

  transition:transform .28s ease, box-shadow .28s ease;

}

.tz-occ-card:hover{

  transform:translateY(-5px);

  box-shadow:0 16px 34px rgba(30,25,18,.22);

}

.tz-occ-photo{display:block;width:100%;line-height:0}

.tz-occ-photo img{

  display:block;

  width:100%;

  height:auto;

  aspect-ratio:3/2;

  object-fit:cover;

  transition:transform .6s ease;

}

.tz-occ-card:hover .tz-occ-photo img{transform:scale(1.07)}

.tz-occ-info{

  position:absolute;

  left:0;right:0;bottom:0;

  display:flex;

  flex-direction:column;

  gap:3px;

  padding:46px 18px 16px;

  background:linear-gradient(to top,rgba(15,12,8,.90) 0%,rgba(15,12,8,.66) 46%,rgba(15,12,8,0) 100%);

}

.tz-occ-info b{

  font-size:17px;

  font-weight:800;

  color:#fff;

  letter-spacing:1px;

  line-height:1.25;

}

.tz-occ-info i{

  font-style:normal;

  font-size:12px;

  color:rgba(255,255,255,.80);

  line-height:1.4;

}



@media (max-width:1023px){

  .tz-occ{grid-template-columns:repeat(2,1fr);gap:12px}

  .tz-occ-info{padding:38px 14px 13px}

  .tz-occ-info b{font-size:15px}

  .tz-occ-info i{font-size:11px}

}

@media (max-width:767px){

  .tz-occ{gap:9px;margin-top:16px}

  .tz-occ-card{border-radius:13px}

  .tz-occ-info{padding:30px 10px 10px;gap:2px}

  .tz-occ-info b{font-size:13px;letter-spacing:.5px}

  .tz-occ-info i{font-size:9.5px;line-height:1.35}

}



/* ==========================================================

   為什麼選 Tallizen — 3 張原理圖與 3 個理由一一對應

   (原理圖是淺底豎構圖, 文字放圖下方而非壓在圖上)

   ========================================================== */

.tz-why{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:18px;

  margin:20px 0 8px;

}

.tz-why-card{

  display:flex;

  flex-direction:column;

  overflow:hidden;

  background:#FCFBF8;

  border:1px solid #EDE7DA;

  border-radius:18px;

  box-shadow:0 4px 16px rgba(120,95,50,.06);

  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;

}

.tz-why-card:hover{

  transform:translateY(-4px);

  border-color:#E1D7C1;

  box-shadow:0 14px 30px rgba(120,95,50,.14);

}

.tz-why-photo{

  display:block;

  width:100%;

  padding:14px 14px 0;

  background:linear-gradient(180deg,#FFFFFF 0%,#FCFBF8 100%);

}

.tz-why-photo img{

  display:block;

  width:100%;

  height:auto;

  border-radius:10px;

  background:#FFFFFF;

}

.tz-why-info{

  display:flex;

  flex-direction:column;

  gap:8px;

  padding:16px 20px 22px;

}

.tz-why-info b{

  font-size:19px;

  font-weight:800;

  color:#B8860B;

  letter-spacing:1.5px;

  line-height:1.3;

}

.tz-why-info b::before{

  content:'';

  display:inline-block;

  width:22px;

  height:3px;

  background:#B8860B;

  border-radius:2px;

  margin-right:9px;

  vertical-align:middle;

}

.tz-why-info i{

  font-style:normal;

  font-size:13.5px;

  line-height:1.75;

  color:#6B6255;

}



@media (max-width:1023px){

  .tz-why{gap:12px}

  .tz-why-photo{padding:10px 10px 0}

  .tz-why-info{padding:13px 15px 17px;gap:6px}

  .tz-why-info b{font-size:16px;letter-spacing:1px}

  .tz-why-info i{font-size:12.5px;line-height:1.7}

}

@media (max-width:767px){

  .tz-why{gap:9px;margin-top:16px}

  .tz-why-card{border-radius:13px}

  .tz-why-photo{padding:8px 8px 0}

  .tz-why-info{padding:11px 11px 14px;gap:5px}

  .tz-why-info b{font-size:13.5px;letter-spacing:.5px}

  .tz-why-info b::before{width:14px;height:2px;margin-right:6px}

  .tz-why-info i{font-size:11px;line-height:1.6}

}



/* ==========================================================

   板塊標題與板塊間距 — 標題置中 + 上下留白

   (只作用於 .tz-sec / .tz-sec-title, 不干擾原理圖與男女對比板塊原有標題)

   ========================================================== */

.tz-sec{margin:0}

.tz-sec + .tz-sec{margin-top:92px}          /* PC 板塊間距 */

.tz-home-hero + .tz-sec{margin-top:72px}     /* hero 之後第一個板塊 */

/* 緊接在板塊之後、但沒有用 .tz-sec 標記的區塊 (站高 10 公分 / 原理圖那一帶)

   必須排除 .tz-sec, 否則 :not([aria-label]) 的特异性會蓋掉 .tz-sec + .tz-sec */

.tz-sec + section:not([aria-label]):not(.tz-sec){margin-top:56px}



.tz-sec-title{

  text-align:center;

  font-size:32px;

  font-weight:800;

  line-height:1.35;

  color:#0F2A28;

  letter-spacing:.5px;

  margin:0 0 30px;

}

.tz-sec-title::after{

  content:'';

  display:block;

  width:46px;

  height:3px;

  margin:14px auto 0;

  border-radius:2px;

  background:linear-gradient(90deg,#F5B301 0%,#B8860B 100%);

}



/* 標題下方的板塊容器本來自帶 margin-top, 會跟標題 margin 疊加, 這裡收乾淨 */

.tz-sec-title + .tz-service,

.tz-sec-title + .tz-lineup,

.tz-sec-title + .tz-occ,

.tz-sec-title + .tz-why{margin-top:0}



@media (max-width:1023px){

  .tz-sec + .tz-sec{margin-top:64px}

  .tz-home-hero + .tz-sec{margin-top:52px}

  .tz-sec + section:not([aria-label]):not(.tz-sec){margin-top:40px}

  .tz-sec-title{font-size:27px;margin:0 0 24px}

  .tz-sec-title::after{width:40px;height:3px;margin-top:12px}

}

@media (max-width:767px){

  .tz-sec + .tz-sec{margin-top:44px}

  .tz-home-hero + .tz-sec{margin-top:36px}

  .tz-sec + section:not([aria-label]):not(.tz-sec){margin-top:28px}

  .tz-sec-title{font-size:23px;margin:0 0 18px;letter-spacing:.3px}

  .tz-sec-title::after{width:34px;height:2px;margin-top:10px}

}



/* ==========================================================

   熱門商品 — PC 一批 8 個 (4 欄 x 2 排), 移動端一批 4 個 (2 欄 x 2 排)

   ========================================================== */

.tz-hot-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:18px;

  background:#FFFFFF;        /* 〖 in white only (no colored box) */
}
.tz-hot .tz-hot-card{

  display:flex;

  flex-direction:column;

  overflow:hidden;

  text-decoration:none;

  background:#FFFFFF;

  border:0 !important;       /* override related-hot plugin's border:1px solid #EFE7D8 */

  border-radius:18px;        /* keep rounded corners, no visible frame */

  box-shadow:none !important;/* override related-hot plugin's yellow shadow */

  transition:transform .25s ease;
}
.tz-hot .tz-hot-card:hover{

  transform:translateY(-5px); /* hover float only, no shadow */

  border-color:transparent;  /* safety */

  box-shadow:none !important;
}
.tz-hot .tz-hot-media{

  position:relative;

  display:block;

  width:100%;

  padding:12px 12px 0;

  background:#FFFFFF !important;        /* override related-hot plugin's beige */
}

.tz-hot-media img{

  display:block;

  width:100%;

  aspect-ratio:1/1;

  object-fit:contain;

  border-radius:12px;

  background:#FFFFFF;

}

.tz-hot .tz-hot-cm{

  position:absolute;

  top:20px;

  left:20px;

  z-index:2;

  display:inline-block;

  padding:4px 13px;          /* 1.2x scale: padding proportional bump */

  font-size:14.4px;            /* 12px × 1.2 = 14.4px (1.2x of original) */

  font-weight:800;

  letter-spacing:.5px;

  color:#000 !important;                                          /* +x cm text → pure black */

  background:#FFFFFF !important;                                  /* white bg, no more yellow gradient */

  border-radius:999px;                                             /* keep pill shape */

  box-shadow:none !important;                                      /* remove yellow shadow */

}

.tz-hot-body{

  display:flex;

  flex-direction:column;

  gap:6px;

  padding:14px 16px 18px;

}

.tz-hot-cat{

  font-style:normal;

  font-size:11px;

  letter-spacing:.8px;

  color:#A08A5E;

}

.tz-hot-name{

  font-size:14.5px;

  font-weight:700;

  line-height:1.45;

  color:#2C2620;

  min-height:2.9em;

}

.tz-hot .tz-hot-price{

  display:block;

  font-size:17px;

  font-weight:800;

  color:#000 !important;            /* price number = pure black */

}
.tz-hot .tz-hot-price .woocommerce-Price-currencySymbol{color:#000 !important}    /* currency symbol (NT$) = pure black */
.tz-hot .tz-hot-price .amount{color:#000 !important; font-size:17px}             /* amount span = pure black */
.tz-hot .tz-hot-price del{color:#000 !important; font-size:12.5px; font-weight:400; margin-right:6px; text-decoration:line-through}  /* old price crossed out black */
.tz-hot .tz-hot-price ins{text-decoration:none; color:#000 !important}

.tz-hot-price del{font-size:12.5px;font-weight:400;color:#9A9186;margin-right:6px}

.tz-hot-price ins{text-decoration:none}

.tz-hot-price .amount{font-size:17px}

.tz-hot-cta{

  display:block;

  margin-top:2px;

  padding:9px 0;

  font-size:12.5px;

  font-weight:700;

  letter-spacing:1px;

  text-align:center;

  color:#4A4034;

  background:#F4EEE2;

  border-radius:10px;

  transition:background .22s ease, color .22s ease;

}

.tz-hot-card:hover .tz-hot-cta{background:#FFC92E;color:#2C2620}
/* 首頁 .tz-hot 才有 wrapper, 相關商品 (.tz-related-hot) 不在內 → 只隱藏首頁按鈕 */
.tz-hot .tz-hot-cta{display:none!important}




/* 未展開的卡片先藏起來, 由 JS 逐批顯示 */

.tz-hot-card{display:none}

.tz-hot-card.is-on{display:flex}

/* 首頁熱門區塊 (.tz-hot) 要用更高特異性才壓得過上面那兩條。
   上面的 .tz-hot .tz-hot-card{display:flex} 特異性是 (0,2,0),
   會蓋掉 .tz-hot-card{display:none} 的 (0,1,0) → 16 張全部顯示,
   「載入更多」按鈕按下去看不到任何變化 (死按鈕)。
   這裡用 (0,3,0) 明確指定: 沒有 .is-on 就隱藏, 有 .is-on 才顯示。
   只影響首頁 .tz-hot 包起來的那一區, 商品頁/尺碼頁/商店頁不在 .tz-hot 內, 不受影響。 */

.tz-hot .tz-hot-card:not(.is-on){display:none}

.tz-hot .tz-hot-card.is-on{display:flex}



.tz-hot-actions{

  display:flex;

  justify-content:center;

  margin-top:32px;

}

.tz-hot-more{

  display:inline-block;

  padding:14px 46px;

  font-size:15px;

  font-weight:800;

  letter-spacing:1.5px;

  color:#2C2620;

  background:#FFFFFF;

  border:2px solid #D9CBAE;

  border-radius:999px;

  cursor:pointer;

  text-decoration:none;   /* 這顆是 <a>, 不要底線 */

  transition:background .22s ease, border-color .22s ease, transform .22s ease;

}

.tz-hot-more:hover{

  background:#FFC92E;

  border-color:#FFC92E;

  transform:translateY(-2px);

}

.tz-hot-more.is-done{

  color:#FFF8E7;

  background:linear-gradient(135deg,#B8860B 0%,#D9A520 100%);

  border-color:transparent;

}



@media (max-width:1023px){

  .tz-hot-grid{grid-template-columns:repeat(4,1fr);gap:12px}

  .tz-hot-name{font-size:13px;min-height:2.9em}

  .tz-hot-body{padding:12px 12px 15px;gap:5px}

  .tz-hot-cta{padding:8px 0;font-size:11.5px}

}

@media (max-width:767px){

  .tz-hot-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  .tz-hot-card{border-radius:13px}

  .tz-hot-media{padding:8px 8px 0}

  .tz-hot-media img{border-radius:9px}

  .tz-hot .tz-hot-cm{top:13px;left:13px;font-size:12px;padding:3px 9px;letter-spacing:.5px}

  .tz-hot-body{padding:10px 10px 12px;gap:4px}

  .tz-hot-cat{font-size:9.5px;letter-spacing:.4px}

  .tz-hot-name{font-size:11.5px;line-height:1.4;min-height:2.8em}

  .tz-hot .tz-hot-price{font-size:14px}

  .tz-hot .tz-hot-price .amount{font-size:14px}

  .tz-hot-cta{padding:7px 0;font-size:10.5px;letter-spacing:.5px;border-radius:8px}

  .tz-hot-actions{margin-top:22px}

  .tz-hot-more{padding:12px 34px;font-size:13.5px;letter-spacing:1px}

}



/* ==========================================================
   商店列表套用首頁 .tz-hot 卡片的同款樣式 (.tz-shop-item > .tz-hot-card).
   上方 .tz-hot .X 規則只在首頁生效, 這裡把 .tz-shop-item .X 補一份同樣效果.
   ========================================================== */

.tz-shop-item .tz-hot-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none;
  background:#FFFFFF;
  border:0 !important;       /* override shop/original yellow border #EFE7D8 */
  border-radius:18px;
  box-shadow:none !important; /* override original shadow */
  transition:transform .25s ease;
}
.tz-shop-item .tz-hot-card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:none !important;
}
.tz-shop-item .tz-hot-media{
  background:#FFFFFF !important;  /* no beige gradient */
}
.tz-shop-item .tz-hot-cta{
  display:none !important;  /* hide "查看款式" — same as home */
}

/* 商店卡片价格全部改黑 + 货币符号 */
.tz-shop-item .tz-hot-price{
  display:block;
  font-size:17px;
  font-weight:800;
  color:#000 !important;
}
.tz-shop-item .tz-hot-price .woocommerce-Price-currencySymbol{
  color:#000 !important;
}
.tz-shop-item .tz-hot-price .amount{
  color:#000 !important;
  font-size:17px;
}
.tz-shop-item .tz-hot-price del{
  color:#000 !important;
  font-size:12.5px;
  font-weight:400;
  margin-right:6px;
  text-decoration:line-through;
}
.tz-shop-item .tz-hot-price ins{
  text-decoration:none;
  color:#000 !important;
  font-size:14px;
}

/* +x cm 角标: 黑白干净版 (1.2x 字號, 与首页一致) */
.tz-shop-item .tz-hot-cm{
  position:absolute;
  top:20px;
  left:20px;
  z-index:2;
  display:inline-block;
  padding:4px 13px;
  font-size:14.4px;
  font-weight:800;
  letter-spacing:.5px;
  color:#000 !important;
  background:#FFFFFF !important;
  border-radius:999px;
  box-shadow:none !important;
}

/* 商店卡片 mobile 调整 */
@media (max-width:767px){
  .tz-shop-item .tz-hot-cm{
    top:13px;
    left:13px;
    font-size:12px;
    padding:3px 9px;
    letter-spacing:.5px;
  }
  .tz-shop-item .tz-hot-price{font-size:14px}
  .tz-shop-item .tz-hot-price .amount{font-size:14px}
}

/* PC only — 商店卡片價格-標題間距與首頁一致 (-3px) */
@media (min-width:1024px){
  .tz-shop-item .tz-hot-price{
    margin-top:-3px !important;
  }
}


/* PC only — 把首頁熱門商品板的價格上拉 3px, 拉近跟標題的距離 (平板/手機保持默認 6px gap) */

@media (min-width: 1024px) {

  .tz-hot .tz-hot-price{

    margin-top:-3px !important;  /* half the gap between title and price */

  }

}



/* ==========================================================

   增高鞋影片 — 仿 chamaripa 直式影片卡, 橫向可左滑

   PC 一排可見 4-5 支, 移動端 2 支並排, 一律橫向滑動

   ========================================================== */

.tz-vid-track{position:relative}

.tz-vid-rail{

  display:flex;

  gap:16px;

  overflow-x:auto;

  overscroll-behavior-x:contain;

  scroll-snap-type:x proximity;

  scroll-behavior:smooth;

  -webkit-overflow-scrolling:touch;

  padding:6px 6px 14px;

  margin:0;

  scrollbar-width:none;

}

.tz-vid-rail::-webkit-scrollbar{display:none}



.tz-vid-card{

  flex:0 0 auto;

  width:236px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:9px;

  scroll-snap-align:start;

}

.tz-vid-media{

  position:relative;

  display:block;

  width:100%;

  aspect-ratio:3/4;

  border-radius:16px;

  overflow:hidden;

  background:linear-gradient(180deg,#EFE9DC 0%,#E4DCCB 100%);

  box-shadow:0 6px 20px rgba(60,45,20,.14);

  cursor:pointer;

  transition:transform .28s ease, box-shadow .28s ease;

}

.tz-vid-media:focus-visible{

  outline:3px solid #D9A520;

  outline-offset:3px;

}

.tz-vid-media:hover{

  transform:translateY(-5px);

  box-shadow:0 16px 34px rgba(60,45,20,.24);

}

.tz-vid-video{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  background:#EFE9DC;

}

.tz-vid-play{

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

  width:54px;

  height:54px;

  border-radius:50%;

  background:rgba(24,18,10,.42);

  border:1.5px solid rgba(255,255,255,.55);

  backdrop-filter:blur(2px);

  -webkit-backdrop-filter:blur(2px);

  transition:background .22s ease, transform .22s ease, opacity .22s ease;

  pointer-events:none;

}

/* 播放中就把中央按鈕收掉, 讓觀眾看到畫面本身 */

.tz-vid-media.is-playing .tz-vid-play{opacity:0;transform:translate(-50%,-50%) scale(.7)}

.tz-vid-play::after{

  content:'';

  position:absolute;

  left:53%;

  top:50%;

  transform:translate(-50%,-50%);

  border-left:15px solid #FFFFFF;

  border-top:9px solid transparent;

  border-bottom:9px solid transparent;

}

.tz-vid-media:hover .tz-vid-play{background:rgba(184,134,11,.88);transform:translate(-50%,-50%) scale(1.06)}

.tz-vid-cm{

  position:absolute;

  top:10px;

  left:10px;

  z-index:2;

  display:inline-block;

  padding:3px 10px;

  font-size:11.5px;

  font-weight:800;

  letter-spacing:.5px;

  color:#FFF8E7;

  background:linear-gradient(135deg,#B8860B 0%,#D9A520 100%);

  border-radius:999px;

  box-shadow:0 3px 10px rgba(184,134,11,.34);

}

.tz-vid-name{

  font-size:13.5px;

  font-weight:700;

  line-height:1.45;

  text-align:center;

  color:#3A332A;

  min-height:2.9em;

}

.tz-vid-buy{

  display:block;

  width:100%;

  padding:10px 28px;

  font-size:13px;

  font-weight:800;

  letter-spacing:1px;

  text-align:center;

  color:#FFFFFF;

  text-decoration:none;

  background:linear-gradient(135deg,#B8860B 0%,#D9A520 100%);

  border-radius:999px;

  box-shadow:0 4px 14px rgba(184,134,11,.30);

  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;

}

.tz-vid-buy:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(184,134,11,.40);filter:brightness(1.06)}



/* 滑動提示 (只PC顯示, 移動端滑動是自然的) */

.tz-vid-hint{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  margin-top:6px;

  font-size:12px;

  letter-spacing:1.5px;

  color:#A08A5E;

}

.tz-vid-hint::before,

.tz-vid-hint::after{

  content:'';

  width:26px;

  height:1px;

  background:linear-gradient(90deg,rgba(160,138,94,0),rgba(160,138,94,.7));

}

.tz-vid-hint::after{background:linear-gradient(90deg,rgba(160,138,94,.7),rgba(160,138,94,0))}



@media (max-width:1023px){

  .tz-vid-card{width:190px}

  .tz-vid-rail{gap:12px}

  .tz-vid-name{font-size:12.5px}

  .tz-vid-buy{padding:9px 22px;font-size:12px}

  .tz-vid-play{width:46px;height:46px}

  .tz-vid-play::after{border-left:13px solid #FFF;border-top:8px solid transparent;border-bottom:8px solid transparent}

}

@media (max-width:767px){

  .tz-vid-rail{gap:10px;padding:4px 6px 10px;margin:0}

  .tz-vid-card{width:calc(50% - 5px);gap:7px}

  .tz-vid-media{border-radius:12px}

  .tz-vid-cm{top:7px;left:7px;font-size:9.5px;padding:2px 8px}

  .tz-vid-play{width:40px;height:40px}

  .tz-vid-play::after{border-left:11px solid #FFF;border-top:7px solid transparent;border-bottom:7px solid transparent}

  .tz-vid-name{font-size:11.5px;line-height:1.4;min-height:2.8em}

  .tz-vid-buy{width:100%;padding:8px 0;font-size:11.5px;letter-spacing:.5px}

  .tz-vid-hint{font-size:11px;letter-spacing:1px;margin-top:2px}

}



/* ==========================================================

   關於 Tallizen — PC 圖左文右, 平板/手機維持原本的圖上文下

   ========================================================== */

.tz-about{

  display:grid;

  grid-template-columns:56% 1fr;

  align-items:center;

  gap:56px;

}

.tz-about-media{margin:0}

.tz-about-media figure{margin:0;line-height:0}

.tz-about-media img{

  display:block;

  width:100%;

  height:auto;

  aspect-ratio:3/2;

  object-fit:cover;

  border-radius:20px;

  box-shadow:0 10px 34px rgba(60,45,20,.14);

}

.tz-about-text{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

.tz-about-text p{

  margin:0;

  font-size:17px;

  line-height:1.85;

  color:#4A4034;

}

.tz-about-lead{

  font-size:21px !important;

  font-weight:800;

  color:#0F2A28;

  letter-spacing:.5px;

  line-height:1.55;

}

/* 兩段文案按斷點切換: 桌機長版 / 平板手機短版 */

.tz-about-desc.is-mb{display:none}

.tz-about-link{

  display:inline-block;

  margin-top:4px;

  padding:13px 34px;

  font-size:14.5px;

  font-weight:800;

  letter-spacing:1px;

  text-decoration:none;

  color:#FFF8E7;

  background:linear-gradient(135deg,#B8860B 0%,#D9A520 100%);

  border-radius:999px;

  box-shadow:0 6px 18px rgba(184,134,11,.28);

  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;

}

.tz-about-link:hover{

  transform:translateY(-2px);

  box-shadow:0 12px 26px rgba(184,134,11,.38);

  filter:brightness(1.06);

}



@media (max-width:1023px){

  .tz-about{grid-template-columns:1fr;gap:28px}

  .tz-about-text{align-items:flex-start}

  .tz-about-text p{font-size:15.5px;line-height:1.8}

  .tz-about-lead{font-size:19px !important}

  .tz-about-desc.is-pc{display:none}

  .tz-about-desc.is-mb{display:block}

}

@media (max-width:767px){

  .tz-about{gap:20px}

  .tz-about-media img{border-radius:14px}

  .tz-about-text{gap:12px}

  .tz-about-text p{font-size:14.5px;line-height:1.78}

  .tz-about-lead{font-size:17.5px !important}

  .tz-about-link{width:100%;padding:12px 0;text-align:center;font-size:13.5px;letter-spacing:.8px}

}



/* ==========================================================

   常見問題 FAQ — 手風琴, 前三題預設展開

   ========================================================== */

.tz-faq{

  display:flex;

  flex-direction:column;

  gap:12px;

  max-width:980px;

  margin:0 auto;

}

.tz-faq-item{

  overflow:hidden;

  background:#FFFFFF;

  border:1px solid #EFE7D8;

  border-radius:16px;

  box-shadow:0 3px 14px rgba(120,95,50,.05);

  transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;

}

.tz-faq-item.is-open{

  border-color:#E3D9C4;

  background:#FFFDF9;

  box-shadow:0 8px 24px rgba(120,95,50,.10);

}

.tz-faq-q{

  display:flex;

  align-items:center;

  gap:16px;

  width:100%;

  padding:20px 24px;

  font-family:inherit;

  text-align:left;

  background:transparent;

  border:0;

  cursor:pointer;

  /* Kadence/主題的 button:focus 會蓋掉透明底 (0,1,1) > (0,1,0), 必須一起壓 */

  -webkit-appearance:none;

  appearance:none;

  box-shadow:none;

}

.tz-faq-q:focus,

.tz-faq-q:focus-visible{

  background:transparent;

  box-shadow:none;

  color:inherit;

  outline:none;

}

.tz-faq-q:focus-visible .tz-faq-qt{color:#B8860B}

.tz-faq-num{

  flex:0 0 auto;

  min-width:38px;

  padding:4px 0;

  font-size:13px;

  font-weight:800;

  letter-spacing:.5px;

  text-align:center;

  color:#B8860B;

  background:#F7F1E3;

  border-radius:8px;

}

.tz-faq-qt{

  flex:1 1 auto;

  font-size:17px;

  font-weight:700;

  line-height:1.5;

  color:#2C2620;

}

.tz-faq-ic{

  position:relative;

  flex:0 0 auto;

  width:26px;

  height:26px;

  border-radius:50%;

  background:#F4EEE2;

  transition:background .22s ease, transform .22s ease;

}

.tz-faq-ic::before,

.tz-faq-ic::after{

  content:'';

  position:absolute;

  left:50%;

  top:50%;

  background:#8A7B5C;

  transform:translate(-50%,-50%);

  transition:transform .22s ease, opacity .22s ease;

}

.tz-faq-ic::before{width:12px;height:2px}   /* 橫槓 */

.tz-faq-ic::after{width:2px;height:12px}    /* 豎線 */

/* 收起 = 加號(+): 橫+豎都在

   展開 = 減號(−): 只留橫線, 豎線淡出

   (原本是整個圓 rotate(90deg), 結果橫槓轉成豎的, 看起來像一條直線) */

.tz-faq-item.is-open .tz-faq-ic{background:#B8860B}

.tz-faq-item.is-open .tz-faq-ic::before,

.tz-faq-item.is-open .tz-faq-ic::after{background:#FFF8E7}

.tz-faq-item.is-open .tz-faq-ic::after{opacity:0;transform:translate(-50%,-50%) scaleY(0)}



.tz-faq-a{

  max-height:0;

  overflow:hidden;

  transition:max-height .3s ease;

}

.tz-faq-item.is-open .tz-faq-a{max-height:420px}

.tz-faq-a p{

  margin:0;

  padding:0 24px 22px 78px;

  font-size:15px;

  line-height:1.9;

  color:#5A5044;

}

.tz-faq-item.is-open + .tz-faq-item{margin-top:0}



@media (max-width:1023px){

  .tz-faq-q{padding:17px 20px;gap:13px}

  .tz-faq-qt{font-size:15.5px}

  .tz-faq-num{min-width:34px;font-size:12px}

  .tz-faq-a p{padding:0 20px 19px 67px;font-size:14px;line-height:1.85}

}

@media (max-width:767px){

  .tz-faq{gap:10px}

  .tz-faq-item{border-radius:13px}

  .tz-faq-q{padding:14px 15px;gap:10px}

  .tz-faq-num{min-width:28px;font-size:11px;border-radius:6px}

  .tz-faq-qt{font-size:14px;line-height:1.45}

  .tz-faq-ic{width:22px;height:22px}

  .tz-faq-ic::before{width:10px;height:2px}

  .tz-faq-ic::after{width:2px;height:10px}

  .tz-faq-a p{padding:0 15px 16px 15px;font-size:13px;line-height:1.8}

}



/* ==========================================================

   PC 版 Banner 通欄 + 方角

   必須放在檔案最後: 前面有 .tz-home-hero{max-width:1300px}

   和 .tz-home-hero-banner{border-radius:20px} 好幾份重複定義,

   只有追加在最後的規則才穩定贏。

   平板 / 手機維持原本的置中圓角版本不動。

   ========================================================== */

@media (min-width:1024px){

  /* 容器放寬到視口全寬 */

  .tz-home-hero{

    max-width:none;

    width:100%;

  }

  /* banner 以外的元素自己收回原本的內容寬度, 不要被拉成超寬 */

  .tz-home-feature-pc,

  .tz-home-feature-mb,

  .tz-home-shopby{

    max-width:1300px;

    margin-left:auto;

    margin-right:auto;

  }

  .tz-home-feature-pc{margin-top:20px}

  .tz-home-shopby{margin-top:18px}



  /* 方角: 圓角歸零, 貼邊的厚陰影也一併收掉 */

  .tz-home-hero-banner{

    border-radius:0;

    box-shadow:none;

  }

  /* Kadence #masthead 實測高 80px (position:absolute 脫離文檔流),

     原本只留 75px 會讓 banner 頂部被壓掉 5px, 通欄後更容易看見這條露白。

     88px = 80 + 8px 餘裕。 */

  .tz-home-hero{

    padding-top:88px;

  }

}



/* ==========================================================

   正文與頁腳之間的留白

   實測原本 gap = 0px, 最後一個 section (鞋底剖面結構) 直接貼上頁腳。

   加在 main 的 padding-bottom 而不是 footer 的 padding-top:

   兩者背景都是透明的 (body 是 rgb(247,250,252)),

   這樣留白落在頁面底色上, 不會把頁腳的色塊撐高變色。

   ========================================================== */

@media (min-width:1024px){

  main.wrap{padding-bottom:110px}

}

@media (max-width:1023px){

  main.wrap{padding-bottom:72px}

}

@media (max-width:767px){

  main.wrap{padding-bottom:52px}

}



/* ==========================================================

   FAQ 之後的「同一位同事 180 → 190 公分」板塊留白

   之前這裡實測 gap = 0: 那兩個區塊是 <section aria-label="身高前後對比">,

   剛好被上面 .tz-sec + section:not([aria-label]):not(.tz-sec) 那條排除掉了,

   導致 FAQ 最後一題直接貼上下一個板塊。分三檔給間距。

   ========================================================== */

@media (min-width:1024px){

  .tz-sec + section[aria-label]{margin-top:80px}

}

@media (max-width:1023px){

  .tz-sec + section[aria-label]{margin-top:56px}

}

@media (max-width:767px){

  .tz-sec + section[aria-label]{margin-top:36px}

}