/* ============================================================
   CINAGSM 品牌标识样式

   说明：本文件曾包含主页的深色赛博朋克主题，按要求已全部移除
   ——主页恢复 style.css / home.css 的原始浅色设计（背景 #f4f6f9 灰白，
   白色卡片，四个彩色系统入口）。这里只保留顶栏的 CINAGSM 标识，
   它在深色顶栏上显示，与页面背景无关，全站通用。

   如果以后还想给某个页面加深色主题，在本文件末尾另起区块即可，
   不要再去覆盖 home.css 的浅色变量，那样两套配色会互相打架。
   ============================================================ */

.fx-brand{display:flex;align-items:center;gap:11px;text-decoration:none;line-height:1.1}

/* 环形光圈：分店招牌用的圆环底样式（roma / branch 各自再覆盖尺寸） */
.fx-ring{
  position:relative;width:26px;height:26px;flex:none;border-radius:50%;
  border:1.5px solid transparent;
  background:
    linear-gradient(#171b25,#171b25) padding-box,
    conic-gradient(from 210deg,#6fbcd8,#5b8fd0 25%,#a86ad0 55%,#d183c4 75%,#6fbcd8) border-box;
  box-shadow:0 0 8px rgba(168,106,208,.28);
}
.fx-ring::after{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:linear-gradient(135deg,#6fbcd8,#a86ad0);
}

.fx-word{font-size:20px;font-weight:800;letter-spacing:.02em;font-style:italic}
.fx-fix{
  background:linear-gradient(180deg,#ffffff,#c8d2e2);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-588{
  background:linear-gradient(135deg,#e3a4d8,#a86ad0 55%,#5b8fd0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-brand small{
  padding-left:11px;border-left:1px solid rgba(255,255,255,.16);
  color:#9fc4d6;font-size:8.5px;letter-spacing:.13em;font-weight:600;white-space:nowrap;
}
.fx-brand:hover .fx-ring{box-shadow:0 0 13px rgba(168,106,208,.42)}

@media(max-width:1100px){.fx-brand small{display:none}}

/* ── 总站 CINAGSM CSS 招牌 ──
   蓝紫渐变菱形 + 白色粗体字，字体用 clamp 自适应屏幕宽度。 */
/* 尺寸按要求收过一档。菱形是转了 45 度的方块，32px 的方块转过来对角线有 45px，
   顶栏可用高度才 30px 出头 —— 所以它看着比分店那个 26px 圆环大出一大截。
   收到 24px（对角线约 34px），和分店圆环、导航文字回到同一个重量级。 */
.fx-brand.has-hub-css{gap:11px;min-width:0;max-width:100%}
.fx-hub-core{
  position:relative;display:block;flex:none;width:24px;height:24px;
  border:1px solid rgba(138,208,255,.88);border-radius:9px;
  background:linear-gradient(135deg,#2e83ff 0%,#5b62ed 52%,#a74fd5 100%);
  box-shadow:0 0 0 1px rgba(77,130,255,.32),0 7px 18px rgba(40,111,255,.42),0 0 20px rgba(157,74,232,.24);
  transform:rotate(45deg);
}
.fx-hub-core::after{
  content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.8);
  border-radius:4px;box-shadow:0 0 8px rgba(255,255,255,.24);
}
.fx-brand.has-hub-css .fx-hub-word{
  display:block;min-width:0;max-width:min(27vw,190px);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:clamp(17px,1.15vw,20px);font-weight:900;font-style:normal;
  letter-spacing:.02em;color:#f8fbff;text-shadow:0 0 14px rgba(101,174,255,.34);
}
.fx-hub-name{color:#f8fbff}
.fx-brand.has-hub-css:hover .fx-hub-core{
  box-shadow:0 0 0 1px rgba(126,219,255,.62),0 9px 22px rgba(40,111,255,.58),0 0 28px rgba(157,74,232,.36);
}
@media(max-width:1300px){
  .fx-brand.has-hub-css small{display:none}
  .fx-brand.has-hub-css .fx-hub-word{max-width:min(25vw,170px)}
}
@media(max-width:640px){
  .fx-brand.has-hub-css{gap:10px}
  .fx-hub-core{width:22px;height:22px;border-radius:7px}
  .fx-hub-core::after{inset:5px}
  .fx-brand.has-hub-css .fx-hub-word{max-width:calc(100vw - 80px);font-size:clamp(15px,4.4vw,18px);letter-spacing:.01em}
}
@media(max-width:560px){
  .fx-brand.has-hub-css .fx-hub-word{font-size:15px}
}

/* ── 自定义 Logo ──
   店里在「公司」页传了 Logo 图之后，上面那套 CINAGSM 文字标识会被换成这张图。
   高度写死、宽度 auto，所以横条形、方形、竖形的 logo 都按原比例显示，不会被压扁；
   max-width 兜住特别宽的图，免得把顶栏导航挤掉。
   图片本身在上传时已经等比缩到最高 160px，这里再显示成 30px 是给高分屏留的余量。 */
.fx-logo{display:block;height:30px;width:auto;max-width:220px;object-fit:contain;flex:none}
.fx-brand.has-logo{gap:10px}
@media(max-width:640px){.fx-logo{height:26px;max-width:150px}}

/* ── 分店招牌（没传 Logo 图时）──
   分店以前跟着顶栏一起显示 CINAGSM，那是总店的招牌 ——
   店员一整天盯着它，既挂错了牌子，也看不出自己登在哪家店。
   现在改成本店店名（大写）：
     左边一块首字方块，颜色由店铺代号 crc32 算出色相（--fx-hue，PHP 那边算好写在
     行内样式上），和主页「店铺一览」里那个方块同一个算法 —— 同一家店在哪儿都是同一个色；
     右边店名做「白 → 本店色」的渐变字，和总店 CINA 银白 / GSM 品红那套是同一路数，
     一眼认得出是同一个系统，又分得清是哪一家店。
   字号按名字长度分三档（PHP 里按显示宽度算，中文算两个字符），
   名字再长也不会把顶栏中间的导航挤掉。 */
.fx-brand.has-name{gap:10px}

.fx-badge{
  display:grid;place-items:center;flex:none;
  width:31px;height:31px;border-radius:10px;
  background:linear-gradient(145deg,hsl(var(--fx-hue) 85% 68%),hsl(var(--fx-hue) 72% 43%));
  /* 一圈同色高光 + 一层落影，深色顶栏上才立得起来，不像贴上去的色块 */
  box-shadow:0 0 0 1px hsl(var(--fx-hue) 85% 74% / .5),
             0 3px 12px hsl(var(--fx-hue) 72% 42% / .55),
             inset 0 1px 0 hsl(var(--fx-hue) 90% 88% / .55);
  color:#fff;font-size:15px;font-weight:800;font-style:normal;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:box-shadow .18s ease,transform .18s ease;
}

.fx-shop{
  max-width:min(42vw,300px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:.05em;
  background:linear-gradient(100deg,#fff 0%,#eef3fb 26%,
             hsl(var(--fx-hue) 90% 78%) 62%,hsl(var(--fx-hue) 84% 63%) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* 渐变字本身没有 text-shadow 可用（会盖在字上面），用 drop-shadow 给它托一层光 */
  filter:drop-shadow(0 0 10px hsl(var(--fx-hue) 85% 58% / .34));
}
.fx-shop.is-long{font-size:17px}
.fx-shop.is-xlong{font-size:15px;letter-spacing:.03em}

/* 店名里的 - _ / · 空格：淡一点、窄一点，"ROMA-PRIMAVERA" 才读得出是两个词 */
.fx-sep{font-style:inherit;opacity:.5;padding:0 .04em}

.fx-brand.has-name:hover .fx-badge{
  transform:translateY(-1px);
  box-shadow:0 0 0 1px hsl(var(--fx-hue) 90% 80% / .7),
             0 5px 16px hsl(var(--fx-hue) 75% 45% / .7),
             inset 0 1px 0 hsl(var(--fx-hue) 92% 92% / .6);
}

@media(max-width:640px){
  .fx-badge{width:27px;height:27px;border-radius:9px;font-size:13px}
  .fx-shop{font-size:17px;max-width:58vw}
  .fx-shop.is-long{font-size:15px}
  .fx-shop.is-xlong{font-size:13.5px}
}

/* 公司页的 Logo 预览框里也画这块招牌（还没传图时），那儿地方大，放大一档看得清 */
.cc-brand-preview .fx-brand.has-name .fx-badge{width:40px;height:40px;border-radius:12px;font-size:20px}
.cc-brand-preview .fx-brand.has-name .fx-shop{font-size:26px;max-width:none;white-space:normal;overflow:visible}
.cc-brand-preview .fx-brand.has-name .fx-shop.is-long{font-size:22px}
.cc-brand-preview .fx-brand.has-name .fx-shop.is-xlong{font-size:18px}

/* ── ROMA-FIX588 CSS 招牌 ──
   这家店不用图片，沿用总站的环形光圈 + 渐变文字，并与总站保持同一尺寸。 */
.fx-brand.has-roma-css{gap:11px}
.fx-brand.has-roma-css .fx-roma-ring{
  width:26px;height:26px;border-width:1.5px;
  box-shadow:0 0 8px rgba(63,171,255,.34),0 0 14px rgba(168,106,208,.18);
}
.fx-brand.has-roma-css .fx-roma-ring::after{
  inset:6px;
  background:linear-gradient(135deg,#258cff 0%,#6c63e8 52%,#b75ddb 100%);
  box-shadow:0 0 8px rgba(80,132,255,.4);
}
.fx-brand.has-roma-css .fx-roma-word{
  display:inline-flex;align-items:baseline;white-space:nowrap;
  font-size:20px;font-weight:800;letter-spacing:.02em;
  text-shadow:0 0 12px rgba(82,148,255,.22);
}
.fx-roma-white{
  background:linear-gradient(180deg,#fff 0%,#e5ebf5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-roma-fix{
  background:linear-gradient(105deg,#c76ae9 0%,#8f67e8 42%,#526fe8 78%,#2b9cf3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-roma-588{
  background:linear-gradient(105deg,#5274e9 0%,#348ff1 48%,#15a9f4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-brand.has-roma-css:hover .fx-roma-ring{
  box-shadow:0 0 16px rgba(63,171,255,.62),0 0 30px rgba(168,106,208,.36);
}
.cc-brand-preview .fx-brand.has-roma-css{gap:12px}
.cc-brand-preview .fx-brand.has-roma-css .fx-roma-ring{width:40px;height:40px;border-width:2px}
.cc-brand-preview .fx-brand.has-roma-css .fx-roma-ring::after{inset:9px}
.cc-brand-preview .fx-brand.has-roma-css .fx-roma-word{font-size:26px}

@media(max-width:640px){
  .fx-brand.has-roma-css{gap:10px}
  .fx-brand.has-roma-css .fx-roma-ring{width:27px;height:27px}
  .fx-brand.has-roma-css .fx-roma-ring::after{inset:6px}
  .fx-brand.has-roma-css .fx-roma-word{font-size:17px;letter-spacing:.02em}
}
@media(max-width:560px){
  .fx-brand.has-roma-css .fx-roma-word{font-size:16px}
}

/* ── 分店 CSS 招牌 ──
   ROMA-PRIMAVERA、FIX-PESCARA 共用总站尺寸，并限制宽度，避免意大利语导航被挤住。 */
.fx-brand.has-branch-css{gap:11px;min-width:0;max-width:100%}
.fx-brand.has-branch-css .fx-branch-ring{
  width:26px;height:26px;border-width:1.5px;
  box-shadow:0 0 8px rgba(63,171,255,.32),0 0 14px rgba(168,106,208,.17);
}
.fx-brand.has-branch-css .fx-branch-ring::after{
  inset:6px;
  background:linear-gradient(135deg,#258cff 0%,#7760e7 54%,#c15bda 100%);
  box-shadow:0 0 8px rgba(80,132,255,.38);
}
.fx-brand.has-branch-css .fx-branch-word{
  display:inline-flex;align-items:baseline;min-width:0;flex:0 1 auto;
  max-width:min(34vw,250px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:20px;font-weight:800;letter-spacing:.02em;
  text-shadow:0 0 12px rgba(82,148,255,.18);
}
.fx-branch-white{
  flex:none;background:linear-gradient(180deg,#fff 0%,#e5ebf5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-branch-color{
  min-width:0;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(105deg,#cf73e7 0%,#a05fe2 38%,#6973e8 70%,#3198ed 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fx-brand.has-branch-css:hover .fx-branch-ring{
  box-shadow:0 0 14px rgba(63,171,255,.52),0 0 24px rgba(168,106,208,.3);
}
.cc-brand-preview .fx-brand.has-branch-css{gap:12px}
.cc-brand-preview .fx-brand.has-branch-css .fx-branch-ring{width:40px;height:40px;border-width:2px}
.cc-brand-preview .fx-brand.has-branch-css .fx-branch-ring::after{inset:9px}
.cc-brand-preview .fx-brand.has-branch-css .fx-branch-word{max-width:none;font-size:26px}

/* 意大利语导航文字更长，提前收起副标题，避免顶栏横向覆盖。 */
@media(max-width:1300px){
  .fx-brand.has-branch-css small{display:none}
  .fx-brand.has-branch-css .fx-branch-word{max-width:min(31vw,220px)}
}

@media(max-width:640px){
  .fx-brand.has-branch-css{gap:10px}
  .fx-brand.has-branch-css .fx-branch-ring{width:27px;height:27px}
  .fx-brand.has-branch-css .fx-branch-ring::after{inset:6px}
  .fx-brand.has-branch-css .fx-branch-word{
    max-width:calc(100vw - 92px);font-size:17px;letter-spacing:.02em;
  }
}
@media(max-width:560px){
  .fx-brand.has-branch-css .fx-branch-word{font-size:16px}
}

/* CSS 文字 Logo：圆环/菱形保持原样，输入文字使用同一套渐变并按长度缩放。 */
.fx-logo-text{background:linear-gradient(105deg,#fff 0%,#e5ebf5 34%,#b75ddb 66%,#348ff1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-brand.has-hub-css .fx-hub-word.fx-text-custom.is-text-long{font-size:clamp(15px,1.1vw,18px)}
.fx-brand.has-hub-css .fx-hub-word.fx-text-custom.is-text-xlong{font-size:clamp(13px,.95vw,16px);letter-spacing:0}
.fx-brand.has-roma-css .fx-roma-word.fx-text-custom.is-text-long,.fx-brand.has-branch-css .fx-branch-word.fx-text-custom.is-text-long{font-size:17px;letter-spacing:0}
.fx-brand.has-roma-css .fx-roma-word.fx-text-custom.is-text-xlong,.fx-brand.has-branch-css .fx-branch-word.fx-text-custom.is-text-xlong{font-size:15px;letter-spacing:0}