/* The platform does not serve theme assets/fonts/* (404), so both faces load
   from CDNs: Open Sans from Google Fonts, Telegramo from the same GoGaTec
   Bunny CDN file the original gogatec.com site uses. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap");

@font-face {
    font-family: "Telegramo";
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("https://zone-1017553-2.b-cdn.net/01_files/font/font.woff2") format("woff2"),
        url("https://zone-1017553-2.b-cdn.net/01_files/font/font.woff") format("woff");
}

/* Theme-owned brand: GoGaTec blue #0A50A1 and ink #00121E. Unlayered so
 * this file (loaded after Appearance) owns the ramp. */
:root {
    --font-primary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-secondary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --brand-container-desktop: 1360px;
    --brand-container-1360: 1360px;

    --brand-color-primary-50:  #e7eef7;
    --brand-color-primary-100: #c5d6eb;
    --brand-color-primary-200: #9bb6db;
    --brand-color-primary-300: #6d92c8;
    --brand-color-primary-400: #3d6db4;
    --brand-color-primary-500: #0A50A1;
    --brand-color-primary-600: #08448a;
    --brand-color-primary-700: #06366d;
    --brand-color-primary-800: #04254b;
    --brand-color-primary-content: #ffffff;

    --brand-color-headings: #00121E;
    --brand-color-body: #00121E;

    --brand-color-secondary-400: #808080;
    --brand-color-secondary-content: #ffffff;
}

:root.dark {
    /* GoGaTec is light-only — keep native controls on the light scheme even if
       a stale dark class slips through before the force-light script. */
    color-scheme: light;
}

/* ----------------------------------------------------------------------------
 * Light/dark asset swaps (unused for GoGaTec — light logo only — kept so a
 * dark logo never flashes if Appearance still provides one).
 * -------------------------------------------------------------------------- */
.storefront-logo--dark { display: none !important; }
.storefront-logo--light { display: block; }
.theme-toggle { display: none !important; }

/* ----------------------------------------------------------------------------
 * Form controls — checkboxes
 *
 * The platform base.css ships native, browser-default checkboxes which read
 * small and inconsistent across the storefront. Re-skin every storefront
 * checkbox to match the B2B template (Figma): a larger rounded box with a
 * subtle border + shadow that fills with the brand primary and shows a white
 * check when selected. Colors reference the design tokens, so per-customer
 * branding (which overrides `--color-primary`) recolors the checked state too.
 *
 * `:not(.sr-only)` leaves visually-hidden checkboxes untouched — those may
 * drive custom visually-hidden patterns and must keep their native clipped box.
 * -------------------------------------------------------------------------- */
.storefront input[type="checkbox"]:not(.sr-only) {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-subtle, #e5e8ee);
    border-radius: 0.375rem;
    background-color: var(--color-surface-card, #ffffff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.storefront input[type="checkbox"]:not(.sr-only):checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

/* The check is masked rather than baked into the data URI so its colour comes
 * from --color-primary-content: a hardcoded white glyph disappears on a light
 * brand colour (a gold primary scores 1.65:1 against white). */
.storefront input[type="checkbox"]:not(.sr-only):checked::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-content);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 1rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.storefront input[type="checkbox"]:not(.sr-only):focus-visible {
    outline: 2px solid var(--color-primary, #3260e7);
    outline-offset: 2px;
}

.storefront input[type="checkbox"]:not(.sr-only):disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ----------------------------------------------------------------------------
 * Form controls — radio buttons
 *
 * Mirror the checkbox skin so every storefront radio is the same 24px control:
 * a circle that fills with the brand primary and shows a white center dot when
 * selected. Colors reference the design tokens, so per-customer branding
 * recolors the checked state too. `:not(.sr-only)` leaves visually-hidden radios
 * untouched. Native browser radios can't be resized reliably, so the size unification
 * requested for the storefront requires this `appearance: none` re-skin.
 * -------------------------------------------------------------------------- */
.storefront input[type="radio"]:not(.sr-only) {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-subtle, #e5e8ee);
    border-radius: 9999px;
    background-color: var(--color-surface-card, #ffffff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.storefront input[type="radio"]:not(.sr-only):checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

/* Masked for the same contrast reason as the checkbox check above. */
.storefront input[type="radio"]:not(.sr-only):checked::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-content);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='black'/%3E%3C/svg%3E") center / 1rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='black'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.storefront input[type="radio"]:not(.sr-only):focus-visible {
    outline: 2px solid var(--color-primary, #3260e7);
    outline-offset: 2px;
}

.storefront input[type="radio"]:not(.sr-only):disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ----------------------------------------------------------------------------
 * Form controls — select / dropdown
 *
 * Replace the browser's native dropdown arrow (tiny, unpositioned, and
 * inconsistent across OS/browser) with a custom chevron that is:
 *   - a consistent 1.125 rem (≈18 px), slightly larger than the default 16 px
 *     indicator most browsers render;
 *   - positioned 0.75 rem from the right border (not flush against the edge).
 *
 * `padding-right: 2.5rem` reserves space so option text never overlaps the
 * arrow (icon right-edge at 0.75 rem + icon width 1.125 rem = 1.875 rem,
 * plus ~0.625 rem breathing room). The rule's specificity (0,1,1) outranks
 * Tailwind's `px-*` utilities (0,1,0) so the reserved space is always applied
 * even when individual selects carry `px-2` or `px-3` utility classes.
 *
 * Dark-mode variant swaps the arrow to a lighter stroke so it stays legible
 * against dark `surface-input` backgrounds.
 * -------------------------------------------------------------------------- */
.storefront select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.125rem;
    padding-right: 2.5rem;
    cursor: pointer;
}

:root.dark .storefront select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
 * Form controls — toggle switch (.sf-switch)
 *
 * A pill switch built from a visually-hidden (.sr-only) native checkbox plus a
 * track whose ::after knob slides on :checked. The input stays .sr-only so it
 * escapes the global checkbox re-skin above while remaining a real, focusable,
 * form-submitting control (progressive enhancement: works with JS off). Colors
 * reference the design tokens, so per-customer branding recolors the on-state.
 * Used by the catalog-export column picker (switch + drag-to-reorder rows).
 * -------------------------------------------------------------------------- */
.sf-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}

.sf-switch__track {
    position: relative;
    flex-shrink: 0;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background-color: var(--color-border-subtle, #e5e8ee);
    transition: background-color 0.15s ease;
}

.sf-switch__track::after {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: var(--color-neutral-white, #ffffff);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.sf-switch input:checked + .sf-switch__track {
    background-color: var(--color-primary);
}

/* The knob rides ON the primary track once checked, so it takes the paired
 * foreground — a fixed white knob vanishes on a light brand colour. */
.sf-switch input:checked + .sf-switch__track::after {
    background-color: var(--color-primary-content);
    transform: translateX(1rem);
}

.sf-switch input:focus-visible + .sf-switch__track {
    outline: 2px solid var(--color-primary, #3260e7);
    outline-offset: 2px;
}

.sf-switch input:disabled + .sf-switch__track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
 * Catalog-export preview table
 *
 * Styles the live preview table on the account catalog-export page. Kept as a
 * component (rather than Tailwind utilities) because the platform base.css is
 * prebuilt and does not ship the per-cell utilities this needs (vertical-align,
 * last-row border reset). This file loads after base.css, so these rules win.
 * -------------------------------------------------------------------------- */
.sf-preview-table {
    border-collapse: collapse;
}

.sf-preview-table th,
.sf-preview-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle, #e5e8ee);
    text-align: left;
    vertical-align: top;
}

.sf-preview-table thead th {
    font-weight: 600;
    color: var(--color-headings, #1a2233);
    white-space: nowrap;
}

.sf-preview-table tbody td {
    color: var(--color-body, #3b4252);
}

.sf-preview-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ----------------------------------------------------------------------------
 * Native <dialog> centering
 *
 * The platform base.css ships Tailwind's Preflight, whose universal
 * `*, ::before, ::after { margin: 0 }` reset overrides the user-agent
 * `dialog { margin: auto }` rule that centers an open modal dialog. Without
 * this, every `showModal()` dialog (the canonical modal component plus the
 * inlined checkout / account dialogs) renders pinned to the top-left corner.
 * Re-assert the native centering here; an element selector outranks the `*`
 * reset, and this file loads after base.css.
 *
 * NOTE FOR CUSTOM THEMES: this rule is NOT in the platform base.css, so every
 * theme that uses `<dialog>` modals MUST re-declare it in its own stylesheet
 * (see docs/blade-api.md §9 "Modals" and docs/styling.md §10.4).
 * -------------------------------------------------------------------------- */
dialog {
    margin: auto;
}

/* ----------------------------------------------------------------------------
 * Checkout "deliver to my billing address" toggle
 *
 * The same-as-billing checkbox lives inside its <label> so it picks up the
 * shared checkbox skin above (it is a real native checkbox, not a visually
 * hidden peer). Because it is therefore not a previous sibling of the delivery
 * fields, neither Tailwind's `peer-*` nor `has-*` variants can reach them; a
 * panel-scoped `:has()` rule collapses the delivery fields when it is checked,
 * with no JavaScript. `:has()` is part of the supported browser baseline and is
 * already used elsewhere in the theme (the `has-[:checked]:` address cards).
 * -------------------------------------------------------------------------- */
.checkout__panel:has(.checkout__same-cb:checked) .checkout__delivery-body {
    display: none;
}

/* ----------------------------------------------------------------------------
 * Hidden scrollbar — horizontally-scrollable rows with their own arrow controls
 *
 * Tailwind ships no core utility for suppressing a native scrollbar, so this is
 * a targeted custom rule (docs/styling.md §10.4). Used by the header category row
 * (partials/nav.blade.php) — scrolling itself still works (touch, trackpad,
 * keyboard via the row's `tabindex`), only the native scrollbar chrome is
 * hidden in favor of the row's own prev/next arrow buttons.
 * -------------------------------------------------------------------------- */
.storefront-nav__links {
    scrollbar-width: none;
}

.storefront-nav__links::-webkit-scrollbar {
    display: none;
}

/* Same technique, for the product gallery's thumbnail rail — its own scroll
 * arrows replace the scrollbar on both axes (up/down in the tablet+ vertical
 * column, left/right in the horizontal strip on phones). */
.product-gallery__thumbs {
    scrollbar-width: none;
}

.product-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

/* Product photos stay at their intrinsic size inside the white square.
   A max-height cap plus width/height 100% was scaling small catalog
   images up to fill the box. */



/* GoGaTec category table (Telegramo + Nexus parity).
   Measured on gogatec.com: th 18px / line-height 1.25 / weight 500 / primary,
   td 18px / line-height 1.4286 / weight 400 / #535461, cell padding 2px 8px. */
.gogatec-category-table,
.gogatec-category-table th,
.gogatec-category-table td,
.gogatec-category-table p,
.gogatec-category-table .gogatec-category-table-header-cell-content p,
.gogatec-category-table .gogatec-category-table-cell-content p {
    font-family: "Telegramo", "Open Sans", sans-serif;
    font-size: 1.125rem;
    font-variant-ligatures: none;
}

.gogatec-category-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.75rem;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
}

.gogatec-category-table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-bottom: 0.25rem;
    scrollbar-width: thin;
}

.gogatec-category-table-scroll-top[hidden] {
    display: none;
}

.gogatec-category-table-scroll-spacer {
    height: 1px;
}

.gogatec-category-table-scroll-body {
    overflow: auto;
    position: relative;
    width: 100%;
    max-height: none;
    scrollbar-width: thin;
}

/* Sticky table head: the scroll wrapper (top + bottom horizontal scrollbars,
   width bounded to the content area) makes CSS position:sticky useless, so
   the thead is shifted via translateY from the table script instead. */
.gogatec-category-table-head {
    position: relative;
    z-index: 10;
    background: var(--color-surface-card, #fff);
    will-change: transform;
}

.gogatec-category-table-head--stuck {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.gogatec-category-table-header-cell {
    vertical-align: middle;
    background: var(--color-surface-card, #fff);
}

.gogatec-category-table-header-cell--sticky {
    position: sticky;
    left: 0;
    z-index: 11;
}

/* Quantity column pinned to the right edge during horizontal scrolling, like
 * the ArtNr column on the left (Nexus parity: both stay visible/editable). */
.gogatec-category-table-header-cell--sticky-right {
    position: sticky;
    right: 0;
    z-index: 11;
}

.gogatec-category-table-cell--sticky-right {
    position: sticky;
    right: 0;
    z-index: 1;
}

.gogatec-category-table-header-cell-content {
    padding: 1rem;
    min-width: max-content;
}

.gogatec-category-table-header-cell-content p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--color-primary, #0a50a1);
    white-space: pre-line;
}

.gogatec-category-table-row:nth-child(even) {
    background-color: #e3e3e3;
}

.gogatec-category-table-row:nth-child(even) .gogatec-category-table-cell {
    background-color: #e3e3e3;
}

.gogatec-category-table-row:nth-child(even) .gogatec-category-table-cell--sticky {
    background-color: #e3e3e3;
}

.gogatec-category-table-cell {
    vertical-align: middle;
    background: var(--color-surface-card, #fff);
}

.gogatec-category-table-cell--sticky {
    position: sticky;
    left: 0;
    z-index: 1;
}

.gogatec-category-table-cell-content {
    padding: 0.125rem 0.5rem;
}

.gogatec-category-table-cell-content p {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: calc(1.25 / 0.875);
    color: #535461;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gogatec-category-table-sku-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.gogatec-category-table-sku-link:hover {
    color: var(--color-primary, #0A50A1);
    text-decoration: underline dotted;
}

.gogatec-category-table-product-link {
    color: inherit;
    text-decoration: none;
}

.gogatec-category-table-product-link:hover {
    color: var(--color-primary, #0A50A1);
    text-decoration: none;
}

/* Matrix price cell — inherit the table typography (Telegramo, gray, regular)
 * instead of the platform price component's bold ink styling. */
.gogatec-category-matrix-price .gogatec-category-table-cell-content,
.gogatec-category-matrix-price .gogatec-category-table-cell-content * {
    font-family: inherit !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    color: #535461 !important;
    line-height: inherit !important;
    text-decoration: none !important;
}

/* Matrix quantity input — rounded, light border, transparent background so it
 * blends into the zebra rows like on gogatec.com; no spinner buttons. */
.gogatec-matrix-qty-input {
    /* Nexus measured: 96×28px, 0/8px padding, 1px #e3e3e3 border, radius 8px. */
    width: 6rem;
    height: 1.75rem;
    border: 1px solid #e3e3e3;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0 0.5rem;
    text-align: center;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 400;
    color: #535461;
    -moz-appearance: textfield;
    appearance: textfield;
}

.gogatec-matrix-qty-input::-webkit-outer-spin-button,
.gogatec-matrix-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Single bulk "Add to cart" button below the matrix table. */
.gogatec-matrix-bulk-actions {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
}

/* ============================================================
 * Katalog PDF tiles — leaf categories of the hidden "kataloge"
 * tree render as download tiles inside the category grid: cover
 * image, slide-up "PDF herunterladen" bar on hover, name below.
 * Clicking opens the PDF — there is no category detail page.
 * ============================================================ */

.gogatec-katalog-tile {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gogatec-katalog-tile:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.gogatec-katalog-tile__link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.gogatec-katalog-tile__link:hover {
    text-decoration: none;
}

.gogatec-katalog-tile__image-wrap {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 0.75;
    background: var(--color-surface-card, #fff);
}

.gogatec-katalog-tile__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-surface-card, #fff);
}

.gogatec-katalog-tile__cta {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-primary, #0a50a1);
    color: var(--color-primary-content, #fff);
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0.9;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gogatec-katalog-tile__link:hover .gogatec-katalog-tile__cta,
.gogatec-katalog-tile__link:focus-visible .gogatec-katalog-tile__cta {
    transform: translateY(0);
}

.gogatec-katalog-tile__title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-headings, #00121e);
}

/* PDF download button above the category matrix table (Nexus parity). */
.gogatec-matrix-pdf {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.625rem;
}

.gogatec-matrix-pdf-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-radius: 0.25rem;
    background: var(--color-primary, #0a50a1);
    padding: 0.625rem 1.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-content, #fff);
}

.gogatec-matrix-pdf-btn:hover {
    background: #00121e;
}

.gogatec-matrix-pdf-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.gogatec-matrix-bulk-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.25rem;
    background: #00121e;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
}

.gogatec-matrix-bulk-btn:hover {
    background: #0a50a1;
}

.gogatec-category-table-cart-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gogatec-category-table-add-btn {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.25rem;
    background: var(--color-primary, #0a50a1);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary-content, #fff);
}

.gogatec-category-table-add-btn:hover {
    background: var(--color-primary-600, #084580);
}

/* Full-bleed home hero sits ABOVE <main> (layout @yield('hero')).
 * Collapse the empty main and let the hero fill down to the grey footer. */
body.storefront--shop:has(.gogatec-home) .storefront__main {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 0;
    min-height: 0;
}

body.storefront--shop:has(.gogatec-home) .gogatec-home {
    flex: 1 1 auto;
    width: 100%;
    min-height: 60dvh;
}

@media (min-width: 768px) {
    body.storefront--shop:has(.gogatec-home) .gogatec-home {
        min-height: 70dvh;
    }
}

.gogatec-home {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Fallback for browsers without :has() support: ensure a sensible minimum
 * height so the hero never collapses to its content (Nexus parity). */
@supports not (selector(:has(*))) {
    .gogatec-home {
        min-height: calc(100dvh - 200px);
    }
}

.gogatec-home__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gogatec-home__overlay {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--color-headings) 80%, transparent);
}

/* Hero newsletter CTA — primary pill button under the headline.
   `.gogatec-cta-button` is the shared variant used on other pages
   (e.g. the Neuheiten newsletter button, Nexus parity). */
.gogatec-home__cta,
.gogatec-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    border-radius: 0.375rem;
    background: var(--color-primary, #0a50a1);
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary-content, #fff);
}

.gogatec-home__cta:hover,
.gogatec-cta-button:hover {
    background: var(--color-primary-600, #084580);
    text-decoration: none;
    color: var(--color-primary-content, #fff);
}

/* Neuheiten promo block (newsletter CTA + "Preisliste" box above the list) */
.gogatec-neuheiten-promo {
    margin-bottom: 2rem;
}

.gogatec-neuheiten-promo .gogatec-cta-button {
    margin-top: 0;
}

.gogatec-neuheiten-promo__cta-wrap {
    margin-bottom: 1.25rem;
}

.gogatec-neuheiten-promo__usb {
    max-width: 300px;
    height: auto;
    margin-top: 10px;
}

.gogatec-home__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: inherit;
    height: 100%;
    padding: 2rem 1.25rem;
    color: var(--color-primary-content);
}

.gogatec-lang {
    font-size: 0.65em;
    font-weight: 400;
    color: var(--color-placeholder);
    margin-left: 0.5rem;
}

.gogatec-txt-en {
    margin: 0 0 1.25rem 0;
    font-size: 0.75rem;
    color: var(--color-placeholder);
    line-height: 1.4;
}

/* GoGaTec category navigation + cards (Nexus parity) */
.gogatec-category-rail {
    width: 100%;
    padding: 1rem 1rem 1rem 0;
    flex-shrink: 0;
}

.gogatec-category-main {
    min-width: 0;
}

.gogatec-category-layout {
    gap: 0;
}

/* GoGaTec breadcrumbs — matches gogatec.com exactly: gray uppercase text,
   links carry a red underline (decoration color comes from the <a>, the
   text itself stays gray), slash is part of the link label, 8px gap. */
.gogatec-breadcrumbs {
    margin: 0 0 1rem 0;
    padding: 0.5rem 0;
    font-family: var(--font-primary);
}

.gogatec-breadcrumbs__trail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gogatec-breadcrumbs__item {
    display: flex;
    align-items: center;
    margin: 0;
}

.gogatec-breadcrumbs .gogatec-breadcrumb-link {
    /* The <a> is red so its underline paints red … */
    color: #e20000 !important;
    text-decoration: underline !important;
    cursor: pointer;
}

.gogatec-breadcrumbs .gogatec-breadcrumb-link:hover,
.gogatec-breadcrumbs .gogatec-breadcrumb-link:focus-visible {
    color: #e20000 !important;
    text-decoration: underline !important;
}

.gogatec-breadcrumbs .gogatec-breadcrumb-text,
.gogatec-breadcrumbs .gogatec-breadcrumb-current {
    /* … while the visible text is gray, like text-foreground-content on Nexus. */
    color: #535461 !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    text-transform: uppercase;
}

.gogatec-breadcrumbs .gogatec-breadcrumb-current {
    text-decoration: none !important;
}

/* Main nav: hamburger below 1280px, full link row above — matches gogatec.com,
   where the link row only fits from desktop width. */
.gogatec-nav-links {
    display: none;
}

@media (min-width: 1280px) {
    .gogatec-nav-links {
        display: flex;
    }

    .gogatec-nav-burger {
        display: none;
    }
}

/* GoGaTec chrome typography (Fall 13661/14001: website font + brand blue #0A50A1) */
.storefront-nav,
.gogatec-category-nav,
.gogatec-breadcrumbs {
    font-family: var(--font-primary);
}

.gogatec-category-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem;
    margin: 0;
    border: 0;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
    color: #535461;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
}

.gogatec-category-nav-toggle__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.gogatec-category-nav-panel {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .gogatec-category-nav:not(.gogatec-category-nav--open) .gogatec-category-nav-panel {
        display: none;
    }
}

.gogatec-category-nav-item {
    margin: 0;
}

.gogatec-category-nav a.gogatec-category-nav-link {
    display: block;
    color: #535461 !important;
    font-weight: 400;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.gogatec-category-nav a.gogatec-category-nav-link:hover {
    color: #0A50A1 !important;
    text-decoration: none !important;
}

.gogatec-category-nav a.gogatec-category-nav-link--active,
.gogatec-category-nav a.gogatec-category-nav-link--active:hover {
    color: #0A50A1 !important;
    font-weight: 500;
}

.gogatec-category-nav-text {
    display: block;
    padding: 0.125rem 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: inherit;
}

.gogatec-category-grid {
    margin-top: 0;
    align-items: stretch;
}

.gogatec-category-grid > li {
    display: flex;
    min-width: 0;
}

.gogatec-category-card {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.gogatec-category-card:hover {
    text-decoration: none;
}

.gogatec-category-card__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
    box-shadow:
        rgba(0, 0, 0, 0) 0 0 0 0,
        rgba(0, 0, 0, 0) 0 0 0 0,
        rgba(0, 0, 0, 0.1) 0 1px 3px 0,
        rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
}

.gogatec-category-card__image-wrap {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* White, not gray: contained product photos (white studio background)
       must blend into the tile so every tile looks uniformly filled. */
    background: var(--color-surface-card, #fff);
}

.gogatec-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 0.25rem 0.25rem 0 0;
}

.gogatec-category-card__label {
    display: flex;
    /* Three name lines (3 × 1.25rem) + 1rem vertical padding — fixed so
       every card in the grid keeps the exact same height. */
    flex: 0 0 4.75rem;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 4.75rem;
    max-height: 4.75rem;
    padding: 0.5rem 0;
}

.gogatec-category-card__name {
    display: -webkit-box;
    margin: 0;
    padding: 0 0.75rem;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    text-overflow: ellipsis;
    hyphens: auto;
    overflow-wrap: break-word;
    color: var(--color-headings, #00121e);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.gogatec-category-page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-headings, #00121e);
}

.gogatec-category-product-count {
    font-size: 0.875rem;
    color: #535461;
}

.gogatec-category-view {
    width: 100%;
}

.gogatec-category-view__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.gogatec-category-gallery {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    user-select: none;
}

.gogatec-category-gallery__thumbs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    width: 3.5rem;
}

.gogatec-category-gallery__thumb {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
    cursor: pointer;
}

.gogatec-category-gallery__thumb--active {
    outline: 2px solid var(--color-primary, #0A50A1);
    outline-offset: 1px;
}

.gogatec-category-gallery__thumb-image {
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 0.25rem;
}

.gogatec-category-gallery__main {
    flex: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;
    background: var(--color-surface-card, #fff);
}

.gogatec-category-gallery__main-image {
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 0.25rem;
}

/* Narrow screens: thumbnails move below the main image and the image
   itself scales down so the gallery never dominates the viewport. */
@media (max-width: 767px) {
    .gogatec-category-gallery {
        flex-direction: column;
        align-items: center;
    }

    .gogatec-category-gallery__main {
        order: 1;
        width: 100%;
        max-width: 18rem;
        flex: 0 0 auto;
    }

    .gogatec-category-gallery__thumbs {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* Nexus ExpandableDescription: the rich text stays in normal flow (so the
   grid row grows and pushes the matrix/table down on expand) and is clamped
   while collapsed via max-height = gallery column height (set by JS as
   --gogatec-desc-clamp). Absolute positioning broke this: the grid row never
   grew, so the expanded text slid under the following content. */
.gogatec-category-view__details {
    position: relative;
    min-height: 0;
}

.gogatec-category-view__rich-text.is-collapsed {
    overflow: hidden;
    max-height: var(--gogatec-desc-clamp, none);
    padding-bottom: 1rem;
}

.gogatec-category-view__rich-text.is-expanded {
    max-height: none;
    padding-bottom: 1rem;
}

.gogatec-category-view__expand-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 5rem;
    padding-bottom: 0.25rem;
    background: linear-gradient(to top, var(--color-background, #ffffff) 35%, transparent);
}

.gogatec-category-view__expand-less {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.gogatec-category-view__expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border-subtle, #e5e8ee);
    border-radius: 0.25rem;
    background: var(--color-primary, #0A50A1);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.25;
    cursor: pointer;
}

.gogatec-category-view__expand-btn:hover {
    background: var(--color-primary-600, #08448a);
}

.gogatec-category-view__expand-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.gogatec-category-view__expand-chevron--up {
    transform: rotate(180deg);
}

/* Category rich text — render the CMS HTML exactly like gogatec.com does:
   Nexus ships only `#category-view .rich-text-content p { font-family: Arial;
   color: black; }` plus a hidden-empty-paragraph rule, and lets every inline
   style (Arial wrapper, #0000FF headings, pt sizes) win. Do not override the
   CMS colors or fonts here. */
.gogatec-category-view__rich-text p:empty {
    display: none;
}

.gogatec-category-view__rich-text p {
    font-family: Arial;
    color: black;
    line-height: calc(1.25 / 0.875);
}

@media (min-width: 768px) {
    .gogatec-category-nav-toggle {
        display: none;
    }
}

@media (min-width: 768px) {
    .gogatec-category-view__grid {
        /* minmax(0, 1fr) keeps both halves equal — plain 1fr lets the
           gallery's min-content widen its column once the description
           returns to normal flow (columns visibly jumped on expand). */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Nexus parity: sidebar sits beside the content from tablet width up
   (gogatec.com keeps the rail visible down to ~768px), not only at the
   `desktop:` (1280px) utility breakpoint. Double class keeps this rule
   ahead of the single-class `flex-col` utility regardless of CSS order. */
@media (min-width: 768px) {
    .page .gogatec-category-layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .gogatec-category-rail,
    #category-navigation-rail {
        width: 15rem;
        padding: 1rem 1rem 1rem 0;
    }
}

@media (max-width: 767px) {
    .gogatec-category-rail,
    #category-navigation-rail {
        width: 100%;
        padding: 0 0 1rem 0;
    }
}

/* Products listing (search / all products): Nexus uses w-320 (320px) sidebar
   and gap-10. Search results show filters only — no category facet. */
@media (min-width: 1280px) {
    .gogatec-products-layout {
        gap: 2.5rem;
    }

    .gogatec-products-filters {
        width: 320px;
    }
}

/* Catalog filter: searchable multi-select dropdowns (GeorgHack pattern) */
.catalog-filter-active__reset {
    white-space: nowrap;
}

.catalog-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border-subtle, #e5e8ee);
    border-radius: 999px;
    background: var(--color-surface-card, #fff);
    color: var(--color-body, #4b5563);
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
}

.catalog-filter-tag:hover {
    border-color: var(--color-primary, #0A50A1);
    color: var(--color-primary, #0A50A1);
}

.catalog-filter-tag__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-filter-tag__x {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.catalog-filter-search {
    position: relative;
}

.catalog-filter-search__field {
    position: relative;
    display: flex;
    align-items: center;
}

.catalog-filter-search__input {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-surface-input-stroke, #d5d9e2);
    border-radius: 0.5rem;
    background: var(--color-surface-input, #fff);
    font-size: 0.875rem;
    color: var(--color-body, #4b5563);
    outline: none;
}

.catalog-filter-search__input:focus {
    border-color: var(--color-primary, #0A50A1);
}

.catalog-filter-search__chevron {
    position: absolute;
    right: 0.625rem;
    width: 1rem;
    height: 1rem;
    color: var(--color-body, #6b7280);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.catalog-filter-search.is-open .catalog-filter-search__chevron {
    transform: rotate(180deg);
}

.catalog-filter-search__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--color-border-subtle, #e5e8ee);
    border-radius: 0.5rem;
    background: var(--color-surface-card, #fff);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.catalog-filter-search__panel[hidden] {
    display: none !important;
}

/* --- Header (measured Nexus parity @ 1350px) ------------------------------
   Top: py 4px, gap 40px, logo 40px, 2px divider, user 14px/#535461,
   search flex-1 height 38px. Nav band ~48px via 12px vertical link padding. */
.gogatec-header-top {
    gap: 1rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

@media (min-width: 1024px) {
    .gogatec-header-top {
        gap: 2.5rem;
    }
}

.storefront-header .storefront-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.gogatec-header-divider {
    display: none;
    width: 2px;
    height: 3.5rem;
    flex-shrink: 0;
    background-color: #e3e3e3;
}

@media (min-width: 1024px) {
    .gogatec-header-divider {
        display: block;
    }
}

.gogatec-header-main {
    gap: 1rem;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    .gogatec-header-main {
        gap: 1.5rem;
        justify-content: flex-start;
    }
}

.gogatec-header-user {
    gap: 0.5rem;
}

.gogatec-header-user__avatar {
    width: 40px;
    height: 40px;
    background-color: #e4e4e4;
    color: #9a9a9a;
}

.gogatec-header-user__meta {
    line-height: 1.25;
}

.gogatec-header-user__meta p {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #535461;
}

.gogatec-header-search {
    max-width: none;
}

.gogatec-header-actions {
    gap: 0.75rem;
}

.gogatec-header-account svg {
    width: 24px;
    height: 24px;
}

.gogatec-nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 14px;
    line-height: 20px;
}

/* Search icon is positioned against the field, not the flex form. */
.gogatec-search-field {
    position: relative;
    display: block;
    width: 100%;
}

.gogatec-search-field > svg {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.gogatec-search-field input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.gogatec-search-field input[type="search"]::-webkit-search-decoration,
.gogatec-search-field input[type="search"]::-webkit-search-cancel-button,
.gogatec-search-field input[type="search"]::-webkit-search-results-button,
.gogatec-search-field input[type="search"]::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}

/* Nexus parity: the shop search fields use a fixed grey border, 35px text
 * inset for the magnifier icon and a near-black placeholder / icon color. */
#product-search,
#product-search-mobile {
    border: 1px solid #7E7E7E;
    padding-left: 35px;
}

#product-search {
    height: 38px;
    font-size: 14px;
    line-height: 20px;
    padding-right: 1rem;
    color: #535461;
}

#product-search-mobile {
    height: 3rem;
    font-size: 0.875rem;
}

#product-search::placeholder,
#product-search-mobile::placeholder {
    color: #02050D;
}

#product-search-icon,
#product-search-mobile-icon {
    color: #02050D;
}

/* --- Cart (Nexus custom-cart parity) --------------------------------------
   The old cart table ran at 14px, the "Complete your order" button was a
   full-width dark-navy (#00121e) bar on the summary card, and the delivery
   date used a custom display (DD/MM/YYYY + calendar icon) with the invisible
   native date input stretched on top so the native picker still opens. */
.cart-table,
.cart-table th,
.cart-table td,
.cart-table p,
.cart-table a,
.page--cart .cart__subtitle,
.page--cart .cart-table .price,
.page--cart .cart-table .price__current {
    font-size: 14px;
    line-height: 1.25;
}

.page--cart .cart__title {
    font-size: 24px;
    line-height: 32px;
}

/* size-16 / size-20 are not in the compiled utility set, so thumbs fell back
   to the intrinsic image (~120px) and stretched every row. */
.page--cart .cart__item-media,
.page--cart .cart__item-media img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    object-fit: cover;
}

.page--cart .cart-table .cart__item-media,
.page--cart .cart-table .cart__item-media img {
    width: 64px;
    height: 64px;
    max-width: 64px;
}

.page--cart .cart-table td,
.page--cart .cart-table th {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.page--cart .cart-table .price,
.page--cart .cart-table .price__current {
    font-weight: 400;
}

.page--cart .cart__date-container {
    width: 135px;
    max-width: 135px;
}

.page--cart .cart__date-ui {
    padding: 8px 15px;
    font-size: 14px;
}

.page--cart .cart-table input[type="number"] {
    font-size: 14px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.gogatec-cart-checkout-btn {
    background-color: #00121e;
    color: #fff;
}

.gogatec-cart-checkout-btn:hover {
    color: #fff;
}

.cart__date-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 9.5rem;
}

.cart__date-ui {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    border: 1px solid var(--color-border-subtle, #ccc);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 14px;
    color: var(--color-body, #535461);
    background: var(--color-surface-input, #fff);
}

.cart__date-icon {
    display: inline-flex;
    font-size: 1rem;
    color: var(--color-headings, #02050d);
}

.cart__date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gogatec-footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 8px;
}

.gogatec-footer-social a {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
}

.gogatec-footer-social a:hover {
    opacity: 0.85;
    text-decoration: none;
}


/* Content-page rules (kontakt, catalogues, dealers, about, sustainability) */
/* --- Kontakt / Ansprechpartner (kontakt.html) --- */
.gogatec-kontakt {
    min-height: 0;
}

.gogatec-kontakt-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 1.5rem 0;
}

.gogatec-kontakt-daten {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid #808080;
    border-radius: 0.25rem;
    background: rgba(128, 128, 128, 0.08);
    color: #00121E;
}

.gogatec-kontakt-daten p {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
}

.gogatec-kontakt-daten-firma {
    font-weight: 700;
    margin-bottom: 0.5rem !important;
}

.gogatec-kontakt-daten-adresse {
    margin-bottom: 0.5rem !important;
}

.gogatec-kontakt-daten-email {
    display: inline-block;
    margin-top: 0.5rem;
    color: #0A50A1;
    font-weight: 600;
    text-decoration: underline;
}

.gogatec-kontakt-daten-email:hover {
    opacity: 0.9;
}

.gogatec-kontakt-hinweis {
    font-size: 0.9375rem;
    color: #00121E;
    margin: 0 0 2rem 0;
    font-style: italic;
}

.gogatec-kontakt-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #00121E;
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #808080;
}

.gogatec-kontakt-section-title:first-of-type {
    margin-top: 0;
}

.gogatec-kontakt-section-email {
    font-weight: 400;
    font-size: 0.9375rem;
    color: #808080;
}

.gogatec-kontakt-link {
    color: #0A50A1;
    text-decoration: underline;
}

.gogatec-kontakt-link:hover {
    opacity: 0.9;
}

.gogatec-kontakt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .gogatec-kontakt-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.gogatec-kontakt-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #808080;
    border-radius: 0.25rem;
    background: #fff;
}

.gogatec-kontakt-card-image-wrap {
    width: auto;
    max-width: 200px;
    overflow: hidden;
    border-radius: 0.25rem;
    background: rgba(128, 128, 128, 0.08);
}

.gogatec-kontakt-card-image {
    width: auto;
    height: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
}

.gogatec-kontakt-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gogatec-kontakt-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #00121E;
    margin: 0;
}

.gogatec-kontakt-card-role {
    font-size: 0.875rem;
    color: #808080;
    margin: 0;
}

.gogatec-kontakt-card-contact {
    font-size: 0.875rem;
    color: #00121E;
    margin: 0.5rem 0 0 0;
}

/* --- Neuheiten (neuheiten.html) --- */
.gogatec-neuheiten {
    min-height: 0;
}

.gogatec-neuheiten-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 1.5rem 0;
}

.gogatec-neuheiten-toolbar {
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.gogatec-neuheiten-per-page-label,
.gogatec-neuheiten-sort-label {
    font-size: 0.9375rem;
    color: #00121E;
}

.gogatec-neuheiten-per-page-select,
.gogatec-neuheiten-sort-select {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #808080;
    border-radius: 0.25rem;
    background: #fff;
    color: #00121E;
    font-size: 0.9375rem;
}

.gogatec-neuheiten-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    font-size: 0.9375rem;
    color: #00121E;
}

.gogatec-neuheiten-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #808080;
    border-top-color: #0A50A1;
    border-radius: 50%;
    animation: gogatec-neuheiten-spin 0.7s linear infinite;
}

@keyframes gogatec-neuheiten-spin {
    to { transform: rotate(360deg); }
}

.gogatec-neuheiten-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gogatec-neuheiten-item {
    border: 1px solid #808080;
    border-radius: 0.25rem;
    background: #fff;
    overflow: hidden;
}

.gogatec-neuheiten-item-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 768px) {
    .gogatec-neuheiten-item-inner {
        flex-direction: row;
    }
}

.gogatec-neuheiten-item-image-wrap {
    flex-shrink: 0;
    width: 100%;
    max-width: 280px;
    overflow: hidden;
    background: #fff;
}

@media (min-width: 768px) {
    .gogatec-neuheiten-item-image-wrap {
        max-width: 240px;
    }
}

.gogatec-neuheiten-item-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: top left;
}

.gogatec-neuheiten-item-body {
    padding: 1rem;
    flex: 1;
    min-width: 0;
}

.gogatec-neuheiten-item-date {
    flex-shrink: 0;
    align-self: flex-start;
    margin: 1rem;
    padding: 0.35rem 0.6rem;
    background: rgba(128, 128, 128, 0.2);
    color: #00121E;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
}

@media (max-width: 767px) {
    .gogatec-neuheiten-item-date {
        align-self: flex-end;
    }
}

.gogatec-neuheiten-item-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 0.5rem 0;
}

.gogatec-neuheiten-item-content {
    margin-top: 0.25rem;
}

.gogatec-neuheiten-item-link-wrap {
    margin: 0.75rem 0 0 0;
}

.gogatec-neuheiten-item-link-wrap a {
    color: #0A50A1;
    text-decoration: underline;
}

.gogatec-neuheiten-item-link-wrap a:hover {
    opacity: 0.9;
}

.gogatec-neuheiten-error {
    padding: 1rem;
    color: #E20000;
    font-size: 0.9375rem;
}

.gogatec-neuheiten-pagination {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #808080;
}

.gogatec-neuheiten-pagination-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.gogatec-neuheiten-pagination-link {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    min-width: 2.5rem;
    text-align: center;
    border: 1px solid #808080;
    border-radius: 0.25rem;
    background: #fff;
    color: #00121E;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.gogatec-neuheiten-pagination-link:hover:not(.is-disabled):not(.is-current) {
    background: rgba(128, 128, 128, 0.1);
}

.gogatec-neuheiten-pagination-link.is-current {
    background: #0A50A1;
    color: #fff;
    border-color: #0A50A1;
}

.gogatec-neuheiten-pagination-link.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.gogatec-neuheiten-pagination-info {
    margin: 0;
    font-size: 0.875rem;
    color: #808080;
}

.gogatec-neuheiten-detail {
    margin-top: 0;
}

.gogatec-neuheiten-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: #0A50A1;
    text-decoration: underline;
}

.gogatec-neuheiten-back:hover {
    opacity: 0.9;
}

.gogatec-neuheiten-article {
    max-width: 52rem;
}

.gogatec-neuheiten-article-image-wrap {
    margin-bottom: 1rem;
    max-width: 320px;
}

.gogatec-neuheiten-article-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.25rem;
}

.gogatec-neuheiten-article-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 1rem 0;
}

.gogatec-neuheiten-article-content {
    font-size: 0.9375rem;
    color: #00121E;
    line-height: 1.5;
}

.gogatec-neuheiten-article-content p {
    margin: 0 0 0.5rem 0;
}

/* Links im Rich-Text wie „Zum Dokument / PDF“-Link formatieren */
.gogatec-neuheiten-article-content a {
    color: #0A50A1;
    text-decoration: underline;
}

.gogatec-neuheiten-article-content a:hover {
    opacity: 0.9;
}

/* Pseudo-Listen: Absätze mit <br> (z. B. • Zeile<br>• Zeile) lesbarer machen */
.gogatec-neuheiten-article-content p br {
    display: block;
    margin-top: 0.35rem;
}

/* Listen aus Redactor / Rich-Text im Artikel-Content */
.gogatec-neuheiten-article-content ul,
.gogatec-neuheiten-article-content ol {
    margin: 0.5rem 0 1rem 0;
    padding-left: 1.5rem;
}

.gogatec-neuheiten-article-content ul {
    list-style-type: disc;
}

.gogatec-neuheiten-article-content ul ul {
    list-style-type: circle;
    margin-top: 0.25rem;
}

.gogatec-neuheiten-article-content ol {
    list-style-type: decimal;
}

.gogatec-neuheiten-article-content ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.25rem;
}

.gogatec-neuheiten-article-content li {
    margin-bottom: 0.35rem;
    padding-left: 0.25rem;
}

.gogatec-neuheiten-article-content li:last-child {
    margin-bottom: 0;
}

/* Redactor-Klassen falls verwendet */
.gogatec-neuheiten-article-content .redactor-list,
.gogatec-neuheiten-article-content .list-bullet {
    list-style-type: disc;
}

.gogatec-neuheiten-article-content .list-decimal {
    list-style-type: decimal;
}

.gogatec-neuheiten-article-link-wrap {
    margin: 1rem 0 0 0;
}

.gogatec-neuheiten-link {
    color: #0A50A1;
    text-decoration: underline;
}



.gogatec-neuheiten-link:hover {
    opacity: 0.9;
}

/* --- Footer: grey + blue bands, flush to the page content --- */
.gogatec-footer {
    margin-top: 0;
}

.gogatec-footer-container {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.gogatec-footer-block {
    width: 100%;
}

.gogatec-footer-block-grey {
    background-color: #808080;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
}

/* Nexus parity: address / contact / social sit on the left, legal links
 * on the right of the same grey band (short hairline under the links). */
.gogatec-footer-block-grey .gogatec-footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.gogatec-footer-grey-left {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 40px;
    text-align: left;
    color: #fff;
    font-size: 1rem;
}

.gogatec-footer-heading {
    margin: 0 0 5px 0;
    font-weight: 400;
    font-size: 0.9375rem;
    display: block;
}

.gogatec-footer-adresse-block,
.gogatec-footer-kontakt-block,
.gogatec-footer-social-block {
    font-weight: 400;
}

.gogatec-footer-grey-left p {
    margin: 0 0 0.15rem 0;
}

.gogatec-footer-adresse {
    margin-bottom: 0;
}

.gogatec-footer-kontakt-block .gogatec-footer-tel {
    margin-bottom: 0.15rem;
}

.gogatec-footer-grey-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    margin-top: 25px;
    border-top: 1px solid #999;
    padding-top: 15px;
    color: #fff;
    font-size: 0.9em;
}

.gogatec-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    color: #fff;
}

.gogatec-footer-link {
    color: #fff;
    text-decoration: none;
}

.gogatec-footer-link:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.gogatec-footer-sep {
    opacity: 0.8;
}

.gogatec-footer-block-blue {
    background-color: var(--color-primary, #0A50A1);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.gogatec-footer-block-blue .gogatec-footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.gogatec-footer-copyright {
    margin: 0;
    color: #fff;
    font-size: 0.9375rem;
    text-align: left;
}

.gogatec-footer-link-inline {
    color: #fff;
    text-decoration: underline;
}

.gogatec-footer-link-inline:hover {
    opacity: 0.9;
}

.gogatec-footer-foerderung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    text-align: right;
}

@media (max-width: 767px) {
    .gogatec-footer-block-blue .gogatec-footer-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .gogatec-footer-grey-left {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .gogatec-footer-grey-right {
        font-size: 0.8em;
        margin-top: 12px;
        line-height: 1.6;
    }
    .gogatec-footer-legal {
        justify-content: flex-start;
        width: 100%;
    }
    .gogatec-footer-foerderung {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .gogatec-footer-legal {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

.gogatec-footer-foerderung-text {
    margin: 0;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.35;
}

.gogatec-footer-foerderung-logo {
    width: 60px;
    height: auto;
    display: block;
    flex-shrink: 0;
}

/* --- Händler page --- */
.gogatec-haendler {
    min-height: 0;
}

.gogatec-haendler-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 0.5rem 0;
}

.gogatec-haendler-intro {
    font-size: 1rem;
    color: #333;
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

/* Region headings – styled like kontakt section titles */
.gogatec-haendler-region-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0A50A1;
    margin: 2.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #0A50A1;
}

.gogatec-haendler-region-title:first-of-type {
    margin-top: 0;
}

/* Grid list – responsive like kontakt */
.gogatec-haendler-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .gogatec-haendler-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gogatec-haendler-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Cards */
.gogatec-haendler-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.gogatec-haendler-card:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.gogatec-haendler-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
}

.gogatec-haendler-card-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 0.25rem 0;
}

.gogatec-haendler-card-subtitle {
    font-size: 0.875rem;
    color: #808080;
    margin: 0 0 0.5rem 0;
    font-style: italic;
}

.gogatec-haendler-card-address {
    font-size: 0.9375rem;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

.gogatec-haendler-card-contact {
    font-size: 0.9375rem;
    color: #333;
    margin: 0.5rem 0 0 0;
    line-height: 1.6;
}

/* Links container – stacked with spacing */
.gogatec-haendler-card-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

.gogatec-haendler-link {
    color: #0A50A1;
    text-decoration: underline;
    font-size: 0.9375rem;
}

.gogatec-haendler-link:hover {
    opacity: 0.9;
}

/* --- Über uns (ueber_uns.html) --- */
.gogatec-ueber-uns {
    min-height: 0;
}

.gogatec-ueber-uns-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #00121E;
    margin: 0 0 1.5rem 0;
}

.gogatec-ueber-uns-content {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #00121E;
}

.gogatec-ueber-uns-content p {
    margin: 0 0 1rem 0;
}

.gogatec-ueber-uns-divider {
    width: 100%;
    max-width: 801px;
    height: 2px;
    background-color: #0A50A1;
    margin: 2.5rem 0;
}

.gogatec-ueber-uns-h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0A50A1;
    margin: 1.5rem 0 0.75rem 0;
}

.gogatec-ueber-uns-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0A50A1;
    margin: 1.25rem 0 0.5rem 0;
}

.gogatec-ueber-uns-h3 {
    font-size: 1.125rem;
    font-weight: 400;
    color: #00121E;
    margin: 1rem 0 0.5rem 0;
}

.gogatec-ueber-uns-h3 .gogatec-ueber-uns-accent {
    color: #0A50A1;
}

.gogatec-ueber-uns-accent {
    color: #0A50A1;
}

.gogatec-ueber-uns-content .gogatec-ueber-uns-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5rem 0;
}

.gogatec-ueber-uns-content .gogatec-ueber-uns-img-wide {
    width: 100%;
    max-width: 801px;
}

.gogatec-ueber-uns-content a {
    color: #0A50A1;
    text-decoration: underline;
}

.gogatec-ueber-uns-content a:hover {
    opacity: 0.9;
}

.gogatec-ueber-uns-tagline {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
    margin: 0.5rem 0 0 0;
    text-align: center;
    color: #00121E;
}

.gogatec-ueber-uns-media,
.gogatec-ueber-uns-audio {
    max-width: 100%;
    margin: 0.5rem 0;
}

.lang-en {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color-placeholder);
}

/* Profile — Additional information (Nexus boxed layout) */
.gogatec-profile-extra__head {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border-subtle, #e3e3e3);
}

.gogatec-profile-extra__title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-headings, #00121e);
}

.gogatec-profile-extra__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.gogatec-profile-extra__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .gogatec-profile-extra__row {
        grid-template-columns: 1fr 1fr;
    }
}

.gogatec-profile-extra__inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.gogatec-profile-extra__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gogatec-profile-extra__label {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #535461;
}

.gogatec-profile-extra__inline .gogatec-profile-extra__label {
    margin: 0;
}

.gogatec-profile-extra__value {
    font-size: 1rem;
    color: #535461;
    word-break: break-word;
}

.gogatec-profile-extra__box {
    width: 100%;
    border: 1px solid #e3e3e3;
    border-radius: 0.5rem;
    color: #535461;
    font-size: 1rem;
    line-height: 1.5;
}

.gogatec-profile-extra__box--address {
    padding: 1.5rem;
}

.gogatec-profile-extra__box--conditions {
    padding: 1rem;
}

.gogatec-profile-extra__box-title {
    margin: 0;
    font-weight: 500;
    word-break: break-word;
}

.gogatec-profile-extra__box-lines {
    margin-top: 0.5rem;
}

.gogatec-profile-extra__box-lines p,
.gogatec-profile-extra__box--conditions p {
    margin: 0;
    word-break: break-word;
}

.gogatec-profile-extra__box-lines p + p {
    margin-top: 0.25rem;
}

.gogatec-profile-extra__muted {
    margin: 0;
    color: #808080;
}

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

@media (min-width: 1024px) {
    .page--product .product {
        gap: 3.5rem;
    }
}

.page--product .product-gallery__main {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    max-height: none;
    border: 0;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.page--product .product-gallery__photo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.page--product .product__sku,
.page--product .product__title {
    font-size: 24px;
    line-height: 32px;
    color: #535461;
}

.page--product .product__sku {
    font-weight: 600;
    line-height: 30px;
}

.page--product .product__title {
    font-weight: 500;
}

.gogatec-pdp-fav {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.gogatec-pdp-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .gogatec-pdp-price {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.gogatec-pdp-price__label {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #535461;
}

.gogatec-pdp-price__amount {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #00121e;
}

.gogatec-pdp-price__discount {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #535461;
}

.gogatec-pdp-add {
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.page--product .quantity-selector {
    gap: 0.5rem;
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.page--product .quantity-selector__btn,
.page--product .quantity-selector__input {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    background: #f3f4f6;
}

.page--product .product__cart-form {
    gap: 1rem;
}

.gogatec-pdp-attrs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    overflow: hidden;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.gogatec-pdp-attrs__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: #535461;
}

.gogatec-pdp-attrs__cell {
    padding: 0.25rem 0.75rem;
    background: #fff;
    font-size: 16px;
    line-height: 24px;
    color: #535461;
}

.gogatec-pdp-attr-link {
    color: #E20000;
    text-decoration: underline;
    word-break: break-all;
}

.gogatec-checkout__top,
.gogatec-checkout__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 1024px) {
    .gogatec-checkout__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .gogatec-checkout__bottom {
        grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
        align-items: stretch;
    }
}

.gogatec-checkout__billing .checkout__address {
    border: 1px solid #e3e3e3;
    background: #fff;
    box-shadow: none;
}

.gogatec-checkout__billing .checkout__address:not(:has(input:checked)) {
    display: none;
}

.gogatec-checkout__billing .checkout__address input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.gogatec-checkout__same-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.gogatec-checkout__action .checkout__method {
    border: 0;
    background: transparent;
    padding: 0.25rem 0;
    box-shadow: none;
}

.gogatec-checkout__legal {
    color: #E20000;
    font-weight: 600;
    text-decoration: underline;
}

.gogatec-checkout__total {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.gogatec-checkout__place {
    width: 100%;
    border: 0;
    background: #00121e;
    color: #fff;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}