/*
 * Breakpoints: these three words mean these widths everywhere (requests, docs, comments).
 *
 *   Desktop   1024px and wider   @media (min-width: 1024px)
 *   Tablet    449px to 1023px    @media (min-width: 449px) and (max-width: 1023px)
 *   Mobile    448px and narrower @media (max-width: 448px)
 *
 *   Below Desktop (Tablet + Mobile): @media (max-width: 1023px)
 *   Above Mobile (Tablet + Desktop): @media (min-width: 449px)
 *
 * Two-column sections (cards side by side, text beside a picture) follow the way a Tablet is held:
 *   Stacked: Mobile, and Tablet held upright
 *     @media (max-width: 448px), (max-width: 1023px) and (orientation: portrait)
 *   Columns: Desktop, and Tablet held sideways (everything else)
 * (orientation compares the window's width and height: portrait = taller than wide.)
 *
 * CSS can't use custom properties inside @media, so stylesheets write the numbers out as above; the properties
 * below carry the same values for scripts:
 *   getComputedStyle(document.documentElement).getPropertyValue('--sr-bp-desktop-min')
 * Luma (the parent theme) has an older switch of its own at 768px (its phone layout below that). The theme does not
 * follow it; only the header's 768-1023px block refers to it, to undo Luma's menu bar there.
 */
:root {
    --sr-bp-mobile-max: 448px;
    --sr-bp-tablet-min: 449px;
    --sr-bp-tablet-max: 1023px;
    --sr-bp-desktop-min: 1024px;
}

/*
 * 4px grid (owner, 4 November 2026; docs/spacing-grid.html): every pixel measurement in the theme, font sizes included,
 * is a multiple of 4px. 1rem is 10px here (Luma), so text sizes are 1.2rem, 1.6rem, 2rem, 2.4rem … Luma's body text is
 * 1.4rem (14px); the theme's base text is 16px, which every element without a size of its own inherits.
 */
html body {
    font-size: 1.6rem;
}

/*
 * One content width for the whole site: content is at most 1372px wide and keeps at least 48px
 * from the screen edge (16px at 448px and narrower). Backgrounds stay full width; only the side
 * padding grows on wide screens. The header, the video hero and the CMS sections use the same
 * max(48px, (100% - 1372px) / 2) padding, so everything lines up on the same two edges.
 * Selectors start with body .page-wrapper to win over Luma's styles-l.css, which loads after this
 * file and has page-specific container rules of its own (e.g. .checkout-cart-index .page-main).
 */
body .page-wrapper .breadcrumbs,
body .page-wrapper .page-main,
body .page-wrapper .page.messages,
body .page-wrapper .top-container {
    box-sizing: border-box;
    max-width: none;
    padding-right: max(48px, calc((100% - 1372px) / 2));
    padding-left: max(48px, calc((100% - 1372px) / 2));
}

@media (max-width: 448px) {
    body .page-wrapper .breadcrumbs,
    body .page-wrapper .page-main,
    body .page-wrapper .page.messages,
    body .page-wrapper .top-container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/*
 * Checkbox: the theme's checkbox is a whole card (owner, 3 November 2026). A white card with 12px corners and
 * a soft shadow, the box on the left (Iconsax TwoTone square, grey), the text beside it. Ticked, the box becomes the
 * tick-square and the card gets an orange edge and tint. The label covers the card, so a click anywhere ticks the box.
 *
 * Markup: the class sr-checkbox on the box's wrapper, the input and its label as direct children:
 *   <div class="field choice sr-checkbox"><input type="checkbox" id="x"><label class="label" for="x">…</label></div>
 * Magento's own forms get the class from the theme's scripts: the Customer Dashboard address form
 * ("Als Standard-… verwenden", satrunner-account-dashboard.js) and every checkbox on the checkout
 * (satrunner-checkout.js). The card takes the width of where it sits; set it there. Docs: docs/checkbox.html
 *
 * Colours are variables, so a version only swaps them: sr-checkbox--blue (the terms at the checkout, owner,
 * 3 November 2026) is white when unticked like every card, and blue instead of orange when ticked (edge, light blue
 * background, tick). The blue is Luma's (#1979c3, the checkout's order button); the theme has no blue of its own yet.
 */
body .sr-checkbox {
    --sr-checkbox-accent: #f26a21;
    --sr-checkbox-tint: rgba(242, 106, 33, 0.06);
    --sr-checkbox-ring: rgba(242, 106, 33, 0.4);
    --sr-checkbox-edge: rgba(13, 13, 13, 0.08);
    --sr-checkbox-edge-hover: rgba(13, 13, 13, 0.24);
    --sr-checkbox-fill: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--sr-checkbox-edge);
    border-radius: 12px;
    background: var(--sr-checkbox-fill);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    color: #1f2328;
    font-size: 1.6rem;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body .sr-checkbox:hover {
    border-color: var(--sr-checkbox-edge-hover);
}

body .sr-checkbox:has(> input:checked) {
    border-color: var(--sr-checkbox-accent);
    background: var(--sr-checkbox-tint);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--sr-checkbox-accent);
}

/* The box's mask would hide an outline, so keyboard focus shows on the card */
body .sr-checkbox:has(> input:focus-visible) {
    outline: 3px solid var(--sr-checkbox-ring);
    outline-offset: 2px;
}

body .sr-checkbox > .label {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow-wrap: break-word;
    cursor: pointer;
}

body .sr-checkbox > .label::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* The box: Iconsax TwoTone square (grey), tick-square when ticked (orange), drawn as a mask over the colour */
body .sr-checkbox > input[type="checkbox"] {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: #86868b;
    -webkit-mask: url('../images/icons/cd/square.svg') center / contain no-repeat;
    mask: url('../images/icons/cd/square.svg') center / contain no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body .sr-checkbox > input[type="checkbox"]:checked {
    background-color: var(--sr-checkbox-accent);
    -webkit-mask-image: url('../images/icons/cd/tick-square.svg');
    mask-image: url('../images/icons/cd/tick-square.svg');
}

body .sr-checkbox > input[type="checkbox"]:focus-visible {
    outline: none;
}

/* A required box left unticked (Magento's validation marks it .mage-error): red box and edge, the message under the
   card. Ticked, it turns orange and the message goes at once, before Magento checks again. */
body .sr-checkbox:has(> input.mage-error:not(:checked)) {
    margin-bottom: 28px;
    border-color: #e02b27;
}

body .sr-checkbox > input[type="checkbox"].mage-error:not(:checked) {
    background-color: #e02b27;
}

body .sr-checkbox > div.mage-error {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    margin: 0;
    white-space: nowrap;
}

body .sr-checkbox:has(> input:checked) > div.mage-error {
    display: none;
}

/* Blue: white when unticked; ticked, a blue edge, a light blue background and a blue tick */
body .sr-checkbox--blue {
    --sr-checkbox-accent: #1979c3;
    --sr-checkbox-tint: rgba(25, 121, 195, 0.06);
    --sr-checkbox-ring: rgba(25, 121, 195, 0.4);
}