/* ============================================================
   supplier_shared/css/common.css — 供应商旺铺企业头部 + 导航栏专属样式（模板共享内页样式）
   仅含旺铺内页共用的 .corporate-header* 与 .supplier-navbar* 样式。
   @layer components 与 web/public/css/components.css 同级，
   可正常覆盖 @layer vendor（Bootstrap）而不影响全站公共组件层。
   主题色由 layout/head.phtml 注入 --color-primary；
   advantage-bar 背景已由 template1/css/index.css 接管。
   ============================================================ */

@layer components {

  /* ================================================================
     企业头部 (Corporate Header)
     ================================================================ */
  .corporate-header {
    background: var(--color-bg-white);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .corporate-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  }

  .corporate-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .corporate-header__logo-box {
    background: var(--color-bg-white);
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .corporate-header__logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* 没传 logo：店铺主色底 + 公司名缩写（取字规则在 app\support\SupplierMonogram）。
     盒子尺寸沿用上面三档，字号跟着下面两个断点各缩一次，约为盒宽的 0.38。 */
  .corporate-header__logo-box--mono {
    background: var(--color-primary);
    border-color: transparent;
    color: #fff;
  }

  .corporate-header__mono {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .corporate-header__mono-icon {
    width: 55%;
    height: 55%;
  }

  .corporate-header__info {
    flex: 1;
    min-width: 0;
  }

  .corporate-header__name {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-strong);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.015em;
    line-height: 1.2;
  }

  .corporate-header__details {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.5;
  }

  .corporate-header__details-main {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
    font-weight: var(--font-weight-medium);
  }

  .corporate-header__details-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  .corporate-header__badges {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
  }

  .corporate-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    padding: 5px var(--space-sm);
    border-radius: var(--radius-pill);
  }

  .corporate-header__badge-icon {
    height: 14px;
    width: auto;
  }

  .corporate-header__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
  }

  /* ================================================================
     供应商导航栏 (Supplier Navbar)
     ================================================================ */
  .supplier-navbar {
    background: var(--color-primary);
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0;
    box-shadow: var(--shadow-sm);
  }

  .supplier-navbar__link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.85);
    padding: 0 22px;
    height: 52px;
    display: flex;
    align-items: center;
    transition: var(--transition-base);
    white-space: nowrap;
    position: relative;
    text-decoration: none;
  }

  .supplier-navbar__link:hover,
  .supplier-navbar__link.active {
    color: var(--color-text-white);
    background: var(--color-primary-dark);
  }

  /* active 仅用深色填充高亮；不再画 ::after 下划线
     （避免与 dropdown-toggle 的 Bootstrap 箭头 ::after 抢占同一伪元素） */

  /* 供应商专用下拉 */
  .supplier-navbar .dropdown-menu {
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: 0;
    min-width: 180px;
    background: var(--color-bg-white);
  }

  .supplier-navbar .dropdown-item {
    font-size: var(--font-size-base);
    color: var(--color-text);
    padding: 8px 20px;
    transition: var(--transition-base);
  }

  .supplier-navbar .dropdown-item:hover {
    background: var(--color-bg-gray);
    color: var(--color-primary-dark);
  }

  /* 二级下拉菜单 */
  .supplier-navbar .dropdown-submenu {
    position: relative;
  }

  .supplier-navbar .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -10px;
    display: none;
  }

  .supplier-navbar .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }

  /* ================================================================
     响应式
     ================================================================ */
  /* 平板（768–991.98）：与手机同构的横排，尺寸大一档。
     这里原先是 flex-direction: column —— 110px 的 logo 盒子独占一行、右边约 620px 全空，
     企业头部在 768 下高 393px，比 1024 下的 217px 还高 176px，一屏几乎被头部占满
     （2026-09-23 实测，供应商 80000002）。手机端本来就是「小 logo + 公司名同行」，
     平板反而是三档里最松散的一档，故改成同一套结构。
     Main categories 与手机一样隐藏（下方产品分类区重复）；徽章保留，平板宽度放得下。 */
  @media (max-width: 991.98px) {
    .corporate-header__container {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: var(--space-lg);
    }

    .corporate-header__logo-box {
      width: 88px;
      height: 88px;
    }

    .corporate-header__mono { font-size: 34px; }

    .corporate-header__info {
      flex: 1 1 0;
      min-width: 0;
    }

    .corporate-header__details-sub { display: none; }

    .corporate-header__actions {
      flex: 1 0 100%;
      justify-content: flex-start;
    }
  }

  @media (max-width: 767.98px) {
    /* 旺铺手机端：隐藏商城搜索大头(与企业头部重复)+ 会换行错乱的供应商顶部导航；
       导航功能已下放到底部固定栏(partials/mobile_bottom_nav 按上下文切成供应商菜单)。
       主站细 topbar 保留(语言/登录/回商城入口) */
    .site-header-d { display: none; }
    .supplier-navbar { display: none; }

    /* 企业头部手机端：小 logo + 公司名横排一行，
       徽章/操作按钮下沉为整行，避免 logo 下内容大段换行、徽章溢出屏幕 */
    .corporate-header {
      padding: var(--space-md) 0;
    }
    .corporate-header__container {
      /* 不写 flex-direction：基础规则与上面那档都是 row。
         这里原先有一条 row，是用来撤销上一档的 column 的，那条 column 已于 2026-09-23 去掉 */
      flex-wrap: wrap;
      align-items: flex-start;
      gap: var(--space-md);
    }
    .corporate-header__logo-box {
      width: 60px;
      height: 60px;
      padding: 6px;
      border-radius: var(--radius-sm);
    }
    .corporate-header__mono { font-size: 23px; }
    .corporate-header__info {
      flex: 1 1 0;
      min-width: 0;
    }
    .corporate-header__name {
      font-size: var(--font-size-lg);
      margin-bottom: 2px;
    }
    .corporate-header__details {
      margin-bottom: 0;
    }
    /* 手机端精简 info：隐藏 Main categories(与下方产品分类区重复)与徽章，
       仅保留公司名 + Verified·国家一行，去繁 */
    .corporate-header__details-sub { display: none; }
    .corporate-header__badges { display: none; }
    .corporate-header__actions {
      width: 100%;
      margin-top: var(--space-md);
      gap: var(--space-sm);
    }
    .corporate-header__actions .btn {
      flex: 1 1 0;
      justify-content: center;
      text-align: center;
    }

    /* 内页（产品/新闻/详情/联系）手机端去掉 Send inquiry / Chat now：底部导航已有 Contact，
       右下有客服浮窗（关时 Chat now 本就回落 Contact 页），联系页上 Send inquiry 还指向自己。
       首页保留。判据类由 header.phtml 按 $activeNav 白名单输出。 */
    .corporate-header--inner .corporate-header__actions { display: none; }
  }

} /* end @layer components */

/* ============================================================
   旺铺首页手机端共享件（2026-09-29，spec docs/superpowers/specs/2026-09-29-supplier-templates-mobile-design.md）
   放 @layer utilities 而不是 components：模板首页 CSS 在 @layer pages，层序上比 components 高，
   放 components 会被模板自己的 display:grid / max-height 盖掉。反过来，模板要调尺寸只能经自定义属性
   （--sf-rail-item 子项宽、--sf-fold-lines 露出行数），在模板里直接写 flex / max-height 赢不了这里。
   两个件都只在 <768 生效，桌面挂着类也不起作用。
   ============================================================ */
@layer utilities {

  /* 折叠开关：≥768 时 toggle label 本来就 display:none，checkbox 留着可聚焦会变成一个不可见、
     不可达用途的 Tab 停靠点（2026-09-29 终审实测：5 套旺铺首页桌面端都中招）。
     默认直接 display:none 摘出 Tab 顺序；<768 覆盖回「视觉隐藏但保留键盘可聚焦」
     （别改成 hidden，那样 Tab 也到不了）。 */
  .sf-fold__cb { display: none; }
  .sf-fold__toggle { display: none; }

  @media (max-width: 767.98px) {
    .sf-fold__cb {
      display: inline-block;
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    /* ---- .sf-rail：网格改一行横滑，露出下一张的一角暗示可滑 ---- */
    .sf-rail {
      display: flex;
      flex-wrap: nowrap;
      min-width: 0;               /* flex/grid 子项默认 min-width:auto，不给就会把整页撑宽 */
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }
    .sf-rail::-webkit-scrollbar { display: none; }
    .sf-rail > * {
      flex: 0 0 var(--sf-rail-item, 72%);
      min-width: 0;
      scroll-snap-align: start;
    }

    /* ---- .sf-fold：长文限高 + 底部渐隐 + Read more 原地展开 ---- */
    .sf-fold__body {
      max-height: calc(var(--sf-fold-lines, 8) * 1.8em);  /* 不支持 lh 单位的兜底，1.8 是正文常见行高 */
      max-height: calc(var(--sf-fold-lines, 8) * 1lh);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
    }
    .sf-fold__cb:checked ~ .sf-fold__body,
    .sf-fold--fits .sf-fold__body {
      max-height: none;
      -webkit-mask-image: none;
      mask-image: none;
    }
    .sf-fold__toggle {
      display: inline-block;
      margin-top: var(--space-sm);
      color: var(--color-primary);
      font-weight: var(--font-weight-semibold);
      cursor: pointer;
    }
    .sf-fold--fits .sf-fold__toggle { display: none; }
    .sf-fold__less { display: none; }
    .sf-fold__cb:checked ~ .sf-fold__toggle .sf-fold__more { display: none; }
    .sf-fold__cb:checked ~ .sf-fold__toggle .sf-fold__less { display: inline; }
    .sf-fold__cb:focus-visible ~ .sf-fold__toggle {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

} /* end @layer utilities */