/* Portal shop (custom:views/shop/index). Colours and fonts come from the facelift --mm-* tokens. */

.ars {
    --ars-accent: var(--mm-accent, #C8102E);
    --ars-accent-d: var(--mm-accent-d, #A00C24);
    --ars-accent-pale: var(--mm-accent-pale, #FBE9EC);
    --ars-ink: var(--mm-ink, #0E1621);
    --ars-ink-2: var(--mm-ink-2, #24313E);
    --ars-steel: var(--mm-steel, #5C6B7C);
    --ars-line: var(--mm-line, #E3E7EC);
    --ars-paper: var(--mm-paper, #F3F5F7);
    --ars-surface: var(--mm-surface, #FFFFFF);
    --ars-ok: var(--mm-ok, #147D4B);
    --ars-radius: 16px;
    --ars-shadow: 0 1px 2px rgba(14, 22, 33, .06), 0 4px 16px rgba(14, 22, 33, .05);
    --ars-shadow-hover: 0 2px 4px rgba(14, 22, 33, .06), 0 16px 40px rgba(14, 22, 33, .12);
    font-family: var(--mm-sans, 'IBM Plex Sans', system-ui, sans-serif);
    color: var(--ars-ink);
    margin: 0 auto;
    max-width: 1600px;
    padding-bottom: 48px;
}

.ars *, .ars *::before, .ars *::after { box-sizing: border-box; }
.ars button { font: inherit; cursor: pointer; }
.ars button:disabled { cursor: not-allowed; opacity: .45; }

/* Hero ------------------------------------------------------------------------------------------- */

.ars-hero {
    position: relative;
    display: grid;
    /* Named areas and fr tracks in both states, so the shrink into the pinned bar can animate. */
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr) auto;
    grid-template-areas: "text search cart";
    align-items: center;
    margin: 8px 0 20px;
    padding: 28px 32px;
    border-radius: 24px;
    color: #fff;
    /* Aretail red from the logo (client's mail of 2. 10. 2026: "lišta vyhledávání = červená"). */
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--ars-accent) 0%, var(--ars-accent-d) 100%);
    box-shadow: 0 20px 50px -24px rgba(160, 12, 36, .6);
    overflow: hidden;
}

.ars-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
    pointer-events: none;
}

.ars-hero > * { position: relative; z-index: 1; }

.ars-hero-text { grid-area: text; min-width: 0; max-height: 220px; margin-right: 24px; overflow: hidden; }
.ars-search { grid-area: search; }
.ars-cart-btn { grid-area: cart; margin-left: 24px; }

.ars-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.ars-title {
    margin: 6px 0 12px;
    font-family: var(--mm-cond, 'IBM Plex Sans Condensed', sans-serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
}

.ars-sub { display: flex; flex-wrap: wrap; gap: 8px; }

.ars-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
}

.ars-chip b { font-weight: 600; }
.ars-chip-muted { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .78); }

.ars-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0 18px;
    height: 54px;
    border-radius: 999px;
    background: #fff;
    color: var(--ars-steel);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35);
    font-weight: 400;
    cursor: text;
}

.ars-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ars-ink);
}

.ars-search:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 8px 24px -8px rgba(0, 0, 0, .35); }

.ars-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 22px 0 16px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ars-accent-d);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(14, 22, 33, .45);
    transition: transform .15s ease, background .15s ease;
}

.ars-cart-btn:hover { background: var(--ars-accent-pale); transform: translateY(-1px); }

.ars-cart-icon { position: relative; font-size: 20px; }

.ars-badge {
    position: absolute;
    top: -9px;
    right: -12px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ars-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}

.ars-badge.empty { transform: scale(0); }

/* Toolbar ---------------------------------------------------------------------------------------- */

.ars-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.ars-segment {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--ars-surface);
    box-shadow: var(--ars-shadow);
}

.ars-segment button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ars-steel);
    font-weight: 500;
    transition: background .15s, color .15s;
}

.ars-segment button span {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ars-paper);
    font-size: 12px;
}

.ars-segment button.active { background: var(--ars-ink); color: #fff; }
.ars-segment button.active span { background: rgba(255, 255, 255, .18); }

.ars-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ars-result-info { color: var(--ars-steel); font-size: 14px; }

.ars-sort {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ars-line);
    border-radius: 10px;
    background: var(--ars-surface);
    color: var(--ars-ink);
}

.ars-orders-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--ars-surface);
    color: var(--ars-ink) !important;
    font-weight: 500;
    text-decoration: none !important;
    box-shadow: var(--ars-shadow);
}

.ars-orders-link:hover { color: var(--ars-accent) !important; }

/* Layout ----------------------------------------------------------------------------------------- */

.ars-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.ars-cats {
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 96px);
    overflow: auto;
    padding: 16px 10px;
    border-radius: var(--ars-radius);
    background: var(--ars-surface);
    box-shadow: var(--ars-shadow);
}

.ars-cats-title {
    padding: 0 10px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ars-steel);
}

.ars-cats ul { margin: 0; padding: 0; list-style: none; }
.ars-cats ul ul { margin-left: 12px; padding-left: 8px; border-left: 2px solid var(--ars-line); }

.ars-cat {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ars-ink-2);
    font-size: 14px;
    text-align: left;
    transition: background .12s, color .12s;
}

.ars-cat em {
    font-style: normal;
    font-size: 12px;
    color: var(--ars-steel);
}

.ars-cat:hover { background: var(--ars-paper); }
.ars-cat.active { background: var(--ars-accent-pale); color: var(--ars-accent-d); font-weight: 600; }
.ars-cat.active em { color: var(--ars-accent-d); }

.ars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.ars-sentinel { height: 1px; }

/* Product card ----------------------------------------------------------------------------------- */

.ars-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--ars-radius);
    background: var(--ars-surface);
    box-shadow: var(--ars-shadow);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: ars-in .35s ease both;
}

.ars-card:hover { transform: translateY(-3px); box-shadow: var(--ars-shadow-hover); }
.ars-card.in-cart { box-shadow: 0 0 0 2px var(--ars-accent), var(--ars-shadow); }

@keyframes ars-in { from { opacity: 0; transform: translateY(8px); } }

.ars-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 18px;
    border: 0;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f3f6 100%);
}

/* The photo fills the square tile box and is fitted inside it (client's mail of 23. 10. 2026, SUP-1770
   point 1): with max-height only, a portrait photo grew taller than the square (a percentage height of an
   aspect-ratio box does not resolve), so its top and bottom were cut off and it looked off-centre. */
.ars-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: inherit;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .35s ease;
}

.ars-card:hover .ars-media img { transform: scale(1.06); }
.ars-noimg { font-size: 44px; color: #cfd6de; }

.ars-tags {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ars-tag {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    background: #fff;
    box-shadow: 0 1px 3px rgba(14, 22, 33, .12);
}

.ars-tag-mto { color: var(--mm-note, #2F5AA8); }
.ars-tag-sale { color: #fff; background: var(--ars-accent); }
.ars-tag-new { color: #fff; background: #1f8f4e; }
.ars-tag-mine { margin-left: auto; color: #e3a008; }

.ars-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }

.ars-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ars-steel);
}

.ars-name {
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ars-ink);
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ars-name:hover { color: var(--ars-accent-d); }

.ars-specs { display: flex; flex-wrap: wrap; gap: 4px; }

.ars-specs span {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--ars-paper);
    font-size: 12px;
    color: var(--ars-ink-2);
}

.ars-pack { font-size: 12px; color: var(--ars-steel); }
.ars-pack i { margin-right: 4px; opacity: .7; }

.ars-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.ars-price { font-size: 19px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.ars-price-lg { font-size: 28px; }
.ars-price-tbd { font-size: 14px; font-weight: 600; color: var(--mm-note, #2F5AA8); }
.ars-unit { font-size: 12px; color: var(--ars-steel); white-space: nowrap; }

.ars-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--ars-ink);
    color: #fff;
    font-weight: 600;
    transition: background .15s, transform .1s;
}

.ars-add:hover { background: var(--ars-accent); }
.ars-add:active { transform: scale(.96); }

.ars-stepper {
    display: inline-flex;
    align-items: center;
    height: 40px;
    border-radius: 12px;
    background: var(--ars-accent-pale);
    overflow: hidden;
}

.ars-stepper button {
    width: 36px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--ars-accent-d);
}

.ars-stepper button:hover { background: rgba(200, 16, 46, .12); }

.ars-stepper input {
    width: 48px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--ars-accent-d);
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.ars-stepper input::-webkit-outer-spin-button,
.ars-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ars-empty {
    grid-column: 1 / -1;
    padding: 64px 16px;
    text-align: center;
    color: var(--ars-steel);
}

.ars-empty i { font-size: 36px; opacity: .4; }

/* Buttons ---------------------------------------------------------------------------------------- */

.ars-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.ars-btn-primary { background: var(--ars-accent); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(200, 16, 46, .9); }
.ars-btn-primary:hover:not(:disabled) { background: var(--ars-accent-d); }
.ars-btn-ghost { background: var(--ars-paper); color: var(--ars-ink) !important; }
.ars-btn-block { width: 100%; }

.ars-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ars-steel);
}

.ars-icon-btn:hover { background: var(--ars-paper); color: var(--ars-ink); }

/* Cart drawer and quick view --------------------------------------------------------------------- */

body.ars-lock { overflow: hidden; }

.ars-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(14, 22, 33, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}

.ars.cart-open .ars-backdrop { opacity: 1; pointer-events: auto; }

.ars-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--ars-surface);
    box-shadow: -24px 0 60px rgba(14, 22, 33, .2);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.ars.cart-open .ars-drawer { transform: none; }

.ars-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 12px 24px;
    border-bottom: 1px solid var(--ars-line);
}

.ars-drawer-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ars-ink); }
.ars-drawer-body { flex: 1; overflow: auto; padding: 8px 24px; }
.ars-drawer-foot { display: flex; flex-direction: column; gap: 12px; padding: 16px 24px 24px; border-top: 1px solid var(--ars-line); background: var(--mm-surface-2, #FBFCFD); }
.ars-drawer-foot:empty { display: none; }

.ars-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ars-line);
}

.ars-line-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--ars-paper);
    color: #cfd6de;
}

.ars-line-img img { max-width: 52px; max-height: 52px; object-fit: contain; mix-blend-mode: multiply; }
.ars-line-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.ars-line-meta { margin: 2px 0 8px; font-size: 12px; color: var(--ars-steel); }
.ars-line-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ars-line-row .ars-stepper { height: 34px; }
.ars-line-price { font-weight: 700; white-space: nowrap; }
.ars-line-remove { align-self: start; }

.ars-field { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: 400; }
.ars-field span { font-size: 12px; font-weight: 600; color: var(--ars-steel); }

.ars-field textarea, .ars-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ars-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ars-ink);
    resize: vertical;
}

.ars-totals div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; color: var(--ars-ink-2); }
.ars-totals .ars-total { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--ars-line); font-size: 18px; font-weight: 700; color: var(--ars-ink); }

.ars-muted { margin: 6px 0 0; font-size: 12px; color: var(--ars-steel); }

.ars-cart-empty, .ars-done { padding: 56px 8px; text-align: center; color: var(--ars-steel); }
.ars-cart-empty i { font-size: 42px; opacity: .35; }

.ars-done h3 { margin: 16px 0 6px; font-size: 22px; font-weight: 700; color: var(--ars-ink); }
.ars-done .ars-btn { margin-top: 16px; }

.ars-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--mm-ok-bg, #E4F4EC);
    color: var(--ars-ok);
    font-size: 30px;
    animation: ars-pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes ars-pop { from { transform: scale(.3); opacity: 0; } }

.ars-quick {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(14, 22, 33, .5);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.ars.quick-open .ars-quick { opacity: 1; pointer-events: auto; }

.ars-quick-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(920px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 24px;
    background: var(--ars-surface);
    box-shadow: 0 40px 80px -20px rgba(14, 22, 33, .5);
    transform: translateY(12px) scale(.98);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.ars.quick-open .ars-quick-card { transform: none; }
.ars-quick-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(255, 255, 255, .8); }

.ars-quick-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    padding: 32px;
    background: linear-gradient(180deg, #fafbfc 0%, #eef1f5 100%);
}

.ars-quick-media img { max-width: 100%; max-height: 460px; object-fit: contain; mix-blend-mode: multiply; }

.ars-quick-info { display: flex; flex-direction: column; gap: 10px; padding: 32px; }
.ars-quick-info h2 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ars-ink); }
.ars-desc { margin: 0; color: var(--ars-ink-2); line-height: 1.5; }

.ars-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 4px 0 0; font-size: 14px; }
.ars-facts dt { font-weight: 400; color: var(--ars-steel); }
.ars-facts dd { margin: 0; font-weight: 600; }

/* Responsive ------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .ars-hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "search cart"; }
    .ars-hero-text { margin: 0 0 16px; }
    .ars-cart-btn { margin-left: 12px; }
}

@media (max-width: 860px) {
    .ars-body { grid-template-columns: minmax(0, 1fr); }

    .ars-cats {
        position: static;
        max-height: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ars-cats-title { display: none; }
    .ars-cats > ul { display: flex; gap: 8px; padding-bottom: 4px; }
    .ars-cats ul ul { display: none; }
    /* A single expanded main category: its subcategories join the chip strip. */
    .ars-cats li.ars-cats-open, .ars-cats li.ars-cats-open > ul { display: contents; }

    .ars-cat {
        width: auto;
        white-space: nowrap;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--ars-surface);
        box-shadow: var(--ars-shadow);
    }

    .ars-quick-card { grid-template-columns: minmax(0, 1fr); }
    .ars-quick-media { min-height: 240px; }
}

@media (max-width: 560px) {
    .ars-hero { padding: 20px; border-radius: 18px; }
    .ars-cart-sum { display: none; }
    .ars-cart-btn { padding: 0 18px; }
    .ars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ars-media { padding: 10px; }
    .ars-card-body { padding: 10px 12px 12px; }
    .ars-name { font-size: 14px; }
    .ars-price { font-size: 16px; }
    .ars-card-foot { flex-direction: column; align-items: stretch; }
    .ars-add, .ars-stepper { width: 100%; justify-content: center; }
    .ars-stepper input { flex: 1; }
    .ars-quick { padding: 0; align-items: flex-end; }
    .ars-quick-card { border-radius: 24px 24px 0 0; max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
    .ars *, .ars *::before, .ars *::after { animation: none !important; transition: none !important; }
}

.ars-cat-main { font-weight: 600; }

/* Portal login: registration request under the login form. */
.aretail-register { margin-top: 18px; text-align: center; color: var(--text-muted-color, #6b7280); }
.aretail-register span { display: block; margin-bottom: 8px; }

/* Public registration form (lead capture, rendered outside the app shell): the back-office e-mail and
   phone widgets (link to company, opt-out/invalid flags) mean nothing to a visitor. */
body > .content > .block-center-5 .email-address-block .margin-top-1,
body > .content > .block-center-5 .phone-number-block .margin-top-1,
body > .content > .block-center-5 .email-property,
body > .content > .block-center-5 .phone-property { display: none !important; }

/* Favourites (core stars on Product) ------------------------------------------------------------- */

.ars-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ars-steel);
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(14, 22, 33, .15);
    transition: transform .15s ease, color .15s ease;
}

.ars-fav:hover { transform: scale(1.1); color: #e3a008; }
.ars-fav.on { color: #e3a008; }
.ars-quick-info h2 .ars-fav { position: static; vertical-align: middle; margin-left: 6px; box-shadow: none; background: var(--ars-paper); }
.ars-tags { right: 54px; }
.ars-tag-mine { color: var(--ars-ink-2); }
.ars-segment button i.fa-star { color: #e3a008; }

/* Wide cart ("Zobrazit košík"): the drawer stays on the right and widens into a table. ----------- */

.ars-drawer-head { gap: 12px; }
.ars-drawer-head h2 { margin-right: auto; }
.ars-wide-toggle { padding: 6px 12px; font-size: 13px; }
.ars.cart-wide .ars-drawer { width: min(1100px, 100vw); }

.ars-cart-table { width: 100%; border-collapse: collapse; }
.ars-cart-table th { padding: 10px 8px; font-size: 12px; font-weight: 600; color: var(--ars-steel); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ars-line); }
.ars-cart-table td { padding: 10px 8px; border-bottom: 1px solid var(--ars-line); vertical-align: middle; }
.ars-cart-table .ars-line-meta { margin: 2px 0 0; }
.ars-cart-table .ars-stepper { height: 34px; }
.ars-ct-num { text-align: right; white-space: nowrap; }
.ars-ct-img { width: 56px; text-align: center; color: #cfd6de; }
.ars-ct-img img { max-width: 48px; max-height: 48px; object-fit: contain; mix-blend-mode: multiply; }

@media (max-width: 767px) {
    .ars-wide-toggle { display: none; }
}

/* Portal top bar: signed-in user + site, visible log-out button (custom:views/site-portal/navbar). ---- */

/* The theme sizes every top-bar link as a 34px icon; these two carry text. */
body[data-navbar] #navbar .navbar-right > li.ars-nav-user > a,
body[data-navbar] #navbar .navbar-right > li.ars-nav-logout > a {
    width: auto;
    min-width: 0;
}

body[data-navbar] #navbar .navbar-right > li.ars-nav-user > a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

.ars-nav-user .avatar { border-radius: 999px; }
.ars-nav-user-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.ars-nav-user-name { font-weight: 600; color: var(--ars-ink, #0E1621); }
.ars-nav-user-site { font-size: 12px; color: var(--ars-steel, #5C6B7C); }
.ars-nav-caret { font-size: 10px; color: var(--ars-steel, #5C6B7C); }

.ars-nav-menu { min-width: 300px; }
.ars-nav-sites { padding: 6px 16px; }
.ars-nav-site + .ars-nav-site { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ars-line, #E3E7EC); }
.ars-nav-site-name { margin-bottom: 4px; font-weight: 600; }
.ars-nav-site-name i { color: var(--mm-accent, #C8102E); margin-right: 4px; }
.ars-nav-site-row { font-size: 13px; color: var(--ars-ink-2, #24313E); }
.ars-nav-site-row span { display: inline-block; min-width: 96px; color: var(--ars-steel, #5C6B7C); }

body[data-navbar] #navbar .navbar-right > li.ars-nav-logout { display: flex; align-items: center; padding: 0 12px 0 4px; }
body[data-navbar] #navbar .navbar-right > li.ars-nav-logout > a.btn { padding: 6px 14px; border-radius: 999px; font-weight: 600; line-height: 1.4; }
body[data-navbar] #navbar .navbar-right > li.ars-nav-logout > a.btn:hover { border-color: var(--mm-accent, #C8102E); color: var(--mm-accent, #C8102E); }

@media (max-width: 767px) {
    .ars-nav-user-text, .ars-nav-caret { display: none; }
    /* The phone menu opens inline on the dark side panel. */
    .ars-nav-site-row { color: rgba(255, 255, 255, .9); }
    .ars-nav-site-row span { color: rgba(255, 255, 255, .6); }
}

/* Portal login: branded panel on the right half (custom:views/login). ------------------------------- */

/* The Ashop lockup has a three-line wordmark; at the theme's 43px it is unreadable. */
#login .logo-container img.logo { height: auto; width: 220px; max-width: 100%; max-height: none; }

.ars-login-aside { display: none; }

@media (min-width: 768px) {
    .ars-login-aside {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 585px;
        display: flex;
        align-items: center;
        padding: 48px clamp(32px, 6vw, 96px);
        color: #fff;
        background:
            radial-gradient(90% 90% at 100% 0%, rgba(200, 16, 46, .55) 0%, rgba(200, 16, 46, 0) 60%),
            radial-gradient(80% 80% at 0% 100%, rgba(200, 16, 46, .25) 0%, rgba(200, 16, 46, 0) 60%),
            linear-gradient(135deg, #111a26 0%, #1d2834 100%);
        overflow: hidden;
    }

    body.ars-login-portal footer { z-index: 2; }
    body.ars-login-portal footer, body.ars-login-portal footer a { color: rgba(255, 255, 255, .6) !important; }
}

.ars-login-aside-inner { max-width: 560px; }
.ars-login-aside-logo { width: 240px; max-width: 60%; margin-bottom: 40px; }
.ars-login-aside h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; line-height: 1.1; color: #fff; }
.ars-login-aside p { margin: 0 0 28px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.ars-login-aside ul { margin: 0; padding: 0; list-style: none; }
.ars-login-aside li { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 16px; }

.ars-login-aside li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #C8102E;
    color: #fff;
    font-size: 15px;
}

/* Compact hero (client's mail of 12. 10. 2026, SUP-1770): scrolled down, the red panel becomes a narrow
   bar pinned under the portal top bar with only the search and the cart; updateCompactHero() toggles it. */

/* Browser scroll anchoring would correct the scroll a second time after updateCompactHero() did (Chrome,
   Firefox), throwing the products down by the panel height; Safari has none. The view corrects it alone. */
.ars { --ars-pin-top: 53px; overflow-anchor: none; }
.ars-grid { scroll-margin-top: 140px; }

.ars.hero-compact .ars-hero {
    position: sticky;
    top: var(--ars-pin-top);
    z-index: 30;
    grid-template-columns: minmax(0, 0fr) minmax(280px, 1fr) auto;
    margin-top: 0;
    padding: 10px 16px;
    border-radius: 16px;
    /* The page-coloured ring hides the products passing through the gap above the bar. */
    box-shadow: 0 -10px 0 6px var(--ars-paper), 0 12px 30px -18px rgba(160, 12, 36, .6);
}

@media (max-width: 1100px) {
    .ars.hero-compact .ars-hero { grid-template-columns: minmax(0, 1fr) auto; }
}

.ars.hero-compact .ars-hero-text { max-height: 0; margin: 0; opacity: 0; }
.ars.hero-compact .ars-search { height: 44px; }
.ars.hero-compact .ars-cart-btn { height: 44px; margin-left: 12px; }

/* Smooth shrink (client's mail of 12. 10. 2026, round 4): the panel expands back at the top with these
   transitions; on the way down the switch is made in one frame while the panel is out of sight (the
   scroll is corrected by the height it lost, so nothing moves) and the bar slides in from the top. */
.ars-hero { transition: padding .3s ease, border-radius .3s ease, margin .3s ease, grid-template-columns .3s ease; }
.ars-hero-text { transition: max-height .3s ease, margin .3s ease, opacity .25s ease; }
.ars-search, .ars-cart-btn { transition: height .3s ease, margin .3s ease, background .15s ease, transform .15s ease; }
.ars.hero-instant .ars-hero, .ars.hero-instant .ars-hero * { transition: none !important; }
.ars-hero.ars-bar-in { animation: ars-bar-in .28s ease-out; }

@keyframes ars-bar-in {
    from { transform: translateY(-24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.ars.hero-compact .ars-cats { top: calc(var(--ars-pin-top) + 76px); max-height: calc(100vh - var(--ars-pin-top) - 96px); }

/* Below 768px the portal top bar scrolls away with the page, so the bar pins to the window edge. */
@media (max-width: 767px) {
    .ars { --ars-pin-top: 8px; }
}

/* Portal menu (client's mail of 12. 10. 2026): the information pages (Kontakty, Obchodní podmínky, GDPR)
   sit at the bottom of the side menu, apart from the shopping part. They are the Knowledge Base url tabs
   of Aretail\SetupPortal; the bottom padding keeps them above the menu minimizer. */
@media (min-width: 768px) {
    body[data-navbar="side"] #navbar ul.tabs:has(> li.tab > a[href^="#KnowledgeBaseArticle/view/"]) {
        display: flex;
        flex-direction: column;
        padding-bottom: 64px;
    }

    body[data-navbar="side"] #navbar ul.tabs > li.tab:not(:has(> a[href^="#KnowledgeBaseArticle/view/"])) + li.tab:has(> a[href^="#KnowledgeBaseArticle/view/"]) {
        margin-top: auto;
    }
}

/* A divider above the information pages, also in the phone menu. */
body[data-navbar="side"] #navbar ul.tabs > li.tab:not(:has(> a[href^="#KnowledgeBaseArticle/view/"])) + li.tab:has(> a[href^="#KnowledgeBaseArticle/view/"]) {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Search "×" (client's mail of 12. 10. 2026, SUP-1770): clears the whole line, in the full panel and in
   the pinned bar; shown while there is text. The browser's own search cancel icon would be a second one. */
.ars-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.ars-search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    margin-right: -6px;
    border: 0;
    border-radius: 999px;
    background: var(--ars-paper);
    color: var(--ars-steel);
    font-size: 14px;
}

.ars-search-clear:hover { background: var(--ars-accent-pale); color: var(--ars-accent-d); }
.ars.has-query .ars-search-clear { display: inline-flex; }

/* Back to top, bottom right, only while the page is scrolled down (the pinned-bar state). */
.ars-totop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--ars-accent);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 24px -8px rgba(160, 12, 36, .6);
    transition: background .15s ease, transform .15s ease;
}

.ars-totop:hover { background: var(--ars-accent-d); transform: translateY(-2px); }
.ars.hero-compact .ars-totop { display: inline-flex; }

@media (max-width: 767px) {
    .ars-totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* Portal "Můj profil": the customer with address and delivery day (custom:views/user/fields/portal-sites). */
.ars-profile-site + .ars-profile-site { margin-top: 10px; }
.ars-profile-site-name { font-weight: 600; }

/* Portal login (client's mail of 12. 10. 2026): "Zůstat přihlášen" above the button, and the registration
   button text centred under "Nemáte ještě účet?" - the theme's external-link icon after target=_blank
   links pushed it off centre. */
.aretail-remember { margin: 4px 0 0; }
.aretail-remember label { font-weight: 400; }
.aretail-register a.btn[target="_blank"]::after { content: none; }

/* Portal order detail (client's mail of 12. 10. 2026, round 6): the lines without row menus, and the
   totals as a summary block on the right (panel names from the portal layout set, Aretail\SetupPortal). */
.panel[data-name="aretailOrder"] .field[data-name="items"] [data-name="buttons"] { display: none; }

.panel[data-name="aretailTotals"] { max-width: 420px; margin-left: auto; }
.panel[data-name="aretailTotals"] > .panel-heading { display: none; }
.panel[data-name="aretailTotals"] .row { margin: 0; }

/* The theme forces detail cells to block with !important (body:not([data-navbar="top"]) div.detail .row > .cell). */
body div.detail .panel[data-name="aretailTotals"] .row > .cell { display: flex !important; }

.panel[data-name="aretailTotals"] .cell {
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    float: none;
    width: 100%;
    margin: 0;
    padding: 6px 0;
}

.panel[data-name="aretailTotals"] .cell > label { margin: 0; font-weight: 400; }
.panel[data-name="aretailTotals"] .cell > .field { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.panel[data-name="aretailTotals"] .cell[data-name="grandTotalAmount"] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--mm-line, #E3E7EC);
    font-size: 16px;
    font-weight: 700;
}

/* Portal product detail: the field help texts describe Aretail's internal handling. */
.panel[data-name="aretailProduct"] .field-info, .panel[data-name="aretailProduct"] .label-tooltip { display: none; }

/* Order lines on a phone: the table scrolls sideways instead of breaking every number into single
   characters. */
@media (max-width: 767px) {
    .panel[data-name="aretailOrder"] .field[data-name="items"] { overflow-x: auto; }
    /* The theme sets a percentage min-width on list tables. */
    .panel[data-name="aretailOrder"] .field[data-name="items"] .list > table.table { min-width: 600px !important; }
    .panel[data-name="aretailOrder"] .field[data-name="items"] td,
    .panel[data-name="aretailOrder"] .field[data-name="items"] th { white-space: nowrap; }
    .panel[data-name="aretailTotals"] { max-width: none; }
}

/* "Doporučeno dokoupit" (client's mail of 23. 10. 2026, SUP-1770 point 5): products recommended with the
   one in the card, and the dialog offering them after a product went into the cart from a tile. */
.ars.suggest-open .ars-suggest { opacity: 1; pointer-events: auto; }
/* Shares the .ars-quick overlay styles: closed, it must not catch the clicks of an open product card. */
.ars:not(.suggest-open) .ars-suggest { opacity: 0; pointer-events: none; }
.ars.suggest-open .ars-suggest .ars-quick-card { transform: none; }
.ars-suggest-card { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); }
.ars-reco { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ars-line); }
.ars-reco-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ars-accent); }
.ars-suggest-card .ars-reco { margin-top: 0; padding-top: 0; border-top: 0; }
.ars-suggest-card .ars-reco-title { display: none; }
.ars-reco-line { display: flex; align-items: center; gap: 12px; }
.ars-reco-img { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 10px; background: var(--ars-paper); color: #cfd6de; }
.ars-reco-img img { max-width: 48px; max-height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.ars-reco-info { flex: 1; min-width: 0; }
.ars-reco-info .ars-line-meta { margin: 2px 0 0; }
.ars-reco-line .ars-add span { display: none; }
.ars-reco-line .ars-add { flex: none; width: 44px; justify-content: center; }
.ars-reco-line .ars-stepper { flex: none; width: 120px; height: 34px; }

/* Side menu collapse arrow (client's mail of 23. 10. 2026, SUP-1770 point 9): red like the back-to-top
   button, so it is seen. */
body:not([data-id="espocrm"])[data-navbar="side"] #navbar .navbar a.minimizer {
    background: var(--mm-accent, #C8102E);
    border-color: var(--mm-accent, #C8102E);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(160, 12, 36, .6);
    opacity: 1;
}

body:not([data-id="espocrm"])[data-navbar="side"] #navbar .navbar a.minimizer:hover { background: #a00c24; color: #fff; }
body:not([data-id="espocrm"])[data-navbar="side"] #navbar .navbar a.minimizer > span { color: #fff; }

/* A house for "Domů" in the portal menu (same mail, point 9): the theme draws the Home tab from its own icon
   font, where the code point is a grid; Font Awesome has the house. The back office keeps its icon. */
body:not([data-id="espocrm"])[data-navbar="side"] #navbar .navbar li.tab[data-name="Home"] .short-label > span::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f015";
}