/*
 Theme Name:   Online Shop Pro Child
 Theme URI:    https://discounter4u.com/
 Description:  Child theme for Online Shop Pro (抗主题自动更新覆盖，所有模板改动/双语切换器未来改 header.php 放这里)
 Author:       Depha GmbH
 Author URI:   https://depha.de
 Template:     online-shop-pro
 Version:      1.1.0
 Text Domain:  online-shop-pro-child
 Tags:         e-commerce, child-theme
*/

/* ============================================================
   1) 页头购物车按钮：修复不可见（父主题 .at-wc-icon{color:#fff} 白字白底）
   ============================================================ */
.site-header .wc-cart-wrapper {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 7px 14px;
    margin-left: 12px;
    transition: border-color .2s ease, background-color .2s ease;
}
.site-header .wc-cart-wrapper:hover {
    border-color: #dd9527;
    background: #fffaf2;
}

/* 图标与文字改为深色（含 hover，覆盖父主题 #fff） */
.site-header .at-wc-icon,
.site-header .at-wc-icon:hover,
.site-header .at-wc-icon:focus,
.site-header .cart-icon,
.site-header .cart-icon:hover,
.site-header .cart-icon:focus {
    color: #2d2d2d;
    text-decoration: none;
}

/* 商品数角标：橙色实心圆，数量为 0 时隐藏 */
.site-header .cart-icon { position: relative; }
.site-header .cart-value.cart-customlocation {
    position: absolute;
    top: -9px;
    right: -14px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #dd9527;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.site-header .cart-value.cart-customlocation:empty { display: none; }

/* 数量为 0 时仍给出「Warenkorb」文字，避免只剩一个孤零零的图标 */
.site-header .wc-cart-wrapper .cart-icon::after {
    content: "Warenkorb";
    margin-left: 7px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}

@media screen and (max-width: 767px) {
    .site-header .wc-cart-wrapper {
        margin: 10px auto;
        display: table;
    }
}

/* ============================================================
   2) 「In den Warenkorb」按钮统一为主色紫 #7F54B3

   背景（2026-09-13 实测 computed style）：
     - 产品详情页主按钮 .single_add_to_cart_button
         → background rgb(127,84,179) = #7F54B3，白字清晰 ✓
     - 首页 / 归档页 / 关联产品区的卡片按钮 .add_to_cart_button
         → background rgb(233,230,237) = #E9E6ED，**白字压浅灰几乎不可见** ✗

   父主题给 .add_to_cart_button 的浅灰底本是「已加入购物车」类状态色，
   但它同时命中了卡片上的主按钮，属于样式冲突。
   这里统一到产品页主按钮的主色，hover 用同色系加深。
   ============================================================ */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce-page ul.products li.product a.button.add_to_cart_button,
.woocommerce-page ul.products li.product a.button.product_type_simple,
.related.products ul.products li.product a.button,
.upsells.products ul.products li.product a.button,
.related.products ul.products li.product a.add_to_cart_button,
.upsells.products ul.products li.product a.add_to_cart_button,
ul.products li.product a.button.add_to_cart_button {
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    border: 0;
    transition: background-color .2s ease;
}

.woocommerce ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product a.button.product_type_simple:hover,
.woocommerce-page ul.products li.product a.button.add_to_cart_button:hover,
.woocommerce-page ul.products li.product a.button.product_type_simple:hover,
.related.products ul.products li.product a.button:hover,
.upsells.products ul.products li.product a.button:hover,
.related.products ul.products li.product a.add_to_cart_button:hover,
.upsells.products ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button.add_to_cart_button:hover {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
}

/* 已成功加入购物车时的状态：用深绿表示「完成」，避免和主色混淆 */
.woocommerce ul.products li.product a.button.add_to_cart_button.added,
ul.products li.product a.button.add_to_cart_button.added {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
}
.woocommerce ul.products li.product a.button.added::after,
ul.products li.product a.button.added::after {
    color: #ffffff !important;
}

/* 读取中（转圈）状态：保持主色，不要退回浅灰 */
.woocommerce ul.products li.product a.button.loading,
.woocommerce ul.products li.product a.button.loading::after,
ul.products li.product a.button.loading,
ul.products li.product a.button.loading::after {
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================
   3) 修复 hover 白底白字（全站 WooCommerce 主按钮）

   根因（2026-09-13 实测 computed style，Playwright）：
     父主题有一条「全局白底覆盖」规则，命中加购/结账类按钮但**不改文字颜色**：
       .woocommerce a.button.add_to_cart_button:hover,
       .woocommerce a.button.alt:hover,
       .woocommerce button.button.alt:hover, ... { background: #fff; }
     而按钮文字是 #fff（白），于是 hover 时**白底白字**，产品详情页
     主按钮 hover 后完全看不见轮廓。
     循环卡片按钮之所以正常，是因为第 2 节那条 !important 规则救了它；
     产品页 .single_add_to_cart_button（含 .button.alt）没有这层保护。

   这里统一给主按钮 hover 加深紫 + 保持白字，覆盖父主题的 background:#fff。
   ============================================================ */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .cart .button:hover,
.woocommerce .cart input.button:hover {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
    border-color: #6a45a0 !important;
}

/* 键盘聚焦同样清晰（无障碍） */
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce .single_add_to_cart_button:focus {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
}

/* ============================================================
   4) 「In den Warenkorb」高度一致 + 同一行按钮底部对齐

   根因（2026-09-13 实测）：
     父主题/主题网格用 `<ul>` display:block + `<li>` float:left，
     每张卡片是**独立高度**的盒子。标题换行数不同（3 行 vs 4 行）
     → 卡片高度不同（544 vs 564）→ 卡片内按钮即便 margin-top:auto
     也只贴到「自己卡片」的底部，同一行仍错开约 19–20px。

   修法：
     把网格 ul 从 float 改为 **Flexbox 多行布局**（列数与原来的 columns-4 对应，
     响应式递减），行内卡片自然等高（stretch）；卡片设为纵向 flex，按钮
     margin-top:auto 沉到卡片底部 → 同一行所有按钮**底边对齐**，高度统一 39px。

   为什么不用 CSS Grid（2026-09-13 实测踩坑）：
     WooCommerce 自带 `.woocommerce ul.products li.first{clear:both}`
     （specificity 0,3,2）。在 Grid 下，li 之间夹着的空白文本节点会让
     Chrome 把 li 当匿名 item 处理，此时该 clear 会命中并把第 1 个 li
     推离第 1 列 → 网格塌成 3+4+1。用更高 specificity + !important 或
     font-size:0 消空白都压不住（实测均无效）。
     Flexbox 下 `clear` 对 flex item **完全不生效**（规范明文），
     因此换 Flexbox 即可彻底绕开该问题，且换行/等高能力完全够用。
   ============================================================ */

/* 4.1 网格容器：block/float → Flexbox 多行，行内等高 */
.woocommerce ul.products,
ul.products {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: 20px;
    row-gap: 26px;
    float: none !important;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 4.1.1 列宽：用 calc 复刻 columns-N 的等比列宽（含列间距） */
.woocommerce ul.products > li.product,
ul.products > li.product {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
}
.woocommerce ul.products.columns-3 > li.product, ul.products.columns-3 > li.product {
    flex-basis: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}
.woocommerce ul.products.columns-4 > li.product, ul.products.columns-4 > li.product {
    flex-basis: calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
}
.woocommerce ul.products.columns-5 > li.product, ul.products.columns-5 > li.product {
    flex-basis: calc((100% - 80px) / 5);
    max-width: calc((100% - 80px) / 5);
}
.woocommerce ul.products.columns-6 > li.product, ul.products.columns-6 > li.product {
    flex-basis: calc((100% - 100px) / 6);
    max-width: calc((100% - 100px) / 6);
}

/* 4.1.2 干掉 WooCommerce 的 clearfix 伪元素。
   WooCommerce 自带 `.woocommerce ul.products::before/::after{content:" ";display:table}`
   （float 布局的 clearfix）。在 Flexbox 容器里，伪元素同样是 flex item ——
   宽度虽是 0，却实打实占掉**第一格**和一次 column-gap，导致每个区块
   第一行只剩 3 个卡片、且整体右移 20px（2026-09-13 实测：
   首行 left=163/457/750，第二行才是 143/437/730/1024）。
   注意 .woocommerce ul.products::before 特异性是 0,2,2，
   插件里 0,1,0 的规则压不住，必须在这里用同等或更高特异性 + !important 清除。 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after {
    content: none !important;
    display: none !important;
}

/* 取消 float 卡片与其固定宽度，改由 Flexbox 拉伸 */
.woocommerce ul.products li.product,
ul.products li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Flexbox 下 clear 对 flex item 本就不生效，这里显式声明以便阅读。
   （WooCommerce 自带 `.woocommerce ul.products li.first{clear:both}`，
     只为 float 布局换行而设，在 Flex 容器里是死规则。） */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
ul.products li.product.first,
ul.products li.product.last {
    clear: none !important;
}

/* 4.2 按钮沉底 + 高度统一 */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce-page ul.products li.product a.button.add_to_cart_button,
.woocommerce-page ul.products li.product a.button.product_type_simple,
ul.products li.product a.button.add_to_cart_button {
    margin-top: auto;
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* 标题区不参与拉伸，避免把图片/文字顶变形 */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    flex: 0 0 auto;
}

/* 4.3 响应式列数（与父主题断点一致的收放）
   注意特异性：上面 .columns-N > li.product 是 0,3,2，所以这里必须用
   同等特异性（带上 .columns-4/5/6）才能压过，否则窄屏断点不生效
   （曾出现 380px 仍显示 3 列的 bug）。 */
@media screen and (max-width: 900px) {
    .woocommerce ul.products.columns-4 > li.product, ul.products.columns-4 > li.product,
    .woocommerce ul.products.columns-5 > li.product, ul.products.columns-5 > li.product,
    .woocommerce ul.products.columns-6 > li.product, ul.products.columns-6 > li.product {
        flex-basis: calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}
@media screen and (max-width: 640px) {
    .woocommerce ul.products.columns-3 > li.product, ul.products.columns-3 > li.product,
    .woocommerce ul.products.columns-4 > li.product, ul.products.columns-4 > li.product,
    .woocommerce ul.products.columns-5 > li.product, ul.products.columns-5 > li.product,
    .woocommerce ul.products.columns-6 > li.product, ul.products.columns-6 > li.product {
        flex-basis: calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}
@media screen and (max-width: 420px) {
    .woocommerce ul.products.columns-3 > li.product, ul.products.columns-3 > li.product,
    .woocommerce ul.products.columns-4 > li.product, ul.products.columns-4 > li.product,
    .woocommerce ul.products.columns-5 > li.product, ul.products.columns-5 > li.product,
    .woocommerce ul.products.columns-6 > li.product, ul.products.columns-6 > li.product {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ============================================================
   5) 迷你购物车（头部 Warenkorb 下拉）两个按钮：等宽等高 + 文字不折行

   现象（2026-09-14 实测）：
     鼠标悬停头部「Warenkorb」弹出的下拉窗口里，
       「Warenkorb anzeigen」高 70px（文字被拆成 3 行：Warenkor / b / anzeigen）
       「Kasse」             高 42px（单行）
     两个按钮高低明显不齐，且第一个按钮文字被硬拆。

   根因（实测 computed style + 样式表来源）：
     父主题 online-shop-pro/style.css 有两条规则叠加：
       (1) .woocommerce .widget_shopping_cart_content .buttons a.button {
               display: inline-block; width: 45%; margin: 20px 0 0 3%; }
           → 下拉容器内宽 218px，45% = 98px
       (2) .woocommerce .cart .button, ... { padding: 1em; }
           → 左右各 14px，内容区只剩 98 - 28 = 70px
     文字 "Warenkorb anzeigen"（14px 字号）在 70px 内放不下 →
     折成 3 行；而 "Kasse" 只需 1 行。父主题没有统一 min-height，
     于是两个按钮高度 70px vs 42px。
     这与此前产品列表「In den Warenkorb」按钮的 padding 过大问题是同源。

   修法：
     下拉容器内宽只有 228px，放不下两个并排的按钮（见 5.2 注释），
     因此改为「每个按钮占满整宽、竖向堆叠」：外层 p.buttons 用
     flex-direction:column，按钮 width:100% + inline-flex 居中，
     收紧 padding、加 white-space:nowrap 禁止折行、统一 min-height。

   注意特异性：父主题选择器为 0,4,1
   （.woocommerce + .widget_shopping_cart_content + .buttons + a.button），
   这里带 .woocommerce 保持同级并用 !important 压制
   width / margin / padding / display。
   ============================================================ */

/* 5.1 按钮容器：block → flex，按钮各占满一行 */
.woocommerce .widget_shopping_cart_content .buttons,
.woocommerce.widget_shopping_cart .buttons,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
    text-align: center;
}

/* 5.2 按钮本体：整宽、等高、文字不折行
   为什么是「整宽竖排」而不是「两列并排」（2026-09-14 实测踩坑）：
     下拉容器内宽仅 228px，两列并排时每个按钮仅 ~94px。
     "Warenkorb anzeigen" 在 14px 字号下需约 119px，
     并排会出现下列任一问题：
       - 允许折行 → 文字被硬拆成 "Warenkor / b / anzeigen"，且两按钮不等高
       - 禁止折行（nowrap）→ 文字被裁掉（实测 scrollWidth 119 > clientWidth 94）
     改为每个按钮占满整宽（228px）后，119px 的文字有充足空间，
     既不折行也不溢出，两个按钮高度天然一致。 */
.woocommerce .widget_shopping_cart_content .buttons a.button,
.woocommerce.widget_shopping_cart .buttons a.button,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    min-height: 42px;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    /* 默认态背景/文字色必须显式声明（2026-09-14 补修）：
       WooCommerce 核心有一条
         .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button {
             background-color: #e9e6ed; color: #fff; }
       即「浅灰紫底 + 白字」，对比度极低，视觉上就像紫色被一层灰蒙住。
       若只写 :hover 规则，就会表现为「鼠标移上去才正常、移开又变灰」。
       故这里显式设定默认态为品牌紫 #7F54B3 + 白字。 */
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    border: 0 none !important;
}

/* 5.3 hover / focus 与全站主按钮一致（父主题此处也是 background:#fff 覆盖） */
.woocommerce .widget_shopping_cart_content .buttons a.button:hover,
.woocommerce.widget_shopping_cart .buttons a.button:hover,
.widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button:hover,
.woocommerce .widget_shopping_cart_content .buttons a.button:focus,
.woocommerce.widget_shopping_cart .buttons a.button:focus {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
    border-color: #6a45a0 !important;
}

/* 5.4 窄屏：整宽竖排本身已足够宽松，仅在极窄时放开折行兜底 */
@media screen and (max-width: 360px) {
    .woocommerce .widget_shopping_cart_content .buttons a.button,
    .woocommerce.widget_shopping_cart .buttons a.button,
    .widget_shopping_cart_content .woocommerce-mini-cart__buttons a.button {
        white-space: normal;
        word-break: break-word;
    }
}

/* ============================================================
   6) 全站 WooCommerce 功能按钮统一为品牌紫 rgb(127,84,179)

   背景（2026-09-14 全站按钮扫描，Playwright 读取 computed style）：
     品牌紫在首页/分类页/商品页的「In den Warenkorb」已生效（由第 2 节
     的规则提供），但以下 WooCommerce 功能按钮仍是灰的：

     ① 购物车 / 结算页的区块按钮（Weiter zur Kasse、Jetzt kaufen）
        bg = rgb(50,55,60)  ← WordPress 核心内联样式给的默认深灰：
          :root :where(.wp-element-button, .wp-block-button__link) {
              background-color: #32373c; color: #fff; }
        这两个按钮是 a.button / button 但**不在 ul.products 或
        .woocommerce a.button 的既有规则覆盖范围内**，因此仍是 WP 默认色。

     ② 我的账户页的登录 / 注册按钮
        bg = rgb(233,230,237) + 深灰字 ← 父主题
          .woocommerce button.button { ... } 给的浅灰（非品牌色）

   范围界定（重要）：
     只覆盖 WooCommerce / WordPress 自身的功能按钮。
     **支付服务商按钮一律不动**，包括：
       PayPal(.paypal-buttons / .ppc-button-wrapper)、
       Apple Pay、Google Pay(.gpay-button)、
       Stripe/WCPay(.wcpay-*)。
     这些厂商按钮的配色是各自品牌规范强制要求，改色可能违反协议。
     因此下面的选择器全部写成具体类名，不使用宽泛的 button 兜底。

   保留项：Germanized 的「Vertrag widerrufen」（撤销合同）按钮
     维持灰色低视觉权重，避免诱导用户误点，符合德国法律合规惯例。
     （它的类是 .button，故在下面逐一列名时被有意排除。）
   ============================================================ */

/* 6.1 购物车「Weiter zur Kasse」+ 结算「Jetzt kaufen」
   WP 核心用 :root :where(...) 设定，:where() 特异性为 0，
   故这里用类选择器 + !important 即可稳定覆盖。 */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    border: 0 none !important;
    border-radius: 4px;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
}

/* 6.2 我的账户页：登录 / 注册 / 通用的 woocommerce-button
   （密码重置「Passwort zurücksetzen」等也用 .woocommerce-Button） */
.woocommerce button.woocommerce-button.button,
.woocommerce button.woocommerce-Button.button,
.woocommerce form.login button.button,
.woocommerce form.register button.button,
.woocommerce form.lost_reset_password button.button,
.woocommerce-EditAccountForm button.button {
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    border: 0 none !important;
}

.woocommerce button.woocommerce-button.button:hover,
.woocommerce button.woocommerce-Button.button:hover,
.woocommerce form.login button.button:hover,
.woocommerce form.register button.button:hover,
.woocommerce form.lost_reset_password button.button:hover,
.woocommerce-EditAccountForm button.button:hover,
.woocommerce button.woocommerce-button.button:focus,
.woocommerce button.woocommerce-Button.button:focus,
.woocommerce form.login button.button:focus,
.woocommerce form.register button.button:focus {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
}

/* 6.3 结算页「回到购物车」等返向链接按钮（.wc-forward） */
.woocommerce .wc-forward.button,
.woocommerce a.button.wc-forward {
    background-color: #7F54B3 !important;
    color: #ffffff !important;
    border: 0 none !important;
}

.woocommerce .wc-forward.button:hover,
.woocommerce a.button.wc-forward:hover {
    background-color: #6a45a0 !important;
    color: #ffffff !important;
}

/* ============================================================
   7) 品牌页 / 商品详情页：取消「偏右」布局，正文居中满宽

   现象（2026-09-14 实测）：
     ① /victorinox/ 品牌页的品牌信息整体偏右
     ② 商品详情页的产品介绍区域右对齐

   根因（对比同模板的分类页定位到差异）：
     父主题按 body class 决定内容布局。实测三个页面的 body class 结尾：

       分类页   ... no-sidebar        .content-area  x=120  w=1200  float:none   ✅ 居中
       品牌页   ... left-sidebar      .content-area  x=480  w=840   float:right  ❌ 偏右
       商品详情 ... left-sidebar      .content-area  x=480  w=840   float:right  ❌ 偏右

     即父主题的 left-sidebar 分支把 .content-area 设为 float:right + 840px，
     在左侧预留 480px 给侧边栏。但这两个页面**实际没有内容侧边栏**
     （页面里唯一的 aside 位于页脚区域，不属于内容分栏），
     于是左侧 480px 成了纯空白，正文被挤到右侧，左右距变成 480 / 120。

     （实测 #content/.wrapper 本身是 120/120 对称的，问题只出在
       .content-area 这一层的 float + 固定宽度。）

   修法：
     对这两类页面把 .content-area 复位为居中满宽，与分类页一致：
       float:none + width:100% + max-width:1200px + margin:0 auto。
     同时移除 #primary 的 float，避免父主题同类规则再次生效。

   作用范围：
     全部带 left-sidebar 的正文页（商品详情 / 品牌页 / 法律文本页 /
     购物车页）。本站这些页面实际都没有内容侧边栏，
     父主题的 left-sidebar 分支只会浪费左侧 480px。

   重要：改用 body.left-sidebar 这个通用钩子，而不是逐页枚举 page-id。
     因为 body class 由父主题按「该页是否有侧边栏」统一输出，
     以后新增的 page 只要仍是 left-sidebar 就自动居中，无需再改 CSS。
     作用范围仍收窄在「本就没有侧边栏的页面类型」，
     不会波及首页（front-page）与分类页（已由 no-sidebar 正常居中）。
   ============================================================ */

/* 7.1 正文页统一居中满宽 */
body.left-sidebar .content-area,
body.left-sidebar #primary {
    float: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 7.2 商品详情页的图文两栏（图片 float:left + 摘要 float:right）
   父主题把两栏浮动排布在 840px 容器内（图片 403 + 摘要 403，
   中间留 4%）。容器改成 1200px 满宽后，两栏按原有百分比自然撑开，
   无需额外干预；此处只确保两栏等宽且间距均匀。
   注意：不改动两栏的相对结构与 float，避免影响还价框、价格标签等
   summary 内的既有元素。 */
body.single-product div.product .woocommerce-product-gallery,
body.single-product div.product .summary {
    width: 48% !important;
}

@media screen and (max-width: 900px) {
    body.single-product div.product .woocommerce-product-gallery,
    body.single-product div.product .summary {
        width: 100% !important;
    }
}

/* ============================================================
   8) 修复 float 塌陷：内容区无法滚到底 / 页脚被压掉

   症状（2026-09-14 实测 /warenkorb/）：
     向下拉的滚动条滑块停在偏上位置，怎么拉都到不了页脚。

   根因：#primary 被父主题设为 float:right，而它的父级
     #content.wrapper.site-content 与 .content-wrapper.clearfix
     都没有清除这个浮动 → 两个容器高度塌陷
     （#content 实测 h=82px，而内部 scrollHeight=820px），
     文档总高被压缩，滚动范围随之被限制。

   修法：让两个父容器建立 BFC 包住浮动子元素
     （display:flow-root 是最干净的写法，配合 ::after clear:both
      兜底老浏览器，两边都写不冲突）。
   ============================================================ */
#content.wrapper.site-content,
.content-wrapper.clearfix {
    display: flow-root !important;
}

#content.wrapper.site-content::after,
.content-wrapper.clearfix::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}


/*--------------------------------------------------------------
# d4u-onsale-overflow-fix
# Purpose: prevent the WooCommerce "Angebot!" (onsale) badge from
# pushing the document 7px wider than the viewport (1447 vs 1440)
# on the shop / archive grids. Repositions the badge inside the
# product thumbnail box so it never contributes to horizontal overflow.
# Scoped to WooCommerce loops only; does not affect other badges.
# Added: 2026-09-19
--------------------------------------------------------------*/
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    right: 0;
    left: auto;
    top: 0;
    margin: 0;
}
/* Safety net: never allow the page to scroll horizontally. */
html, body {
    overflow-x: hidden;
}