/* Smekker CI, selected photo concept 6. Native actions and state semantics retained. */
:root {
    --smekker-button-surface: #f3faf7;
    --smekker-button-line: #d1e7e1;
    --smekker-button-ink: #15353d;
    --smekker-button-primary: #277773;
    --smekker-button-shadow: inset 0 1px 0 #fff, 0 3px 7px rgb(25 70 67 / 10%);
}
.smekker-header .smekker-account-controls { padding: 0; border: 0; border-radius: 0; background: transparent; }
.button, .smekker-menu-button, .smekker-cookie-notice button,
.smekker-product-card__price-access .login_for_price,
.sm-chat .sm-chat__launcher, .sm-chat .sm-chat__button, .sm-chat .sm-chat__secondary {
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid var(--smekker-button-line);
    border-radius: 999px;
    background: var(--smekker-button-surface);
    color: var(--smekker-button-ink);
    box-shadow: var(--smekker-button-shadow);
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.smekker-header .smekker-search { border: 1px solid var(--smekker-button-line); border-radius: 999px; box-shadow: var(--smekker-button-shadow); }
.smekker-header .smekker-search__button,
.button.smekker-primary, .button.smekker-quick-submit,
.sm-chat .sm-chat__launcher, .sm-chat .sm-chat__button, .smekker-all-categories {
    border: 1px solid #c9e2dc;
    border-radius: 999px;
    background: var(--smekker-button-primary);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 3px 7px rgb(25 70 67 / 14%);
}
.button.smekker-secondary, .button.smekker-account-banner__primary {
    border: 1px solid var(--smekker-button-line);
    border-radius: 999px;
    background: var(--smekker-button-surface);
    color: var(--smekker-button-ink);
    box-shadow: var(--smekker-button-shadow);
}
.smekker-hero-actions .button, .smekker-account-banner__actions .button { min-height: 48px; padding-inline: 22px; }
.smekker-product-card__price-access .login_for_price { display: flex; align-items: center; justify-content: center; padding: 9px 10px; font-size: 11px; line-height: 1.35; text-align: center; }
:is(.button,.login_for_price,.sm-chat .sm-chat__secondary):hover { border-color: #8dbeb4; background-color: #e6f4ee; color: var(--smekker-button-ink); }
:is(.smekker-search__button,.button.smekker-primary,.button.smekker-quick-submit,.sm-chat .sm-chat__launcher,.sm-chat .sm-chat__button):hover { background: #1b615e; color: #fff; }
:is(.button,.login_for_price,.sm-chat .sm-chat__launcher,.sm-chat .sm-chat__button,.sm-chat .sm-chat__secondary):focus-visible { outline: 3px solid #167a75; outline-offset: 3px; }
:is(.button,.sm-chat .sm-chat__button,.sm-chat .sm-chat__secondary):disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.smekker-login .button.smekker-login-submit,
.smekker-register .button.smekker-register-submit {
    border: 1px solid #c9e2dc; border-radius: 999px; background: var(--smekker-button-primary); color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 3px 7px rgb(25 70 67 / 14%);
}
.smekker-login .button.smekker-login-create {
    border: 1px solid var(--smekker-button-line); border-radius: 999px; background: var(--smekker-button-surface); color: var(--smekker-button-ink); box-shadow: var(--smekker-button-shadow);
}
.smekker-login .button.smekker-login-submit:hover,
.smekker-register .button.smekker-register-submit:hover { background: #1b615e; color: #fff; }
.smekker-all-categories:focus-visible, .smekker-menu-button:focus-visible { outline: 3px solid #167a75; outline-offset: 3px; }
.smekker-login .button.smekker-login-submit:is(:hover,:focus,:active),
.smekker-register .button.smekker-register-submit:is(:hover,:focus,:active) { border-color: #8dbeb4; background: #1b615e; color: #fff; }
.smekker-login .button.smekker-login-create:is(:hover,:focus,:active) { border-color: #8dbeb4; background: #e6f4ee; color: var(--smekker-button-ink); }

/* Header utilities share one center line and an icon-above-label layout. */
.smekker-header .smekker-header__main { align-items: center; padding-block: 24px 8px; }
.smekker-header .smekker-header__search .smekker-search { margin: 0; }
.smekker-header .smekker-header-actions { gap: 24px; align-items: center; }
.smekker-header .smekker-contact-strip,
.smekker-header .smekker-contact-strip a { color: #111; }
.smekker-header .smekker-contact-strip svg { stroke: #111; }
.smekker-header .smekker-account-controls { position: relative; display: grid; align-content: start; width: max-content; max-width: 180px; height: 80px; padding: 0; }
.smekker-header .smekker-header-action,
.smekker-header .smekker-language-switcher__button {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    box-sizing: border-box; min-height: 80px; height: 80px; padding: 0; gap: 4px;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: #172f32; text-decoration: none;
}
.smekker-header .smekker-header-action__copy { display: grid; gap: 1px; min-width: 0; max-width: 100%; justify-items: center; text-align: center; }
.smekker-header .smekker-header-action strong,
.smekker-header .smekker-language-switcher__button { font-size: 16px; line-height: 1.3; font-weight: 600; }
.smekker-header .smekker-header-action small { display: block; font-size: 13px; line-height: 1.35; font-weight: 400; color: #526769; }
.smekker-header .smekker-action-icon,
.smekker-header .smekker-language-switcher__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 0; border-radius: 0; background: none; color: #147e7b; }
.smekker-header .smekker-action-icon svg { width: 34px; height: 34px; }
.smekker-header .smekker-account-controls .smekker-header-action--account { min-width: 0; width: 100%; }
.smekker-header .smekker-account-controls .smekker-header-action__copy { width: 100%; }
.smekker-header .smekker-account-controls--signed-in .smekker-header-action--account { min-height: 80px; height: 80px; }
.smekker-header .smekker-header-language { max-width: none; }
.smekker-header .smekker-language-switcher__button { position: relative; min-width: 96px; }
.smekker-header .smekker-language-switcher__button::after { position: absolute; top: 47px; right: 0; }
.smekker-header .smekker-header-action:hover,
.smekker-header .smekker-language-switcher__button:hover { background: transparent; color: #147e7b; }
.smekker-header .smekker-header-action:focus-visible,
.smekker-header .smekker-language-switcher__button:focus-visible { outline: 3px solid #147e7b; outline-offset: 4px; border-radius: 3px; }
.smekker-mega-root > summary::after,
.smekker-mega-branch > summary::after { color: #147e7b; border-color: #8dbeb4; background: #e7f4ef; }

/* The first photo row straddles the hero edge; later rows stay in normal flow. */
.smekker-home-categories.smekker-home-section {
    --smekker-category-size: clamp(112px, calc((100vw - 116px) / 8), 124px); position: relative; z-index: 3;
    margin-top: calc(var(--smekker-category-size) / -2); padding-block: 0;
    overflow: visible;
}
.smekker-home-categories .smekker-category-cards {
    display: grid; grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(8,minmax(0,1fr)); gap: 30px 12px; overflow: visible;
}
.smekker-home-categories .smekker-category-cards a {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px;
    gap: 15px; padding: 0; border: 0; border-radius: 0; background: transparent;
    color: #111; box-shadow: none; text-align: center; text-decoration: none; transform: none;
}
.smekker-home-categories .smekker-category-cards a::before { content: none; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo {
    display: flex; flex: 0 0 var(--smekker-category-size); align-items: center; justify-content: center;
    box-sizing: border-box; width: var(--smekker-category-size); height: var(--smekker-category-size);
    border: 1px solid #d1ded9; border-radius: 50%; background: #f7faf7; color: inherit;
}
.smekker-category-photo img { display: block; width: 104px; height: 104px; max-width: 84%; max-height: 84%; object-fit: contain; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--raucher { background: #fbf5f1; border-color: #eaded6; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--bistro { background: #fcf8ee; border-color: #e9dfc8; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--suess-getraenke { background: #faf4f5; border-color: #ead8dc; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--geschenk { background: #f6f5fa; border-color: #e2dced; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--pluesch { background: #fbf5ed; border-color: #e9dbca; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--mobile { background: #f0f6fa; border-color: #d7e3eb; }
.smekker-home-categories .smekker-category-cards a > .smekker-category-photo--paletten { background: #f5f7f4; border-color: #dce2d7; }
.smekker-home-categories .smekker-category-cards a strong {
    min-height: 36px; max-width: 100%; font-size: 15px; font-weight: 600; line-height: 1.2;
    color: #111; overflow-wrap: anywhere; word-break: normal; hyphens: auto;
}
.smekker-home-categories .smekker-category-cards a:hover .smekker-category-photo { border-color: #8dbeb4; }
.smekker-home-categories .smekker-category-cards a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.smekker-home-categories .smekker-category-cards a:focus-visible { outline: 3px solid #147e7b; outline-offset: 4px; box-shadow: none; border-radius: 4px; }
.smekker-home-categories::after { content: ''; display: block; height: 2px; margin-top: 36px; background: #e1e9e5; }
.smekker-home-products.smekker-home-section { padding-top: 48px; }
@media (min-width: 1101px) {
    .smekker-hero-wrap { padding-bottom: 32px; }
}
@media (max-width: 1100px) {
    .smekker-home-categories.smekker-home-section { --smekker-category-size: 124px; }
    .smekker-home-categories .smekker-category-cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .smekker-header .smekker-header-actions { gap: 15px; }
}
@media (max-width: 700px) {
    .smekker-home-categories .smekker-category-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .smekker-home-categories.smekker-home-section { --smekker-category-size: 124px; }
    .smekker-category-photo img { width: 104px; height: 104px; }
}
@media (max-width: 600px) {
    .smekker-header .smekker-header-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-items: center; }
    .smekker-header .smekker-header-language { min-width: 0; }
    .smekker-header .smekker-language-switcher,
    .smekker-header .smekker-language-switcher__details { display: block; width: 100%; }
    .smekker-header .smekker-language-switcher__button { width: 100%; min-width: 0; }
    .smekker-header .smekker-account-controls { width: 100%; max-width: 100%; }
    .smekker-product-card__price-access .login_for_price { font-size: 11px; }
}
@media (max-width: 470px) {
    .smekker-home-categories .smekker-category-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .button, .sm-chat .sm-chat__launcher, .sm-chat .sm-chat__button, .sm-chat .sm-chat__secondary { transition: none; }
}

/* Session email stays full in accessible text while its visual line can truncate. */
.smekker-header .smekker-account-email { display: block; width: 100%; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smekker-header :is(a[href],button,summary):not(:disabled):not([aria-disabled="true"]),
.smekker-home-categories .smekker-category-cards a[href],
.button:not(:disabled):not([aria-disabled="true"]) { cursor: pointer; }
.smekker-header :is(a[href],button,summary):not(:disabled):not([aria-disabled="true"]) *,
.smekker-home-categories .smekker-category-cards a[href] *,
.button:not(:disabled):not([aria-disabled="true"]) * { cursor: inherit; }
.smekker-header input[type="search"],
.smekker-header input[type="text"] { cursor: text; }
.smekker-header :is(button:disabled,[aria-disabled="true"]),
.button:is(:disabled,[aria-disabled="true"]) { cursor: not-allowed; }
.smekker-header :is(button:disabled,[aria-disabled="true"]) *,
.button:is(:disabled,[aria-disabled="true"]) * { cursor: inherit; }
@media (max-width: 600px) {
    .smekker-header .smekker-account-email { max-width: 100%; }
}

.smekker-header .smekker-account-menu { position: absolute; z-index: 80; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: grid; min-width: 170px; padding: 7px; border: 1px solid #cdded8; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgb(21 53 61 / 16%); }
.smekker-header .smekker-account-menu[hidden] { display: none; }
.smekker-header .smekker-account-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: #172f32; font-size: 15px; text-decoration: none; white-space: nowrap; }
.smekker-header .smekker-account-menu a:is(:hover,:focus-visible) { background: #edf7f2; color: #147e7b; }
.smekker-header .smekker-account-fallback { font-size: 13px; text-align: center; }
@media (max-width: 600px) {
    .smekker-header .smekker-account-menu { left: 0; transform: none; }
}
/* Keep the pre-existing translated quick-order card inside its clipping hero. */
@media (min-width: 1024px) and (max-width: 1320px) and (prefers-reduced-motion: no-preference) {
    .smekker-hero-stage > .smekker-quick-card { transform: translate(0, -42px); }
}
@media (min-width: 901px) and (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    .smekker-hero-stage > .smekker-quick-card { transform: translate(0, -24px); }
}