:root {
    --mm-black: #1a1810;
    --mm-light-bg: #f0ebe0;
    --color-primary: #c80a4d;
    --color-primary-text: #970638;
    --color-on-primary: #fff;
    --mm-petrol: #2f6260;
    --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--mm-light-bg);
    color: var(--mm-black);
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after { box-sizing: border-box; }

body.mmade-shop-shell { min-height: 100vh; margin: 0; background: var(--mm-light-bg); color: var(--mm-black); }
body.mmade-shop-shell img,
body.mmade-shop-shell svg { display: block; max-width: 100%; }
body.mmade-shop-shell button,
body.mmade-shop-shell input,
body.mmade-shop-shell select,
body.mmade-shop-shell textarea { font: inherit; }

.mmade-shop-chrome { display: flex; width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.mmade-shop-header { position: relative; z-index: 30; border-bottom: 1px solid rgb(26 24 16 / 20%); background: #f5f0e2; }
.mmade-shop-header .mmade-shop-chrome { min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; }
.mmade-shop-owner-logo { display: inline-flex; max-width: min(15rem, 40vw); min-height: 52px; align-items: center; color: inherit; text-decoration: none; }
.mmade-shop-owner-logo__image { width: auto; max-width: 13rem; height: 52px; object-fit: contain; object-position: left center; transition: transform 180ms ease; }
.mmade-shop-owner-logo__wordmark { overflow: hidden; font-size: clamp(.9rem, 1.8vw, 1.08rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.mmade-shop-owner-logo:hover .mmade-shop-owner-logo__image,
.mmade-shop-owner-logo:focus-visible .mmade-shop-owner-logo__image { transform: translateY(-2px); }
.mmade-shop-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.mmade-shop-nav > a,
.mmade-shop-language a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; font-size: .86rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mmade-shop-nav > a:hover,
.mmade-shop-language a:hover { text-decoration: underline; }
.mmade-shop-nav > .mmade-shop-cart { gap: 7px; text-decoration: none; }
.mmade-shop-cart__short { display: none; }
.mmade-shop-cart > strong { display: grid; min-width: 22px; min-height: 22px; padding-inline: 5px; place-items: center; border-radius: 50%; background: var(--mm-black); color: #fff; font-size: .68rem; font-variant-numeric: tabular-nums; line-height: 1; }
.mmade-shop-cart:hover > span { text-decoration: underline; }
.mmade-shop-language { display: inline-flex; border: 1px solid rgb(26 24 16 / 28%); }
.mmade-shop-language a { min-width: 42px; justify-content: center; text-decoration: none; }
.mmade-shop-language a[aria-current="true"] { background: var(--mm-black); color: #fff; }
.mmade-shop-skip { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 10px 14px; transform: translateY(-160%); background: var(--mm-black); color: #fff; font-weight: 700; }
.mmade-shop-skip:focus { transform: translateY(0); }
.mmade-shop-shell :focus-visible { outline: 3px solid var(--mm-petrol); outline-offset: 3px; }

.mmade-shop-footer { border-top: 1px solid rgb(26 24 16 / 20%); background: #f5f0e2; }
.mmade-shop-footer .mmade-shop-chrome { min-height: 128px; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; }
.mmade-shop-footer p { margin: 0; }
.mmade-shop-attribution { min-width: max-content; }
.mmade-shop-attribution p { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; color: rgb(26 24 16 / 68%); font-size: .76rem; }
.mmade-shop-attribution__brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.mmade-shop-attribution__brand img { width: 34px; height: 34px; object-fit: contain; }
.mmade-shop-attribution__brand strong { font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
.mmade-shop-attribution p a { font-size: inherit; font-weight: 700; }
.mmade-shop-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; }
.mmade-shop-footer a { color: inherit; font-size: .82rem; font-weight: 650; text-underline-offset: 4px; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
    .mmade-shop-chrome { width: min(100% - 24px, 1180px); }
    .mmade-shop-header .mmade-shop-chrome { min-height: 0; align-items: flex-start; padding-block: 12px; }
    .mmade-shop-owner-logo { min-height: 44px; }
    .mmade-shop-owner-logo__image { max-width: 8.5rem; height: 44px; }
    .mmade-shop-nav { flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
    .mmade-shop-nav > a { font-size: .78rem; }
    .mmade-shop-language a { min-width: 38px; }
    .mmade-shop-footer .mmade-shop-chrome { display: grid; }
    .mmade-shop-attribution { min-width: 0; }
    .mmade-shop-footer nav { justify-content: flex-start; }
}

@media (max-width: 520px) {
    .mmade-shop-header .mmade-shop-chrome { display: grid; gap: 4px; }
    .mmade-shop-nav { width: 100%; justify-content: space-between; gap: 6px; }
    .mmade-shop-nav > a { font-size: .74rem; }
    .mmade-shop-cart__full { display: none; }
    .mmade-shop-cart__short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { scroll-behavior: auto; transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; }
}
