/* =========================================================================
   品牌栏 · 一屏（v1 · 2026-09-23）
   老大要求：品牌栏（悠芯鲜 / 泰塔悠）改成固定一屏 + 按需点开子屏；
   并特别交代「注意泰塔悠的页面底色」——泰塔悠这一栏是浅米白底（原 css/tty37.css: #F7FAF7→#EDEBE1，
   强调色砖红 #a81f10），不跟着悠芯鲜走深墨绿。所以这里用 body[data-brand] 切整套色板：
     悠芯鲜 = 深墨绿底 + 柠檬绿强调 + 墨绿 #12805c
     泰塔悠 = 浅米白底 + 砖红 #a81f10 强调（入口卡也走浅底版）
   通用块（.ss-entries/.ss-entry 定位、子屏排版）复用 css/supply37.css。
   ========================================================================= */

html.onepage,html.onepage body{overflow:hidden;height:100%}
html.onepage header.nav{position:fixed;top:0;left:0;right:0}

/* ---------- 两套品牌色板 ---------- */
body[data-brand="uxx"]{--bp-accent:#12805c;--bp-mark:#CDE86B;--bp-note:#8FBBA3}
body[data-brand="tty"]{--bp-accent:#a81f10;--bp-mark:#a81f10;--bp-note:#8a6a5c}

.bp{position:relative;height:100vh;min-height:0;overflow:hidden;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;transition:background .45s ease,color .45s ease}
/* 悠芯鲜：深墨绿 */
body[data-brand="uxx"] .bp{background:#062418;color:#EAF3EC}
/* 泰塔悠：浅米白（保留品牌底色，勿改深色） */
body[data-brand="tty"] .bp{background:linear-gradient(180deg,#F7FAF7 0%,#EFF4F0 62%,#EDEBE1 100%);color:#241C18}

.bp-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.16;transition:opacity .45s ease}
body[data-brand="uxx"] .bp-bg{background-image:url("../assets/img/greenhouse_hd.png");filter:saturate(.85) brightness(.7)}
body[data-brand="tty"] .bp-bg{background-image:url("../assets/img/ring/tatayoyo_th.jpg");filter:saturate(1.02) brightness(1.3);opacity:.10}
.bp:before{content:"";position:absolute;inset:0;pointer-events:none}
body[data-brand="uxx"] .bp:before{background:
  radial-gradient(120% 90% at 12% 0%,rgba(6,36,24,.55) 0%,rgba(6,36,24,.94) 60%,#04160f 100%),
  linear-gradient(180deg,rgba(4,22,15,.85),rgba(4,22,15,.55) 45%,rgba(4,22,15,.92))}
body[data-brand="tty"] .bp:before{background:linear-gradient(180deg,rgba(247,250,247,.72),rgba(239,244,240,.62) 45%,rgba(237,235,225,.86))}

.bp-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center;
  height:100%;padding:calc(var(--nav-h,76px) + 22px) 6vw 148px;box-sizing:border-box;max-width:1560px;margin:0 auto}
/* 悠芯鲜这一栏已无底部入口框 → 上下留白对等，整块居中（泰塔悠仍有入口，保留 148px） */
body[data-brand="uxx"] .bp-wrap{padding-bottom:calc(var(--nav-h,76px) + 26px)}
/* 泰塔悠也改成纯一屏（2026-10-22 去入口）→ 与悠芯鲜同口径，上下留白对等 */
body[data-brand="tty"] .bp-wrap{padding-bottom:calc(var(--nav-h,76px) + 26px)}

/* ---------- 品牌切换 ---------- */
.bp-switch{display:inline-flex;gap:6px;padding:5px;border-radius:999px;margin-bottom:20px}
body[data-brand="uxx"] .bp-switch{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18)}
body[data-brand="tty"] .bp-switch{background:rgba(255,255,255,.72);border:1px solid rgba(168,31,16,.16)}
.bp-switch button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:9px 18px;border-radius:999px;
  font-size:14px;font-weight:600;transition:background .22s ease,color .22s ease}
body[data-brand="uxx"] .bp-switch button{color:#BBD3C6}
body[data-brand="tty"] .bp-switch button{color:#8a6a5c}
.bp-switch button em{font-style:normal;font-family:var(--latin,Inter,sans-serif);font-size:10.5px;letter-spacing:.16em;opacity:.8}
body[data-brand="uxx"] .bp-switch button.on{background:#CDE86B;color:#0B2A1B}
body[data-brand="tty"] .bp-switch button.on{background:#a81f10;color:#fff}
.bp-switch button:focus-visible{outline:3px solid var(--bp-mark);outline-offset:3px}

/* ---------- 文案 ---------- */
.bp-copy .en{font-family:var(--latin,Inter,sans-serif);font-size:11.5px;letter-spacing:.24em;color:var(--bp-mark)}
.bp-copy h1{margin:12px 0 0;font-size:clamp(32px,4.2vw,58px);line-height:1.05;letter-spacing:.01em}
.bp-copy h1 sup{font-size:.32em;top:-1.5em}
body[data-brand="uxx"] .bp-copy h1{color:#fff}
body[data-brand="tty"] .bp-copy h1{color:#1E1713}
.bp-copy .lead{margin-top:16px;max-width:620px;font-size:15px;line-height:1.95}
body[data-brand="uxx"] .bp-copy .lead{color:#BBD3C6}
body[data-brand="tty"] .bp-copy .lead{color:#4A403A}
.bp-stats{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}

/* 悠芯鲜（已无底部入口框）：把左栏文字组的纵向节奏拉开一点，与右侧图鉴卡体量更接近 */
@media (min-width:1181px){
  body[data-brand="uxx"] .bp-switch{margin-bottom:26px}
  body[data-brand="uxx"] .bp-copy h1{margin-top:16px}
  body[data-brand="uxx"] .bp-copy .lead{margin-top:22px;font-size:15.5px;line-height:1.9}
}

.bp-stats span{font-size:12.5px;padding:7px 13px;border-radius:999px}
body[data-brand="uxx"] .bp-stats span{color:#DCE9E0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
body[data-brand="tty"] .bp-stats span{color:#7a3a2c;background:rgba(255,255,255,.75);border:1px solid rgba(168,31,16,.18)}

/* ---------- 右侧实拍 ---------- */
.bp-media{display:flex;flex-direction:column;gap:16px}
.bp-media figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#fff}
body[data-brand="uxx"] .bp-media figure{border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.42)}
body[data-brand="tty"] .bp-media figure{border:1px solid rgba(168,31,16,.12);box-shadow:0 16px 38px rgba(80,50,32,.12)}
.bp-media img{display:block;width:100%;height:clamp(150px,20vh,214px);object-fit:contain;background:#fff}
body[data-brand="uxx"] .bp-media img{background:#0a2c1e}
.bp-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;font-size:11.5px;letter-spacing:.03em}
body[data-brand="uxx"] .bp-media figcaption{color:#DCE9E0;background:linear-gradient(0deg,rgba(4,22,15,.92),rgba(4,22,15,0))}
body[data-brand="tty"] .bp-media figcaption{color:#4A403A;background:linear-gradient(0deg,rgba(255,255,255,.94),rgba(255,255,255,.2))}

/* ---------- 入口卡（深底版 / 浅底版） ---------- */
/* 品牌切换靠 hidden 属性显隐入口卡：必须钉住 [hidden]（否则作者样式的 display 会盖掉 UA 的 display:none，
   结果两个品牌的 10 张卡同时出现 —— 2026-09-23 实测踩到） */
.bp [hidden]{display:none !important}
.bp .ss-entries{width:min(88vw,1460px);bottom:44px}
body[data-brand="tty"] .ss-entry{background:rgba(255,255,255,.9);border-color:rgba(168,31,16,.22);
  box-shadow:0 14px 32px rgba(80,50,32,.12)}
body[data-brand="tty"] .ss-entry:hover{background:#fff;border-color:rgba(168,31,16,.55)}
body[data-brand="tty"] .ss-entry .k{color:#241C18}
body[data-brand="tty"] .ss-entry .k:after{color:#a81f10}
body[data-brand="tty"] .ss-entry span.s{color:#8a6a5c}
body[data-brand="tty"] .ss-entry.cta{background:rgba(168,31,16,.07);border-color:rgba(168,31,16,.5)}
body[data-brand="tty"] .ss-entry.cta .k:after{content:"→"}
.bp .pin-foot{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:11px;letter-spacing:.08em;
  pointer-events:none;z-index:6;color:var(--bp-note)}

/* ---------- 子屏里的小版式（深栗底，一律浅字） ---------- */
.ss-content .ring-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px;margin-top:14px}
.ss-content .ring-grid button{all:unset;cursor:pointer;display:block;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);text-align:left}
.ss-content .ring-grid button:hover{border-color:rgba(205,232,107,.7)}
.ss-content .ring-grid img{display:block;width:100%;height:132px;object-fit:cover;background:#08301f}
.ss-content .ring-grid b{display:block;padding:9px 11px 3px;font-size:13px;color:#fff}
.ss-content .ring-grid i{display:block;padding:0 11px 11px;font-style:normal;font-size:11px;color:#8FBBA3}
.ss-content .ring-grid .todo{opacity:.65}
.ss-content .bp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px;margin-top:14px}
.ss-content .bp-tiles figure{margin:0;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16)}
.ss-content .bp-tiles img{display:block;width:100%;height:210px;object-fit:cover;background:#08301f}
.ss-content .bp-tiles figcaption{padding:9px 12px;font-size:11.5px;color:#9EB8AA}

/* ---------- 窄屏 ---------- */
@media (max-width:1180px){
  .bp-wrap{gap:26px;padding-left:5vw;padding-right:5vw}
  .bp .ss-entries{gap:9px;bottom:32px}
}
@media (max-width:980px){
  .bp-wrap{grid-template-columns:1fr;align-content:center;gap:20px;padding-bottom:180px}
  body[data-brand="tty"] .bp-wrap{padding-bottom:calc(var(--nav-h,64px) + 26px)}
  .bp-media{flex-direction:row}
  .bp-media figure{flex:1 1 0}
  .bp-media img{height:120px}
}
@media (max-width:820px){
  .bp .ss-entries{left:14px;right:14px;transform:none;width:auto;bottom:22px;flex-wrap:wrap;gap:8px}
  .bp .ss-entry{flex:1 1 calc(50% - 8px)}
  .bp-wrap{padding:calc(var(--nav-h,64px) + 16px) 18px 250px;align-content:start}
  body[data-brand="tty"] .bp-wrap{padding-bottom:calc(var(--nav-h,64px) + 30px)}
  .bp-copy h1{font-size:32px}
  .bp-copy .lead{font-size:13.5px;line-height:1.85}
  .bp-stats span{font-size:11.5px;padding:6px 11px}
  .bp-media{display:none}
  .bp .pin-foot{display:none}
  .ss-content .ring-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .ss-content .ring-grid img{height:104px}
}

/* ---------- 泰塔悠：一屏内的四条品种卖点（2026-10-22 加） ---------- */
.tty-points{display:grid;grid-template-columns:1fr 1fr;gap:11px 20px;margin:18px 0 0;max-width:640px}
.tty-points>div{font-size:12.4px;line-height:1.62;color:#4a3d36}
.tty-points b{display:block;margin-bottom:2px;font-size:12.6px;font-weight:700;color:#a81f10;letter-spacing:.02em}
.tty-quote{margin:14px 0 0;font-size:12px;line-height:1.6;color:#8a6a5c;font-style:italic;max-width:640px}
@media (max-width:1180px){
  .tty-points{grid-template-columns:1fr;gap:9px;margin-top:14px;max-width:none}
  .tty-points>div{font-size:12px}
}
@media (max-height:700px) and (min-width:1181px){
  .tty-points{gap:8px 18px;margin-top:12px}
  .tty-points>div{font-size:11.8px;line-height:1.55}
  .tty-quote{display:none}
}

/* 手机上（390 宽）四条卖点放不下 → 只留前两条，保证一屏不出滚动条 */
@media (max-width:640px){
  .tty-points>div:nth-child(n+3){display:none}
  .tty-quote{display:none}
}

/* 主厨评价做成引用条，别当脚注 */
.tty-quote{margin:16px 0 0;padding:2px 0 2px 12px;border-left:3px solid rgba(168,31,16,.55);
  font-size:12.4px;line-height:1.62;color:#6d5a50;font-style:normal;max-width:640px}