/* =============================================================================
   布局变体层 L2（8 套整站主题共用，手写，不自动生成）
   -----------------------------------------------------------------------------
   主题的「结构差异」全部收敛到本文件，用 4 组属性选择器实现：
     html[data-nav]  —— 头部形态    logo-left（默认）/ centered
     html[data-hero] —— 首屏形态    carousel（默认）/ single / none
     html[data-card] —— 商品卡形态  outlined（默认）/ raised / flat
     html[data-grid] —— 栅格形态    auto（默认）/ fixed
   属性由 layouts/app.blade.php 从 ThemeManager::htmlAttributes() 输出。

   ★ 关键纪律：**默认形态一律不写规则**。
     因为「不写规则」= 沿用 app.css 里的基础实现，从而保证默认主题
     （aurora：logo-left / carousel / outlined / auto）的渲染与改造前逐像素一致；
     一旦给默认形态也补一条同权重的规则，就会因为本文件加载在后而覆盖掉
     app.css 的 hover 等状态，造成难以察觉的回归。

   体积预算 ≤6KB。这里只有 ~30 条规则覆盖 8 套主题的全部结构差异 ——
   这就是「结构写一次、变量换八遍」的实际收益。
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) 头部形态
   logo-left 是默认形态（app.css 的 .site-header__inner 已是 flex 左对齐），不覆盖。
   --------------------------------------------------------------------------- */
[data-nav="centered"] .site-header__inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;row-gap:var(--sp-3);
}
[data-nav="centered"] .site-header__brand{grid-area:1/1;justify-self:start;}
[data-nav="centered"] .site-header__locales{grid-area:1/2;justify-self:center;margin-left:0;}
[data-nav="centered"] .site-header__nav{grid-area:1/3;justify-self:end;}
[data-nav="centered"] .site-header__search{grid-area:2/1/3/4;max-width:none;}

/* ---------------------------------------------------------------------------
   2) 首屏形态
   carousel 是默认形态（.hero-slider 已是纵向堆叠的 grid），不覆盖。
   --------------------------------------------------------------------------- */
[data-hero="none"] .hero,
[data-hero="none"] .hero-slider{display:none;}
/* 无首屏时把主体上边距收紧，避免顶部空一大块（CLS 与 LCP 都受益） */
[data-hero="none"] .site-main{padding-top:var(--sp-4);}
[data-hero="single"] .hero-slide:not(:first-child){display:none;}

/* ---------------------------------------------------------------------------
   3) 商品卡形态
   outlined 是默认形态（app.css 的 .prod-card 已是 1px 描边 + hover 阴影），不覆盖。
   --------------------------------------------------------------------------- */
[data-card="raised"] .prod-card{
  background:var(--c-surface);border:0;box-shadow:var(--shadow-sm);
}
[data-card="raised"] .prod-card:hover{box-shadow:var(--shadow-md);}

[data-card="flat"] .prod-card{
  background:transparent;border:0;box-shadow:none;padding:0;
}
[data-card="flat"] .prod-card:hover{box-shadow:none;}
[data-card="flat"] .prod-card__media{border-radius:var(--r-md);}
[data-card="flat"] .prod-card:hover .prod-card__title a{color:var(--c-accent);}

/* ---------------------------------------------------------------------------
   4) 栅格形态
   auto 是默认形态（.prod-grid 已是 auto-fill/minmax(210px)），不覆盖。
   fixed 用主题声明的 --grid-cols 固定列数，并在窄屏逐级降列。
   --------------------------------------------------------------------------- */
[data-grid="fixed"] .prod-grid{
  grid-template-columns:repeat(var(--grid-cols,4),minmax(0,1fr));
}
@media (max-width:1100px){
  [data-grid="fixed"] .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:767px){
  [data-grid="fixed"] .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------------------------------------------------------------------------
   5) 暗色主题下的兜底
   暗色主题（graphite）里 --c-bg 是深色，而店铺装修的浅色区块若直接写死
   #fff 就会在暗底上留下白块。模板一律用 var(--shop-surface) 取值，
   这里给出「跟随主题表面色」的定义（浅色主题下它等于 --c-surface）。
   --------------------------------------------------------------------------- */
.shop{--shop-surface:var(--c-surface);--shop-bg:var(--c-bg);}

/* ---------------------------------------------------------------------------
   6) 触控目标
   移动端下交互元素不小于 --tap-min；只在窄屏生效，桌面版式不变。
   --------------------------------------------------------------------------- */
@media (max-width:767px){
  .btn,.site-header__nav a,.tabs a{min-height:var(--tap-min);display:inline-flex;align-items:center;}
  .btn{justify-content:center;}
}