/* ==========================================================================
   PortVape  |  desktop.css  —— 仅 >=1024px 加载
   通过 <link media> 加载，手机端不会下载这份文件。
   你要改电脑端布局只需要动这个文件，手机端绝对不受影响。
   ========================================================================== */

/* 只写 padding-inline：写成 padding 简写会把 base.css 里各区块的
   纵向 padding-block 一起清掉，段落间距会整体塌掉 */
.wrap{max-width:1200px;padding-inline:clamp(22px,4vw,48px)}

/* --------------------------------------------------------------- 头部 */
/* 三栏：左导航 · 中 Logo · 右工具。HTML 顺序仍是 brand→nav→tools，
   用 grid 显式落位，Logo 真正居中，两侧等宽互不抢位。 */
.head-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:clamp(12px,2vw,24px);
  min-height:64px;
}
.brand{grid-column:2;grid-row:1;justify-self:center;z-index:3}
.brand img{height:40px;max-width:min(180px,22vw);width:auto;object-fit:contain}
.burger{display:none}
/* 导航整列撑满头部高度：导航项的下边缘要正好贴到头部下边缘，
   否则鼠标从「Brands」往下移进大下拉时会先经过一段既不属于导航项、
   也不属于面板的空白，:hover 断掉，菜单在指针到达前就关了。 */
.nav{
  grid-column:1;grid-row:1;justify-self:start;align-self:stretch;
  min-width:0;max-width:100%;z-index:1;
}
.nav-list{display:flex;align-items:stretch;height:100%;gap:clamp(10px,1.2vw,22px);flex-wrap:nowrap}
.nav-item{position:relative;flex:0 0 auto;display:flex;align-items:center}
.nav-link{white-space:nowrap;font-size:12px;font-weight:400;color:rgba(255,255,255,.88)}
.nav-link:hover{color:#fff}
.nav-link{position:relative}
.nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;
  background:#fff;transition:right .24s var(--ease);
}
.nav-item:hover .nav-link::after{right:0}
/* 抽屉专用元件：关闭按钮、抽屉里的语言块，桌面端一律不出现 */
.nav-mobile-extra,.nav-head{display:none}
.head-tools{
  grid-column:3;grid-row:1;justify-self:end;z-index:2;
  gap:clamp(10px,1vw,18px);min-width:0;
}
/* 邮箱在窄屏（1024~1200）会跟导航抢位置，那个宽度下先让它退场，
   语言切换器和购物车必须留着 */
@media (max-width:1199px){
  .head-mail{display:none}
}

/* 分类下拉：每个维度一个，只装自己的分类项。

   上一版是一个 1180px 的通栏面板，Brands 里同时列出品牌、口数、市场。
   面板那么宽只能挂在整条头部上居中（挂在导航项上会被裁掉左半边），
   于是不管点哪一项，掉下来的都是同一块横贯屏幕的白板。

   现在面板按自己的内容宽度走，最宽也就 640px，
   可以老老实实挂在各自的导航项下面，指哪出哪。 */
.nav-item.has-mega{position:relative}
.mega{
  position:absolute;left:0;transform:translateY(8px);
  top:calc(100% - 1px);background:#fff;
  border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 44px rgba(0,0,0,.12);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);
  z-index:100;
}
/* 宽度跟着列数走。列数由条目数决定（见 front.php），
   三项的下拉不该和二十四项的下拉一样宽。 */
.mega-c1{width:min(260px,90vw)}
.mega-c2{width:min(430px,90vw)}
.mega-c3{width:min(640px,90vw)}
/* 靠右的维度（Markets 通常是最后一个）面板向左展开，不然会顶出视口 */
.nav-item.has-mega:last-child .mega{left:auto;right:0}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-in{padding:20px 22px}
.mega-h{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--text-3);margin:0 0 14px}
.mega-links{display:grid;gap:2px 18px;grid-template-columns:1fr}
.mega-c2 .mega-links{grid-template-columns:repeat(2,1fr)}
.mega-c3 .mega-links{grid-template-columns:repeat(3,1fr)}
.mega-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;color:var(--text)}
.mega-links .cnt{font-size:11px;color:var(--text-3)}
.mega-all{
  display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);width:100%;
  font-size:13.5px;font-weight:650;color:var(--gold);
}
.mega-all .arw{transition:transform .2s var(--ease)}
.mega-all:hover .arw{transform:translateX(3px)}

/* --------------------------------------------------------------- 首页 */
/* 海报按原比例铺，但给个高度上限：万一传了张竖图，整个首屏被一张图吃掉，
   下面的品牌和商品要滚两屏才看得到。超出的部分居中裁。 */
/* 多张轮播才限高，避免一屏过高；单张走原比例（见 base.css） */
.hero.hero-multi .hero-slide img{max-height:min(72vh,720px)}
.sec{padding-block:64px}
.sec.sec-h1{padding-block:28px 8px}
/* 标题行用 grid：flex + align-items:flex-end 在标题换行时会把右侧的
   「View all」拽到很低的位置，grid 下两列各自基线对齐更稳 */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px}
.sec-head .sec-sub{margin-top:6px;grid-column:1 / -1}
.sec-head-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.grid-products{grid-template-columns:repeat(4,1fr);gap:22px}
.grid-posts{grid-template-columns:1fr;gap:0}
.guide-rail-item-lg:has(.guide-rail-media){grid-template-columns:minmax(160px,.28fr) minmax(0,1fr)}
.brand-grid{grid-template-columns:repeat(6,1fr)}
.brand-grid-lg{grid-template-columns:repeat(5,1fr);gap:18px}
.brand-grid-lg a{min-height:130px}
.index-grid{grid-template-columns:repeat(3,1fr)}
/* 5 列时国家名（South Korea / Saudi Arabia）会换行，4 列排面更整齐 */
.market-grid{grid-template-columns:repeat(4,1fr)}
.biz-grid{grid-template-columns:repeat(4,1fr);gap:0}
.biz-card{padding-inline:34px}
.biz-card + .biz-card{border-left:1px solid var(--line)}
.biz-card:first-child{padding-left:0}
.biz-card:last-child{padding-right:0}
.sec-faq .faq{max-width:940px}
.home-finder{display:none}
.home-crest{padding-block:40px 32px}
.home-crest-title{font-size:clamp(28px,2.8vw,36px)}
/* 桌面端顶部导航已覆盖同组切换，分类页 sibling 筛选条多余 */
.facet-bar{display:none !important}

/* --------------------------------------------------------------- 分类页 */
.cat-index-head-in{padding-block:28px 36px}
.sec-cat-index{padding-block:32px 52px}
.cat-head{padding-block:34px}
.cat-head-in:has(.cat-intro){
  display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  grid-template-rows:auto auto auto;column-gap:clamp(42px,6vw,88px);align-items:start;
}
.cat-head-in:has(.cat-intro) .eyebrow,
.cat-head-in:has(.cat-intro) h1,
.cat-head-in:has(.cat-intro) .cat-count{grid-column:1}
.cat-head-in:has(.cat-intro) .eyebrow{grid-row:1}
.cat-head-in:has(.cat-intro) h1{grid-row:2}
.cat-head-in:has(.cat-intro) .cat-count{grid-row:3}
.cat-head-in:has(.cat-intro) .cat-intro{
  grid-column:2;grid-row:1 / 4;align-self:center;margin:0;
}
.cat-head-in:has(.cat-logo) .cat-logo{grid-column:1}
.cat-brand-head-in{gap:32px}
.list-toolbar-brandish{gap:24px}
.crumbs-in{padding-block:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--text-3)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a:hover{color:var(--gold)}
.crumbs{border-bottom:1px solid var(--line);background:#fff}

/* --------------------------------------------------------------- 商品页 */
.pd-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.pd-gallery{position:sticky;top:96px}
.pd{padding-block:42px 20px}
.flavour-grid{grid-template-columns:repeat(4,1fr)}

/* --------------------------------------------------------------- 购物车 */
.cart-table{background:#fff}
.cart-head-row{
  display:grid;grid-template-columns:minmax(0,3fr) 130px 130px 130px 90px;gap:16px;
  padding:14px 18px;background:var(--paper-2);font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-3);font-weight:700;
}
.cart-row{display:grid;grid-template-columns:minmax(0,3fr) 130px 130px 130px 90px;gap:16px;align-items:center;padding:18px}
.cart-cell[data-label]::before{display:none}
.cart-unit,.cart-total{text-align:right}
.cart-qty{text-align:center}
.cart-del{text-align:right}
.cart-foot{display:grid;grid-template-columns:minmax(0,1fr);justify-items:end;margin-top:26px}
.cart-summary{width:100%;max-width:380px}

/* --------------------------------------------------------------- 结账 */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:32px;align-items:start}
.checkout-side{position:sticky;top:96px}
.f-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.f-row-2>div,.f-row-3>div{margin:0}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:start}
.contact-layout .contact-card{position:sticky;top:96px}

/* --------------------------------------------------------------- 采购笔记 */
.page-guide .guide-mast h1{max-width:none}
.page-guide .guide-deck{max-width:68ch}
.page-guide .guide-prose{max-width:none;width:100%}
.page-guide .guide-qa-list{max-width:none;width:100%}
.page-guide .guide-sec-title{max-width:none}

/* --------------------------------------------------------------- 静态页 */
.page-head-in{padding-block:28px 44px}
.page-layout{grid-template-columns:minmax(0,1fr)}
.page-body{max-width:none}

/* 单栏静态页：整页收窄居中。
   收的是 .wrap 本身而不是正文块 —— 面包屑、页头、正文、底部 FAQ 用的是
   四个不同的 .wrap，只收正文的话另外三个还是满宽，标题会甩在正文左边一大截。
   .wrap 自带 margin:0 auto，改小 max-width 这几段就一起居中并对齐同一条竖线。
   792px 正文宽（856 减两侧 32 内边距）在 17px 字号下约 72 个字符，
   是长政策页最不容易串行的行宽。 */
.page-narrow .crumbs .wrap,
.page-narrow .page-head .wrap,
.page-narrow .page-main .wrap,
.page-narrow .page-faq .wrap{max-width:856px}
.sec.page-faq-solo{padding-block:32px 0}
.page-narrow .page-main{padding-block:40px 60px}

.page-body .prose{font-size:17px;line-height:1.78}
.page-body .prose h2{font-size:22px}
.page-body .prose h3{font-size:17.5px}
.page-body .prose ul,.page-body .prose ol{padding-left:1.15em}
.page-body .prose li{margin-bottom:.55em}

/* 联系页和代工页留侧栏，占满宽度。正文用 minmax(0,1fr) 而不是 auto：
   正文里若有宽表格，auto 会让整个网格被表格顶宽，把侧栏挤出屏幕 */
.page-layout-side{grid-template-columns:minmax(0,1fr) 340px;gap:48px}
.page-layout-side .page-side{position:sticky;top:96px}

/* --------------------------------------------------------------- 页脚 */
/* 简介 + 公司 + 贸易政策 + 支付方式 */
.foot-grid{grid-template-columns:minmax(0,1.8fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,.75fr) minmax(0,1.2fr);gap:36px}
.foot-pay-icons{gap:12px;max-width:300px}
.foot-pay-badge{min-height:52px;padding:10px 12px;border-radius:9px}
.foot-pay-badge img{max-height:34px}
/* 电脑端页脚不再放语言切换器：头部右侧那个一直在视线里，页脚这个是重复的。
   手机端保留（头部放不下，只能进抽屉，页脚这个更顺手）。 */
.foot-lang{display:none}
/* 年龄与合规警示排成一行，版权居中 */
.foot-legal-in{text-align:center}
.foot-warn{font-size:12px;margin-bottom:10px}

/* 订单成功页：电脑端「接下来」居中更整齐 */
.success-next{text-align:center}
.success-next ol{
  display:inline-block;text-align:left;margin:0 auto;padding-left:1.3em;
}

/* 大屏微调：内容区不要无限拉宽，可读性优先 */
@media (min-width:1600px){
  .wrap{max-width:1440px}
  .grid-products{grid-template-columns:repeat(4,1fr);gap:26px}
}