/* ==========================================================================
   Tippflächen am Handy (mindestens 44 x 44 px, Richtwert von Apple/Google), ohne das Aussehen zu verändern:
   die sichtbaren Symbole bleiben gleich groß, nur der antippbare Bereich wächst unsichtbar mit.
   ========================================================================== */
@media (max-width: 1000px) {
    .menu-icon { position: relative; } /* Suchsymbol und Kreuz sind schon absolut positioniert und dienen selbst als Anker */
    .menu-icon::after, .search-icon::after, .cross-icon::after {
        content: "";
        position: absolute;
        inset: -10px;
    }
    .item-subtitle a, .footer-link, .footer li a { position: relative; }
    .item-subtitle a::after, .footer-link::after, .footer li a::after {
        content: "";
        position: absolute;
        inset: -10px 0;
    }
    .pagination a, .pagination-prev, .pagination-next { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .footer-link, .footer li a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* Logo doppelt so groß wie vorher (vorher 160 px sichtbar -> jetzt bis 320 px), soweit es zwischen Menü- und Suchsymbol passt */
    .header .logo picture,
    .header .logo img {
        padding: 0;
        width: min(320px, calc(100vw - 130px));
        height: 100px;
        max-width: none;
    }
}

/* ==========================================================================
   Suche: Textcursor schwarz (nicht blau), keine Platzhalter-Schrift
   ========================================================================== */
.input-field { caret-color: #000; accent-color: #000; }
.input-field:focus { border-color: #000; }

/* Suche am Handy: Lupe verschwindet, an ihrer Stelle steht das Kreuz zum Schließen; mehr Luft unter dem Suchfeld; kein Streifen links */
@media (max-width: 1000px) {
    /* Lupe wird zum Kreuz (wie beim Burger-Menü die drei Striche zum Kreuz): beide an derselben Stelle oben rechts,
       die Lupe dreht sich weg, das Kreuz dreht sich herein (0,3 s wie beim Menü) */
    .search-icon, .cross-icon { transition: opacity .3s ease, transform .3s ease; }
    .search-icon.open { visibility: visible; opacity: 0; right: 0; transform: rotate(90deg) scale(.5); pointer-events: none; }
    .cross-icon { right: 0; opacity: 0; transform: rotate(-90deg) scale(.5); pointer-events: none; }
    .cross-icon.open { right: 0; opacity: 1; transform: none; pointer-events: auto; }
    /* Suchfläche fährt von rechts nach links herein, im gleichen Tempo wie das Menü von links nach rechts */
    .search-results { transition: right .3s ease; padding-top: 88px; opacity: 1 !important; background: #fff; z-index: 9; }   /* unter der (jetzt festen) Kopfzeile samt Suchfeld-Zeile */   /* deckend, die Seite dahinter scheint nicht mehr durch */

    /* Kopfzeile bleibt beim Öffnen der Suche unverändert (Burger links, Logo in der Mitte); nur die Lupe wird zum Kreuz */
    .left-icons.open { width: 30vw; opacity: 1; }
    .logo.open { width: auto; opacity: 1; }

    /* Suchfeld: eigene Zeile unter der Kopfzeile, fährt wie die Ergebnisse von rechts herein */
    .right-icons-color {
        position: fixed;
        top: var(--hh);
        right: -100vw;
        width: 100vw;
        height: 72px;
        box-sizing: border-box;
        padding: 0 16px;
        z-index: 12;
        flex-direction: row;
        transition: right .3s ease;
    }
    .right-icons-color.open { right: 0; width: 100vw; height: 72px; }
    .right-icons-color .input-field { width: 100%; margin: 0; }
    .search-results { box-sizing: border-box; }
    .search-item, .search-item a { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #000; }
    .search-item a { border-bottom: 0; }
}

/* Kreuz der Suche genauso groß wie das Kreuz des Burger-Menüs (23 px) */
@media (max-width: 1000px) {
    .cross-icon svg { width: 23px; height: 23px; padding: 0; margin-bottom: 4px; }
}

/* Safari färbt die untere Leiste nach festen Elementen am unteren Bildschirmrand (z. B. dem grauen, außerhalb geparkten Menü).
   Geschlossene feste Flächen werden deshalb unsichtbar geschaltet (erst nach dem Wegfahren), damit die Leiste durchsichtig bleibt. */
@media (max-width: 1000px) {
    .menu:not(.open), .search-results:not(.open), .shop-menu:not(.open), .right-icons-color:not(.open) {
        visibility: hidden;
        transition: left .3s ease, right .3s ease, width .3s ease, visibility 0s linear .3s;
    }
    .menu.open, .search-results.open, .shop-menu.open, .right-icons-color.open {
        visibility: visible;
        transition: left .3s ease, right .3s ease, width .3s ease, visibility 0s;
    }
}

/* ==========================================================================
   Kopfzeile am Handy zweizeilig: oben das Logo größer, darunter links das Burger-Menü, rechts Einkaufswagen und Lupe
   ========================================================================== */
.cart-icon { display: none; }
@media (max-width: 1000px) {
    .header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 46px 46px;
        align-items: center;
        padding: env(safe-area-inset-top, 0px) 20px 8px;   /* 8 px mehr Luft unter der Symbolzeile */
        height: var(--hh);
        box-sizing: border-box;
    }
    .header .logo { grid-column: 1 / -1; grid-row: 1; width: auto; height: 46px; padding: 0; }
    .header .logo picture, .header .logo img { height: 46px; width: min(360px, calc(100vw - 32px)); padding: 0; }
    .header .left-icons { grid-column: 1; grid-row: 2; width: auto; height: 46px; }
    .header .right-icons { grid-column: 2; grid-row: 2; width: 35px; height: 46px; position: relative; }
    .header .right-icons-false { display: none; }
    /* Symbole in der zweiten Zeile */
    .header .search-icon, .header .cross-icon { top: 5.5px; height: 35px; }
    .cart-icon { display: flex; position: absolute; right: 47px; top: 5.5px; width: 35px; height: 35px; z-index: 11; }
    .cart-icon { align-items: center; justify-content: center; }
    .cart-icon svg { height: 27px; width: 23.6px; display: block; overflow: visible; }
    .cart-icon .cart-count { top: 0; right: -2px; }
    /* Burger-Menü in der zweiten Zeile */
    .header .menu-icon { margin-top: 0; }
}

/* Kopfzeile verschwindet beim Runterscrollen nach oben (sehr schnell) und kommt beim Hochscrollen zurück */
@media (max-width: 1000px) {
    .header { top: 0; transition: top .18s ease; }
    html.header-hidden .header { top: calc(-1 * var(--hh)); }
    /* Tab-Leiste auf Others rutscht dann ganz nach oben */
    .sticky-phone-menu { transition: top .18s ease; }
    html.header-hidden .sticky-phone-menu { top: 0; }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
    .header, .sticky-phone-menu { transition: none; }
}

/* ==========================================================================
   Symbole am Handy: Burger -> Kreuz und Lupe -> Kreuz. Beide Kreuze gleich groß (Linienlänge 30 px) und jeweils genau in der Mitte ihres
   Symbols, in derselben Höhe. Größen der Symbole wie zuvor (Burger 27 x 22 px, Lupe 27 px).
   Burger: die mittlere Linie verschwindet, die anderen zwei kreuzen sich.
   Lupe (dein Original-Symbol): der Ring wird flach und geht in die eine Linie über, der Griff streckt sich zur anderen Linie.
   ========================================================================== */
@media (max-width: 1000px) {
    .header .menu-icon { width: 27px; height: 22px; padding: 0; margin: 0; align-self: center; transform: none; }
    .header .menu-icon.open { transform: none; }
    .header .menu-icon span { width: 100%; height: 2.5px; }
    .header .menu-icon.open span:nth-child(1) { transform: translateY(9.75px) rotate(45deg) scaleX(1.35); width: 100%; }
    .header .menu-icon.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .header .menu-icon.open span:nth-child(3) { transform: translateY(-9.75px) rotate(-45deg) scaleX(1.35); width: 100%; }

    /* Lupe: das Symbol selbst schließt die Suche (kein eigenes Kreuz mehr) */
    .header .cross-icon { display: none; }
    .header .search-icon.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; right: 0; }
    .header .right-icons { margin-right: -4px; }

    /* Lupe -> Kreuz wie im GIF (lupe_zu_kreuz_HD): ca. 0,42 s, ohne Drehung.
       Der Ring wandert in die Mitte und wird flach (eine Kreuz-Linie), der Griff streckt sich von seiner Spitze aus zur anderen Linie;
       am Ende übernimmt das gezeichnete Kreuz (kreuz.svg). Zurück läuft es genau umgekehrt. */
    .search-icon .lm-ring, .search-icon .lm-handle {
        transform-origin: 0 0;
        transition: transform .42s cubic-bezier(.55, 0, .3, 1), opacity .1s linear .32s;
    }
    .search-icon .lm-x polygon { opacity: 0; transition: opacity .1s linear 0s; }
    .search-icon.open .lm-x polygon { opacity: 1; transition: opacity .1s linear .32s; }
    .search-icon.open .lm-ring, .search-icon.open .lm-handle { opacity: 0; transition: transform .42s cubic-bezier(.55, 0, .3, 1), opacity .1s linear .32s; }
    .search-icon:not(.open) .lm-ring, .search-icon:not(.open) .lm-handle { transition: transform .42s cubic-bezier(.55, 0, .3, 1) .1s, opacity .1s linear 0s; }
    .search-icon.open .lm-ring   { transform: translate(48.61px, 49.11px) rotate(-45deg) scale(1.92, 0.06) translate(-35.8px, -35.73px); }
    .search-icon.open .lm-handle { transform: translate(97.22px, 98.22px) rotate(45deg) scale(2.73, 1) rotate(-43.8deg) translate(-97.22px, -98.22px); }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
    .search-icon .lm-ring, .search-icon .lm-handle, .search-icon .lm-x polygon { transition: none !important; }
}

/* Desktop: im Lupen-Symbol steckt das Kreuz für die Handy-Verwandlung, dort immer unsichtbar */
@media (min-width: 1001px) { .search-icon .lm-x polygon { opacity: 0; } }

/* ==========================================================================
   Handy: Burger -> Kreuz und Lupe -> Kreuz als Bildfolge (22 Bilder, 0,42 s = Tempo des schnellen GIFs).
   Lupe: Bilder direkt aus lupe_zu_kreuz_HD.gif. Burger: eigene Folge, endet im exakt gleichen Kreuz wie die Lupe.
   Rückweg: dieselbe Folge rückwärts.
   ========================================================================== */
@media (max-width: 1000px) {
    .header .menu-icon span { visibility: hidden; }
    .header .search-icon > svg { visibility: hidden; }
    .header .menu-icon::before,
    .header .search-icon::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
        background-repeat: no-repeat;
        background-size: 2200% 100%;
        background-position: 0% 0;
        transition: background-position .42s steps(21);
        pointer-events: none;
    }
    .header .menu-icon::before { background-image: url("../../icons/sprite-burger.png?v=1"); }
    .header .search-icon::before { background-image: url("../../icons/sprite-lupe.png?v=1"); }
    .header .menu-icon.open::before,
    .header .search-icon.open::before { background-position: 100% 0; }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
    .header .menu-icon::before, .header .search-icon::before { transition: none; }
}

/* ==========================================================================
   Kopfzeile am Handy wieder einzeilig und kleiner: Burger links, Logo in der Mitte, Einkaufswagen und Lupe rechts.
   Symbole und Logo auf 70 % der bisherigen Größe.
   ========================================================================== */
@media (max-width: 1000px) {
    .header {
        grid-template-columns: 72px minmax(0, 1fr) 72px;   /* gleich breite Randspalten: Logo sitzt genau in der Bildschirmmitte */
        grid-template-rows: 60px;
        padding: env(safe-area-inset-top, 0px) 20px 0;
        align-items: center;
    }
    .header .logo { grid-column: 2; grid-row: 1; height: 60px; justify-self: center; display: flex; align-items: center; justify-content: center; }
    .header .logo picture, .header .logo img { width: min(240px, calc(100vw - 166px)); height: 60px; padding: 0; }
    .header .left-icons { grid-column: 1; grid-row: 1; height: 60px; width: auto; }
    .header .right-icons { grid-column: 3; grid-row: 1; justify-self: end; height: 60px; width: 35px; }
    .header .search-icon { top: 12.5px; }
    /* 70 %: Burger 19 x 15 px, Lupe/Kreuz 19,6 px, Tasche 16,5 x 19 px */
    .header .menu-icon { width: 19px; height: 15.4px; }
    .header .menu-icon::before, .header .search-icon::before { width: 19.6px; height: 19.6px; margin: -9.8px 0 0 -9.8px; }
    .cart-icon { right: 26px; top: 12.5px; }
    .cart-icon svg { height: 19px; width: 16.5px; }
}

/* Feinschliff Kopfzeile (Handy): enger (48 px), Burger weiter links, Lupe weiter rechts, mehr Luft zwischen Lupe und Tasche,
   Tasche etwas höher, Logo minimal tiefer */
@media (max-width: 1000px) {
    .header { grid-template-rows: 48px; padding: env(safe-area-inset-top, 0px) 14px 0; }
    .header .logo, .header .left-icons, .header .right-icons { height: 48px; }
    .header .logo picture, .header .logo img { height: 48px; }
    .header .logo img { transform: translateY(1.5px); }
    .header .search-icon { top: 6.5px; }
    .cart-icon { right: 36px; top: 4.5px; }
}

/* Kopfzeile (Handy) noch enger: 42 px; oben 4 px weniger, unten 2 px weniger Weißraum */
@media (max-width: 1000px) {
    .header { grid-template-rows: 42px; }
    .header .logo, .header .left-icons, .header .right-icons { height: 42px; }
    .header .logo picture, .header .logo img { height: 42px; }
    .header .logo img { transform: translateY(0.5px); }
    .header .menu-icon { transform: translateY(-1px); }
    .header .search-icon { top: 2.5px; }
    .cart-icon { top: 0.5px; }
}

/* Kopfzeile (Handy) noch enger: 36 px; oben nochmals 4 px, unten 2 px weniger */
@media (max-width: 1000px) {
    .header { grid-template-rows: 36px; }
    .header .logo, .header .left-icons, .header .right-icons { height: 36px; }
    .header .logo picture, .header .logo img { height: 36px; }
    .header .logo img { transform: translateY(-0.5px); }
    .header .menu-icon { transform: translateY(-2px); }
    .header .search-icon { top: -1.5px; }
    .cart-icon { top: -3.5px; }
}

/* Suche (Handy): Einkaufswagen bleibt sichtbar (wie beim Menü); Eingabefeld eckig, Oberkante direkt unter der Kopfzeile
   (da, wo sonst der Block "Buy the new magazine" beginnt); Rand so dick wie der Eingabe-Strich (2 px) */
@media (max-width: 1000px) {
    .right-icons-color, .right-icons-color.open { height: 56px; align-items: flex-start; padding: 0 12px; }   /* Feld etwas breiter: 12 px Rand statt 16 px */
    .right-icons-color .input-field {
        height: 52px;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .right-icons-color .input-field:focus { border-color: #000; }
    .search-results { padding-top: 68px; }
}

/* Suche (Handy): eigener Eingabe-Strich, 1 px dünn wie der Rand des Kastens (den Strich des iPhones kann man nicht dünner machen) */
@media (max-width: 1000px) {
    .right-icons-color .input-field { caret-color: transparent; }
    .fake-caret { position: absolute; width: 1px; background: #000; pointer-events: none; display: none; animation: gm-caret-blink 1s steps(1) infinite; }
}
@keyframes gm-caret-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (min-width: 1001px) { .fake-caret { display: none !important; } }

/* Einkaufswagen etwas näher an die Lupe (Abstand 12 px statt 18 px) */
@media (max-width: 1000px) { .cart-icon { right: 30px; } }

/* Kopfzeile (Handy): oben nochmals 2 px weniger Weißraum (34 px) */
@media (max-width: 1000px) {
    .header { grid-template-rows: 34px; }
    .header .logo, .header .left-icons, .header .right-icons { height: 34px; }
    .header .logo picture, .header .logo img { height: 34px; }
    .header .logo img { transform: translateY(-1.5px); }
    .header .menu-icon { transform: translateY(-3px); }
    .header .search-icon { top: -3.5px; }
    .cart-icon { top: -5.5px; }
}

/* Einkaufswagen minimal größer (+8 %) */
@media (max-width: 1000px) { .cart-icon svg { height: 20.5px; width: 17.8px; } }

/* Suchergebnisse (Handy): groß der Titel, darunter die Autor:innen; ohne Fotos und ohne "Article"/"Product";
   jeder Eintrag so hoch wie sein Text, die Namen haben die volle Breite */
@media (max-width: 1000px) {
    .search-item, .search-item a { height: auto; }
    .search-item a { padding: 14px 16px; display: block; }
    .search-item .searchbar-image-container, .search-item .item-type { display: none; }
    .search-item .item-written { width: 100%; height: auto; padding-right: 0; }
    .search-item .title { font-size: 22px; line-height: 1.2; margin-bottom: 4px; }
    .search-item .contributors, .search-item .date { font-size: 16px; line-height: 1.3; margin-bottom: 0; color: #333; }
}

/* Startseite: Kopfzeile wird direkt mit dem Finger mitgeschoben (ohne Animation) */
@media (max-width: 1000px) { html.header-follow .header { transition: none; } }

/* Menü und Suche (Handy): reichen bis ganz nach unten und laufen unter der Safari-Leiste weiter (durchsichtig wie auf der Startseite) */
@media (max-width: 1000px) {
    .menu, .menu.open { top: var(--hh); bottom: 0; height: auto; }
    .search-results, .search-results.open { top: var(--hh); bottom: 0; height: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Startseite: Zone bis zur Unterkante von "Buy the new magazine"; darin klebt die Kopfzeile und wird vom Browser selbst mitgeschoben */
@media (max-width: 1000px) {
    .header-zone { position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; }
    .header-zone > .header { pointer-events: auto; }
    html.header-engaged .header { position: sticky; top: 0 !important; transition: none; }
}

/* Menü und Suchergebnisse (Handy) als Teil der Seite an der aktuellen Scrollstelle (siehe header.2.js) */
@media (max-width: 1000px) {
    .menu, .menu.open,
    .search-results, .search-results.open { position: absolute; top: var(--ov-top, var(--hh)); bottom: auto; height: calc(100vh - var(--hh)); height: calc(100lvh - var(--hh)); }
}

/* Menü und Suche reichen sicher über den unteren Bildschirmrand hinaus (nichts von der Seite scheint durch);
   Others bekommt unten mehr Raum, damit die Punkte über der Safari-Leiste bleiben */
@media (max-width: 1000px) {
    /* Menü: Fläche wie bisher, darunter 150 px zusätzlicher Hintergrund, der über den Bildschirmrand hinausreicht */
    .menu, .menu.open { box-sizing: content-box; height: calc(100lvh - var(--hh)); padding-bottom: 150px; }
    .item-others .item-content { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
    .search-results, .search-results.open { height: calc(100lvh - var(--hh) + 150px); padding-bottom: calc(230px + env(safe-area-inset-bottom, 0px)); }
    .menu:not(.open), .search-results:not(.open) { height: 0; padding-bottom: 0; overflow: hidden; transition: left .3s ease, right .3s ease, visibility 0s linear .3s, height 0s linear .3s, padding 0s linear .3s; }
}

/* Menü: der zusätzliche Bereich unten bekommt dasselbe Hellgrau wie das untere Ende von Others (nichts scheint durch).
   Suche und Menü: kein Nachfedern ("Bounce") über das Listenende hinaus */
@media (max-width: 1000px) {
    .menu.open { background-color: #ddd; }
    .search-results, .menu { overscroll-behavior: none; }
}

/* Umschalten "wandert mit" -> "versteckt" ohne Animation (sonst blitzt die Kopfzeile kurz auf) */
html.header-snap .header, html.header-snap .sticky-phone-menu { transition: none !important; }

/* Suche oder Warenkorb offen (Handy): Seite dahinter nicht auf 0 Breite quetschen (Text bricht dann wortweise um und
   scheint auf dem iPhone durch die Ergebnisse), sondern unverändert lassen und nur unsichtbar machen */
@media (max-width: 1000px) {
    main.search-open, main.shop-open { width: 100% !important; visibility: hidden; }
}

/* Kein graues Aufblitzen beim Antippen (Burger, Lupe, Tasche, Menü, Footer) */
.header, .header *, .menu, .menu *, .search-results, .search-results *, .footer, .footer * { -webkit-tap-highlight-color: transparent; }

/* Keine Scroll-Anzeige ("Schieber") in Suche und Menü */
.search-results, .menu { scrollbar-width: none; }
.search-results::-webkit-scrollbar, .menu::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Anzahl im Warenkorb (Website und Shop gleich): kleiner schwarzer Kreis unten links an der Tasche,
   ragt nicht über die Symbolzeile hinaus */
.header .cart-icon .cart-count {
    position: absolute; left: 0; bottom: 0; top: auto; right: auto; transform: none;
    min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px;
    background: #000; color: #fff; font: 700 9px/14px 'GT America', sans-serif; text-align: center; pointer-events: none;
}
.header .cart-icon .cart-count:empty { display: none; }

/* Warenkorb schließen: auf der vorigen Seite fährt eine Ebene mit "Your cart" nach rechts hinaus (wie die Suche beim Schließen),
   dahinter ist die Seite sofort zu sehen. Titel an derselben Stelle und in derselben Schrift wie "Articles". */
.search-results.cart-slide { padding: 0 !important; }
.cart-slide-title { font-family: 'Rhymes', Georgia, serif; font-weight: 400; font-style: normal; font-size: 31.2px; line-height: 1.2; color: #000; margin: 0; padding: 15px 15px 12px; }
@media (min-width: 1001px) {
    .search-results.cart-slide { position: fixed; top: 7vh; width: 100vw; right: -100vw; height: 93vh; transition: right .3s ease; background: #fff; z-index: 9; }
    .search-results.cart-slide.open { right: 0; width: 100vw; height: 93vh; }
    .cart-slide-title { font-size: 50px; line-height: normal; padding: 11px 0 16px 70px; }
}
/* Zahl an der Tasche: Ziffer fest mittig im Kreis (unabhängig von der Schrift), überall dieselbe Größe und Lage */
.header .cart-icon .cart-count:not(:empty) {
    display: flex; align-items: center; justify-content: center;
    width: auto; min-width: 14px; height: 14px; padding: 0 3px; line-height: 1;
    font-family: 'GT America', -apple-system, 'Helvetica Neue', Arial, sans-serif; font-size: 9px; font-weight: 700;
    font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%;
}
/* Beim Verlassen/Zurückkehren geschlossene Ebenen ohne Übergang (siehe header.2.js / grau-shop.js: pagehide) */
html.grau-noanim *, html.grau-noanim *::before, html.grau-noanim *::after { transition: none !important; animation: none !important; }

/* Abbild des Warenkorbs beim Schließen (Handy): gleiche Maße wie die Warenkorb-Seite im Shop, fährt nach rechts hinaus */
.cart-slide img { -webkit-filter: none !important; filter: none !important; }
@media (max-width: 1000px) {
    .cart-slide .cart-slide-title { padding: 15px 15px 0; text-transform: capitalize; }
    .cart-slide .cs-items { margin-top: 35px; padding: 0 15px; }
    .cart-slide .cs-row { display: flex; gap: 15px; height: 133px; margin-bottom: 35px; }
    .cart-slide .cs-img { width: 100px; height: 125px; object-fit: cover; background: #000; flex: none; display: block; }
    .cart-slide .cs-det { flex: 1; min-width: 0; font-family: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .6px; }
    .cart-slide .cs-name { font-size: 15px; line-height: 19.5px; color: #121212; white-space: pre-line; text-transform: uppercase; }
    .cart-slide .cs-price { margin-top: 6px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, .75); }
    .cart-slide .cs-qrow { margin-top: 24px; display: flex; align-items: center; gap: 5px; }
    .cart-slide .cs-qty { width: 105px; height: 36px; box-sizing: border-box; border: 1px solid #121212; border-radius: 4px;
        display: flex; align-items: center; justify-content: space-between; color: #121212; font-size: 16px; font-weight: 500; letter-spacing: 0; }
    .cart-slide .cs-qty span { width: 34px; text-align: center; color: #808080; font: 400 18px Arial, sans-serif; }
    .cart-slide .cs-qty b { font-weight: 500; }
    .cart-slide .cs-del { width: 37px; height: 36px; display: flex; align-items: center; justify-content: center; }
    .cart-slide .cs-del svg { width: 14px; height: 16px; fill: none; stroke: rgba(18, 18, 18, .5); stroke-width: 1.1; }
    .cart-slide .cs-foot { position: absolute; left: 0; right: 0; height: 139px; background: #fff; padding: 0 15px; box-sizing: border-box;
        font-family: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .6px; }
    .cart-slide .cs-tot { margin-top: 27px; height: 18px; display: flex; justify-content: space-between; align-items: center; }
    .cart-slide .cs-tot b { font-weight: 600; font-size: 17px; color: #121212; letter-spacing: normal; }
    .cart-slide .cs-tot span { font-size: 18px; color: rgba(18, 18, 18, .75); }
    .cart-slide .cs-btn { margin-top: 12px; height: 50px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: 1px; }
}