/*! sm-css:woocommerce */
/*
 * Shared WooCommerce cascade (07 §7.4, plan AD8/AD9, 01 §1.6). Owner: WP03.
 *
 * Port of migration/tools/capture/scratch/07-woocommerce-flows/oxygen-woo-cascade.css, in today's DOCUMENT order
 * (not the evidence file's order): WC core sheets (enqueued by WC at prio 10) → B Oxygen page CSS 7/223/9 → A Global
 * Styler → C custom stylesheet. Several measured winners are equal-specificity ties decided by this order:
 *   - checkout login button tertiary 16px 32px (B 223.css) vs #place_order primary 16px 24px (A wins the tie later)
 *   - account h2 line-height 1.2 = 24px (A headings) over 9.css 1.6
 *   - cross-sells li 25 % at min-width 1332 (C) over WC's 48 % (equal specificity, later)
 *   - columns-3 / columns-6 li widths over WC smallscreen 48 % / WC 13.5 % (A, later)
 * So: this file is the FIRST @import of src/style.css, everything sits inside ONE @media all {} (never purged),
 * the theme bundle is enqueued at priority 20 (after WC's sheets), and nothing here may be "unified" into utilities.
 *
 * Renamed wrappers (one class each = the specificity of the Oxygen class they replace, never an id or a 2nd class):
 *   .oxy-woo-cart → .sm-woo--cart · .oxy-woo-checkout → .sm-woo--checkout · .oxy-woo-my-account → .sm-woo--account
 *   (WP10 template-parts/page/woo.php prints <div class="sm-woo sm-woo--{cart|checkout|account} w-full"> around
 *   the_content()). Cart page ids: #div_block-25-7 → .sm-cart-wrap, #div_block-26-7 → .sm-cart-notice,
 *   #text_block-29-7 → .sm-cart-notice p (or .sm-cart-notice__text), #fancy_icon-28/31-7 → .sm-cart-notice svg, print button .sm-print.
 * Assets: oxygen-woocommerce/elements/assets/*.svg → ../../assets/images/woo/*.svg.
 * Dropped (07 §7.4 scope table): WC widget blocks, .ct-modal fixes, WC Payments / bacs / cod label fixes, Oxygen
 * product-title hotfix, .oxy-woo-checkout/.oxy-woo-my-account .select2-* (the dropdown lives in <body>: never matched),
 * .oxy-woo-cart p.cart-empty, background:var(unnecessary-c) (invalid at parse time). `box-shadow: var(--box-shadow) …`
 * with --box-shadow undefined is invalid at computed-value time, i.e. `none`: written as `box-shadow: none`.
 * Also dropped: the list members that the page scope turns into never-matching selectors (7.css `#add_payment_method
 * table.cart img` / `.woocommerce-checkout table.cart img` on the cart; 223.css `#add_payment_method #payment
 * div.payment_box::before` / `.woocommerce-cart #payment …` on the checkout): #add_payment_method is the my-account
 * add-payment-method form, and a body is never both .woocommerce-cart and .woocommerce-checkout.
 * Page CSS (B) loaded only on its own page under Oxygen: its rules without a .sm-woo--* wrapper are restricted to
 * that page with :where(body.woocommerce-{cart|checkout|account}) (zero specificity, so every tie stays as measured;
 * e.g. 7.css's select2 `text-align:left` must not reach the checkout).
 * Selectors with .oxy-woo-element / .oxy-product-cart-button / .oxy-product-* ancestors are kept verbatim (plan C20:
 * Part A single-product blocks stay global); they only match if a template prints those classes. WP06 scopes the PDP
 * in css/product.css (.sm-pdp …), later in the bundle.
 * Other areas never redefine these rules; they add scoped overrides with higher specificity in their own files.
 */
@media all {

  /* ===== B1: page 7 Warenkorb (7.css) ===== */
  .sm-cart-wrap {
    gap: 16px;
  }
  .sm-cart-notice {
    width: 100%;
    background-color: #537e56;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    text-align: left;
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  @media (max-width:767px) {
    .sm-cart-notice {
      flex-direction: column;
      display: flex;
    }
  }
  .sm-cart-notice p,
  .sm-cart-notice__text {
    color: #ffffff;
  }
  .sm-cart-notice svg {
    color: #ffffff;
  }
  .sm-cart-notice .sm-print {
    color: #ffffff;
    cursor: pointer;
  }
  .sm-woo--cart {
    width: 100%;
  }
  .sm-woo--cart .woocommerce table.shop_table tbody th {
    vertical-align: middle;
    border: none;
  }
  .sm-woo--cart .woocommerce-Price-amount {
    color: #000000;
    font-weight: 700;
  }
  .sm-woo--cart .return-to-shop {
    display: inline-block;
  }
  .sm-woo--cart .shipping-calculator-button {
    font-size: 12px;
    color: #2e3138;
  }
  .sm-woo--cart .shipping-calculator-button:hover {
    color: #c03621;
  }
  .sm-woo--cart .cart-collaterals .cross-sells ul.products {
    margin-top: -20px;
    margin-bottom: 0;
  }
  .sm-woo--cart .woocommerce .cart_totals h2,
  .sm-woo--cart .woocommerce .cross-sells h2 {
    margin-bottom: 20px;
  }
  .sm-woo--cart .woocommerce-shipping-destination {
    font-size: 12px;
    line-height: 1.2;
    color: #666666;
    margin: 4px 0;
  }
  .woocommerce-cart .cart-collaterals .cart_totals tr td {
    border: none;
  }
  .sm-woo--cart .wc-proceed-to-checkout {
    display: flex;
    flex-direction: column;
  }
  .sm-woo--cart .woocommerce a.button.alt {
    background: #2e3138;
    padding: 16px 48px;
    border-color: #2e3138;
    color: #ffffff;
  }
  .sm-woo--cart .woocommerce a.button.alt:hover {
    background: #537e56;
    border-color: #537e56;
  }
  .sm-woo--cart .product-thumbnail a {
    display: flex;
    flex-direction: column;
  }
  .woocommerce-cart table.cart .product-thumbnail {
    padding-left: 0;
    padding-right: 0;
  }
  .sm-woo--cart .woocommerce a.remove {
    color: #d3ced2 !important;
    width: auto;
    text-align: left;
    font-weight: 400;
  }
  .sm-woo--cart .woocommerce a.remove:hover {
    color: #c44 !important;
    background: transparent !important;
    text-decoration: none;
  }
  .sm-woo--cart .woocommerce-page table.cart td.actions {
    padding: 24px 0;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .input-text,
  .woocommerce-cart .sm-woo--cart table.cart td.actions .coupon .input-text {
    margin-right: 12px;
    padding: 8px 12px;
    width: 100%;
    border: 1px solid #d3ced2;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .input-text::-moz-placeholder, .woocommerce-cart .sm-woo--cart table.cart td.actions .coupon .input-text::-moz-placeholder {
    color: #d3ced2;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .input-text::placeholder,
  .woocommerce-cart .sm-woo--cart table.cart td.actions .coupon .input-text::placeholder {
    color: #d3ced2;
  }
  .sm-woo--cart li label {
    font-size: 12px;
    color: #666666;
    margin-top: 8px;
    font-weight: 400;
    font-style: normal;
  }
  .sm-woo--cart p.woocommerce-shipping-destination strong {
    color: #000000;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .input-text::-moz-placeholder {
    color: #d3ced2;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .input-text::placeholder {
    color: #d3ced2;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .sm-woo--cart table.cart td.actions button[type=submit] {
    float: right;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .coupon {
    display: flex;
  }
  .woocommerce-page .sm-woo--cart table.cart td.actions .coupon .input-text + .button {
    width: 100%;
  }
  .sm-woo--cart #add_payment_method .cart-collaterals .cart_totals tr td,
  .sm-woo--cart #add_payment_method .cart-collaterals .cart_totals tr th,
  .sm-woo--cart .woocommerce-cart .cart-collaterals .cart_totals tr td,
  .sm-woo--cart .woocommerce-cart .cart-collaterals .cart_totals tr th,
  .sm-woo--cart .woocommerce-checkout .cart-collaterals .cart_totals tr td,
  .sm-woo--cart .woocommerce-checkout .cart-collaterals .cart_totals tr th {
    border-top: 1px solid #d3ced2;
  }
  :where(body.woocommerce-cart) .select2-container--default .select2-selection--single,
  :where(body.woocommerce-cart) .select2-container--default .select2-search--dropdown .select2-search__field,
  :where(body.woocommerce-cart) .woocommerce .woocommerce-ordering select {
    font-size: 14px;
    padding: 8px 12px;
    height: auto;
    -webkit-appearance: none;
    outline: none;
    -moz-appearance: none;
    color: #000000;
    border: 1px solid #d3ced2;
    background: #ffffff;
    font-family: inherit;
    text-align: left;
  }
  :where(body.woocommerce-cart) .select2-results__option {
    font-size: 14px;
    outline: none;
  }
  :where(body.woocommerce-cart) .select2-dropdown {
    border-radius: 0;
  }
  .woocommerce-cart table.cart img {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 64px;
    max-height: 64px;
  }
  @media (max-width:940px) {
    .sm-woo--cart .woocommerce-cart-form {
      max-width: 100%;
    }
    .sm-woo--cart .woocommerce {
      flex-wrap: wrap;
    }
    .sm-woo--cart .woocommerce table.shop_table_responsive tr td::before,
    .sm-woo--cart .woocommerce-page table.shop_table_responsive tr td::before {
      font-weight: 400;
    }
    .sm-woo--cart .woocommerce .cart-collaterals,
    .sm-woo--cart .woocommerce-page .cart-collaterals {
      max-width: 100%;
      width: 100%;
    }
    .sm-woo--cart .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
    .sm-woo--cart .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
      background: transparent;
    }
    .sm-woo--cart td.product-subtotal {
      margin-bottom: 36px;
    }
  }
  @media (max-width:768px) {
    .woocommerce-page:where(.woocommerce-cart) table.cart td.actions .coupon {
      padding-bottom: 12px;
    }
    .sm-woo--cart table.cart td.actions button[type=submit] {
      float: none;
    }
  }

  /* ===== B2: page 223 Kasse (223.css) ===== */
  .sm-woo--checkout {
    width: 100%;
  }
  .sm-woo--checkout .woocommerce ul.order_details {
    padding: 20px;
    color: #666666;
  }
  .sm-woo--checkout .woocommerce ul.order_details li strong {
    color: #000000;
    margin-top: 4px;
  }
  .sm-woo--checkout .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    color: #666666;
    margin-bottom: 8px;
  }
  .sm-woo--checkout .woocommerce .woocommerce-customer-details p::before {
    color: #2e3138;
  }
  .sm-woo--checkout .woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
    padding: 0;
  }
  .sm-woo--checkout .woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses address {
    margin-bottom: 0;
  }
  .sm-woo--checkout .woocommerce .woocommerce-customer-details address {
    border: 0;
    padding: 0;
    color: #666666;
    box-shadow: none;
  }
  .sm-woo--checkout .sm-woo--checkout a {
    color: #2e3138;
  }
  .sm-woo--checkout .sm-woo--checkout a:hover {
    color: #373b44;
  }
  .sm-woo--checkout .woocommerce-info {
    margin-bottom: 32px;
  }
  .sm-woo--checkout .woocommerce-checkout #payment ul.payment_methods li {
    line-height: 1.6;
  }
  .sm-woo--checkout .woocommerce-checkout #payment {
    border-radius: 0;
    background: transparent;
  }
  .sm-woo--checkout .woocommerce-checkout #payment ul.payment_methods {
    border: 0;
  }
  .sm-woo--checkout h2.woocommerce-column__title,
  .sm-woo--checkout h2.woocommerce-order-details__title,
  .sm-woo--checkout h2.woocommerce-order-downloads__title {
    color: #000000;
    font-size: 20px;
    margin-bottom: 8px;
    line-height: 1.6;
  }
  .sm-woo--checkout .woocommerce-billing-fields h3,
  .sm-woo--checkout .woocommerce-shipping-fields h3,
  .sm-woo--checkout .woocommerce-checkout h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .sm-woo--checkout .woocommerce form .form-row label {
    font-size: 12px;
    color: #666666;
    margin-top: 8px;
  }
  .sm-woo--checkout .woocommerce form .form-row .required {
    color: #c03621;
    font-weight: 400;
  }
  :where(body.woocommerce-checkout) .woocommerce table.shop_table th.product-name,
  :where(body.woocommerce-checkout) .woocommerce table.shop_table th.product-total {
    border-top: none;
  }
  :where(body.woocommerce-checkout) .woocommerce .woocommerce-checkout #payment ul.payment_methods,
  :where(body.woocommerce-checkout) .woocommerce .woocommerce-checkout #payment div.form-row {
    padding: 0;
  }
  .sm-woo--checkout .woocommerce form .form-row input.input-text::-moz-placeholder {
    color: #d3ced2;
  }
  .sm-woo--checkout .woocommerce form .form-row input.input-text::placeholder {
    color: #d3ced2;
  }
  .sm-woo--checkout .woocommerce form.checkout_coupon p {
    margin-top: 0;
    padding: 0;
  }
  .sm-woo--checkout .woocommerce #coupon_code {
    padding: 14px 12px;
  }
  .sm-woo--checkout .woocommerce button.button,
  .sm-woo--checkout .woocommerce a.button.alt {
    line-height: 1.2;
    text-align: center;
    background: #ffffff;
    border: 1px solid #537e56;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 12px;
    color: #537e56;
    padding: 16px 32px;
    outline: none;
  }
  .sm-woo--checkout .woocommerce button.button:hover,
  .sm-woo--checkout .woocommerce a.button.alt:hover {
    background: #ffffff;
    color: #639967;
    border-color: #639967;
  }
  .sm-woo--checkout .woocommerce form .form-row-last,
  .sm-woo--checkout .woocommerce-page form .form-row-last {
    float: left;
    margin-left: 12px;
  }
  .sm-woo--checkout .woocommerce form .form-row {
    padding: 0;
  }
  .sm-woo--checkout .woocommerce .col2-set,
  .sm-woo--checkout .woocommerce-page .col2-set {
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid #d3ced2;
  }
  .sm-woo--checkout .woocommerce-Price-amount,
  .sm-woo--checkout .product-quantity {
    color: #000000;
    font-weight: 700;
    white-space: nowrap;
  }
  .sm-woo--checkout .woocommerce .col2-set,
  .sm-woo--checkout .woocommerce-page .col2-set {
    display: flex;
  }
  .sm-woo--checkout .woocommerce .col2-set .col-1,
  .sm-woo--checkout .woocommerce-page .col2-set .col-1,
  .sm-woo--checkout .woocommerce .col2-set .col-2,
  .sm-woo--checkout .woocommerce-page .col2-set .col-2 {
    width: 50%;
    padding: 20px;
  }
  .sm-woo--checkout .woocommerce form .form-row textarea {
    resize: none;
    min-height: 96px;
  }
  .sm-woo--checkout .woocommerce form .form-row textarea::-moz-placeholder {
    color: #d3ced2;
  }
  .sm-woo--checkout .woocommerce form .form-row textarea::placeholder {
    color: #d3ced2;
  }
  .sm-woo--checkout .woocommerce ul#shipping_method li {
    margin-bottom: 0;
  }
  .sm-woo--checkout .woocommerce form .form-row-first,
  .sm-woo--checkout .woocommerce-page form .form-row-first {
    width: calc(50% - 12px);
  }
  .sm-woo--checkout .woocommerce form .form-row-last,
  .sm-woo--checkout .woocommerce-page form .form-row-last {
    width: 50%;
  }
  :where(body.woocommerce-checkout) .woocommerce #payment #place_order,
  .woocommerce-page:where(.woocommerce-checkout) #payment #place_order {
    background-color: #2e3138;
    border-color: #2e3138;
  }
  :where(body.woocommerce-checkout) .woocommerce #payment #place_order:hover,
  .woocommerce-page:where(.woocommerce-checkout) #payment #place_order:hover {
    background-color: #537e56;
    border-color: #537e56;
  }
  :where(body.woocommerce-checkout) .woocommerce div#customer_details {
    padding: 0;
  }
  .woocommerce-checkout #payment ul.payment_methods li input {
    margin-right: 8px;
    margin-top: 6px;
  }
  .sm-woo--checkout .woocommerce-checkout #payment ul.payment_methods li {
    display: flex;
    flex-wrap: wrap;
  }
  .woocommerce-checkout .payment_box p {
    color: #666666;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    margin-top: 0;
  }
  .woocommerce-checkout #payment div.payment_box {
    background: #d3ced2;
    border-radius: 4px;
    padding: 20px;
    box-shadow: inherit;
  }
  .woocommerce-checkout #payment div.payment_box::before {
    border: 1em solid #d3ced2;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
  }
  @media (max-width:768px) {
    .sm-woo--checkout .woocommerce #payment #place_order,
    .sm-woo--checkout .woocommerce-page #payment #place_order {
      margin-bottom: 0;
    }
    .sm-woo--checkout .woocommerce-Price-amount,
    .sm-woo--checkout .product-quantity {
      display: block;
    }
  }
  @media (max-width:720px) {
    .sm-woo--checkout .woocommerce .col2-set,
    .sm-woo--checkout .woocommerce-page .col2-set {
      flex-direction: column;
    }
    .sm-woo--checkout .woocommerce .col2-set .col-1,
    .sm-woo--checkout .woocommerce-page .col2-set .col-1,
    .sm-woo--checkout .woocommerce .col2-set .col-2,
    .sm-woo--checkout .woocommerce-page .col2-set .col-2 {
      width: 100%;
    }
    .sm-woo--checkout button[name="apply_coupon"] {
      width: 100%;
      text-align: center;
    }
  }

  /* ===== B3: page 9 Mein Konto (9.css) ===== */
  .sm-woo--account {
    width: 100%;
  }
  .sm-woo--account p {
    color: #666666;
    margin-top: 0;
  }
  .sm-woo--account strong {
    color: #000000;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul {
    padding-left: 0;
    margin-top: 0;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul li {
    list-style-type: none;
    padding: 8px 16px;
    border-top: 1px solid #d3ced2;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul li a {
    white-space: nowrap;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul li:hover a {
    text-decoration: none;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: 1px solid #d3ced2;
  }
  .sm-woo--account .is-active {
    background: #ffffff;
    border-left: 3px solid #2e3138;
    border-right: 1px solid #d3ced2;
  }
  .sm-woo--account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #000000;
  }
  .sm-woo--account td a.woocommerce-MyAccount-downloads-file.button.alt,
  .sm-woo--account .woocommerce table.my_account_orders .button {
    padding: 8px 12px;
  }
  .sm-woo--account h3,
  .sm-woo--account h2 {
    color: #000000;
    font-size: 20px;
    line-height: 1.6;
  }
  .sm-woo--account .woocommerce-account .addresses .title .edit {
    float: left;
    margin-left: 12px;
  }
  .sm-woo--account header.woocommerce-Address-title {
    margin-bottom: 8px;
  }
  .sm-woo--account address {
    color: #666666;
    font-size: 12px;
  }
  .sm-woo--account .woocommerce form .form-row label {
    font-size: 12px;
    color: #666666;
    margin-top: 8px;
  }
  .sm-woo--account .woocommerce form .form-row .required {
    color: #c03621;
    font-weight: 400;
  }
  .sm-woo--account .woocommerce-EditAccountForm fieldset {
    border: none;
    margin-bottom: 24px;
    padding: 0;
    padding-top: 40px;
    position: relative;
    margin-top: 24px;
    margin-left: 0;
    margin-right: 0;
    box-shadow: none;
  }
  .sm-woo--account .woocommerce-EditAccountForm fieldset legend {
    color: #000000;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
    position: absolute;
    top: 12px;
  }
  .sm-woo--account .woocommerce form .form-row-first {
    width: calc(50% - 12px);
  }
  .sm-woo--account .woocommerce form .form-row-last {
    width: 50%;
  }
  .sm-woo--account .woocommerce form .form-row em {
    font-size: 12px;
    color: #d3ced2;
  }
  .sm-woo--account .woocommerce form.login {
    max-width: 480px;
  }
  .sm-woo--account .woocommerce form.login,
  .sm-woo--account .woocommerce form.register {
    border-radius: 0;
    margin-top: 12px;
    padding-bottom: 8px;
    padding-top: 8px;
  }
  .sm-woo--account .woocommerce form .form-row label.inline {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }
  .sm-woo--account button[name="login"] {
    margin-top: 24px;
  }
  .sm-woo--account p.woocommerce-LostPassword.lost_password {
    font-size: 12px;
  }
  .sm-woo--account form.woocommerce-ResetPassword.lost_reset_password {
    max-width: 480px;
    padding: 20px;
  }
  .sm-woo--account form.woocommerce-ResetPassword.lost_reset_password p {
    margin-bottom: 0;
  }
  .sm-woo--account form.woocommerce-ResetPassword.lost_reset_password p.woocommerce-form-row.woocommerce-form-row--first.form-row.form-row-first {
    width: 100%;
    margin-bottom: 16px;
  }
  .sm-woo--account mark {
    background: transparent;
    font-weight: 700;
    color: #000000;
  }
  .sm-woo--account .woocommerce table.shop_table tfoot th,
  .sm-woo--account .woocommerce table.shop_table tfoot td {
    font-weight: 400;
    border-top: 1px solid #d3ced2;
  }
  .sm-woo--account .woocommerce-Price-amount {
    color: #000000;
    font-weight: 700;
  }
  .sm-woo--account .woocommerce .woocommerce-customer-details address {
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .sm-woo--account .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email::before,
  .sm-woo--account .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone::before {
    color: #2e3138;
  }
  .sm-woo--account .woocommerce form .form-row {
    padding: 0px;
  }
  :where(body.woocommerce-account) .woocommerce table.my_account_orders td {
    font-size: 16px;
  }
  .sm-woo--account .woocommerce-address-fields__field-wrapper {
    margin-bottom: 24px;
  }
  .sm-woo--account .woocommerce ul#shipping_method li {
    margin-bottom: 0;
  }
  .sm-woo--account ul.wc-item-meta {
    padding: 0;
    margin-top: 4px;
  }

  /* ===== A: Global Styler (universal.css 317-1664, oxygen-woocommerce woo-global-styler + ct_global_settings.woo) ===== */
  /*---------Font Smoothing---------*/
  .woocommerce {
    -webkit-font-smoothing: antialiased;
  }

  /*------Rating Stars--------*/
  .woocommerce .star-rating::before,
  .woocommerce .stars:not(.selected) span a,
  .woocommerce .stars.selected span a.active ~ a {
    color: #d3d3d3;
  }
  .woocommerce .star-rating,
  .woocommerce .stars.selected span a {
    color: #65bec2;
  }

  /*-----Product Images------*/
  .woocommerce div.flex-viewport,
  .woocommerce-product-gallery__wrapper,
  .woocommerce div.product div.images .flex-control-thumbs li,
  .woocommerce ul.products li.product a img,
  .woocommerce-cart table.cart img {
    min-width: 64px;
    min-height: 64px;
    border: 1px solid #d3ced2;
    overflow: hidden;
  }

  .flex-viewport .woocommerce-product-gallery__wrapper {
    border: none; /* Remove duplicated borders */
    border-radius: 0 !important; /* Fix duplicated radius */
    margin: 0 !important; /* Fix duplicated margin */
  }

  /*----------Secondary Buttons-------------*/
  .woocommerce button.button.alt,
  .woocommerce a.button,
  .woocommerce ul.products li.product .button,
  .woocommerce #review_form #respond .form-submit input,
  .woocommerce a.button.alt,
  .woocommerce button.button {
    background: #666666;
    border: 1px solid #666666;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
    text-align: center;
    padding: 16px 24px;
    outline: none;
    font-family: inherit;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /*----------Secondary Hovered-------------*/
  .woocommerce button.button.alt:hover,
  .woocommerce a.button:hover,
  .woocommerce ul.products li.product .button:hover,
  .woocommerce #review_form #respond .form-submit input:hover,
  .woocommerce a.button.alt:hover,
  .woocommerce button.button:hover {
    background: #999999;
    border: 1px solid #999999;
    color: #ffffff;
  }
  /*----------Tertiary Buttons-------------*/
  .woocommerce button.button:disabled,
  .woocommerce button.button:disabled[disabled],
  .woocommerce .widget_shopping_cart .buttons a,
  .woocommerce.widget_shopping_cart .buttons a,
  .woocommerce .widget_price_filter .price_slider_amount .button,
  .woocommerce a.added_to_cart,
  .woocommerce .cart .button,
  .woocommerce .cart input.button,
  .woocommerce table.my_account_orders .button,
  td a.woocommerce-MyAccount-downloads-file.button.alt {
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 12px;
    background: #ffffff;
    border: 1px solid #537e56;
    color: #537e56;
    padding: 16px 24px;
    outline: none;
    font-family: inherit;
    border-radius: 4px;
  }

  /*----------Tertiary Buttons Hovered-------------*/
  .woocommerce button.button:disabled:hover,
  .woocommerce button.button:disabled[disabled]:hover,
  .woocommerce .widget_shopping_cart .buttons a:hover,
  .woocommerce.widget_shopping_cart .buttons a:hover,
  .woocommerce a.added_to_cart:hover,
  .woocommerce .cart .button:hover,
  .woocommerce .cart input.button:hover,
  .woocommerce table.my_account_orders .button:hover,
  td a.woocommerce-MyAccount-downloads-file.button.alt:hover {
    background: #ffffff;
    border: 1px solid #639967;
    color: #639967;
  }

  /*---Disabled Buttons---*/
  .woocommerce #respond input#submit.disabled,
  .woocommerce #respond input#submit:disabled,
  .woocommerce #respond input#submit:disabled[disabled],
  .woocommerce a.button.disabled, .woocommerce a.button:disabled,
  .woocommerce a.button:disabled[disabled],
  .woocommerce button.button.disabled,
  .woocommerce button.button:disabled,
  .woocommerce button.button:disabled[disabled],
  .woocommerce input.button.disabled,
  .woocommerce input.button:disabled,
  .woocommerce input.button:disabled[disabled] {
    filter: grayscale(100%);
  }

  /*----------Links-------------*/
  .woocommerce a.wcppec-checkout-buttons__button,
  .woocommerce ul.product_list_widget li a,
  .woocommerce ul.product-categories a,
  .woocommerce .widget_layered_nav_filters ul li a,
  .woocommerce .woocommerce-widget-layered-nav-list__item a,
  .woocommerce .wc-layered-nav-rating a,
  .woocommerce div.tagcloud a,
  .woocommerce ul.products li.product .woocommerce-loop-category__title,
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  h2.woocommerce-loop-category__title,
  .comment-form-rating a,
  .woocommerce .download-product a,
  a.woocommerce-remove-coupon,
  .woocommerce a.shipping-calculator-button,
  .woocommerce a.remove,
  .woocommerce a.reset_variations,
  .woocommerce .product-name a,
  .woocommerce-info a,
  .woocommerce-error a,
  .woocommerce-message a,
  .woocommerce-checkout-payment a,
  .woocommerce-LostPassword a,
  .woocommerce-Address-title a,
  .woocommerce-MyAccount-navigation-link a,
  .woocommerce-MyAccount-content a,
  a.woocommerce-review-link,
  .posted_in a,
  .tagged_as a,
  .woocommerce .woocommerce-breadcrumb a {
    color: #2e3138;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
  }

  /*----------Links Hovered-------------*/
  .woocommerce a.wcppec-checkout-buttons__button:hover,
  .woocommerce ul.product_list_widget li a:hover,
  .woocommerce ul.product-categories a:hover,
  .woocommerce .widget_layered_nav_filters ul li a:hover,
  .woocommerce .woocommerce-widget-layered-nav-list__item a:hover,
  .woocommerce div.tagcloud a:hover,
  .comment-form-rating a:hover,
  .woocommerce .download-product a:hover,
  a.woocommerce-remove-coupon:hover,
  .woocommerce a.shipping-calculator-button:hover,
  .woocommerce a.remove:hover,
  a.reset_variations:hover .product-name a:hover,
  .woocommerce .product-name a:hover,
  .woocommerce-info a:hover,
  .woocommerce-error a:hover,
  .woocommerce-message a:hover,
  .woocommerce-checkout-payment a:hover,
  .woocommerce-LostPassword a:hover,
  .woocommerce-Address-title a:hover,
  .woocommerce-MyAccount-navigation-link a:hover,
  .woocommerce-MyAccount-content a:hover,
  a.woocommerce-review-link:hover,
  .posted_in a:hover,
  .tagged_as a:hover,
  .woocommerce .woocommerce-breadcrumb a:hover {
    color: #373b44;
    text-decoration: underline;
  }

  /*-----------Labels----------------*/
  .woocommerce div.product form.cart .variations label,
  .woocommerce form label {
    font-size: 12px;
    color: #666666;
    margin-top: 8px;
    font-weight: 400;
    font-style: normal;
  }

  /*---------------Placeholders----------------*/
  .woocommerce input[type="search"]::-moz-placeholder, .woocommerce-page table.cart td.actions .input-text::-moz-placeholder, .woocommerce form .form-row .input-text::-moz-placeholder, .woocommerce-page form .form-row .input-text::-moz-placeholder {
    color: #d3ced2;
    font-family: inherit;
  }
  .woocommerce input[type="search"]::placeholder,
  .woocommerce-page table.cart td.actions .input-text::placeholder,
  .woocommerce form .form-row .input-text::placeholder,
  .woocommerce-page form .form-row .input-text::placeholder {
    color: #d3ced2;
    font-family: inherit;
  }

  /*---------------Dropdowns----------------*/
  .select2-container--default .select2-selection--single,
  .woocommerce div.product form.cart .variations select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #000000;
    background: #ffffff;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 4px;
  }

  .select2-container--default .select2-results__option--highlighted[aria-selected],
  .select2-container--default .select2-results__option--highlighted[data-selected] {
    background: #2e3138;
    color: #ffffff;
    outline: none;
  }

  .select2-container--default .select2-results__option[data-selected=true] {
    background: #373b44;
    color: #ffffff;
    outline: none;
  }

  .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
  }

  .select2-dropdown {
    border-radius: 0;
  }

  .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.6;
    color: #000000;
    padding: 0;
    min-height: 20px;
    padding-left: 0;
    outline: none;
  }
  .select2-container--open .select2-dropdown--below {
    padding: 0;
  }

  .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M0%207.33l2.829-2.83%209.175%209.339%209.167-9.339%202.829%202.83-11.996%2012.17z'/%3e%3c/svg%3e");
    background-size: 6px;
    background-repeat: no-repeat;
    background-position: 4px center;
    height: 100%;
  }

  .woocommerce .select2-container--default .select2-selection--single .select2-selection__clear {
      display: none;
      pointer-events: none;
  }

  .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
  }

  /*---------------Headings----------------*/
  .woocommerce .oxy-product-info h2,
  .woocommerce .widget_recent_reviews h2,
  .woocommerce .widget_top_rated_products h2,
  .woocommerce .widget_shopping_cart h2,
  .woocommerce .widget_products h2,
  .woocommerce .widget_product_categories h2,
  .woocommerce .widget_layered_nav_filters h2,
  .woocommerce .woocommerce-widget-layered-nav h2,
  .woocommerce .widget_rating_filter h2,
  .woocommerce .widget_price_filter h2,
  .woocommerce div.widget_product_tag_cloud h2,
  .woocommerce h1.page-title,
  .woocommerce h1.product_title,
  .woocommerce section.related.products h2,
  .oxy-product-upsells > :is(h1, h2, h3, h4, h5, h6),
  .woocommerce h2.woocommerce-Reviews-title,
  .woocommerce span.comment-reply-title,
  .woocommerce-Tabs-panel h2,
  h2.woocommerce-order-downloads__title,
  .woocommerce-orders article header h1,
  .woocommerce-account article header h1,
  .woocommerce-downloads article header h1,
  .woocommerce-edit-address article header h1,
  .woocommerce-account h2,
  .woocommerce-Address-title h3,
  .woocommerce-MyAccount-content h3,
  .woocommerce-EditAccountForm legend,
  h1.oxy-woo-archive-title,
  h2.woocommerce-column__title,
  h2.woocommerce-order-downloads__title,
  h2.woocommerce-order-details__title,
  .woocommerce-billing-fields h3,
  .woocommerce-checkout h3,
  .woocommerce .cart_totals h2,
  .woocommerce .cross-sells h2 {
    color: #000000;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  /*--------Prices and Quantity------------*/
  .woocommerce .price_label .from,
  .woocommerce .price_label .to,
  .woocommerce ul.products li.product .price,
  .product-quantity,
  .woocommerce .price ins,
  .woocommerce-Price-amount,
  .woocommerce-loop-category__title .count,
  .woocommerce .price {
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    background: transparent;
    text-decoration: none;
  }

  /*----Sale Price-----*/
  .woocommerce .product_list_widget del span.woocommerce-Price-amount,
  .woocommerce ul.products li.product .price del,
  .woocommerce .price del,
  .woocommerce .price del .woocommerce-Price-amount {
    font-size: 12px;
    font-weight: 200;
    color: #666666;
  }

  .woocommerce div.product p.price,
  .woocommerce div.product span.price,
  .woocommerce div.product span.price ins {
    color: #000000;
    font-weight: 700;
    font-size: inherit;
  }

  .woocommerce div.product p.price {
    font-size: 16px;
  }

  .woocommerce div.product p.price ins,
  .woocommerce .oxy-woo-element .price ins {
    text-decoration: none;
  }

  .woocommerce div.product p.price del,
  .woocommerce div.product span.price del,
  .woocommerce p.price del,
  .woocommerce ul.products li.product .price del {
    opacity: 1;
    display: block;
  }

  /*--------------Table Headings----------------*/
  .woocommerce-cart table.cart th,
  .woocommerce-cart .cart-collaterals .cart_totals table th,
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table tfoot th {
    font-weight: 400;
    color: #666666;
    font-size: 10px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /*-------------------Texts---------------------*/
  .woocommerce .woocommerce-mini-cart__total strong,
  .woocommerce .woocommerce-mini-cart span.quantity,
  .woocommerce .widget_product_categories span.count,
  .woocommerce .woocommerce-widget-layered-nav-list__item span,
  .woocommerce-product-attributes-item__value p,
  .woocommerce-error,
  .woocommerce-table--order-downloads,
  .woocommerce-Address address,
  .woocommerce-orders-table,
  .woocommerce-table,
  ul.woocommerce-shipping-methods,
  p.woocommerce-shipping-destination,
  .woocommerce-column--shipping-address address,
  .woocommerce-column--billing-address address,
  .woocommerce-order p,
  .woocommerce .product-name,
  .woocommerce .product-total,
  .oxy-product-stock p,
  .oxy-product-description p,
  .woocommerce-Reviews .comment-text p,
  .product .summary .product_meta,
  .woocommerce-Tabs-panel,
  .woocommerce-product-details__short-description p,
  .woocommerce-form-track-order p,
  .woocommerce-checkout-payment p,
  .checkout_coupon p,
  .woocommerce-ResetPassword p,
  .woocommerce-info,
  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-MyAccount-content p,
  .woocommerce-breadcrumb,
  p.woocommerce-result-count {
    color: #666666;
    font-weight: 400;
    line-height: 1.6;
    font-size: 16px;
    font-style: normal;
  }

  /*------------Bold Texts---------------*/
  .woocommerce-product-attributes-item__label,
  .woocommerce-error strong,
  .woocommerce-MyAccount-content strong,
  .woocommerce-shipping-destination strong,
  .woocommerce p.order-info mark,
  .woocommerce-MyAccount-content mark.order-number,
  .woocommerce-MyAccount-content mark.order-date,
  .woocommerce-MyAccount-content mark.order-status,
  .woocommerce-order-overview strong {
    color: #000000;
    font-weight: 700;
    font-family: inherit;
    background: transparent;
  }

  /*--------------------Badges---------------------*/
  .woocommerce ul.products li.product .onsale,
  .woocommerce span.onsale {
    background: #65bec2;
    font-size: 12px;
    padding: 6px 12px;
    line-height: 1.2;
    border-radius: 20px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    top: 12px;
    left: 12px;
    right: auto;
    position: absolute;
  }

  /* ----------------- */

  /*-------------Product Tabs(description, addtl info, reviews) - single product--------------*/

  .woocommerce div.product .oxy-woo-element .woocommerce-tabs .panel,
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs .panel {
    margin-bottom: 0;
    padding: 20px 0;
  }
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs,
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs {
    padding-left: 5px;
    display: flex;
    text-align: center;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li,
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li {
    border-radius: 0;
    padding: 0;
    margin: 0 5px;
    display: flex;
    align-items: center;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li::before,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li::before {
    display: none;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li::after,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li::after {
    display: none;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a {
    width: 100%;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
    padding: 16px 48px;
    z-index: 1000;
    font-weight: 400;
    border-radius: 0;
    word-break: break-word;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li a:hover,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li a:hover {
    color: #373b44;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active,
  .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li.active {
    background: white;
    border-bottom-color: white;
  }
  .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active a,
  .woocommerce
    div.product
    .oxy-woo-element
    .woocommerce-tabs
    ul.tabs
    li.active
    a {
    color: #000000;
  }

  @media (max-width: 640px) {
    .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs,
    .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs {
      flex-direction: column;
      padding: 0;
      margin-bottom: 5px;
    }
    .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li,
    .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs li {
      margin: 5px 0;
    }
    .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs::before,
    .woocommerce div.product .oxy-woo-element .woocommerce-tabs ul.tabs::before {
      border-bottom: none;
    }
    .woocommerce .oxy-woo-element div.product .woocommerce-tabs ul.tabs li.active,
    .woocommerce
      div.product
      .oxy-woo-element
      .woocommerce-tabs
      ul.tabs
      li.active {
      border-bottom-color: #d3ced2;
    }
  }

  /* tabs panel content (single product, any tab content) */

  .woocommerce .oxy-woo-element table.shop_attributes th,
  .woocommerce .oxy-woo-element table.shop_attributes td {
    border-top: 1px solid #d3ced2;
    padding: 8px;
  }

  /* single product - add to cart */

  .woocommerce .oxy-product-cart-button,
  .woocommerce .oxy-woo-element div.product form.cart {
    width: 100%;
    max-width: 360px;
  }

  .woocommerce .oxy-woo-element div.product .single_add_to_cart_button,
  .woocommerce .single_add_to_cart_button {
    align-self: stretch;
    flex-grow: 1;
    border-radius: 0;
  }

  .woocommerce .oxy-woo-element div.product form.cart,
  .woocommerce .oxy-product-cart-button form.cart,
  .woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
  }

  .woocommerce .oxy-woo-element div.product form.variations_form.cart,
  .woocommerce .oxy-product-cart-button form.variations_form.cart {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce .oxy-woo-element div.product form.cart td.value,
  .woocommerce .oxy-product-cart-button td.value {
    padding: 0;
  }

  .woocommerce .oxy-woo-element div.product .woocommerce-variation-add-to-cart,
  .woocommerce .woocommerce-variation-add-to-cart {
    display: flex;
    width: 100%;
  }

  /* Primary Buttons */
  .woocommerce .widget_shopping_cart .buttons a.checkout.wc-forward,
  .woocommerce button[type=submit],
  .woocommerce button[name=woocommerce-form-login__submit],
  .woocommerce button[name=save_account_details],
  .woocommerce button[name=save_address],
  .woocommerce .oxy-woo-element div.product form.cart button.button.alt,
  .woocommerce .oxy-product-cart-button button.button.alt,
  .woocommerce div.product form.cart .button {
    background-color: #2e3138;
    color: #ffffff;
    border-radius: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 16px 24px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #2e3138;
    border-radius: 4px;
    line-height: 1.2;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    cursor: pointer;
  }
  .woocommerce button[type=submit]:hover,
  .woocommerce button[name=woocommerce-form-login__submit]:hover,
  .woocommerce button[name=save_account_details]:hover,
  .woocommerce button[name=save_address]:hover,
  .woocommerce .oxy-woo-element div.product form.cart button.button.alt:hover,
  .woocommerce .oxy-product-cart-button button.button.alt:hover,
  .woocommerce div.product form.cart .button:hover {
    background-color: #537e56;
    border: 1px solid #537e56;
  }

  .woocommerce .oxy-woo-element div.product form.cart button.button.alt.disabled,
  .woocommerce button.button.alt.disabled {
    background: #cccccc !important;
    border: 1px solid #cccccc !important;
    opacity: 1;
  }

  .woocommerce .quantity .qty {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 56px;
    padding: 8px 9px;
    margin-right: 12px;
    background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M0%207.33l2.829-2.83%209.175%209.339%209.167-9.339%202.829%202.83-11.996%2012.17z'/%3e%3c/svg%3e"),
      url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M0%2016.67l2.829%202.83%209.175-9.339%209.167%209.339%202.829-2.83-11.996-12.17z'/%3e%3c/svg%3e"), #ffffff;
    background-size: 6px, 6px;
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.8em bottom calc(50% - 5px), right 0.8em top calc(50% - 5px);
    height: 100%;
  }

  .woocommerce table.variations tr {
    border-top: none;
  }

  .woocommerce .oxy-woo-element div.product form.cart .variations,
  .woocommerce div.product .oxy-product-cart-button form.cart .variations {
    margin-bottom: 0;
  }

  .woocommerce .oxy-woo-element div.product form.cart table.variations tr,
  .woocommerce table.variations tr {
    display: flex;
    flex-direction: column;
  }

  .woocommerce
    .oxy-woo-element
    div.product
    form.cart
    table.variations
    tr
    td
    label,
  .woocommerce .oxy-product-cart-button table.variations tr td label {
    font-size: 12px;
    margin-right: 12px;
  }

  .woocommerce .oxy-woo-element div.product form.cart table.variations tr td a,
  .woocommerce .oxy-product-cart-button table.variations tr td a {
    font-size: 12px;
  }

  .woocommerce .oxy-woo-element div.product form.cart a.reset_variations:before,
  .woocommerce .oxy-product-cart-button table.variations tr td a:before {
    content: "× ";
  }

  .woocommerce .oxy-woo-element div.product form.cart .variations,
  .woocommerce .oxy-product-cart-button div.product form.cart .variations {
    margin-bottom: 0;
  }

  .woocommerce .woocommerce-ordering select,
  .woocommerce .oxy-woo-element div.product form.cart .variations select,
  .woocommerce div.product .oxy-product-cart-button form.cart .variations select,
  .woocommerce div.product form.cart .variations select,
  .woocommerce form.cart .variations select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    line-height: 1.2;
    cursor: pointer;
    width: 100%;
    position: relative;
    background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M0%207.33l2.829-2.83%209.175%209.339%209.167-9.339%202.829%202.83-11.996%2012.17z'/%3e%3c/svg%3e"), #ffffff;
    background-size: 6px;
    padding-right: 24px;
    background-repeat: no-repeat;
    background-position: right 0.8em center;
  }

  .woocommerce input[type="number"]::-webkit-inner-spin-button,
  .woocommerce input[type="number"]::-webkit-outer-spin-button {
    margin-right: -9px;
    opacity: 0.01;
    width: 24px;
    height:48px;
    cursor: pointer;
  }

  /* single product - rating below title / rating element */

  .woocommerce .oxy-woo-element div.product .woocommerce-product-rating,
  .woocommerce .oxy-product-rating .woocommerce-product-rating,
  .woocommerce div.product .oxy-product-rating .woocommerce-product-rating {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .woocommerce
    .oxy-woo-element
    div.product
    .woocommerce-product-rating
    .star-rating::before,
  .woocommerce .oxy-product-rating .star-rating::before {
    position: relative;
    color: #d3d3d3;
  }

  .woocommerce
    .oxy-woo-element
    div.product
    .woocommerce-product-rating
    .star-rating,
  .woocommerce .oxy-product-rating .woocommerce-product-rating .star-rating {
    width: auto;
    letter-spacing: 2px;
    margin: 0 0 0 0;
  }

  .woocommerce
    .oxy-woo-element
    div.product
    .woocommerce-product-rating
    a.woocommerce-review-link,
  .woocommerce .oxy-product-rating a.woocommerce-review-link {
    font-size: 12px;
  }
  .woocommerce
    .oxy-woo-element
    div.product
    .woocommerce-product-rating
    .star-rating
    span,
  .woocommerce .oxy-product-rating .woocommerce .star-rating span {
    color: #65bec2;
  }

  /* Transitions */
  .woocommerce .flex-control-thumbs li,
  .woocommerce .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item,
  .select2-search--dropdown .select2-search__field,
  .woocommerce
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox
    span::before,
  .woocommerce ul.tabs li,
  .woocommerce .woocommerce-product-gallery__trigger:after,
  .woocommerce .woocommerce-product-gallery__trigger:before,
  .woocommerce img:not(.zoomImg):not(.pswp__img),
  .woocommerce textarea,
  .woocommerce .checkbox,
  .woocommerce .select2-selection,
  .woocommerce input,
  .woocommerce button,
  .woocommerce select,
  .woocommerce a {
    transition: all ease 0.2s;
  }
  /* End of Transitions */

  /* Input Styles */
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .select2-container--default .select2-search--dropdown .select2-search__field,
  .woocommerce textarea,
  .select2-dropdown,
  .woocommerce .select2-selection,
  .woocommerce input[type="search"],
  .woocommerce input[type="text"],
  .woocommerce input[type="number"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="email"],
  .woocommerce input[type="password"],
  .woocommerce select {
    height: auto;
    font-size: 14px;
    border: 1px solid #d3ced2;
    background: #ffffff;
    color: #000000;
    outline: none;
    font-family: inherit;
    padding: 8px 12px;
    border-radius: 4px;
    resize: none;
  }
  /* Focus State */
  .woocommerce-cart table.cart td.actions .coupon .input-text:focus,
  .select2-container--default .select2-search--dropdown .select2-search__field:focus,
  .woocommerce form .form-row textarea:focus,
  .woocommerce textarea:focus,
  .select2-dropdown:focus,
  .woocommerce .select2-selection:focus,
  .woocommerce input[type="search"]:focus,
  .woocommerce input[type="text"]:focus,
  .woocommerce input[type="number"]:focus,
  .woocommerce input[type="tel"]:focus,
  .woocommerce input[type="email"]:focus,
  .woocommerce input[type="password"]:focus,
  .woocommerce select:focus {
    border: 1px solid #537e56;
    box-shadow: 0 0 5px #537e56;
  }
  /* End of Inputs */

  /* Custom Checkbox */
  .woocommerce-form-login input[type="checkbox"],
  .sm-woo--checkout input[type="checkbox"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0.01;
    display: none !important;
  }
  .woocommerce-form-login
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme,
  .sm-woo--checkout
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox {
    position: relative;
    cursor: pointer;
    padding-left: 16px;
    margin-top: 0;
  }
  .woocommerce-form-login
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme span,
  .sm-woo--checkout
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox span{
      margin-left: 18px;
  }
  .woocommerce-form-login
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme
    span::before,
  .sm-woo--checkout
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox
    span::before {
    width: 24px;
    height: 24px;
    border: 1px solid #d3ced2;
    background-color: #ffffff;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-size: 50%;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  input[type="checkbox"]:checked ~ span::before,
  input[type="checkbox"]:checked ~ label span::before {
    background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M9%2021.035l-9-8.638%202.791-2.87%206.156%205.874%2012.21-12.436%202.843%202.817z'/%3e%3c/svg%3e"), #ffffff;
  }
  .woocommerce-form-login
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme {
    margin-top: 34px;
  }
  .sm-woo--checkout
    label.woocommerce-form__label.woocommerce-form__label-for-checkbox
    span::before {
    margin-top: -4px;
  }
  /* End of Custom Checkbox */

  /* Product Column Fix */
  .woocommerce-page.columns-1 ul.products li.product,
  .woocommerce.columns-1 ul.products li.product {
    width: 100%;
  }
  .woocommerce-page.columns-2 ul.products li.product,
  .woocommerce.columns-2 ul.products li.product {
    margin: 0;
    width: 50%;
  }
  .woocommerce-page.columns-3 ul.products li.product,
  .woocommerce.columns-3 ul.products li.product {
    margin: 0;
    width: 33.33%;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 25%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px;
  }
  .woocommerce-page.columns-5 ul.products li.product,
  .woocommerce.columns-5 ul.products li.product {
    margin: 0;
    width: 20%;
  }
  .woocommerce-page.columns-6 ul.products li.product,
  .woocommerce.columns-6 ul.products li.product {
    margin: 0;
    width: 16.6%;
  }
  /* End of Product Column Fix */

  /*--- Radio Buttons Style ---*/
  .woocommerce input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #d3ced2;
    border-radius: 100%;
    outline: none;
    cursor: pointer;
  }

  .woocommerce input[type=radio]:hover {
    border: 1px solid #537e56;
    box-shadow: 0 0 5px #537e56;
  }

  .woocommerce input[type=radio]:checked {
    background: #000000;
    box-shadow: inset 0 0 0 8px #ffffff;
  }

  .woocommerce input[type=radio]:checked:hover {
    box-shadow: inset 0 0 0 8px #ffffff, 0 0 5px #537e56;
  }

  /*--------------------Tables and Forms Style-------------------------*/
  .oxy-woo-order-tracking form,
  .woocommerce form.woocommerce-ResetPassword.lost_reset_password,
  .woocommerce .woocommerce-EditAccountForm,
  .woocommerce .woocommerce-address-fields,
  .woocommerce-cart .cart-collaterals .cart_totals table,
  .woocommerce .col2-set,
  .woocommerce-form-coupon,
  .woocommerce #reviews #comments ol.commentlist li .comment-text,
  ul.woocommerce-order-overview,
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce form.checkout_coupon,
  .woocommerce table.shop_table {
    border: 1px solid #d3ced2;
    border-top: 3px solid #2e3138;
    border-radius: 0;
    background: #ffffff;
    padding: 20px;
    border-collapse: collapse;
    box-shadow: none; /* Oxygen: var(--box-shadow) 0 10px 20px, --box-shadow undefined = invalid at computed-value time = none */
  }
  fieldset {
    background: transparent;
  }
  .woocommerce table tr {
    border-top: 1px solid #d3ced2;
  }
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table tfoot td,
  .woocommerce table.shop_table tfoot th,
  .woocommerce table.shop_table th {
    border: none;
    padding: 12px 20px;
    font-weight: 400;
    color: #666666;
  }
  /* End of Tables and Forms Styles */

  /* Notification Styles */
  .woocommerce-info, .woocommerce-error, .woocommerce-message {
    padding-right: 20px;
    border-bottom: 1px solid #d3ced2;
    border-left: 1px solid #d3ced2;
    border-right: 1px solid #d3ced2;
    border-radius: 0;
    background: #ffffff;
    border-collapse: collapse;
    box-shadow: none; /* Oxygen: var(--box-shadow) 0 10px 20px, --box-shadow undefined = invalid at computed-value time = none */
  }
  /* Info */
  .woocommerce-info::before {
    color: #2e3138;
  }
  .woocommerce-info {
    border-top-color: #2e3138;
  }
  /* Error */
  .woocommerce-error::before {
    color: #c03621;
  }
  .woocommerce-error {
    border-top-color: #c03621;
  }
  /* Message */
  .woocommerce-message::before {
    color: #537e56;
  }
  .woocommerce-message {
    border-top-color: #537e56;
  }
  /* End of Notification Sytles */

  /* Shop, Uppsells, Related Product Shared Styles Styles */
  .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -20px 20px;
  }
  .woocommerce ul.products li.product .button {
    margin-top: auto;
  }
  .woocommerce a.added_to_cart {
    margin-top: 12px;
  }
  .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
  }

  /* Product Info Shared Styles */

  .woocommerce .oxy-product-info,
  .woocommerce .oxy-product-tabs {
    width: 100%;
  }

  .woocommerce table.shop_attributes {
    border-top: 1px solid #d3ced2;
    border-collapse: collapse;
  }

  .woocommerce table.shop_attributes tr:nth-child(even) td,
  .woocommerce table.shop_attributes tr:nth-child(even) th {
    background: transparent;
  }

  .woocommerce table.shop_attributes th,
  .woocommerce table.shop_attributes td {
    border-bottom: 1px solid #d3ced2;
    text-align: left;
  }

  /* select2 rules from the "Product Categories Widget" block (the widget-only rules are dropped) */
  .woocommerce .select2-container--open .select2-dropdown--below {
    border-color: #d3ced2
  }
  .woocommerce .select2-container--open .select2-dropdown--above {
    padding: 0;
    border-color: #d3ced2;
  }
  .woocommerce .select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #d3ced2;
  }
  .woocommerce .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #537e56;
  }
  .woocommerce .select2-container--default .select2-selection--single .select2-selection__clear {
    font-weight: 300;
    color: #d3ced2;
    font-size: 24px;
    line-height: 1;
  }
  .woocommerce .select2-container--default .select2-selection--single:hover .select2-selection__clear {
    color: #373b44;
  }
  /* End */

  /*---Safari Row Hotfix---*/
  .woocommerce .products ul::after,
  .woocommerce .products ul::before,
  .woocommerce ul.products::after,
  .woocommerce ul.products::before {
    width: 100%;
  }

  /* ===== C: custom stylesheet "override" (ct_style_sheets), WC parts, verbatim =====
     Not repeated here (defined once elsewhere): h1/h2 28/22px at max-width 768 and @media print (.no-print, .cross-sells)
     are in css/base.css (WP01); .big-screen-border is in css/components.css (WP01). Dropped: .mame_qr-*,
     .woocommerce-order-wallee-documents, .oxy-woo-cart p.cart-empty (WC 11 prints div.cart-empty), .oxy-* element rules. */

  .woocommerce-store-notice, p.demo_store {
    background: black;
    color: white;
  }

  /*oxy woo hotfix*/
  .woocommerce-product-gallery {
    opacity: 1 !important;
  }

  /*Product Page*/
  .woocommerce-product-attributes .woocommerce-product-attributes-item--weight{
    display:none !important;
  }

  .woocommerce .oxy-woo-element div.product form.cart button.button.alt, .woocommerce .oxy-product-cart-button button.button.alt, .woocommerce div.product form.cart .button{
    border:none;
  }

  .woocommerce .oxy-woo-element div.product form.cart button.button.alt, .woocommerce .oxy-product-cart-button button.button.alt, .woocommerce div.product form.cart .button:hover {
    border:none !important;
  }

  .woocommerce-variation-price{
    margin-top:16px;
    margin-bottom:16px;
  }

  .woocommerce ul.products {
    margin:-10px -14px 20px;
  }

  .woocommerce .oxy-product-cart-button, .woocommerce .oxy-woo-element div.product form.cart {
    max-width:initial;
  }

  .woocommerce div.product .related.products{
    margin-top:0;
  }

  .woocommerce-loop-product__title{
    overflow:hidden;
  }

  /*Cart & Checkout pages*/
  .woocommerce-cart .cross-sells .products li:nth-child(n+5) {
    display:none;
  }

  .woocommerce-cart ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
  }

  @media only screen and (min-width: 1332px) {
    .woocommerce-cart .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li {
    width: 25%;
    }
  }

  /* Account Pages */
  .woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
    padding-top:8px;
  }

  .sm-woo--account address {
    font-size:16px;
  }

}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;

}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;

}
/*! sm-css:base */
/*
 * Base layer (WP01). Port of normalize 7 (oxygen.css), the Oxygen global
 * settings and the "override" custom sheet: 01 §7.3, binding (plan AD3).
 * Tailwind preflight is OFF; this file replaces it. Plain CSS (no @layer), so
 * nothing here is ever purged. Its place in the bundle (right after
 * tailwindcss/base) is fixed by the @import order in src/style.css.
 */
/* ------------------------------------------------------------------ *
 * Self-hosted fonts (01 §1.3). Google files, unicode-range verbatim,  *
 * font-style normal, NO font-display (= auto, as today), no italic    *
 * face (Chrome synthesises it today). Only Archivo latin is preloaded *
 * (inc/enqueue.php).                                                   *
 * ------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url('./assets/archivo-v25-latin-ext-CEt9KWsu.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  src: url('./assets/archivo-v25-latin-BEIDiHaE.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/poppins-v24-600-latin-ext-BO279Z4F.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/poppins-v24-600-latin-DJVo7c07.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/archivo-black-v23-latin-ext-DT-vtzpT.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/archivo-black-v23-latin-BxoSh3FT.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ------------------------------------------------------------------ *
 * normalize 7 + Oxygen globals (01 §7.3, exact)                       *
 * ------------------------------------------------------------------ */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}
*,
::before,
::after {
  box-sizing: inherit;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  margin-top: 96px;
  font-family: 'Archivo';
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #2e3138;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Archivo';
  font-weight: 700;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
@media only screen and (max-width: 768px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}
h1,
h2,
h3 {
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}
a {
  color: #0074db;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  text-decoration: none;
}
p {
  margin-top: 0 !important;
}
u {
  text-decoration: none;
}
picture {
  width: 100%;
}
b,
strong {
  font-weight: bolder;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
button,
input,
optgroup,
select,
textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type='button'],
[type='reset'],
[type='submit'],
button {
  -webkit-appearance: button;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Alpine: hide x-cloak nodes until Alpine has started (no visual effect otherwise). */
[x-cloak] {
  display: none !important;
}
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  .cross-sells {
    display: none !important;
  }
}
.\!container {
  width: 100% !important;

}
.container {
  width: 100%;

}
@media (min-width: 480px) {
  .\!container {
    max-width: 480px !important;

  }
  .container {
    max-width: 480px;

  }

}
@media (min-width: 577px) {
  .\!container {
    max-width: 577px !important;

  }
  .container {
    max-width: 577px;

  }

}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;

  }
  .container {
    max-width: 768px;

  }

}
@media (min-width: 769px) {
  .\!container {
    max-width: 769px !important;

  }
  .container {
    max-width: 769px;

  }

}
@media (min-width: 992px) {
  .\!container {
    max-width: 992px !important;

  }
  .container {
    max-width: 992px;

  }

}
@media (min-width: 993px) {
  .\!container {
    max-width: 993px !important;

  }
  .container {
    max-width: 993px;

  }

}
@media (min-width: 1121px) {
  .\!container {
    max-width: 1121px !important;

  }
  .container {
    max-width: 1121px;

  }

}
@media (min-width: 1201px) {
  .\!container {
    max-width: 1201px !important;

  }
  .container {
    max-width: 1201px;

  }

}
@media (min-width: 1333px) {
  .\!container {
    max-width: 1333px !important;

  }
  .container {
    max-width: 1333px;

  }

}
@media (min-width: 1921px) {
  .\!container {
    max-width: 1921px !important;

  }
  .container {
    max-width: 1921px;

  }

}
/*! sm-css:components */
/*
 * Shared utilities (WP01): plan §2.4, 01 §7.3, §5.3, decision D6.
 * Plain CSS inside @media all {} (never purged, AD9). This file sits between
 * tailwindcss/components and tailwindcss/utilities, so any Tailwind utility on
 * the same element wins over these classes (e.g. `bg-graphite bg-texture`
 * gives the texture on graphite). Oxygen class names are kept verbatim so the
 * Oxygen tree ids and the specs can be cross-referenced 1:1 (§9 C4).
 * Colours, the stripe texture and the big-screen shadow come from the
 * Tailwind tokens (theme(), tailwind.config.js = plan §2), never as hex here.
 */
@media all {
  /* ---------------------------------------------------------------- *
   * Textures                                                          *
   * ---------------------------------------------------------------- */

  /* Texture only. Oxygen's class also had padding/flex/bold and display:none
     ≤991: set those per use with Tailwind where the tree had them. */
  .bg-texture {
    background-color: #537e56;
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 6px);
    background-size: 4px 4px;
  }

  /* 114deg variant (blog "Weitere Beiträge" bar 4px; card hover uses 8px:
     add `hover:[background-size:8px_8px]` or a group-hover arbitrary value). */
  .bg-texture-114 {
    /* Same stripes as theme('backgroundImage.stripes'), at 114deg (no token). */
    background-image: repeating-linear-gradient(114deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
    background-size: 4px 4px;
  }

  /* ---------------------------------------------------------------- *
   * Underline-grow links (01 §7.3, override sheet verbatim). Apply   *
   * the class to the container, exactly where Oxygen had it. The     *
   * container's own `display:flex; color:#fff` (underlineHover) is   *
   * set with Tailwind (`flex text-white`) where the tree had it.     *
   * ---------------------------------------------------------------- */
  .underlineHover a {
    position: relative;
  }
  .underlineHover a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  .underlineHover a:hover::before,
  .underlineHover a:focus-visible::before {
    visibility: visible;
    width: 100%;
  }

  .underlineHoverBlackA a {
    position: relative;
    color: #000;
  }
  .underlineHoverBlackA a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  .underlineHoverBlackA a:hover::before,
  .underlineHoverBlackA a:focus-visible::before {
    visibility: visible;
    width: 100%;
  }

  .underlineHoverBlack h2 {
    position: relative;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
  }
  .underlineHoverBlack h2::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  .underlineHoverBlack a:hover h2::before,
  .underlineHoverBlack a:focus-visible h2::before {
    visibility: visible;
    width: 100%;
  }

  /* ---------------------------------------------------------------- *
   * Big-screen frame (01 §7.3): unconditional width/borders, shadow  *
   * ramp only ≥1921 (its own ramp, not shadow-mega).                  *
   * ---------------------------------------------------------------- */
  .big-screen-border {
    width: 100%;
    border-left: none;
    border-right: none;
  }
  @media (min-width: 1921px) {
    .big-screen-border {
      box-shadow: 0 .5px 1.2px rgba(0,0,0,.028), 0 1.2px 3px rgba(0,0,0,.04), 0 2.3px 5.6px rgba(0,0,0,.05), 0 4px 10.1px rgba(0,0,0,.06), 0 7.5px 18.8px rgba(0,0,0,.072), 0 18px 45px rgba(0,0,0,.1);
    }
  }

  /* ---------------------------------------------------------------- *
   * Menu helper class from the DB (menu item 5375 "Produkte").        *
   * Decision D4: hidden from 1121px, i.e. visible whenever the burger *
   * menu shows (Oxygen used min-width:1120px, which hid it at 1120).  *
   * ---------------------------------------------------------------- */
  @media (min-width: 1121px) {
    .hide-on-desktop {
      display: none !important;
    }
  }

  /* ---------------------------------------------------------------- *
   * Skip link (plan §5.3): first focusable element in header.php.     *
   * Visually hidden until focused, then a graphite pill top-left      *
   * above the fixed header (z 2147483640).                            *
   * ---------------------------------------------------------------- */
  .skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2147483647;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link:focus {
    position: fixed;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 16px;
    overflow: visible;
    clip: auto;
    border-radius: 9999px;
    background-color: #2e3138;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
  }

  /* ---------------------------------------------------------------- *
   * Decision D6: visible keyboard focus everywhere (booster pattern). *
   * :focus-visible only, so mouse clicks and the pixel baselines (no  *
   * focus) are unaffected.                                             *
   * ---------------------------------------------------------------- */
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .skip-link:focus-visible {
    outline-color: #2e3138;
  }
  /* WooCommerce buttons: the Oxygen/Global Styler CSS sets `outline:none`
     on them at up to (0,3,2) specificity, and their text is white, so the
     ring takes the button's fill colour (secondary #666, primary graphite,
     tertiary green). !important is limited to :focus-visible. Text inputs
     and selects keep the Global Styler's green focus glow (they match
     :focus-visible on mouse click too, so no ring is forced on them).
     The three tier lists sit in :where() so all three rules have the same
     specificity (0,2,0) and the LATER rule wins (secondary → primary →
     tertiary). With :is() an id alternative (#respond input#submit,
     #place_order) gave the whole list id-level specificity, and the grey
     secondary ring beat the graphite one on login/register/#place_order (WP10). */
  .woocommerce :where(a.button, button.button, input.button, .button, #respond input#submit):focus-visible {
    outline: 2px solid #666666 !important;
    outline-offset: 2px !important;
  }
  .woocommerce :where(button[type='submit'], button[name='woocommerce-form-login__submit'], button[name='save_account_details'], button[name='save_address'], div.product form.cart .button, a.checkout-button, #place_order):focus-visible {
    outline-color: #2e3138 !important;
  }
  /* Outline tier: update cart (a submit button inside table.cart), "Warenkorb
     anzeigen", order-table buttons, and the checkout's inline login button
     (green outline, 07 §3.5). The PDP add-to-cart (form.cart, green fill)
     gets the green ring too, which is its fill colour. */
  .woocommerce :where(.cart .button, .cart input.button, a.added_to_cart, table.my_account_orders .button, .woocommerce-checkout form.login .button):focus-visible {
    outline-color: #537e56 !important;
  }
  /* WC focuses notices from script (tabindex=-1) for screen readers: no
     ring for a focus nobody navigated to. */
  :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-NoticeGroup)[tabindex='-1']:focus-visible {
    outline: none;
  }

  /* ---------------------------------------------------------------- *
   * Reduced motion (plan §2.4). Area files add their own components   *
   * (mega panel, facets, accordions, sliders, carousels).             *
   * ---------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .underlineHover a::before,
    .underlineHoverBlackA a::before,
    .underlineHoverBlack h2::before {
      transition-duration: 0s;
    }
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;

}
.\!visible {
  visibility: visible !important;

}
.visible {
  visibility: visible;

}
.invisible {
  visibility: hidden;

}
.static {
  position: static;

}
.fixed {
  position: fixed;

}
.absolute {
  position: absolute;

}
.relative {
  position: relative;

}
.sticky {
  position: sticky;

}
.top-1 {
  top: 0.25rem;

}
.top-10 {
  top: 2.5rem;

}
.col-span-full {
  grid-column: 1 / -1;

}
.m-0 {
  margin: 0px;

}
.mx-auto {
  margin-left: auto;
  margin-right: auto;

}
.mb-6 {
  margin-bottom: 1.5rem;

}
.mb-\[28\.8px\] {
  margin-bottom: 28.8px;

}
.mt-2 {
  margin-top: 0.5rem;

}
.mt-auto {
  margin-top: auto;

}
.block {
  display: block;

}
.inline-block {
  display: inline-block;

}
.inline {
  display: inline;

}
.flex {
  display: flex;

}
.inline-flex {
  display: inline-flex;

}
.table {
  display: table;

}
.grid {
  display: grid;

}
.contents {
  display: contents;

}
.hidden {
  display: none;

}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;

}
.h-10 {
  height: 2.5rem;

}
.h-6 {
  height: 1.5rem;

}
.h-\[130px\] {
  height: 130px;

}
.h-\[14px\] {
  height: 14px;

}
.h-auto {
  height: auto;

}
.w-10 {
  width: 2.5rem;

}
.w-6 {
  width: 1.5rem;

}
.w-\[12px\] {
  width: 12px;

}
.w-full {
  width: 100%;

}
.min-w-0 {
  min-width: 0px;

}
.max-w-\[40rem\] {
  max-width: 40rem;

}
.max-w-full {
  max-width: 100%;

}
.max-w-section {
  max-width: 1120px;

}
.shrink {
  flex-shrink: 1;

}
.shrink-0 {
  flex-shrink: 0;

}
.grow {
  flex-grow: 1;

}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

}
.cursor-pointer {
  cursor: pointer;

}
.resize {
  resize: both;

}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));

}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));

}
.flex-col {
  flex-direction: column;

}
.flex-wrap {
  flex-wrap: wrap;

}
.flex-nowrap {
  flex-wrap: nowrap;

}
.items-start {
  align-items: flex-start;

}
.items-center {
  align-items: center;

}
.items-stretch {
  align-items: stretch;

}
.justify-between {
  justify-content: space-between;

}
.gap-2 {
  gap: 0.5rem;

}
.gap-4 {
  gap: 1rem;

}
.gap-8 {
  gap: 2rem;

}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;

}
.gap-y-1 {
  row-gap: 0.25rem;

}
.overflow-hidden {
  overflow: hidden;

}
.hyphens-manual {
  hyphens: manual;

}
.rounded {
  border-radius: 0.25rem;

}
.rounded-full {
  border-radius: 9999px;

}
.border {
  border-width: 1px;

}
.border-0 {
  border-width: 0px;

}
.bg-graphite {
  --tw-bg-opacity: 1;
  background-color: rgb(46 49 56 / var(--tw-bg-opacity, 1));

}
.bg-green {
  --tw-bg-opacity: 1;
  background-color: rgb(83 126 86 / var(--tw-bg-opacity, 1));

}
.bg-grey-eee {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));

}
.bg-light {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));

}
.bg-transparent {
  background-color: transparent;

}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;

}
.p-0 {
  padding: 0px;

}
.p-4 {
  padding: 1rem;

}
.p-5 {
  padding: 1.25rem;

}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;

}
.px-\[18px\] {
  padding-left: 18px;
  padding-right: 18px;

}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;

}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;

}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;

}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;

}
.py-\[75px\] {
  padding-top: 75px;
  padding-bottom: 75px;

}
.pb-\[18px\] {
  padding-bottom: 18px;

}
.pt-3 {
  padding-top: 0.75rem;

}
.text-left {
  text-align: left;

}
.text-\[14px\] {
  font-size: 14px;

}
.text-\[15px\] {
  font-size: 15px;

}
.text-\[18px\] {
  font-size: 18px;

}
.text-\[19px\] {
  font-size: 19px;

}
.text-\[22px\] {
  font-size: 22px;

}
.text-\[26px\] {
  font-size: 26px;

}
.font-bold {
  font-weight: 700;

}
.font-semibold {
  font-weight: 600;

}
.uppercase {
  text-transform: uppercase;

}
.lowercase {
  text-transform: lowercase;

}
.leading-\[1\.25\] {
  line-height: 1.25;

}
.leading-\[1\.35\] {
  line-height: 1.35;

}
.leading-\[1\.6\] {
  line-height: 1.6;

}
.text-\[grey\] {
  --tw-text-opacity: 1;
  color: rgb(128 128 128 / var(--tw-text-opacity, 1));

}
.text-graphite {
  --tw-text-opacity: 1;
  color: rgb(46 49 56 / var(--tw-text-opacity, 1));

}
.text-grey-444 {
  --tw-text-opacity: 1;
  color: rgb(68 68 68 / var(--tw-text-opacity, 1));

}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));

}
.underline {
  text-decoration-line: underline;

}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

}
.outline {
  outline-style: solid;

}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;

}
.\[-a-zA-Z0-9_\:\.\@\] {
  -a-z-a--z0-9_: .@;

}
.\[font\:inherit\] {
  font: inherit;

}
.\[overflow-wrap\:break-word\] {
  overflow-wrap: break-word;

}
.\[word-break\:break-word\] {
  word-break: break-word;

}
/*! sm-css:shell */
/*
 * Global shell (WP02): header, mega menu, main nav + mobile overlay, content
 * wrapper, shop sub-nav, e-pac modal, footer. Source: 01 §2–§7 (values
 * measured on the Oxygen build), Oxygen 29.css / 131.css / universal.css /
 * oxygen.css and the "override" custom sheet, ported with the same
 * specificity class (Oxygen ids → ids here, AD9).
 *
 * Everything sits inside @media all {} (never purged): menus, WooCommerce
 * and TranslatePress print most of the classes styled here.
 *
 * Nothing in this file removes the D6 :focus-visible ring (components.css);
 * the only outline rules here are none.
 */
@media all {
  /* ================================================================ *
   * Header bar (01 §3.1–§3.2)                                         *
   * ================================================================ */
  #site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483640;
    background-color: #fff;
    background-image: url('./assets/groovepaper-BMwx5OGT.png');
    background-repeat: repeat;
    box-shadow: 0 0 20px #af210ab0;
  }

  /* Logged in (01 §7.10, Oxygen oxygen.css:453-467): reproduced as is. */
  body.admin-bar #site-header {
    top: 32px;
  }
  @media screen and (max-width: 782px) {
    body.admin-bar #site-header {
      top: 46px;
    }
  }
  @media screen and (max-width: 600px) {
    body.admin-bar #site-header {
      top: 0;
    }
  }

  #site-header .site-header__row {
    display: block;
    width: 100%;
    height: 96px;
    border-color: #c03621;
    border-style: none none solid;
    border-bottom-width: 18px;
  }

  #site-header .site-header__container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  #site-header .site-header__left,
  #site-header .site-header__center,
  #site-header .site-header__right {
    display: flex;
    align-items: center;
  }
  #site-header .site-header__left {
    justify-content: flex-start;
  }
  #site-header .site-header__center {
    flex-grow: 1;
    justify-content: center;
  }
  #site-header .site-header__right {
    justify-content: flex-end;
  }

  /* Logo: Oxygen .ct-link wrapping .ct-image (333×67 box, SVG letterboxed). */
  #site-logo {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
  }
  #site-logo img {
    width: 333px;
    height: 67px;
    max-width: 100%;
    /* On WC views the Global Styler port (`.woocommerce img{transition:all ease
       .2s}`, woocommerce.css) would animate the ≤479 max-width; Chrome's full-page
       screenshot shrinks the viewport to 1×1 for a moment and the capture then
       showed the logo mid-transition. Nothing else changes here. */
    transition: none;
  }
  @media (max-width: 479px) {
    #site-logo,
    #site-logo img {
      max-width: 256px;
    }
  }

  /* ================================================================ *
   * Mega menu (01 §3.3–§3.4, ≥1121 only)                              *
   * ================================================================ */
  #site-mega-menu {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }
  @media (max-width: 1120px) {
    #site-mega-menu {
      display: none;
    }
  }

  /* Oxygen #link-59-29 (.ct-link.oxel_megamenu_parent): 114px tall, centred
     in the 78px row, so it overflows 18px up and down. */
  #site-mega-link {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 114px;
    padding: 8px 16px;
    font-size: 26px;
    color: #2e3138;
    text-align: center;
    text-decoration: none;
    background-color: transparent;
    background-image: linear-gradient(transparent, transparent);
    /* Oxygen: transition-duration .3s on all properties (.2s on the WC views,
       from a WPGB-era sheet); only the colours can change here, and `all`
       would also animate the D6 focus ring in. Motion-only difference,
       accepted (static and hover states match). */
    transition: background-color 0.3s, color 0.3s;
  }
  #site-mega-link .site-mega-menu__label {
    display: block;
    color: #000;
  }
  /* .underlineHoverMenuProducts > a::before: 78% bar 17px above the link
     bottom, centred by the flex static position; only while hovered. */
  #site-mega-menu.underlineHoverMenuProducts > a::before {
    content: '';
    position: absolute;
    width: 78%;
    height: 4px;
    bottom: 17px;
    background-color: #000;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.3s ease-in-out;
  }
  #site-mega-menu.underlineHoverMenuProducts > a:hover::before {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  /* Panel (#div_block-61-29): absolute against the fixed header, z-index -1
     inside the header's stacking context, so the red border paints over its
     top 2px (top 94 → visible from y 96). Opening animates opacity/translate
     over .3s while the height snaps to auto; closing snaps the height to 0. */
  #site-mega {
    position: absolute;
    top: 94px;
    left: 0;
    right: 0;
    z-index: -1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    padding: 0;
    opacity: 1;
    transition: all 0.3s ease-in-out;
  }
  #site-mega.is-hidden {
    opacity: 0;
    transform: translateY(64px);
    pointer-events: none;
    height: 0;
    padding-top: 0;
    overflow: hidden;
  }

  #site-mega .site-mega__box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 1880px;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    box-shadow: 0.4px 1.4px 1.2px rgba(0,0,0,.028), 0.9px 3.5px 3px rgba(0,0,0,.04), 1.6px 6.5px 5.6px rgba(0,0,0,.05), 2.9px 11.6px 10.1px rgba(0,0,0,.06), 5.4px 21.7px 18.8px rgba(0,0,0,.072), 13px 52px 45px rgba(0,0,0,.1);
  }

  #site-mega .site-mega__left,
  #site-mega .site-mega__right,
  #site-mega .site-mega__materials {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }
  #site-mega .site-mega__left {
    width: 20%;
    padding: 12px 12px 12px 16px;
  }
  #site-mega .site-mega__right {
    width: 80%;
    padding: 12px;
  }

  /* Left column: "Alle Produkte ➔", "Nach Material", pa_material terms. */
  #site-mega .site-mega__all {
    display: inline-block;
    font-size: 24px;
    margin-bottom: 16px;
  }
  #site-mega .site-mega__heading {
    font-size: 16px;
    text-transform: none;
    margin-bottom: 8px;
    color: #000;
  }
  #site-mega .materials-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #site-mega .material-item a {
    text-decoration: none;
    color: #333333;
  }

  /* Right column: WooCommerce [product_categories columns="6"] markup.
     Every property the WC sheets, the Global Styler port (css/woocommerce.css)
     or the override sheet set on this markup is pinned here under the id,
     so later archive/home rules on ul.products cannot change the panel. */
  #site-mega-cats {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    overflow: scroll;
    max-height: 86vh;
    padding-bottom: 32px;
  }
  #site-mega-cats > div {
    height: 100%;
  }
  #site-mega-cats .woocommerce ul {
    height: 100%;
  }
  #site-mega-cats .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    clear: both;
    margin: 0;
    padding: 0;
    list-style: none outside;
  }
  #site-mega-cats .woocommerce ul.products::before,
  #site-mega-cats .woocommerce ul.products::after {
    content: ' ';
    display: table;
    width: 100%;
  }
  #site-mega-cats .woocommerce ul.products li.product {
    float: left;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 16.6%;
    margin: 0;
    padding: 8px;
    list-style: none;
    clear: none;
  }
  #site-mega-cats .woocommerce ul.products li.product a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
  }
  #site-mega-cats .woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    max-width: 75%;
    height: auto;
    min-width: 64px;
    min-height: 64px;
    margin: 0 0 4px;
    border: none;
    box-shadow: none;
    overflow: hidden;
  }
  #site-mega-cats .woocommerce ul.products li.product .woocommerce-loop-category__title {
    position: relative;
    margin: 0;
    padding: 8px 0 0 !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: #2e3138;
    text-align: center;
    text-decoration: none;
  }
  #site-mega-cats .count {
    display: none !important;
  }

  /* ================================================================ *
   * Main navigation (menu "main") + mobile overlay (01 §3.3, §3.5)    *
   * ================================================================ */
  /* Burger (Oxygen .oxy-pro-menu-mobile-open-icon): only ≤1120. */
  /* A <button> now (a div in Oxygen): font/line-height/text-align/min-height
     reset to the inherited values the div had (no text inside, so no pixel
     effect; keeps the computed-style snapshot equal). */
  #site-nav .site-nav__open {
    display: none;
    align-items: center;
    min-height: auto;
    margin: 0;
    padding: 15px;
    border: 0;
    background: transparent;
    color: #2e3138;
    font-family: inherit;
    line-height: inherit;
    text-align: start;
    cursor: pointer;
    /* Oxygen had transition-duration .4s (all) here; left out so the D6
       focus ring does not animate in. */
  }
  #site-nav .site-nav__open svg,
  #site-nav .site-nav__close svg {
    display: block;
    width: 32px;
    height: 32px;
    fill: currentColor;
  }
  #site-nav .site-nav__open svg {
    transition-duration: 0.4s;
  }

  /* Close (Oxygen .oxy-pro-menu-mobile-close-icon + override sheet). */
  #site-nav .site-nav__close {
    display: none;
    position: fixed;
    top: 26px;
    right: 20px;
    left: auto;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2e3138;
    cursor: pointer;
  }

  #site-nav .menu-main-container {
    margin: auto;
  }

  #site-nav .site-nav__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #site-nav .site-nav__list > .menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 16px;
    margin-right: 16px;
    list-style-type: none;
    white-space: nowrap;
    font-family: 'Archivo';
    font-size: 26px;
    font-weight: 400;
    color: #000;
    transition-property: background-color, color, border-color;
  }

  #site-nav .site-nav__list .menu-item a {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    font-family: 'Archivo';
    font-size: 26px;
    font-weight: 400;
    color: #000;
    text-align: left;
    justify-content: flex-start;
    text-decoration: none;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out, font-size 0.3s ease-in-out;
  }
  #site-nav .site-nav__list .current-menu-item a,
  #site-nav .site-nav__list .menu-item a:focus-within,
  #site-nav .site-nav__list .menu-item a:hover {
    border-color: currentColor;
  }

  /* .underlineHoverMenu a::before (override sheet): 4px bar on the red bar
     (y 73.8–77.8) on hover, always on the current item. */
  #site-nav.underlineHoverMenu a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: -18px;
    left: 0;
    background-color: #000;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.3s ease-in-out;
  }
  #site-nav.underlineHoverMenu a:hover::before {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  @media (max-width: 1120px) {
    #site-nav .site-nav__open {
      display: inline-flex;
    }
    #site-nav.is-open .site-nav__open {
      display: none;
    }

    #site-nav .site-nav__panel {
      visibility: hidden;
      position: fixed;
    }

    /* Overlay (Oxygen .oxy-pro-menu-open .oxy-pro-menu-container +
       .oxy-pro-menu-open-container{top:96px!important}). Fixed to the
       viewport, so with the admin bar it covers the header's bottom
       32/46px, as today (01 §7.10). */
    #site-nav.is-open .site-nav__panel {
      visibility: visible;
      position: fixed;
      top: 96px;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2147483642;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-height: 100vh;
      overflow: auto;
      padding: 32px;
      background-color: #fff;
      background-image: url('./assets/groovepaper-BMwx5OGT.png');
      background-repeat: repeat;
      background-attachment: fixed;
      background-size: auto auto;
      background-clip: border-box;
    }
    #site-nav.is-open .menu-main-container {
      min-width: 100%;
    }
    #site-nav.is-open .site-nav__list {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    #site-nav.is-open .site-nav__list > .menu-item {
      flex-direction: column;
      justify-content: center;
      width: 100%;
      min-height: 32px;
      text-align: center;
      font-size: 72px;
    }
    #site-nav.is-open .site-nav__list .menu-item a {
      font-size: 72px;
      text-align: left;
      justify-content: flex-start;
      word-break: break-word;
    }
    #site-nav.is-open .site-nav__close {
      display: inline-flex;
    }

    /* ≤1120 bar: 8px, grows from the left (override sheet). */
    #site-nav.underlineHoverMenu a::before {
      height: 8px;
      bottom: 0;
      transform-origin: left;
      transform: scaleX(0);
    }
    #site-nav.underlineHoverMenu a:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    }
  }

  /* Current page: always on. With the ≤1120 scaleX(0) base this resolves to
     a full 8px bar (override sheet `.current-menu-item a::before`). */
  #site-nav.underlineHoverMenu .current-menu-item a::before {
    transform: scaleY(1) !important;
  }

  @media (max-width: 767px) {
    #site-nav .site-nav__open {
      display: flex;
    }
    #site-nav.is-open .site-nav__open {
      display: none;
    }
  }

  @media (max-width: 991px) {
    #site-nav .site-nav__open svg {
      margin-right: -15px;
    }
    #site-nav .site-nav__close {
      top: 28px;
    }
  }

  @media (max-width: 479px) {
    #site-nav.is-open .site-nav__list > .menu-item,
    #site-nav.is-open .site-nav__list .menu-item a {
      font-size: 48px;
    }
  }

  /* Scroll lock while the overlay is open (Oxygen oxy-nav-menu-prevent-overflow). */
  html.site-menu-open,
  body.site-menu-open {
    overflow: hidden;
    height: 100%;
  }

  /* ================================================================ *
   * Content wrapper (01 §4)                                           *
   * ================================================================ */
  #main {
    display: block;
    scroll-margin-top: 96px;
  }
  #site-content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 90vh;
    background-color: #fff;
  }
  #site-content > .site-column {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1880px;
    height: 100%;
  }

  /* ================================================================ *
   * Shop sub-navigation (01 §5; template 131)                         *
   * ================================================================ */
  #shop-subnav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
  }
  #shop-subnav > .shop-subnav__crumbs,
  #shop-subnav > .shop-subnav__menu {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }
  #shop-subnav > .shop-subnav__crumbs {
    width: 50%;
    padding: 20px;
  }
  #shop-subnav > .shop-subnav__menu {
    width: 50%;
    padding: 0;
    text-align: left;
    align-items: flex-end;
  }
  @media (max-width: 767px) {
    #shop-subnav > .shop-subnav__menu {
      display: flex;
      text-align: right;
    }
  }
  @media (max-width: 479px) {
    #shop-subnav {
      flex-direction: column-reverse;
    }
    #shop-subnav > .shop-subnav__crumbs,
    #shop-subnav > .shop-subnav__menu {
      width: 100% !important;
    }
    #shop-subnav > .shop-subnav__menu {
      text-align: center;
      align-items: flex-start;
    }
  }

  /* Breadcrumb: size comes from WooCommerce only (.92em on WC views via the
     body class, 16px on pages). Colour + margin as 131.css. */
  #shop-subnav .woocommerce-breadcrumb {
    margin-bottom: 0;
    color: #2e3138;
  }
  #shop-subnav .woocommerce-breadcrumb a {
    color: #2e3138;
    font-weight: 400;
    font-family: inherit;
    text-decoration: none;
  }
  #shop-subnav .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
  }

  /* Menu "shop" (Oxygen nav menu #_nav_menu-9-120). */
  #shop-subnav .shop-subnav__list {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
  }
  #shop-subnav .shop-subnav__list li.menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    list-style-type: none;
  }
  #shop-subnav .shop-subnav__list li.menu-item a {
    display: flex;
    align-items: center;
    padding: 20px;
    color: #2e3138;
    text-decoration: none;
    border-style: solid;
    border-width: 0;
    border-color: transparent;
    transition-property: background-color, color, border-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
  }
  #shop-subnav .shop-subnav__list li.current-menu-item > a,
  #shop-subnav .shop-subnav__list li.menu-item:focus-within > a,
  #shop-subnav .shop-subnav__list li.menu-item:hover > a {
    border-color: currentColor;
  }
  #shop-subnav .shop-subnav__list li.menu-item:focus-within a,
  #shop-subnav .shop-subnav__list li.menu-item:hover a {
    background-color: #eeeeee;
    padding-top: 17px;
    border-top-width: 3px;
  }

  /* Page title (pages only, Oxygen #headline-24-131). */
  .shop-subnav__title {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ================================================================ *
   * e-pac.ch modal (01 §7.5, code block 47; generic names scoped)     *
   * ================================================================ */
  /* #888, #fefefe, #aaa and #5e8f40 are one-off values copied verbatim
     from code block 47. Nothing else on the site uses them, so they have
     no token. Every other colour in this file is a theme() token. */
  #epac-modal {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0 0 0 / 40%);
  }
  #epac-modal .epac-modal__dialog {
    max-width: 350px;
    margin: 30% auto;
    padding: 10px;
    border: 1px solid #888;
    background-color: #fefefe;
  }
  #epac-modal .epac-modal__content {
    padding: 8px;
    border: 1px solid #cccccc;
    text-align: center;
  }
  #epac-modal .epac-modal__content p {
    padding-left: 15px;
    padding-right: 15px;
  }
  #epac-modal .epac-modal__close {
    float: right;
    width: 30px;
    height: 30px;
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    background-color: #cccccc;
    border: 1px solid #aaa;
    border-radius: 25%;
    cursor: pointer;
  }
  #epac-modal .epac-modal__close:hover,
  #epac-modal .epac-modal__close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  /* Only this button (Oxygen's rule was a global `button{…}`); the font
     stays the UA Arial, as today. */
  #epac-modal #closeBtn {
    background-color: #5e8f40;
    color: #fff;
    padding: 10px 30px;
    border: 0 none;
    cursor: pointer;
  }

  /* ================================================================ *
   * Footer (01 §6)                                                    *
   * ================================================================ */
  #site-footer-spacer {
    width: 100%;
    margin-bottom: 248px;
    padding-bottom: 0;
  }

  #site-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 248px;
    padding: 32px;
    gap: 8px;
    font-weight: 700;
    background-repeat: repeat;
    box-shadow: inset 0 12px 14px -10px rgba(0,0,0,.2);
  }

  #site-footer > .site-footer__wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    height: 100%;
    min-height: inherit;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  /* justify-content: Oxygen has center. The three columns fill exactly 100%
     (50/35/15), so center and flex-start place them identically once the
     footer is parsed. While the HTML is still streaming, Chrome can paint a
     frame with only the first two columns (the TranslatePress inline script
     in column 2 is a yield point); center then put them at x 135/823 and
     the shop column's arrival moved them to 32/720 (CLS 0.0139 at 1440).
     flex-start keeps them where they end up. */
  #site-footer .site-footer__cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 1860px;
    margin-top: 0;
  }

  #site-footer .site-footer__col,
  #site-footer .site-footer__links,
  #site-footer .site-footer__shop-links,
  #site-footer .site-footer__payment {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }
  #site-footer .site-footer__col {
    padding: 0;
  }

  /* Column 1: address (Oxygen rich text #_rich_text-34-29). */
  #site-footer .site-footer__col--address {
    width: 50%;
  }
  #site-footer .site-footer__address {
    color: #fff;
    font-size: 15px;
  }
  #site-footer .site-footer__address p:first-child {
    margin-block-start: 0;
  }
  #site-footer .site-footer__address p:last-child {
    margin-block-end: 0;
  }

  /* Column 2: switcher, legal links, LinkedIn. */
  #site-footer .site-footer__col--legal {
    width: 35%;
    justify-content: space-between;
    gap: 16px;
  }
  #site-footer .site-footer__switcher {
    color: #2e3138;
  }
  #site-footer .site-footer__links {
    height: 100%;
    justify-content: flex-start;
    margin-top: 0;
    gap: 4px;
  }
  #site-footer .site-footer__links > a,
  #site-footer .site-footer__shop-links > a {
    display: inline-block;
  }

  #site-footer .site-footer__social {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-right: -10px;
    margin-bottom: -10px;
  }
  #site-footer .site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 36px;
    line-height: 1;
    text-decoration: none;
  }
  #site-footer .site-footer__social a svg {
    width: 1em;
    height: 1em;
    color: #fff;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
  }

  /* Column 3: shop links + payment logos. */
  #site-footer .site-footer__col--shop {
    width: 15%;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    text-align: right;
  }
  #site-footer .site-footer__shop-links {
    height: 100%;
    justify-content: flex-start;
    margin-top: 0;
    text-align: left;
    align-items: flex-end;
  }
  #site-footer .site-footer__payment img {
    max-width: 100%;
    height: auto;
    transition: none; /* same as #site-logo img (≤991 max-width 150px) */
  }

  @media (max-width: 991px) {
    #site-footer-spacer {
      margin-bottom: 556px;
    }
    #site-footer {
      height: 566px;
    }
    #site-footer .site-footer__cols {
      flex-direction: column;
      gap: 16px;
    }
    #site-footer .site-footer__cols > div {
      width: 100% !important;
    }
    #site-footer .site-footer__col--shop {
      flex-direction: row;
      align-items: flex-end;
      text-align: left;
    }
    #site-footer .site-footer__shop-links {
      text-align: right;
      align-items: flex-start;
    }
    #site-footer .site-footer__payment img {
      max-width: 150px;
    }
  }

  /* TranslatePress switcher (override sheet). */
  .trp_language_switcher_shortcode .trp-language-switcher {
    margin: 0;
  }
  .trp-language-switcher > div > a {
    color: #000;
  }
  /* TranslatePress sizes both boxes inline from the list's offsetWidth + 16
     while the page is still parsing. Under Oxygen the Google-hosted Archivo
     was not loaded yet at that moment, so the fallback font gave 127px (the
     baseline); the self-hosted, preloaded Archivo is ready and gives 133px.
     The labels are the same English names in every language, so the box is
     pinned to the measured 127px. */
  #site-footer .trp_language_switcher_shortcode .trp-ls-shortcode-current-language,
  #site-footer .trp_language_switcher_shortcode .trp-ls-shortcode-language {
    width: 127px !important;
  }

  /* Footer link hover (override sheet, global `footer a` on purpose: the
     TranslatePress rule above must keep beating the white colour, and the
     TP links still get the white bar on hover, as today). */
  footer a {
    color: #fff;
    position: relative;
  }
  footer a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  footer a:hover::before {
    visibility: visible;
    width: 100%;
  }
  #site-footer .site-footer__social a::before {
    display: none;
  }

  /* ================================================================ *
   * Reduced motion (plan §2.4)                                        *
   * ================================================================ */
  @media (prefers-reduced-motion: reduce) {
    #site-mega,
    #site-mega-menu.underlineHoverMenuProducts > a::before,
    #site-nav.underlineHoverMenu a::before,
    #site-nav .site-nav__list .menu-item a,
    #shop-subnav .shop-subnav__list li.menu-item a,
    footer a::before {
      transition-duration: 0s;
    }
  }
}
/*! sm-css:listing */
/*
 * Shared listing components (WP04): product card (WPGB card 27, 03 §3.8),
 * load-more (WPGB facet 11, 03 §3.9 / 05 §3.10), search facet (WPGB facet 2,
 * 05 §3.4 / 03 §3.5), search page form + empty state (05 §3.10).
 * Keep the "sm-css:listing" marker comment above as the first line.
 *
 * Values are WPGB's (wp-grid-builder/public/css/{style,facets}.css,
 * uploads/wpgb/grids/G11C27.css) and the measured computed styles in
 * reference/oxygen-local-styles. Everything is written out explicitly so the
 * look does not depend on Tailwind preflight (off, AD3).
 *
 * All selectors are this package's own classes, except the legacy search
 * form (WordPress markup: #searchform, .screen-reader-text) inside
 * @media all {} (AD9).
 */
/* ------------------------------------------------------------------ *
 * Product card (template-parts/product-card.php)                       *
 * The container decides the height (grid/flex stretch); the inner box  *
 * has WPGB's 480px min-height and the media takes 70 % of it.          *
 * ------------------------------------------------------------------ */
.sm-card {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  /* WPGB's masonry gave every card an inline width of the column width rounded
   * UP to 0.1px (265.333 → 265.4px at 1200), while the column pitch stayed exact
   * (left: n × (column + gap)). Same rule as the PDP carousel's
   * Math.ceil(w * 10) / 10 (product-carousel.js). The 0.07px changes the media
   * box and so the contained image raster (C6). No-op where the track width
   * already is a multiple of 0.1px; ignored by browsers without round(). */
  width: round(up, 100%, 0.1px);
  font-size: 16px;
  transition: none;
}
.sm-card:hover {
  z-index: 1;
}
.sm-card__inner,
.sm-card__media,
.sm-card__thumb,
.sm-card__content,
.sm-card__body,
.sm-card__footer,
.sm-card__title,
.sm-card__button,
.sm-card__sale {
  transition-property: opacity, color, background, box-shadow, filter, transform;
  transition-duration: 80ms;
  transition-timing-function: linear;
}
.sm-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.075) 0 0 0 0;
  mix-blend-mode: darken;
  cursor: pointer;
  transition-duration: 222ms;
}
/* Card hover: the border change is instant (border is not in the transition list), as on live. */
.sm-card:hover .sm-card__inner {
  border: 2px solid #444;
  box-shadow: rgba(0, 0, 0, 0.66) 0 0 10px -5px;
}
.sm-card__media {
  position: relative;
  display: flex;
  height: 70%;
  background: #fff;
}
.sm-card__thumb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  /* No background in the list: the lazy image is painted as a background, and
   * transitioning position/size made it slide in from the top-left corner. */
  transition-property: opacity, filter, transform;
  transition-duration: 400ms;
}
.sm-card__img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
/* Not loaded yet (src/js/load-more.js lazy loader): nothing to paint. */
.sm-card__img[data-sm-lazy] {
  visibility: hidden;
}
/*
 * Paint the image as WPGB did: a background on the thumb box
 * (`.wpgb-card-media-thumbnail div`: 50% 50% / contain, no-repeat). Chrome
 * snaps a contained background tile to device pixels differently from an
 * <img> with object-fit: contain, so only the background is pixel-identical
 * in every box size (hovered card: 2px border, fractional media height).
 * The URL comes from the inline `--sm-card-img` (product-card.php); it is
 * applied once the <img> has its src (lazy loader removed data-sm-lazy, or a
 * non-lazy card), so lazy loading is unchanged. The <img> stays in the DOM
 * (decorative, alt="") as the loader / no-JS fallback and is not painted.
 */
@supports selector(:has(*)) {
  .sm-card__thumb:has(.sm-card__img:not([data-sm-lazy])) {
    background-image: var(--sm-card-img);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .sm-card__thumb:has(.sm-card__img:not([data-sm-lazy])) .sm-card__img {
    visibility: hidden;
  }
}
.sm-card__media-top {
  position: relative;
  width: 100%;
}
.sm-card__sale {
  position: relative;
  display: inline-block;
  margin: 2em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background: #c03621;
  color: #fff;
  font: 600 0.75em/1.25em 'Poppins';
  white-space: pre-line;
}
.sm-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}
.sm-card__body {
  position: relative;
  flex: auto;
  padding: 1em 1em 0;
  background: #fff;
}
.sm-card__title {
  position: relative;
  display: block;
  margin: 0 0 0.1em;
  padding: 0;
  color: #444;
  font: 600 1em/1em 'Poppins';
  white-space: pre-line;
}
.sm-card__title a {
  color: inherit;
  text-decoration: none;
}
.sm-card__footer {
  position: relative;
  padding: 0 1em 1em;
  background: #fff;
}
.sm-card__button {
  position: relative;
  display: block;
  margin: 1em 0 0;
  padding: 0.5em;
  border: 0.125em solid #2e3138;
  border-radius: 0.3em;
  color: #444;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
}
.sm-card:hover .sm-card__button {
  background: #2e3138;
  color: #fff;
}
/* Whole-card link (WPGB card action): above the content, keyboard users use the title link. */
.sm-card__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.sm-card__title a:focus-visible {
  outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
 * Empty state (search: "Sorry, no products found.", 05 §3.10)          *
 * ------------------------------------------------------------------ */
.sm-no-results > div {
  padding: 3em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
/* ------------------------------------------------------------------ *
 * Load more (template-parts/load-more.php). WPGB area-bottom-1 +       *
 * facet 11: centred, 24px below the grid, Arial 500 18/20 on #568259,  *
 * 15px 36px, radius 4, no hover change. It is an <a> (no-JS link), so  *
 * the UA button font does not apply: Arial is set explicitly.          *
 * ------------------------------------------------------------------ */
.sm-load-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 24px -16px 0;
}
.sm-load-more__facet {
  position: relative;
  padding: 0 16px;
}
.sm-load-more .load-more {
  display: inline-block;
  margin: 0;
  padding: 15px 36px;
  border: 0;
  border-radius: 4px;
  background-color: #568259;
  color: #fff;
  font-family: Arial;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.25s;
}
.sm-load-more .load-more:focus-visible {
  outline-color: #568259;
}
/* ------------------------------------------------------------------ *
 * Search facet (template-parts/facets/search.php)                      *
 * Default = blog look (05 §3.4): 2px #c8c8c8, UA font 16/26, 40px.     *
 * --woo = shop look (03 §3.5, Oxygen-WooCommerce global styler):       *
 * 1px #d3ced2, Archivo 14/26, 44px, white, green glow on focus.        *
 * Focus is shown by the border/glow (WPGB had outline:none).           *
 * ------------------------------------------------------------------ */
.facet-search {
  position: relative;
  transition: opacity 0.2s ease-in-out;
}
.facet-search *,
.facet-search ::before,
.facet-search ::after {
  box-sizing: border-box;
}
.facet-search__fieldset {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
}
.facet-search__field {
  position: relative;
}
.facet-search__label {
  position: relative;
  display: flex;
  margin: 0;
}
/* Input selectors carry `.facet-search … [type="search"]` (0,3,0) so they beat
 * the WC global-styler port in woocommerce.css (`.woocommerce input[type="search"]`
 * 0,2,1, focus 0,3,1, `.woocommerce input` transition 0,1,1) on woocommerce bodies:
 * the look follows the context argument, never the body class (AD9). */
.facet-search .facet-search__input[type="search"] {
  position: relative;
  width: 100%;
  height: unset;
  min-height: 26px;
  max-height: unset;
  margin: 0;
  padding: 5px 24px 5px 8px;
  text-indent: 24px;
  border: 2px solid #c8c8c8;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  outline: none;
  color: #000;
  font-family: revert;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  vertical-align: middle;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.1s ease;
}
.facet-search .facet-search__input[type="search"]::-moz-placeholder {
  color: #757575;
  opacity: 1;
}
.facet-search .facet-search__input[type="search"]::placeholder {
  color: #757575;
  opacity: 1;
}
.facet-search .facet-search__input[type="search"]::-webkit-search-cancel-button,
.facet-search .facet-search__input[type="search"]::-webkit-search-decoration,
.facet-search .facet-search__input[type="search"]::-webkit-search-results-button,
.facet-search .facet-search__input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  -webkit-appearance: none;
}
.facet-search .facet-search__input[type="search"]:hover {
  border-color: #969696;
}
.facet-search .facet-search__input[type="search"]:focus {
  border-color: #282828;
  box-shadow: none;
  outline: none;
}
.facet-search__icon {
  position: absolute;
  top: calc(50% - 8px);
  left: 0;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  margin: 0 8px 0 10px;
  overflow: visible;
  color: #c8c8c8;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  pointer-events: none;
}
.facet-search__clear {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: unset;
  height: auto;
  max-height: none;
  margin: 0 2px;
  padding: 0 6px;
  border: none;
  background: none;
  box-shadow: none;
  outline: none;
  color: #c8c8c8;
  cursor: pointer;
  touch-action: manipulation;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: color 0.15s ease;
}
.facet-search__clear[hidden] {
  display: none;
}
.facet-search__clear:hover,
.facet-search__clear:focus {
  color: #969696;
}
.facet-search__clear:focus-visible {
  outline: 2px solid #969696;
  outline-offset: -2px;
}
.facet-search__clear svg {
  align-self: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  pointer-events: none;
}
/* Shop look */
.facet-search--woo .facet-search__fieldset {
  margin-bottom: 40px;
}
.facet-search--woo .facet-search__input[type="search"] {
  padding: 8px 24px 8px 12px;
  border: 1px solid #d3ced2;
  background: #fff;
  font-family: 'Archivo';
  font-size: 14px;
  line-height: 26px;
}
.facet-search--woo .facet-search__input[type="search"]::-moz-placeholder {
  color: #d3ced2;
}
.facet-search--woo .facet-search__input[type="search"]::placeholder {
  color: #d3ced2;
}
.facet-search--woo .facet-search__input[type="search"]:hover {
  border-color: #969696;
}
.facet-search--woo .facet-search__input[type="search"]:focus {
  border-color: #537e56;
  box-shadow: 0 0 5px rgb(83, 126, 86);
}
@media (prefers-reduced-motion: reduce) {
  .sm-card__inner,
  .sm-card__media,
  .sm-card__thumb,
  .sm-card__content,
  .sm-card__body,
  .sm-card__footer,
  .sm-card__title,
  .sm-card__button,
  .sm-load-more .load-more,
  .facet-search,
  .facet-search .facet-search__input[type="search"],
  .facet-search__clear {
    transition-duration: 0s;
  }
}
/* ------------------------------------------------------------------ *
 * Legacy search form (searchform.php; search page + 404).              *
 * Oxygen .oxy-search-form input + template 3871: padding .5em, 1px     *
 * #000, radius 4; submit calc(.5em + 1px) 1em on #537e56. UA font      *
 * (Arial) and UA input width are intended.                             *
 * ------------------------------------------------------------------ */
@media all {
  #searchform input {
    padding: 0.5em;
    border: 1px solid #000;
    border-radius: 4px;
  }
  #searchform input[type='submit'] {
    padding: calc(0.5em + 1px) 1em;
    border: none;
    background-color: #537e56;
    color: #fff;
    cursor: pointer;
  }
  /* D6: a filled button's focus ring takes the fill colour (the global currentColor ring is white here). */
  #searchform input[type='submit']:focus-visible {
    outline-color: #537e56;
  }
  /* Oxygen hid the label with display:none; visually hidden keeps the input labelled (pixel-identical). */
  #searchform .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
/*! sm-css:shop */
/*
 * Shop, category, tag and attribute archives + facets (WP05, spec 03 §3).
 * Keep the "sm-css:shop" marker comment above as the first line: dist/main.css
 * is not minified, and the build-order check greps these markers.
 *
 * Values are the Oxygen templates 120/129 (+ universal.css accordion) and WP
 * Grid Builder's facets.css / style.css / uploads/wpgb/grids/G3C27.css, ported
 * to this package's own classes (template-parts/shop/*). Everything is written
 * out because Tailwind preflight is off (AD3): UA list/fieldset/button styles
 * are reset here. Only WooCommerce's `.term-description` (term content) sits
 * in @media all {} (AD9). Breakpoints: ≥768 sidebar, ≤767 accordion
 * (Oxygen phone-landscape), toolbar 50 % ≤991, 100 % ≤767 (WPGB).
 *
 * Shared pieces come from WP04's listing.css: .sm-card, .sm-load-more,
 * .facet-search(--woo), .sm-no-results.
 */
/* ------------------------------------------------------------------ *
 * Archive frame: h1, term description, body (03 §3.3–§3.4)             *
 * ------------------------------------------------------------------ */
/*
 * Single-use WPGB colours (plan §2.2: scoped values, not Tailwind tokens),
 * named once here: the "+ Alle anzeigen" text and the colour-swatch tooltip
 * (background + arrow).
 */
.shop-archive {
  --shop-toggle-ink: #2a2a2a;
  --shop-tooltip-bg: #353c4e;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.shop-archive__title {
  padding: 0 20px;
}
/* Oxygen #div_block-61-129: flex column (no margin collapsing with the last <p>). */
.shop-archive__desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 20px;
}
.shop-archive__desc-inner {
  max-width: 800px;
}
@media all {
  .shop-archive__desc .term-description {
    max-width: 800px;
  }
}
.shop-archive__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 20px;
}
/* ------------------------------------------------------------------ *
 * Mobile filter accordion (≤767, 03 §3.7; Oxygen .oxel_accordion)      *
 * The same <form> is the sidebar from 768 up (display: contents).      *
 * ------------------------------------------------------------------ */
.shop-acc {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 8px 0 16px;
}
.shop-acc__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px;
  border: 0;
  border-radius: 4px;
  background-color: #537e56;
  color: #2e3138;
  font-family: 'Archivo';
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
/* Beats WC's `.woocommerce button{transition:all ease .2s}`; Oxygen row had none. */
.shop-acc .shop-acc__row {
  transition: all 0s;
}
/* Oxygen #div_block-141-120 (shop) set white border colours (style none: invisible). */
.shop-archive--shop .shop-acc__row {
  border-color: #fff;
}
.shop-acc__label {
  color: #fff;
  font-weight: 600;
}
.shop-acc__icon {
  display: inline-flex;
  margin-right: 8px;
  color: #fff;
  transition-duration: 0.3s;
}
.shop-acc__icon svg {
  width: 18px;
  height: 18px;
}
.shop-acc.is-open .shop-acc__icon {
  transform: rotate(180deg);
}
.shop-acc__row:focus-visible {
  outline-color: #537e56;
}
/* Panel: opens with a 3s max-height reveal, closes at once (Oxygen accordion). */
.shop-filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-height: 3000px;
  margin: 0;
  padding: 8px 0;
  overflow: hidden;
  transition-property: max-height;
  transition-duration: 3s;
}
.shop-acc:not(.is-open) .shop-filters {
  z-index: -1;
  max-height: 0;
  padding: 0 8px;
  transition-duration: 0s;
}
.shop-filters__body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 8px;
}
.shop-filters__body.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.shop-main {
  width: 100%;
  margin-top: 16px;
}
.shop-archive--tax .shop-main {
  margin-top: 32px;
}
@media (max-width: 767px) {
  .shop-filters__body > .shop-facet {
    width: 100%;
    margin-bottom: 16px;
  }
  .shop-filters__body > .shop-facet:first-child {
    margin-top: 16px;
  }
  .shop-filters__body > .shop-facet--reset {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }
  .shop-filters__body > .shop-facet .shop-facet__fieldset,
  #shop-filters .shop-filters__body > .shop-facet .shop-button {
    margin-bottom: 0;
  }
  /* D10: no "Form" facet in the mobile panel (parity). */
  .shop-filters__body > .shop-facet--desktop-only {
    display: none;
  }
}
/* ≥768: sidebar (300px) + main, gap 32 (WPGB .wpgb-sidebar / .wpgb-main). */
@media (min-width: 768px) {
  .shop-archive__body {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    -moz-column-gap: 32px;
         column-gap: 32px;
    align-items: start;
    margin-top: 16px;
  }
  .shop-archive--tax .shop-archive__body {
    margin-top: 32px;
  }
  .shop-acc {
    display: contents;
  }
  .shop-acc__row {
    display: none;
  }
  .shop-acc .shop-filters,
  .shop-acc:not(.is-open) .shop-filters {
    display: block;
    grid-column: 1;
    grid-row: 1;
    z-index: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    transition: none;
  }
  .shop-filters__body {
    display: block;
    padding: 0;
  }
  .shop-main,
  .shop-archive--tax .shop-main {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  .shop-check__label {
    display: flex;
    justify-content: space-between;
  }
}
/* ------------------------------------------------------------------ *
 * Facets (WPGB facets.css + G3C27.css)                                 *
 * ------------------------------------------------------------------ */
.shop-facet {
  position: relative;
}
.shop-facet svg {
  pointer-events: none;
}
.shop-facet__title {
  margin: 0 0 24px;
  padding: 0;
  font-size: 20px;
  line-height: 24px;
}
/* opacity .99 = WPGB G3C27 `.wpgb-facet fieldset` (also the stacking context of the swatch checkerboard). */
.shop-facet__fieldset,
.shop-sort__fieldset,
.shop-toolbar .facet-search__fieldset {
  min-width: 0;
  margin: 0 0 40px;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
  opacity: 0.99;
}
/* WPGB .wpgb-sr-only (opacity .01 keeps the texts "visible" for the QA text compare, as before). */
.shop-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  opacity: 0.01;
}
/* Checkbox lists */
.shop-checks {
  display: flex;
  flex-direction: column;
}
.shop-checks__list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop-checks__list li {
  display: block;
  margin: 12px 0 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
.shop-checks > .shop-checks__list:first-child > li:first-child {
  margin: 0;
}
.shop-checks__list .shop-checks__list {
  margin: 0 0 0 20px;
}
.shop-checks__list li[hidden] {
  display: none;
}
.shop-checks__list.is-expanded li[hidden] {
  display: inherit;
}
/* `#shop-filters` beats WC's `.woocommerce form label` (12px #666, margin-top 8px) on woocommerce bodies. */
#shop-filters .shop-check {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  outline: none;
  cursor: pointer;
}
.shop-check__input,
.shop-color__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.shop-check__control {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid #c8c8c8;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.shop-check__control::before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 2px;
  border-style: solid;
  border-color: #c8c8c8;
  border-width: 2px 0 0;
  transform: scale(0);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.shop-check__control::after {
  content: '';
  position: relative;
  top: -1px;
  width: 6px;
  height: 10px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.shop-check:hover:not(.is-disabled) .shop-check__control {
  border-color: #969696;
}
.shop-check.is-mixed .shop-check__control::before {
  transform: scale(1);
}
.shop-check .shop-check__input:checked + .shop-check__control {
  border-color: #568259;
  background: #568259;
}
.shop-check .shop-check__input:checked + .shop-check__control::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(1);
}
.shop-check .shop-check__input:focus-visible + .shop-check__control {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.shop-check.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.shop-check__label {
  flex: auto;
  margin: 0;
  padding: 0 0 0 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
/* "+ Alle anzeigen" / "- Minimieren" (WPGB .wpgb-toggle-hidden; UA button font) */
.shop-checks__toggle {
  position: relative;
  display: block;
  align-self: baseline;
  height: auto;
  max-height: unset;
  margin: 16px 0 0;
  padding: 8px;
  border: none;
  border-radius: 4px;
  background: #e8e8e8;
  box-shadow: none;
  color: var(--shop-toggle-ink);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color 0.25s ease;
}
.shop-checks__toggle:hover {
  background: #f0f0f0;
}
.shop-checks__toggle [hidden] {
  display: none;
}
/* Range (two native range inputs over WPGB's slider) */
.shop-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
}
.shop-range__slider {
  position: relative;
  width: 100%;
  height: 6px;
  margin: 6px 0 16px;
  border-radius: 4px;
  background-color: #e8e8e8;
  cursor: pointer;
  touch-action: none;
}
.shop-range__progress {
  position: absolute;
  top: 0;
  left: calc(8px + (100% - 16px) * var(--from, 0));
  right: calc(8px + (100% - 16px) * (1 - var(--to, 1)));
  height: 100%;
  background-color: #568259;
}
.shop-range__input {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  outline: none;
  transform: translateY(-50%);
  pointer-events: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.shop-range__input.is-front {
  z-index: 3;
}
.shop-range__input::-webkit-slider-runnable-track {
  height: 16px;
  border: 0;
  background: transparent;
}
.shop-range__input::-moz-range-track {
  height: 16px;
  border: 0;
  background: transparent;
}
.shop-range__input::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid #568259;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}
.shop-range__input::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid #568259;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
  pointer-events: auto;
}
.shop-range__input:focus-visible::-webkit-slider-thumb {
  outline: 2px solid #568259;
  outline-offset: 2px;
}
.shop-range__input:focus-visible::-moz-range-thumb {
  outline: 2px solid #568259;
  outline-offset: 2px;
}
.shop-range__values {
  position: relative;
  flex-grow: 1;
  align-items: center;
  padding: 4px 0;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}
/* Colour swatches (WPGB .wpgb-color-facet) */
.shop-colors {
  display: flex;
  flex-direction: column;
}
.shop-colors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 -8px;
  padding: 0;
  list-style: none;
}
.shop-colors__list li {
  margin: 0 12px 12px 0;
  padding: 0;
  list-style: none;
}
#shop-filters .shop-color {
  position: relative;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  outline: none;
  cursor: pointer;
}
.shop-color__control {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-color: #568259;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.shop-color__control::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background-image: linear-gradient(45deg, silver 25%, transparent 0, transparent 75%, silver 0, silver), linear-gradient(45deg, silver 25%, #fff 0, #fff 75%, silver 0, silver);
  background-position: -1px -1px, 5px 5px;
  background-size: 12px 12px;
}
.shop-color__control::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: all 0.25s ease;
}
.shop-color:not(.is-disabled) .shop-color__input:not(:checked) + .shop-color__control:hover,
.shop-color:not(.is-disabled):hover .shop-color__input:not(:checked) + .shop-color__control {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.42);
}
.shop-color .shop-color__input:checked + .shop-color__control::after {
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-color: inherit;
}
.shop-color .shop-color__input:focus-visible + .shop-color__control {
  outline: 2px solid #568259;
  outline-offset: 4px;
}
.shop-color__label {
  position: absolute;
  z-index: 1;
  top: -32px;
  left: 50%;
  width: auto;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--shop-tooltip-bg);
  outline: unset;
  color: #fff;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  opacity: 0.001;
  pointer-events: none;
  transform: translate3d(-50%, -6px, 0);
}
.shop-color__label::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--shop-tooltip-bg);
}
.shop-color:not(.is-disabled):hover .shop-color__label,
.shop-color .shop-color__input:focus-visible ~ .shop-color__label {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.shop-color.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
/*
 * Buttons: Zurücksetzen (+ the no-JS "Filtern"). UA button font (Arial), as WPGB.
 * They are type=submit (no-JS form): `#shop-filters` beats WC's
 * `.woocommerce button[type=submit]` (uppercase 12px, inherit font, border,
 * green hover) and `font-family: revert` brings the UA font back.
 */
#shop-filters .shop-button {
  width: 100%;
  height: auto;
  max-height: unset;
  margin: 0 0 40px;
  padding: 12px 36px;
  border: none;
  border-radius: 4px;
  box-shadow: none;
  outline: none;
  color: #fff;
  font-family: revert;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background-color 0.25s ease;
}
#shop-filters .shop-button--reset {
  background-color: #2e3138;
}
#shop-filters .shop-button--reset:hover {
  border: none;
  background-color: #c03621;
}
#shop-filters .shop-button--submit {
  margin-bottom: 16px;
  background-color: #568259;
}
#shop-filters .shop-button--submit:hover {
  border: none;
  background-color: #568259;
}
#shop-filters .shop-button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}
#shop-filters .shop-button:focus-visible {
  outline: 2px solid #2e3138;
  outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
 * Toolbar: search + sort (WPGB area top-1)                             *
 * ------------------------------------------------------------------ */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -16px;
}
.shop-toolbar > .shop-toolbar__facet {
  position: relative;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 16px;
}
@media (max-width: 991px) {
  .shop-toolbar > .shop-toolbar__facet {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 767px) {
  .shop-toolbar > .shop-toolbar__facet {
    flex-basis: 100%;
    max-width: 100%;
  }
}
.shop-sort__label {
  position: relative;
  display: flex;
  margin: 0;
}
.shop-sort .shop-sort__select {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: content-box;
  width: 100%;
  height: 26px;
  min-height: 26px;
  max-height: unset;
  margin: 0;
  padding: 5px 42px 5px 8px;
  border: 2px solid #c8c8c8;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  outline: none;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: border-color 0.1s ease;
}
.shop-sort .shop-sort__select:hover {
  border-color: #969696;
}
.shop-sort .shop-sort__select:focus {
  border-color: #282828;
}
.shop-sort__controls {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  color: #c8c8c8;
  pointer-events: none;
}
.shop-sort__separator {
  align-self: stretch;
  width: 1px;
  margin: 10px 0;
  background: currentColor;
}
.shop-sort__toggle {
  width: 24px;
  height: 24px;
  margin: 8px 8px 8px 6px;
  padding: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: color 0.15s ease;
}
/* ------------------------------------------------------------------ *
 * Results + loading state (WPGB grid 3 loader "12")                    *
 * ------------------------------------------------------------------ */
.shop-results-wrap {
  position: relative;
}
/*
 * WooCommerce's woocommerce-layout.css `.woocommerce img{height:auto;max-width:100%}`
 * (0,1,1) beats listing.css `.sm-card__img` (0,1,0) on woocommerce bodies: the
 * contained image must fill the media box (WPGB background-size: contain).
 */
.shop-results .sm-card__img {
  height: 100%;
  max-width: none;
}
.shop-results__end {
  margin-top: 24px;
}
.shop-range .shop-range__input {
  transition: none;
}
.shop-results-wrap.is-loading .shop-results,
.shop-results-wrap.is-loading .sm-load-more {
  opacity: 0;
}
.shop-loader {
  display: none;
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
}
.shop-results-wrap.is-loading .shop-loader {
  display: block;
}
.shop-loader__bars {
  position: relative;
  width: 50px;
  height: 50px;
}
.shop-loader__bars > div {
  position: absolute;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: #568259;
  animation: shop-loader 1.2s infinite ease-in-out both;
}
.shop-loader__bars > div:nth-child(1) { top: 0; left: 23px; animation-delay: -0.84s; }
.shop-loader__bars > div:nth-child(2) { top: 6px; left: 35px; transform: rotate(45deg); animation-delay: -0.72s; }
.shop-loader__bars > div:nth-child(3) { top: 18px; left: 41px; transform: rotate(90deg); animation-delay: -0.6s; }
.shop-loader__bars > div:nth-child(4) { top: 31px; left: 35px; transform: rotate(-45deg); animation-delay: -0.48s; }
.shop-loader__bars > div:nth-child(5) { top: 36px; left: 23px; animation-delay: -0.36s; }
.shop-loader__bars > div:nth-child(6) { top: 31px; left: 10px; transform: rotate(45deg); animation-delay: -0.24s; }
.shop-loader__bars > div:nth-child(7) { top: 18px; left: 6px; transform: rotate(90deg); animation-delay: -0.12s; }
.shop-loader__bars > div:nth-child(8) { top: 6px; left: 10px; transform: rotate(-45deg); animation-delay: 0s; }
@keyframes shop-loader {
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-acc__icon,
  .shop-filters,
  .shop-check__control,
  .shop-check__control::before,
  .shop-check__control::after,
  .shop-checks__toggle,
  .shop-color__control,
  .shop-color__control::after,
  .shop-color:not(.is-disabled):hover .shop-color__label,
  .shop-button,
  .shop-sort .shop-sort__select,
  .shop-sort__toggle {
    transition-duration: 0s;
  }
  .shop-loader__bars > div {
    animation: none;
  }
}
/*! sm-css:product */
/*
 * Single product (WP06, spec 04). Owner: WP06.
 * Keep the "sm-css:product" marker comment above as the first line: dist/main.css
 * is not minified, and the build-order check greps these markers.
 *
 * Port of Oxygen template 154 (migration/source/oxygen/css/154.css + the
 * oxel_accordion classes of universal.css + Oxygen's ct-* element defaults)
 * and of WP Grid Builder's carousel CSS (wp-grid-builder/public/css/style.css,
 * uploads/wpgb/grids/G9G8C27.css). Markup: woocommerce/content-single-product.php,
 * template-parts/product/*.php.
 *
 * Specificity (AD9): every Oxygen id rule is ported with a new id
 * (#-product-builder-2-154 → #pdp, #div_block-8-154 → #pdp-row, … see the
 * comments). The WooCommerce Global Styler single-product rules stay in
 * css/woocommerce.css (plan C20); they match because the template prints the
 * Oxygen element classes (oxy-woo-element, oxy-product-cart-button, …).
 * Class-level rules of 154.css are ported verbatim; none of them ties with a
 * Global Styler rule on the same property with a different value, so the
 * bundle order (woocommerce.css before this file, while Oxygen loaded 154.css
 * before universal.css) changes nothing.
 * Everything sits inside @media all {} (WooCommerce / own markup, AD9).
 */
@media all {

  /* ================================================================ *
   * Builder + layout (154.css ids, ct-div-block defaults made explicit)
   * ================================================================ */

  /* #-product-builder-2-154 + .oxy-product-builder */
  #pdp {
    width: 100%;
    padding-top: 8px;
    padding-right: 20px;
    padding-left: 20px;
  }
  #pdp .oxy-product-wrapper-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* #div_block-13-154 */
  #pdp-body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /* #-product-title-6-154 (Global Styler: #000, 700, line-height 1.2) */
  #pdp-title {
    margin-bottom: 16px;
  }

  /* #div_block-8-154 */
  #pdp-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin-bottom: 32px;
    text-align: left;
  }
  /* #div_block-45-154 */
  #pdp-col-gallery {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 30%;
  }
  /* #div_block-18-154 */
  #pdp-col-info {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    gap: 16px;
    width: 50%;
  }
  /* #div_block-82-154 */
  #pdp-col-buy {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 20%;
    min-width: 300px;
    padding-left: 16px;
    border-left: 1px solid #2e3138;
  }
  /* #div_block-242-154 */
  #pdp-buy {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    position: sticky;
    top: 108px;
  }
  @media (max-width: 991px) {
    #pdp-row {
      flex-direction: column;
    }
    #pdp-col-gallery,
    #pdp-col-info {
      width: 100%;
    }
    #pdp-col-buy {
      width: 100%;
      padding-left: 0;
      padding-bottom: 32px;
      border-left-style: none;
      border-bottom: 1px solid #2e3138;
    }
    /* Stacked (≤991) the sticky box fills its column's content box, so it can never
       move (0px sticky travel, same under Oxygen). Static here keeps Chrome from
       compositing it: the composited layer snapped the sidebar text 1px off the
       baseline at 768 (rects identical to 0.01px, raster differed). */
    #pdp-buy {
      position: static;
    }
  }

  /* ================================================================ *
   * Gallery (#-product-images-9-154 + .oxy-product-images, 04 §3.3)
   * ================================================================ */
  .oxy-product-images {
    position: relative;
    width: 100%;
  }
  #pdp-gallery {
    position: sticky;
    top: 108px;
  }
  .woocommerce div.product .oxy-product-images div.images.woocommerce-product-gallery {
    width: 100%;
  }
  .woocommerce div.product .oxy-product-images div.images {
    margin-bottom: 0;
  }
  .woocommerce div.product .oxy-product-images div.images .flex-control-thumbs,
  .woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    overflow: auto;
  }
  .woocommerce div.product .oxy-product-images div.images .flex-control-thumbs li,
  .woocommerce div.product div.images .flex-control-thumbs li {
    width: 23%;
    flex-shrink: 0;
    overflow: hidden;
  }
  .woocommerce div.product .oxy-product-images div.images .woocommerce-product-gallery__trigger,
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: transparent;
  }
  .woocommerce div.product .oxy-product-images div.images .woocommerce-product-gallery__trigger:before,
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger:before {
    border: 2px solid #d3ced2;
  }
  .woocommerce div.product .oxy-product-images div.images .woocommerce-product-gallery__trigger:after,
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger:after {
    background: #d3ced2;
  }
  .woocommerce div.product .oxy-product-images div.images .woocommerce-product-gallery__trigger:hover:before,
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:before {
    border: 2px solid #2e3138;
  }
  .woocommerce div.product .oxy-product-images div.images .woocommerce-product-gallery__trigger:hover:after,
  .woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover:after {
    background: #2e3138;
  }
  #pdp-gallery div.images .woocommerce-product-gallery__trigger:before {
    border-color: #2e3138;
  }
  #pdp-gallery div.images .woocommerce-product-gallery__trigger:after {
    background: #2e3138;
  }
  #pdp-gallery div.images .woocommerce-product-gallery__trigger:hover:before {
    border-color: #606e79;
  }
  #pdp-gallery div.images .woocommerce-product-gallery__trigger:hover:after {
    background: #606e79;
  }
  #pdp-gallery .woocommerce-product-gallery__trigger {
    background-color: #eceeef;
  }

  /* ================================================================ *
   * Tabs + panels (#-product-tabs-301-154, 04 §3.4). The tab bar itself
   * is the Global Styler port (css/woocommerce.css).
   * ================================================================ */
  #pdp-tabs .woocommerce-tabs h2,
  #pdp-tabs #reviews #comments h2 {
    font-size: 20px;
  }
  #pdp-tabs .woocommerce-tabs .panel {
    color: #000;
  }
  /* The Global Styler's `.woocommerce ul.tabs li{transition:all ease .2s}` also
     animates what its ≤640 query changes (li margin 0 5px → 5px 0, active
     border-bottom-color white → #d3ced2). A viewport resize across 640px, or
     Chrome's full-page screenshot (it shrinks the viewport to 1×1 for a moment),
     starts those transitions, and the margin moves the whole middle column by
     1–3px until they end: the captured frame depended on timing. Only the tab
     switch fade is kept (background; z-index as before). Motion-only difference:
     the bottom border of the new active tab snaps instead of fading for .2s. */
  #pdp-tabs .woocommerce-tabs ul.tabs li {
    transition-property: background-color, z-index;
  }
  /* D6: the Global Styler port sets `outline:none` on the tab links at (0,5,4),
     which beats the global :focus-visible ring. Restore it id-scoped. The ring
     is inset (offset -4px, inside the 16px/48px padding) because WC's ul.tabs
     has overflow:hidden and would clip an outer ring; it takes the label/FAQ
     graphite (#2e3138) because the inactive label colour #999 is below 3:1. */
  /* The Global Styler gives the links `transition: .2s` (all): without focus the
     ring's width/colour/offset are preset (outline-style stays none, so nothing
     is drawn), else the ring would animate in from a 3px black `medium` outline. */
  #pdp-tabs .woocommerce-tabs ul.tabs li a {
    outline-width: 2px;
    outline-color: #2e3138;
    outline-offset: -4px;
  }
  #pdp-tabs .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid #2e3138;
    outline-offset: -4px;
  }
  /* WooCommerce prints .entry-content on the tab panels: blog.css's post-content
     rules (.entry-content ul{margin:1em 0; list-style-type:disc}) would give nested
     description lists a margin and disc bullets. Restore the UA nesting (04 §3.4:
     nested ul margin 0, list-style circle) as under Oxygen. */
  #pdp-tabs .woocommerce-Tabs-panel :is(ul, ol) :is(ul, ol) {
    margin-top: 0;
    margin-bottom: 0;
  }
  #pdp-tabs .woocommerce-Tabs-panel :is(ul, ol) ul {
    list-style-type: circle;
  }
  #pdp-tabs .woocommerce-Tabs-panel :is(ul, ol) :is(ul, ol) ul {
    list-style-type: square;
  }
  .woocommerce #reviews #comments h2 {
    margin-bottom: 24px;
  }
  .woocommerce #reviews #comments ol.commentlist {
    padding-left: 0;
  }
  .woocommerce .star-rating span {
    color: #65bec2;
  }
  .woocommerce .oxy-product-tabs #review_form #respond .form-submit input {
    background: #2e3138;
    border-color: #2e3138;
  }
  .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text {
    border-top-color: #2e3138;
  }
  .woocommerce .oxy-product-tabs #review_form #respond textarea:focus {
    border-color: #2e3138;
    box-shadow: #2e3138 0 0 5px;
  }
  .woocommerce .oxy-product-tabs #review_form #respond .form-submit input:hover {
    background: #537e56;
    border-color: #537e56;
  }
  .woocommerce .oxy-product-tabs .comment-form-rating a {
    color: #537e56;
  }
  .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li img.avatar {
    border-radius: 100px;
    border: 1px solid #d3ced2;
    width: 36px;
    background: #fff;
  }
  .woocommerce .oxy-product-tabs #reviews #comments h2,
  .woocommerce .oxy-product-tabs span.comment-reply-title {
    color: #000;
    font-family: inherit;
  }
  .woocommerce .oxy-product-tabs #review_form #respond .form-submit input {
    color: #fff;
    border-radius: 4px;
  }
  .woocommerce .oxy-product-tabs #review_form #respond .form-submit {
    margin-bottom: 0;
  }
  .woocommerce .oxy-product-tabs form.comment-form label {
    color: #666666;
  }
  /* box-shadow: var(--box-shadow) 0 10px 20px with --box-shadow undefined = none (computed-value time). */
  .woocommerce .oxy-product-tabs #review_form #respond {
    padding: 20px;
    background: #fff;
    border: 1px solid #d3ced2;
    box-shadow: none;
    border-radius: 0;
  }
  .woocommerce .oxy-product-tabs strong.woocommerce-review__author {
    color: #000;
  }
  .woocommerce .oxy-product-tabs time.woocommerce-review__published-date {
    color: #d3ced2;
    font-style: italic;
  }
  .woocommerce .oxy-product-tabs em.woocommerce-review__verified {
    color: #d3ced2;
  }
  .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text {
    background: #fff;
    border-radius: 0;
  }
  .woocommerce .oxy-product-tabs #reviews #comments ol.commentlist li .comment-text p {
    color: #666666;
  }

  /* ================================================================ *
   * FAQ (#div_block-165-154 + .oxel_accordion, 04 §3.5)
   * ================================================================ */
  /* #div_block-165-154 */
  #pdp-faq {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  /* #headline-166-154: 20px, line-height inherited (32px) also at ≤768 */
  #pdp-faq-title {
    font-size: 20px;
  }
  /* #div_block-203-154.oxel_accordion: padding 0 at every width (the id beats the class's ≤991 20px). */
  #pdp-faq-list {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 8px;
  }
  @media (max-width: 767px) {
    #pdp-faq-list {
      margin-bottom: 16px;
    }
  }
  /* .oxel_accordion__row (a <button>: UA font Arial 16px/18.4px stays) */
  .pdp-acc__row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    border: none;
    background-color: #fff;
    color: #fff; /* computed under Oxygen (borders + text colour white; the label and icon set their own) */
    cursor: pointer;
  }
  /* D6: the row's own colour is white, so the ring takes the label colour. */
  .pdp-acc__row:focus-visible {
    outline-color: #2e3138;
  }
  @media (max-width: 1120px) {
    /* #div_block-213-154 centre / #div_block-221-154 left (no visible effect: the label is left-aligned) */
    #pdp-faq-q0 {
      text-align: center;
    }
    #pdp-faq-q1 {
      text-align: left;
    }
  }
  .pdp-acc__left {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  /* .oxel_accordion__row__label + #text_block-216/224-154 */
  .pdp-acc__label {
    display: block;
    color: #2e3138;
    font-weight: 600;
    text-align: left;
  }
  /* .oxel_accordion__icon (div.ct-fancy-icon) + #fancy_icon-217-154 */
  .pdp-acc__icon {
    display: inline-flex;
    margin-right: 8px;
    border-radius: 50%;
    color: #374047;
    transition-duration: 0.3s;
  }
  #pdp-faq-q0 .pdp-acc__icon {
    margin-left: 8px;
  }
  .pdp-acc__icon > svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .pdp-acc__row--active > .pdp-acc__icon {
    transform: rotate(180deg);
  }
  /* .oxel_accordion__content: open = max-height 3000px over 3s */
  .pdp-acc__content {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-height: 3000px;
    margin: 0;
    padding: 8px 0;
    overflow: hidden;
    opacity: 1;
    transition-property: max-height;
    transition-duration: 3s;
  }
  /* .oxel_accordion__content__hidden: closing is instant */
  .pdp-acc__content--hidden {
    max-height: 0;
    padding: 0 8px;
    transition-duration: 0s;
  }
  /* #div_block-219/227-154 */
  .pdp-acc__body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* ================================================================ *
   * Buy sidebar (#div_block-242-154 children, 04 §3.6)
   * ================================================================ */
  /* #-product-meta-48-154 */
  #pdp-meta {
    margin-bottom: 8px;
  }
  @media (max-width: 991px) {
    #pdp-meta {
      margin-bottom: 0;
    }
  }
  .woocommerce .product_meta span {
    font-size: 12px;
  }
  .woocommerce .product_meta {
    display: flex;
    flex-direction: column;
  }
  .woocommerce .tagged_as {
    display: block;
  }
  /* #text_block-133-154 > #span-135-154.noLink > a (black, no pointer) */
  #pdp-delivery {
    color: #2e3138;
    font-size: 12px;
  }
  #pdp-delivery .pdp-delivery__term {
    color: #000;
  }
  /* #-product-cart-button-22-154 */
  #pdp-cart {
    width: 100%;
    padding-right: 0;
  }
  #pdp-cart button.button.alt {
    background-color: #537e56;
  }
  #pdp-cart button.button.alt:hover {
    background-color: #2e3138;
  }
  .woocommerce div.product form.cart .variations {
    margin-bottom: 0;
  }
  .woocommerce div.product form.cart .reset_variations::before {
    content: '×';
    margin-right: 4px;
  }
  .woocommerce .oxy-product-cart-button p.price,
  .woocommerce .oxy-product-cart-button span.price.woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: inherit;
  }
  .woocommerce div.product .single_variation_wrap {
    width: 100%;
  }
  .woocommerce div.product .oxy-product-cart-button form.cart {
    width: 100%;
    margin-bottom: 0;
  }
  .woocommerce .oxy-product-cart-button p.stock,
  .woocommerce div.product p.stock {
    font-size: 16px;
    color: #c03621;
  }
  .woocommerce div.product form.cart div.quantity {
    margin: 0;
  }
  .woocommerce form.cart .reset_variations,
  .woocommerce div.product form.cart .reset_variations {
    font-size: 12px;
  }
  .woocommerce form.cart .reset_variations:hover,
  .woocommerce div.product form.cart .reset_variations:hover {
    color: #373b44;
    text-decoration: underline;
  }
  .woocommerce .oxy-product-cart-button form.cart .variations td,
  .woocommerce div.product form.cart .variations td {
    line-height: 2;
  }
  /* #text_block-107-154 / #text_block-118-154 */
  .pdp-text {
    margin-top: 32px;
    margin-bottom: 8px;
  }
  /* #link_button-104-154 (.ct-link-button) */
  #pdp-offer {
    display: inline-block;
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #537e56;
    border-radius: 3px;
    background-color: #537e56;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #pdp-offer:hover {
    border: 1px solid #2e3138;
    background-color: #2e3138;
  }
  #pdp-offer:focus-visible {
    outline-color: #537e56;
  }
  /* #div_block-145-154.underlineHoverBlackA (underline from css/components.css) */
  #pdp-links {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    text-align: left;
  }
  #pdp-links a {
    display: inline-block;
  }

  /* ================================================================ *
   * Carousels row (#div_block-112-154, 04 §3.7)
   * ================================================================ */
  #pdp-carousels {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    padding-bottom: 32px;
  }
  /* #div_block-88-154 */
  #pdp-cross {
    flex-grow: 0.5;
    margin-bottom: 16px;
  }
  /* #div_block-161-154 */
  #pdp-related {
    flex-grow: 1;
  }
  .pdp-carousels__col {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
  }
  @media (max-width: 1120px) {
    #pdp-carousels {
      flex-wrap: wrap;
      flex-direction: column;
    }
    #pdp-cross {
      width: 100%;
      max-width: 100%;
    }
  }
  @media (max-width: 991px) {
    #pdp-carousels {
      gap: 0;
    }
    #pdp-cross {
      width: 100%;
    }
  }
  /* #headline-158-154 / #headline-164-154: 20px also at ≤768 (the id beat the global h2 22px) */
  #pdp-carousels .pdp-carousels__title {
    padding-bottom: 8px;
    font-size: 20px;
  }
  /* .oxy-wpgb-grid, #-wpgb-grid-148-154 (cross), #-wpgb-grid-146-154 (related) */
  .pdp-carousels__grid {
    width: 100%;
  }
  .pdp-carousels__col--cross > .pdp-carousels__grid {
    flex-grow: 1;
  }
  .pdp-carousels__col--related > .pdp-carousels__grid {
    min-width: 50%;
  }

  /* ---------------------------------------------------------------- *
   * WPGB carousel (style.css .wpgb-carousel, grids 8/9). Columns:
   * related 5 / ≤1200 3 / ≤992 2 / ≤768 1, cross 3 / ≤1200 2 / ≤768 1
   * (WPGB max-width queries are inclusive). --cols is read by the JS.
   * ---------------------------------------------------------------- */
  .pdp-carousel {
    --cols: 5;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .pdp-carousel--cross {
    --cols: 3;
  }
  @media screen and (max-width: 1200px) {
    .pdp-carousel {
      --cols: 3;
    }
    .pdp-carousel--cross {
      --cols: 2;
    }
  }
  @media screen and (max-width: 992px) {
    .pdp-carousel {
      --cols: 2;
    }
  }
  @media screen and (max-width: 768px) {
    .pdp-carousel,
    .pdp-carousel--cross {
      --cols: 1;
    }
  }
  .pdp-carousel__layout {
    position: relative;
    z-index: 1;
    contain: layout;
    outline: none;
  }
  .pdp-carousel__viewport {
    position: relative;
    height: 980px;
    margin: -250px 0;
    padding: 250px 0;
    overflow: hidden;
    cursor: grab;
    pointer-events: none;
    touch-action: pan-y;
    will-change: transform;
    outline: none;
  }
  .pdp-carousel__viewport.is-dragging {
    cursor: grabbing;
  }
  /* D6 keyboard focus: a ring around the visible card row (the 250px shadow room is not part of it). */
  .pdp-carousel__viewport:focus-visible::after {
    content: '';
    position: absolute;
    top: 248px;
    right: 0;
    bottom: 248px;
    left: 0;
    z-index: 2;
    box-shadow: inset 0 0 0 2px #2e3138;
    pointer-events: none;
  }
  .pdp-carousel__track {
    position: absolute;
    top: 250px;
    bottom: 250px;
    left: 0;
    width: 100%;
    pointer-events: auto;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .pdp-carousel__track.is-instant {
    transition: none;
  }
  .pdp-carousel__cell {
    position: absolute;
    top: 0;
    left: calc(var(--i, 0) * ((100% - (var(--cols) - 1) * 16px) / var(--cols) + 16px));
    width: calc((100% - (var(--cols) - 1) * 16px) / var(--cols));
    height: 480px;
  }
  .pdp-carousel__cell > .sm-card {
    height: 100%;
  }
  /* WooCommerce's `.woocommerce img{height:auto;max-width:100%}` (woocommerce-layout.css, 0,1,1)
     beats listing.css `.sm-card__img` (0,1,0) on WooCommerce bodies: restore the contain box. */
  .pdp-carousel .sm-card__img {
    height: 100%;
    max-width: none;
  }
  .pdp-carousel__area {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
  }
  .pdp-carousel__area > * {
    pointer-events: auto;
  }
  .pdp-carousel__area--left {
    left: 0;
  }
  .pdp-carousel__area--right {
    right: 0;
  }
  .pdp-carousel__button {
    z-index: 1;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #333333;
    cursor: pointer;
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: opacity 0.25s ease-in-out;
  }
  .pdp-carousel__button:hover,
  .pdp-carousel__button:active {
    opacity: 0.8;
  }
  .pdp-carousel__button:disabled {
    cursor: auto;
    opacity: 0.4;
  }
  .pdp-carousel__button svg {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 25%;
    pointer-events: none;
    stroke-width: 2.5;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-acc__content,
    .pdp-acc__icon,
    .pdp-carousel__track,
    .pdp-carousel__button {
      transition-duration: 0s;
    }
  }
}
/*! sm-css:home */
/*
 * Home (WP07). Spec 02 for data/strings; layout = decision D31 (redesign):
 * banner → intro panels (50/50 ≥992) → category grid → post cards → bar.
 * Utilities live in the templates; this file holds what Tailwind cannot
 * express: the intro lead line, the WooCommerce category markup (#home-cats,
 * WC classes → inside @media all, AD9) and the hover/focus details.
 * Keep the "sm-css:home" marker comment above as the first line.
 */
@media all {
  /* ---------------------------------------------------------------- *
   * Intro panels                                                      *
   * ---------------------------------------------------------------- */

  /* Right panel has no heading: its first text run reads as the panel's
     title, at the size of the left panel's H1 (the stored HTML is printed
     byte for byte, so this is pure CSS). */
  .home-intro__body--lead > :first-child {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
  }
  @media (min-width: 992px) {
    .home-intro__body--lead > :first-child {
      font-size: 32px;
    }
  }
  /* Spacer runs (<div><br></div>) are one body line high: 28.8 / 32px,
     the same gap as the H1's margin on the left panel. */

  /* ---------------------------------------------------------------- *
   * Section headings (h2: 30px, 22px ≤768 from base.css)              *
   * ---------------------------------------------------------------- */
  .home-section__title {
    letter-spacing: -0.01em;
  }

  /* ---------------------------------------------------------------- *
   * Category grid: WooCommerce [product_categories] markup            *
   * (div.woocommerce > ul.products > li.product-category > a > img +  *
   * h3.woocommerce-loop-category__title). Scoped to #home-cats so the *
   * mega menu (same shortcode) and the WC sheets are untouched; the id *
   * beats every class-based WooCommerce/Oxygen rule.                   *
   *   < 577 1 column, 577–767 2 columns: horizontal tiles (thumb left) *
   *   768–991 3 columns, 992+ 5 columns: vertical tiles                *
   * Tile look = product card (03 §3.8, same values as .sm-card__inner *
   * in listing.css): 1px black/38% frame, 2px grey-444 + soft         *
   * black/66% shadow on hover (drawn with box-shadow: no shift).      *
   * ---------------------------------------------------------------- */
  #home-cats .woocommerce {
    width: 100%;
  }
  #home-cats ul.products {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* WC clearfix pseudo elements would become grid items. */
  #home-cats ul.products::before,
  #home-cats ul.products::after {
    content: none;
    display: none;
  }
  #home-cats ul.products li.product-category {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    float: none;
    clear: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  #home-cats ul.products li.product-category a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 6px 12px 6px 6px;
    background: #fff;
    /* Product-card frame, 03 §3.8 (listing.css rgba(0, 0, 0, 0.38)). */
    border: 1px solid rgb(0 0 0 / 38%);
    color: #2e3138;
    text-decoration: none;
    transition: box-shadow 0.08s ease, border-color 0.08s ease;
  }
  #home-cats ul.products li.product-category a:hover,
  #home-cats ul.products li.product-category a:focus-visible {
    border-color: #444444;
    /* Product-card hover shadow, 03 §3.8 (listing.css rgba(0, 0, 0, 0.66)). */
    box-shadow: 0 0 0 1px #444444, 0 0 10px -5px rgb(0 0 0 / 66%);
  }
  #home-cats ul.products li.product-category a:focus-visible {
    outline: 2px solid #2e3138;
    outline-offset: 3px;
  }
  #home-cats ul.products li.product-category a img {
    display: block;
    flex: 0 0 auto;
    width: 60px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    -o-object-fit: contain;
       object-fit: contain;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  #home-cats ul.products li.product-category .woocommerce-loop-category__title {
    min-width: 0;
    margin: 0;
    padding: 0;
    font-family: 'Archivo';
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #2e3138;
    text-align: left;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  #home-cats ul.products li.product-category .woocommerce-loop-category__title span {
    background-image: linear-gradient(#000, #000);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.3s ease-in-out;
  }
  #home-cats ul.products li.product-category a:hover .woocommerce-loop-category__title span,
  #home-cats ul.products li.product-category a:focus-visible .woocommerce-loop-category__title span {
    background-size: 100% 2px;
  }
  #home-cats ul.products li.product-category mark.count {
    display: none !important;
  }

  @media (min-width: 577px) {
    #home-cats ul.products {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
  }
  @media (min-width: 768px) {
    #home-cats ul.products {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    #home-cats ul.products li.product-category a {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      padding: 18px 14px 20px;
      text-align: center;
    }
    #home-cats ul.products li.product-category a img {
      width: min(76%, 220px);
    }
    #home-cats ul.products li.product-category .woocommerce-loop-category__title {
      font-size: 18px;
      text-align: center;
    }
  }
  @media (min-width: 992px) {
    #home-cats ul.products {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    #home-cats ul.products li.product-category a {
      padding: 18px 10px 20px;
    }
    #home-cats ul.products li.product-category .woocommerce-loop-category__title {
      font-size: 16px;
    }
  }
  @media (min-width: 1121px) {
    #home-cats ul.products li.product-category a {
      padding: 20px 12px 22px;
    }
    #home-cats ul.products li.product-category .woocommerce-loop-category__title {
      font-size: 18px;
    }
  }
  @media (min-width: 1333px) {
    #home-cats ul.products {
      gap: 20px;
    }
    #home-cats ul.products li.product-category .woocommerce-loop-category__title {
      font-size: 20px;
    }
  }

  /* ---------------------------------------------------------------- *
   * Post cards                                                        *
   * ---------------------------------------------------------------- */
  .home-post {
    transition: box-shadow 0.15s ease;
  }
  .home-post:hover {
    /* Product-card hover shadow, 03 §3.8 (listing.css rgba(0, 0, 0, 0.66)). */
    box-shadow: 0 0 10px -5px rgb(0 0 0 / 66%);
  }
  .home-post__img {
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  .home-post:hover .home-post__img {
    transform: scale(1.04);
    filter: brightness(85%);
  }
  .home-post__excerpt p {
    margin: 0;
  }
  .home-post__title {
    hyphens: auto;
  }
  .home-post__link span {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.3s ease-in-out;
  }
  .home-post:hover .home-post__link span,
  .home-post__link:focus-visible span {
    background-size: 100% 2px;
  }
  .home-post__arrow {
    transition: transform 0.2s ease;
  }
  .home-post:hover .home-post__arrow {
    transform: translateX(4px);
  }
  /* Keyboard focus: ring around the whole card (the link is stretched).
     Without :has() the link keeps the global ring (D6). */
  @supports selector(:has(a)) {
    .home-post:has(.home-post__link:focus-visible) {
      outline: 2px solid #2e3138;
      outline-offset: 3px;
    }
    .home-post__link:focus-visible {
      outline: none;
    }
  }

  /* ---------------------------------------------------------------- *
   * "Alle Beiträge ansehen" bar (whole bar is the link; the label gets *
   * the white underline-grow bar of .underlineHover, 01 §7.3).         *
   * ---------------------------------------------------------------- */
  .home-cta {
    color: #fff;
    text-decoration: none;
  }
  .home-cta:hover,
  .home-cta:focus {
    color: #fff;
  }
  .home-cta__label::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #fff;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  }
  .home-cta:hover .home-cta__label::before,
  .home-cta:focus-visible .home-cta__label::before {
    visibility: visible;
    width: 100%;
  }
  .home-cta__arrow {
    transition: transform 0.2s ease;
  }
  .home-cta:hover .home-cta__arrow {
    transform: translateX(6px);
  }
  .home-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -6px;
  }

  @media (prefers-reduced-motion: reduce) {
    .home-post,
    .home-post__img,
    .home-post__link span,
    .home-post__arrow,
    .home-cta__label::before,
    .home-cta__arrow,
    #home-cats ul.products li.product-category a,
    #home-cats ul.products li.product-category .woocommerce-loop-category__title span {
      transition-duration: 0s;
    }
    .home-post:hover .home-post__img {
      transform: none;
    }
  }
}
/*! sm-css:blog */
/*
 * Blog index, category, single post, 404, .entry-content, handpicked block (05).
 * Owner: WP08. Keep the "sm-css:blog" marker comment above as the first line:
 * dist/main.css is not minified, and the build-order check greps these markers.
 *
 * Values are ported from the Oxygen templates 258/278/279/3869
 * (uploads/oxygen/css/*.css, universal.css, oxygen.css) and from WP Grid
 * Builder (public/css/{style,facets}.css, uploads/wpgb/grids/G5G6C44C51.css,
 * G7C51.css), checked against the computed styles in
 * reference/oxygen-local-styles. Everything UA-dependent is written out
 * (preflight is off, AD3).
 *
 * Own classes (sm-blog*, sm-focus-*, sm-post-*, sm-facet-btn, sm-cta*,
 * sm-author*, sm-related*, sm-single*, sm-archive-head*, sm-404*) as plain
 * rules; post_content / WooCommerce block markup inside @media all {} (AD9).
 *
 * Breakpoints: WPGB thresholds are inclusive max-width (≤576, ≤992), Oxygen
 * max-width 767/479, card 51 min-width 480.
 */
/* ------------------------------------------------------------------ *
 * Page wrappers (#div_block-22-258 / -19-278 / -56-279 = ct-div-block  *
 * .big-screen-border: flex column, items start, full width)            *
 * ------------------------------------------------------------------ */
.sm-blog {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.sm-blog__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0 0 16px;
}
.sm-blog__grid {
  position: relative;
  width: 100%;
}
/* #-wpgb-grid-9-258: ≤1120 max-width 100vw, ≤767 overflow-x hidden (clips the
   facet row's -16px margins). The category archive had no such rule and
   overflowed to 497/406px at 480/390 (Oxygen bug, accepted deviation: the
   rebuild clips it there too). From 768 both keep the 16px overflow. */
@media (max-width: 1120px) {
  .sm-blog__grid--index {
    max-width: 100vw;
  }
}
@media (max-width: 767px) {
  .sm-blog__grid {
    overflow-x: hidden;
  }
}
/* ------------------------------------------------------------------ *
 * Focus strip = WPGB grid 5 (metro) + card 44 (05 §3.2)               *
 * 4:3 tiles, height floored to whole px like WPGB's metro layout,     *
 * type = 3.2 % of the card width (16px × width / 500).                *
 * ------------------------------------------------------------------ */
.sm-focus-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  width: 100%;
}
@media (min-width: 577px) {
  .sm-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 993px) {
  .sm-focus-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.sm-focus-card {
  position: relative;
  z-index: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
  container-type: inline-size;
}
.sm-focus-card:hover {
  z-index: 1;
}
.sm-focus-card *,
.sm-focus-card ::before,
.sm-focus-card ::after {
  box-sizing: border-box;
}
.sm-focus-card__box {
  position: relative;
  height: round(down, 75cqw, 1px);
}
.sm-focus-card__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 3.2cqw;
  cursor: pointer;
  transition: box-shadow 350ms cubic-bezier(0.15, 0.75, 0.5, 1);
}
.sm-focus-card__title,
.sm-focus-card__terms,
.sm-focus-card__content,
.sm-focus-card__media {
  transition-property: opacity, color, background, box-shadow, filter, transform;
  transition-duration: 80ms;
  transition-timing-function: linear;
}
.sm-focus-card__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}
.sm-focus-card__thumb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transform: scaleX(1) scaleY(1);
  transition: transform 400ms cubic-bezier(0.15, 0.75, 0.5, 1);
}
/* Zoom on card hover (05 §3.2): keyed on the card, not the media, because the
   layer link (a sibling after the media) covers the whole card and takes the
   pointer, so the media itself never matches :hover. */
.sm-focus-card:hover .sm-focus-card__thumb {
  transform: scaleX(1.1) scaleY(1.1);
}
.sm-focus-card__thumb > div,
.sm-post-card__thumb > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.sm-focus-card__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: 0.25;
  transition: opacity 1050ms cubic-bezier(0.15, 0.75, 0.5, 1);
}
.sm-focus-card:hover .sm-focus-card__overlay {
  opacity: 0.5;
}
.sm-focus-card__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 2em;
  padding: 0;
}
.sm-focus-card__bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  margin: auto 0 0;
}
.sm-focus-card__title {
  position: relative;
  display: inline-block;
  width: 70%;
  margin: 0 0 0.25em;
  padding: 0;
  color: #fff;
  font: 600 1.875em/1.2em 'Poppins';
  white-space: pre-line;
}
.sm-focus-card__link,
.sm-focus-card__link:hover {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
/* Whole card → post (WPGB card layer link); the category links sit above. */
.sm-focus-card__layer,
.sm-post-card__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.sm-focus-card__terms {
  position: relative;
  display: block;
  width: 70%;
  font-size: 0.875em;
  line-height: 1em;
  white-space: pre-line;
}
.sm-focus-card__terms span {
  color: #f5f5f5;
}
.sm-focus-card__term {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: #f5f5f5;
  font-family: 'Poppins';
  font-weight: 600;
  line-height: inherit;
}
/* Term underline (WPGB card 44/51 verbatim): the "in" animation runs once on
   load (scaleX 1 → 0, origin right), hover runs "out" (0 → 1, origin left). */
.sm-focus-card__term::after,
.sm-post-card__term::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  opacity: 0.8;
  pointer-events: none;
  animation: 0.45s cubic-bezier(0.15, 0.75, 0.5, 1) 0s 1 normal forwards running sm-underline-in;
}
.sm-focus-card__term:hover::after {
  animation: 0.45s cubic-bezier(0.15, 0.75, 0.5, 1) 0s 1 normal forwards running sm-underline-out;
}
.sm-post-card__term::after {
  animation: 0.45s ease 0s 1 normal forwards running sm-underline-in;
}
.sm-post-card__term:hover::after {
  animation: 0.45s ease 0s 1 normal forwards running sm-underline-out;
}
/* Category archives and related posts load WPGB's G6C51.css / G7C51.css,
   which lack the @keyframes (only the combined /infos/ sheet G5G6C44C51.css
   has them): the underline never animates there and is always shown. That is
   today's look, reproduced for parity (05 §3.5 assumed the /infos/ case). */
.sm-post-grid--archive .sm-post-card__term::after,
.sm-post-grid--archive .sm-post-card__term:hover::after,
.sm-post-grid--related .sm-post-card__term::after,
.sm-post-grid--related .sm-post-card__term:hover::after {
  animation: none;
}
@keyframes sm-underline-out {
  0% {
    transform: scaleX(0);
    transform-origin: left center 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left center 0;
  }
}
@keyframes sm-underline-in {
  0% {
    transform: scaleX(1);
    transform-origin: right center 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center 0;
  }
}
/* ------------------------------------------------------------------ *
 * Post grid = WPGB grid 6 (filter + 10/20 posts) / grid 7 (related)   *
 * (05 §3.4, §3.5). 1 column ≤992, 2 from 993, rows share the height.  *
 * ------------------------------------------------------------------ */
.sm-post-grid {
  position: relative;
  width: 100%;
}
.sm-post-grid--index .sm-post-grid__wrapper,
.sm-post-grid--archive .sm-post-grid__wrapper {
  padding-top: 8px;
}
.sm-post-grid__wrapper {
  position: relative;
  padding-bottom: 0;
}
.sm-post-grid__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  transition: opacity 0.35s ease;
}
@media (min-width: 993px) {
  .sm-post-grid__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sm-post-grid.is-loading .sm-post-grid__cards {
  opacity: 0;
}
.sm-post-grid__empty {
  grid-column: 1 / -1;
  font-size: 16px;
}
.sm-post-grid__empty > div {
  padding: 3em;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
/* Card 51 */
.sm-post-card {
  position: relative;
  z-index: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.sm-post-card:hover {
  z-index: 1;
}
.sm-post-card *,
.sm-post-card ::before,
.sm-post-card ::after {
  box-sizing: border-box;
}
.sm-post-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 256px;
  cursor: pointer;
}
.sm-post-card__media,
.sm-post-card__content,
.sm-post-card__body,
.sm-post-card__terms,
.sm-post-card__title,
.sm-post-card__excerpt {
  transition-property: opacity, color, background, box-shadow, filter, transform;
  transition-duration: 80ms;
  transition-timing-function: linear;
}
.sm-post-card__media {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  font-size: 15vw;
  transition-duration: 400ms;
  transition-timing-function: ease-in-out;
}
.sm-post-card__media::after {
  content: '➔';
  position: absolute;
  top: 0;
  left: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  color: #000;
  font-size: 0.9375em;
  filter: invert(70%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0s;
}
.sm-post-card:hover .sm-post-card__media {
  filter: brightness(70%);
}
.sm-post-card:hover .sm-post-card__media::after {
  opacity: 1;
}
.sm-post-card__thumb {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transition-property: opacity, color, background, box-shadow, filter, transform;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
}
.sm-post-card__media-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@media (min-width: 480px) {
  .sm-post-card__inner {
    flex-direction: row;
  }
  .sm-post-card__media {
    width: 33%;
  }
  .sm-post-card__media + .sm-post-card__content {
    width: 67%;
  }
}
.sm-post-card__content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}
.sm-post-card__body {
  position: relative;
  flex: auto;
  padding: 1.5em;
  background: #2e3138 repeating-linear-gradient(-45deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 6px) repeat scroll 0 0 / 4px 4px;
}
.sm-post-card:hover .sm-post-card__body {
  background-image: repeating-linear-gradient(114deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
  background-size: 8px 8px;
}
/* Checkerboard (WPGB nth-child over the card list): ≥993 4n and 4n+1 green. */
.sm-post-card:nth-child(4n + 0) .sm-post-card__body,
.sm-post-card:nth-child(4n + 1) .sm-post-card__body {
  background-color: #568259;
}
@media only screen and (max-width: 992px) {
  .sm-post-card:nth-child(odd) .sm-post-card__body {
    background-color: #568259;
  }
  .sm-post-card:nth-child(even) .sm-post-card__body {
    background-color: #2e3138;
  }
}
.sm-post-card__terms {
  position: relative;
  display: block;
  margin: 0 0 1em;
  padding: 0;
  color: #fff;
  font-size: 0.875em;
  line-height: 1.125em;
  white-space: pre-line;
}
.sm-post-card__term {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: inherit;
  font-family: 'Archivo';
  font-weight: 700;
  line-height: inherit;
}
.sm-post-card__title {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  color: #fff;
  font: 400 1.625em/1.2em 'Archivo Black';
  white-space: pre-line;
}
@media only screen and (max-width: 992px) {
  .sm-post-card__title {
    font-size: 22px;
  }
}
.sm-post-card__link,
.sm-post-card__link:hover {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.sm-post-card__excerpt {
  position: relative;
  display: block;
  margin: 0;
  padding: 1.5em 0 0;
  color: #fff;
  font: 400 1em/2em 'Archivo';
  white-space: pre-line;
}
.sm-post-card__excerpt p {
  margin: 0;
}
/* ------------------------------------------------------------------ *
 * Filter bar = WPGB grid 6 area-top-1 + facets 10 / 2 (05 §3.4)        *
 * ------------------------------------------------------------------ */
.sm-blog-filter {
  margin: 0;
}
.sm-blog-filter__area {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 16px 20px 2px 20px;
}
.sm-blog-filter__facet {
  position: relative;
  flex: initial;
  max-width: initial;
  padding: 0 16px;
  transition: opacity 0.2s ease-in-out;
}
.sm-blog-filter__facet *,
.sm-blog-filter__facet ::before,
.sm-blog-filter__facet ::after {
  box-sizing: border-box;
}
.sm-post-grid.is-loading .sm-blog-filter__facet {
  opacity: 0.6;
  pointer-events: none;
}
.sm-blog-filter__fieldset {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: none;
  box-shadow: none;
  outline: none;
}
.sm-blog-filter__buttons {
  display: flex;
  flex-direction: column;
}
.sm-blog-filter__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 -8px;
  padding: 0;
  list-style: none;
}
.sm-blog-filter__list li {
  margin: 0 8px 8px 0;
  padding: 0;
  list-style: none;
}
/* Real <button>s styled as WPGB's div.wpgb-button (Archivo set explicitly:
   the UA button font would be Arial 13.33px, plan §9 C7). */
.sm-facet-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: 5px 8px;
  border: 2px solid #c8c8c8;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #2e3138;
  font-family: 'Archivo';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sm-facet-btn:hover:not([aria-pressed='true']):not(:disabled) {
  border-color: #969696;
}
.sm-facet-btn[aria-pressed='true'] {
  border-color: #568259;
  background-color: #568259;
  color: #fff;
}
.sm-facet-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.sm-facet-btn:focus-visible {
  outline: 2px solid #2e3138;
  outline-offset: 2px;
}
.sm-facet-btn[aria-pressed='true']:focus-visible {
  outline-color: #568259;
}
.sm-facet-btn__label {
  flex: auto;
  margin: 0;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  cursor: inherit;
}
/* ------------------------------------------------------------------ *
 * CTA strip (05 §3.6; #div_block-10-258 / #div_block-48-279)           *
 * ------------------------------------------------------------------ */
.sm-cta {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  width: 100%;
  padding: 16px;
  background-color: #c03621;
  color: #fff;
}
.sm-cta__icons {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.sm-cta--post {
  justify-content: normal;
  text-align: left;
}
.sm-cta--post .sm-cta__icons {
  padding-right: 1px;
}
.sm-cta__icon {
  display: inline-flex;
  border-radius: 50%;
  color: #fff;
}
.sm-cta__icon > svg {
  width: 40px;
  height: 40px;
  fill: currentColor;
}
.sm-cta__link {
  display: inline-block;
  color: #fff;
  font-size: 22px;
}
.sm-cta.underlineHover a {
  color: #fff;
}
.sm-cta__link:focus-visible {
  outline-color: #fff;
}
/* ------------------------------------------------------------------ *
 * Category header row (#div_block-9-278, 05 §3.7)                      *
 * ------------------------------------------------------------------ */
.sm-archive-head {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 20px 0;
}
.sm-archive-head__title > span {
  display: inline-block;
}
.sm-archive-head__back {
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 767px) {
  .sm-archive-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    text-align: center;
  }
  .sm-archive-head__title {
    text-align: left;
  }
  .sm-archive-head__back {
    margin-bottom: 8px;
  }
}
/* ------------------------------------------------------------------ *
 * Single post (template 279, 05 §3.8)                                  *
 * ------------------------------------------------------------------ */
.sm-single__columns {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  flex-grow: 1;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sm-single__hero {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  background-color: #2e3138;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 6px);
  background-size: 4px 4px;
}
.sm-single__hero-img {
  width: auto;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
}
.sm-single__main {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
  text-align: left;
}
.sm-single__head {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 980px;
  padding: 0 0 16px;
}
.sm-single__title {
  color: #2e3138;
}
.sm-single__title > span {
  display: inline-block;
}
@media (max-width: 767px) {
  .sm-single__title {
    font-size: 26px;
  }
}
.sm-single__meta {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.sm-single__date > span,
.sm-single__cats > span {
  display: inline-block;
}
.sm-single__cats > span {
  color: #2e3138;
}
.sm-single__content {
  width: 100%;
  max-width: 980px;
}
/* Author box (#div_block-57-279) */
.sm-author {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 980px;
  padding: 12px 0;
  border-top: 2px solid;
  text-align: left;
}
.sm-author__title {
  padding: 12px 0;
}
.sm-author__row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
}
.sm-author__img {
  width: 128px;
  max-width: 100%;
  height: 128px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  border: 2px solid;
  border-radius: 100%;
}
@media (max-width: 767px) {
  .sm-author {
    align-items: center;
    text-align: left;
  }
  .sm-author__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* "Weitere Beiträge:" bar (#div_block-45-279) */
.sm-related-bar {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  background-color: #2e3138;
  background-image: repeating-linear-gradient(114deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
  background-size: 4px 4px;
}
.sm-related-bar__title {
  color: #fff;
}
.sm-related {
  width: 100%;
}
/* ------------------------------------------------------------------ *
 * 404 (template 3869, 05 §3.11)                                         *
 * ------------------------------------------------------------------ */
.sm-404 {
  width: 100%;
}
.sm-404__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1120px;
  height: 100%;
  min-height: inherit;
  margin-right: auto;
  margin-left: auto;
  padding: 75px 20px;
}
@media (max-width: 479px) {
  .sm-404__title {
    font-size: 24px;
  }
}
.sm-404__text {
  margin-bottom: 1px;
  padding-bottom: 16px;
}
.sm-404__row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.sm-404__form {
  width: auto;
}
.sm-404__links {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.sm-404__link {
  display: inline-block;
  max-width: 100%;
  font-size: 24px;
}
.sm-404__img {
  display: block;
  max-width: 100%;
  height: auto;
  padding-top: 32px;
}
@media (max-width: 479px) {
  .sm-404__row {
    flex-direction: column;
    text-align: justify;
  }
  .sm-404__links {
    flex-direction: column;
    gap: 8px;
  }
}
/* ------------------------------------------------------------------ *
 * Post content (.entry-content, 05 §3.9) + WooCommerce handpicked      *
 * products block. post_content markup → @media all (AD9). The UA       *
 * margins (p 0 0 1em with p{margin-top:0!important}, ul/ol 16px 0 +    *
 * 40px, figure 16px 40px) and the base headings already give the       *
 * measured values; written out here so they never depend on preflight. *
 * :where() keeps them at element specificity, so WooCommerce block CSS  *
 * (ul.wc-block-grid__products margin/padding, block images) still wins. *
 * ------------------------------------------------------------------ */
@media all {
  :where(.entry-content) p {
    margin-bottom: 1em;
  }
  :where(.entry-content) ul,
  :where(.entry-content) ol {
    margin: 1em 0;
    padding-left: 40px;
  }
  :where(.entry-content) ul {
    list-style-type: disc;
  }
  :where(.entry-content) ol {
    list-style-type: decimal;
  }
  :where(.entry-content) li {
    margin: 0;
  }
  :where(.entry-content) figure {
    margin: 1em 40px;
  }
  :where(.entry-content) img {
    display: inline;
    max-width: 100%;
    height: auto;
  }
  /* Links: the global a{#0074db} (base.css). No .entry-content a rule: it
     would out-rank core's .wp-block-button__link{color:#fff} (0,1,0) and
     turn the handpicked "Details" label blue. */
  /*
   * Handpicked "Details" pill (05 §3.9, gap #11): the rule core prints in
   * classic-theme-styles-inline-css, ported verbatim so the button keeps its
   * #32373c pill if that inline style is ever dequeued. Same specificity as
   * core's rule (0,1,0) and the same values, so wc-blocks.css keeps winning
   * where it is more specific (font-size 1em, inline-flex).
   */
  :where(.entry-content) .wp-block-button__link {
    color: #fff;
    background-color: #32373c;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sm-focus-card__inner,
  .sm-focus-card__thumb,
  .sm-focus-card__overlay,
  .sm-post-card__media,
  .sm-post-card__media::after,
  .sm-post-card__thumb,
  .sm-post-card__body,
  .sm-post-grid__cards,
  .sm-blog-filter__facet,
  .sm-facet-btn {
    transition-duration: 0s;
  }
}
/*! sm-css:pages */
/*
 * Content pages + ACF block set (WP09, spec 06): title-band, info-row,
 * contact-map, the image slider, block pages and legal pages.
 * Keep the "sm-css:pages" marker comment above as the first line: dist/main.css
 * is not minified, and the build-order check greps these markers.
 *
 * Values are ports of the Oxygen CSS that renders these pages today
 * (uploads/oxygen/css/{396,24,291,131,universal}.css, unslider.css), named
 * after their Oxygen counterparts in the comments so they can be traced 1:1.
 * Plain CSS outside @layer, so nothing here is purged. Rules that target
 * post_content classes (legal pages, Kontakt rich text) sit in @media all {}
 * (AD9). Breakpoints are Oxygen's, inclusive: tablet ≤991, custom ≤768 (h1/h2
 * shrink), phone-landscape ≤767.
 */
/* ------------------------------------------------------------------ *
 * Rows and cells (Oxygen .ct-new-columns / .ct-div-block)             *
 * ------------------------------------------------------------------ */
/* universal.css .ct-new-columns */
.sm-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
/* universal.css .ct-div-block */
.sm-cell {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}
/* Textured text panel (70 %): #div_block-66-396 & co. The class .bg-texture
   (components.css) gives the texture; Oxygen's class also added gap 8px,
   which the ID rules kept. Colour: bg-graphite / bg-green on the element. */
.sm-panel {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  margin-right: 0;
  padding: 32px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  text-align: left;
}
/* Library 318 "Infoblock Weiss" (unused today): white panel, dark text. */
.sm-panel--white {
  padding: 32px 32px 2px;
  color: #2e3138;
}
/* Text group inside a panel: #div_block-67-396{gap:8px} */
.sm-group {
  gap: 8px;
}
@media (max-width: 991px) {
  /* #new_columns-*> .ct-div-block{width:100% !important} */
  .sm-row > .sm-cell {
    width: 100%;
  }
  .sm-panel {
    padding: 22px;
  }
}
/* ------------------------------------------------------------------ *
 * supermatic/title-band (06 §3.2): #new_columns-2-396 / -114-24       *
 * ------------------------------------------------------------------ */
/* #div_block-3-396: empty textured cell, hidden ≤991 (.bg-texture class rule) */
.sm-band__side {
  width: 30%;
  padding: 0;
}
/* #div_block-123-24 padding 16 32 16 32; #div_block-4-396 padding-right 16 */
.sm-band__panel {
  padding: 16px 32px;
}
.sm-band__panel--pr16 {
  padding-right: 16px;
}
/* h1 keeps the global size (36px, 28px ≤768) and colour inherits #fff. */
@media (max-width: 991px) {
  .sm-row > .sm-band__side {
    display: none;
  }
  .sm-band__panel {
    padding: 22px;
  }
}
/* ------------------------------------------------------------------ *
 * supermatic/info-row (06 §3.1, §3.3, §3.4)                           *
 * ------------------------------------------------------------------ */
/* #div_block-60-396: media cell, white shows through below the media */
.sm-info__media {
  width: 30%;
  padding: 0;
}
/* #text_block-68-396{font-size:28px}: the ID rule beats the global h2
   (30px, 22px ≤768), so the panel h2 never shrinks. */
.sm-info__heading {
  font-size: 28px;
}
/* #text_block-69-396 (Services) 16px, #text_block-19-24 (Über uns) 18px;
   weight 600 and colour inherit from the panel. */
.sm-info__body--16 {
  font-size: 16px;
}
.sm-info__body--18 {
  font-size: 18px;
}
/* #link_text-70-396 (.ct-link-text): pinned to the panel bottom by
   justify-content:space-between. Hover underline: .underlineHover. */
.sm-info__link {
  display: inline-block;
  margin-top: 16px;
  color: #fff;
  font-size: 18px;
}
.sm-panel--white .sm-info__link {
  color: #0074db;
}
/* #div_block-37-396: two or more links, stacked, no gap */
.sm-info__links {
  gap: 0;
}
/* Werksvertretungen (06 §3.4): #div_block-24-24, -43-24, -50-24 */
.sm-group--columns {
  width: 100%;
  padding-right: 32px;
}
.sm-info__columns {
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 0;
}
.sm-info__column {
  gap: 8px;
}
.sm-info__address {
  font-size: 18px;
}
.sm-info__column-link {
  display: inline-block;
  color: #fff;
  font-size: 18px;
}
@media (max-width: 767px) {
  .sm-group--columns {
    padding-right: 0;
  }
  .sm-info__columns {
    flex-direction: column;
    text-align: justify;
  }
}
/* Images: .ct-image{max-width:100%}. width/height attributes from
   wp_get_attachment_image() are presentational hints only, so every mode
   sets both CSS width and height. */
.sm-info__img {
  max-width: 100%;
}
/* Editor preview without an image. */
.sm-info__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 160px;
  background: #eee;
  color: #666;
  font-size: 16px;
}
/* fit "fixed" (Services): #image-21-396 / #image-63-396 */
.sm-info--fixed .sm-info__img {
  width: 100%;
  height: 384px;
  max-height: 384px;
  -o-object-fit: cover;
     object-fit: cover;
}
/* #slider-61-396 .unslider, .oxygen-unslider-container, .unslider-wrap,
   .unslider-wrap li, .ct-slide {height:100%} */
.sm-info--fixed .sm-slider__frame,
.sm-info--fixed .sm-slider__viewport,
.sm-info--fixed .sm-slider__track,
.sm-info--fixed .sm-slider__item,
.sm-info--fixed .sm-slider__slide {
  height: 100%;
}
/* fit "natural" (Über uns rows 2–4): #div_block-14-24{max-height:500px},
   #image-15-24{height:100%;width:auto;object-fit:cover},
   #slider-73-24{display:flex;flex-grow:1;max-height:500px} */
.sm-info--natural .sm-info__media {
  max-height: 500px;
}
.sm-info--natural .sm-info__img {
  width: auto;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sm-info--natural .sm-slider {
  display: flex;
  flex-grow: 1;
  max-height: 500px;
}
.sm-info--natural .sm-slider__frame,
.sm-info--natural .sm-slider__viewport,
.sm-info--natural .sm-slider__track,
.sm-info--natural .sm-slider__item,
.sm-info--natural .sm-slider__slide {
  height: 100%;
}
/* fit "center" (Werksvertretungen): #div_block-21-24{justify-content:center;
   max-height:500px}, #image-22-24{width:100%;object-fit:cover;max-height:384px}
   (height auto: the width/height attributes must not set it). */
.sm-info--center .sm-info__media {
  justify-content: center;
  max-height: 500px;
}
.sm-info--center .sm-info__img {
  width: 100%;
  height: auto;
  max-height: 384px;
  -o-object-fit: cover;
     object-fit: cover;
}
/* ------------------------------------------------------------------ *
 * Slider (template-parts/blocks/slider.php, src/js/slider.js) =       *
 * Oxygen ct_slider + unslider.css with the per-slider ID rules that   *
 * are identical on all three sliders (06 §3.1 "Slider").              *
 * ------------------------------------------------------------------ */
/* .ct-slider */
.sm-slider {
  width: 100%;
}
/* .unslider (Oxygen: overflow visible; #slider .unslider{padding:0}) */
.sm-slider__frame {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 0;
}
/* .oxygen-unslider-container (inline style from Unslider) */
.sm-slider__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
/* ul.unslider-wrap: #slider .unslider-wrap{display:flex}; width n×100 %
   and left −i×100 % inline. Unslider animated `left` 750ms with jQuery
   "swing" (= easeInOutSine). */
.sm-slider__track {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  transition: left 750ms cubic-bezier(0.37, 0, 0.63, 1);
}
/* li: #slider .unslider-wrap.unslider-carousel > li{padding:0} */
.sm-slider__item {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}
/* .ct-slide + .ct-slider .ct-slide{padding:0} */
.sm-slider__slide {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
}
.sm-slider__slide .sm-info__img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* a.unslider-arrow (unslider.css "Arrow styles" + #slider .unslider-arrow.next
   {right:10px;z-index:100} / .prev{left:10px;z-index:100}), as <button>s. */
.sm-slider__arrow {
  display: block;
  position: absolute;
  top: 50%;
  z-index: 100;
  width: 32px;
  height: 32px;
  margin: -16px 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  background: rgba(0, 0, 0, 0.2) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==') no-repeat scroll 50% 50% / 7px 11px;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease 0s;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.sm-slider__arrow:hover {
  opacity: 1;
}
.sm-slider__arrow:focus-visible {
  opacity: 1;
  outline-color: #fff;
}
.sm-slider__arrow--next {
  right: 10px;
  left: auto;
}
.sm-slider__arrow--prev {
  left: 10px;
  right: auto;
  transform: rotate(-180deg);
}
/* nav.unslider-nav: #slider .unslider .unslider-nav{position:absolute;bottom:0;
   left:0;right:0;z-index:100}. Today the dots are inline-blocks on one
   25.6px line (16px × 1.6) whose bottom edge sits on the baseline: 10×10
   boxes, 18px pitch, top edge 17.6px above the slider bottom (06 §3.1).
   Flex gives the same boxes without depending on button baselines. */
.sm-slider__nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: 25.6px;
  padding-top: 8px;
}
/* .unslider-nav ol li (+ Oxygen box-shadow, #slider … li{border-color:#fff}) */
.sm-slider__dot {
  display: block;
  flex: none;
  box-sizing: content-box;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 5px;
  background: transparent;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2) inset;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.sm-slider__dot.is-active {
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  cursor: default;
}
.sm-slider__dot:focus-visible {
  outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .sm-slider__track,
  .sm-slider__arrow {
    transition: none;
  }
}
/* ------------------------------------------------------------------ *
 * supermatic/contact-map (06 §3.5): library 291                       *
 * ------------------------------------------------------------------ */
/* #div_block-3-291{width:50%;padding:0} */
.sm-contact__map {
  width: 50%;
  padding: 0;
}
/* #code_block-6-291{width:100%;min-height:900px} (≤991 400px). The iframe
   is absolute so the box is exactly the min-height (06 §5.3). */
.sm-contact__frame {
  position: relative;
  width: 100%;
  min-height: 900px;
}
.sm-contact__iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* #div_block-4-291{width:50%} + .ct-new-columns > .ct-div-block{padding:20px} */
.sm-contact__text {
  width: 50%;
  padding: 20px;
}
@media (max-width: 991px) {
  .sm-contact__frame {
    min-height: 400px;
  }
}
/* ------------------------------------------------------------------ *
 * Block page and legal page wrappers (template-parts/page/*.php)      *
 * ------------------------------------------------------------------ */
/* #inner_content-10-29 (.ct-inner-content{width:100%}) */
.sm-blocks {
  width: 100%;
}
/* Fallback H1 until the sub-nav part (WP02) prints it: #headline-24-131 */
.sm-legal__title {
  width: 100%;
  margin: 0;
  padding: 0 20px;
}
/* #inner_content-23-131 */
.sm-legal__content {
  width: 100%;
  padding: 20px;
}
/* ------------------------------------------------------------------ *
 * Content from post_content / block fields (legal pages, Kontakt).    *
 * With preflight off these restate the browser defaults the pages     *
 * rely on (06 §3.6); they only matter if preflight ever comes back.   *
 * ------------------------------------------------------------------ */
@media all {
  .sm-prose p {
    margin-bottom: 1em;
  }
  .sm-prose ul {
    margin: 1em 0;
    padding-left: 40px;
    list-style: disc;
  }
  .sm-prose table {
    border-collapse: separate;
    border-spacing: 2px;
  }
  .sm-prose td,
  .sm-prose th {
    padding: 1px;
  }
  .sm-prose u {
    text-decoration: none;
  }
  .sm-prose h2,
  .sm-prose h2.has-medium-font-size {
    font-size: 30px;
    line-height: 1.6;
  }
  .sm-prose h3 {
    font-size: 24px;
  }
  /* Kontakt rich text (_rich_text-9-291): the last paragraph has no bottom
     margin today (measured, 06 §3.5); at ≤991 it ends the page content. */
  .sm-contact__body > p:last-child {
    margin-bottom: 0;
  }
}
@media all and (max-width: 768px) {
  .sm-prose h2,
  .sm-prose h2.has-medium-font-size {
    font-size: 22px;
  }
}
/*! sm-css:woo-flows */
/*
 * Cart, checkout, account flows (07). Owner: WP10.
 * Keep the "sm-css:woo-flows" marker comment above as the first line: dist/main.css
 * is not minified, and the build-order check greps these markers.
 *
 * Intentionally (almost) empty. Everything the flow pages need already exists:
 *  - the whole WooCommerce cascade incl. the page wrappers .sm-woo--cart/--checkout/--account,
 *    .sm-cart-wrap (gap 16px), .sm-cart-notice (+ p, svg, .sm-print) and the print rules:
 *    src/css/woocommerce.css (WP03) + src/css/base.css @media print (.no-print, .cross-sells);
 *  - layout of template-parts/page/woo.php and template-parts/woo/cart-notice.php: Tailwind
 *    utilities in the markup (p-5, w-full, flex flex-col items-start, shrink-0, UA button reset);
 *  - sub-nav row + h1: template-parts/shop-subnav.php / src/css/shell.css (WP02).
 * Verified pixel-identical against 07's baselines (migration/reference/oxygen-local-woo) without
 * any rule here, so nothing is added: a later rule in this file would win equal-specificity ties
 * against the WC cascade (07 §7.4). Add flow-specific rules only inside @media all { } (AD9) and
 * re-run scratch/wp10/flows.mjs + diff-masked.mjs afterwards.
 */
/*
 * CSS bundle entry (AD8). This file holds ONLY the @imports above, in a fixed
 * order (this comment sits below them so dist/main.css starts with the
 * woocommerce.css block). Do not add rules here and do not reorder: several
 * measured WooCommerce winners are equal-specificity ties decided by load
 * order (07 §7.4). postcss-import (built into Vite) needs every @import at the
 * top, which is why the Tailwind layers are imported as files too.
 *
 *  1. css/woocommerce.css   WP03  07 port: B (page CSS) → A (Global Styler) → C (custom sheet), one @media all {}
 *  2. tailwindcss/base            --tw-* defaults only (preflight is off)
 *  3. css/base.css          WP01  @font-face + normalize 7 + Oxygen globals (01 §7.3)
 *  4. tailwindcss/components
 *  5. css/components.css    WP01  shared utilities (.bg-texture, underline classes, skip link, focus ring)
 *  6. tailwindcss/utilities
 *  7. area files (scoped rules, @media all {} for classes from WC/plugins/menus/post_content):
 *     shell WP02 · listing WP04 · shop WP05 · product WP06 · home WP07 · blog WP08 · pages WP09 · woo-flows WP10
 *
 * Every file starts with a `/*! sm-css:<name> *\/` marker so the order can be
 * checked in dist/main.css: grep -o 'sm-css:[a-z-]*' dist/main.css
 */
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;

}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;

}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);

}
@media (min-width: 480px) {
  .sm\:absolute {
    position: absolute;

  }
  .sm\:inset-0 {
    inset: 0px;

  }
  .sm\:aspect-auto {
    aspect-ratio: auto;

  }
  .sm\:h-\[55px\] {
    height: 55px;

  }
  .sm\:h-full {
    height: 100%;

  }
  .sm\:min-h-\[180px\] {
    min-height: 180px;

  }
  .sm\:w-\[38\%\] {
    width: 38%;

  }
  .sm\:w-\[55px\] {
    width: 55px;

  }
  .sm\:flex-row {
    flex-direction: row;

  }
  .sm\:gap-3 {
    gap: 0.75rem;

  }
  .sm\:p-8 {
    padding: 2rem;

  }
  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;

  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;

  }
  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;

  }
  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;

  }
  .sm\:text-\[18px\] {
    font-size: 18px;

  }
  .sm\:text-\[24px\] {
    font-size: 24px;

  }

}
@media (min-width: 768px) {
  .md\:static {
    position: static;

  }
  .md\:mt-3 {
    margin-top: 0.75rem;

  }
  .md\:aspect-\[3\/2\] {
    aspect-ratio: 3/2;

  }
  .md\:h-auto {
    height: auto;

  }
  .md\:min-h-0 {
    min-height: 0px;

  }
  .md\:w-full {
    width: 100%;

  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }
  .md\:flex-col {
    flex-direction: column;

  }
  .md\:p-6 {
    padding: 1.5rem;

  }
  .md\:text-\[15px\] {
    font-size: 15px;

  }
  .md\:text-\[19px\] {
    font-size: 19px;

  }
  .md\:text-\[26px\] {
    font-size: 26px;

  }

}
@media (min-width: 769px) {
  .wpgb-md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}
@media (min-width: 992px) {
  .lg\:mb-8 {
    margin-bottom: 2rem;

  }
  .lg\:h-\[200px\] {
    height: 200px;

  }
  .lg\:w-1\/2 {
    width: 50%;

  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));

  }
  .lg\:gap-6 {
    gap: 1.5rem;

  }
  .lg\:p-12 {
    padding: 3rem;

  }
  .lg\:p-5 {
    padding: 1.25rem;

  }
  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;

  }
  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;

  }
  .lg\:pb-11 {
    padding-bottom: 2.75rem;

  }
  .lg\:text-\[20px\] {
    font-size: 20px;

  }
  .lg\:text-\[24px\] {
    font-size: 24px;

  }
  .lg\:text-\[32px\] {
    font-size: 32px;

  }

}
@media (min-width: 993px) {
  .wpgb-lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}
@media (min-width: 1121px) {
  .xl\:p-6 {
    padding: 1.5rem;

  }
  .xl\:text-\[32px\] {
    font-size: 32px;

  }

}
@media (min-width: 1201px) {
  .wpgb-xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));

  }
  .wpgb-xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));

  }

}
@media (min-width: 1333px) {
  .\32xl\:px-16 {
    padding-left: 4rem;
    padding-right: 4rem;

  }
  .\32xl\:pt-14 {
    padding-top: 3.5rem;

  }
  .\32xl\:text-\[22px\] {
    font-size: 22px;

  }

}