/* Warenkorb der App „Essential Cart Drawer“ nach Entwurf (Figma „Cart Slider“).
   Die App rendert gehashte Klassen – angesprochen wird nur über [data-essential-cart-element].
   Die App-Styles (StyleX) heben ihre Spezifität mit bis zu 5× :not(#\#) an – der Wurzel-Selektor
   hat deshalb 6 davon, so gewinnen alle verschachtelten Regeln ohne !important.
   Texte, Buttons, Upsells und Gratis-Versand-Ziel werden in der App gepflegt. */

#essential-cart-drawer-portal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  --cc-cart-bg: #fffceb;
  --cc-cart-sand: #f4eddc;
  --cc-cart-olive: #d8d2ad;
  --cc-cart-text: #66261a;
  --cc-cart-muted: #946659;
  --cc-cart-dark: #53221a;
  --cc-cart-pad: 20px;

  font-family: var(--font-body--family);
  color: var(--cc-cart-text);

  /* Hintergrund wie bei den anderen Pop-ups: abgedunkelt + weichgezeichnet */
  [data-essential-cart-element='cart-drawer-overlay'] {
    background: rgb(0 0 0 / 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Panel: an der offenen Seite abgerundet wie Menü- und Filter-Drawer */
  #cart-drawer > div {
    width: min(380px, calc(100% - 22px));
    max-width: none;
    border-start-start-radius: 16px;
    border-end-start-radius: 16px;
    background-color: var(--cc-cart-bg);
    font-family: var(--font-body--family);
  }

  /* Kopf: „Warenkorb“ + Anzahl als Pill (Anzahl setzt assets/cc-cart-drawer.js), Kreuz 24px */
  [data-essential-cart-element='cart-drawer-header'] {
    min-height: 0;
    padding: 16px var(--cc-cart-pad);
    border: 0;
    background-color: var(--cc-cart-bg);
  }

  [data-essential-cart-element='cart-drawer-title'] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body--family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='cart-drawer-title']::after {
    content: var(--cc-cart-count, none);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 100px;
    background-color: var(--cc-cart-sand);
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
  }

  [data-essential-cart-element='cart-drawer-close-button'] {
    width: 24px;
    height: 24px;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='cart-drawer-close-button'] svg {
    width: 100%;
    height: 100%;
  }

  [data-essential-cart-element='cart-drawer-close-button'] line {
    stroke: currentColor;
  }

  /* Inhalt: Gratis-Versand + Upsell (oliv) oben, dann die Artikel */
  [data-essential-cart-element='cart-drawer-content'] {
    background-color: var(--cc-cart-bg);
  }

  /* flex-shrink: 0 – sonst drückt eine lange Artikelliste die Oliv-Box zusammen, statt zu scrollen */
  [data-essential-cart-element='cart-drawer-content'] > * {
    flex-shrink: 0;
    order: 3;
  }

  [data-essential-cart-element='cart-drawer-content'] > [data-essential-cart-element='announcement-wrapper'] {
    order: 0;
  }

  [data-essential-cart-element='cart-drawer-content'] > [data-essential-cart-element='reward-goal-bar-wrapper'] {
    order: 1;
  }

  [data-essential-cart-element='cart-drawer-content'] > [data-essential-cart-element='upsells-wrapper'] {
    order: 2;
  }

  [data-essential-cart-element='announcement-bar'] {
    background-color: var(--cc-cart-sand) !important;
    color: var(--cc-cart-text) !important;
  }

  [data-essential-cart-element='announcement-bar-text'] :is(p, span) {
    font-size: 13px;
    color: inherit !important;
  }

  /* Oliv-Box: Gratis-Versand-Fortschritt und/oder Upsell-Karussell */
  :is([data-essential-cart-element='reward-goal-bar-wrapper'], [data-essential-cart-element='upsells-wrapper']) {
    margin: 0 var(--cc-cart-pad);
    padding: 0;
    border-radius: 16px;
    background-color: var(--cc-cart-olive);
    overflow: hidden;
  }

  /* Upsell-Bereich bleibt leer im DOM, wenn alle Upsell-Produkte schon im Warenkorb sind */
  [data-essential-cart-element='upsells-wrapper']:not(:has([data-essential-cart-element='upsell-product'])) {
    display: none;
  }

  /* Nur wenn beide da sind, werden sie zu einer Box verbunden */
  [data-essential-cart-element='cart-drawer-content']:has(> [data-essential-cart-element='upsells-wrapper'] [data-essential-cart-element='upsell-product'])
    > [data-essential-cart-element='reward-goal-bar-wrapper'] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  [data-essential-cart-element='cart-drawer-content']:has(> [data-essential-cart-element='reward-goal-bar-wrapper'])
    > [data-essential-cart-element='upsells-wrapper'] {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
  }

  [data-essential-cart-element='reward-goal-bar'] {
    padding: 16px;
    background-color: transparent;
  }

  [data-essential-cart-element='cart-drawer-content']:has(> [data-essential-cart-element='upsells-wrapper'] [data-essential-cart-element='upsell-product'])
    [data-essential-cart-element='reward-goal-bar'] {
    padding-bottom: 8px;
  }

  [data-essential-cart-element='reward-progress-text'] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='reward-progress-text'] * {
    text-align: left;
  }

  /* Textfarbe aus dem App-Editor (inline) überschreiben */
  [data-essential-cart-element='reward-progress-text'] :is(p, span, strong, b) {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 14px;
    line-height: 1.5;
    color: inherit !important;
  }

  [data-essential-cart-element='reward-progress-text'] :is(strong, b) {
    font-weight: 600;
  }

  /* Nur die Leiste – Meilenstein-Icon (Lkw) ausgeblendet */
  [data-essential-cart-element='reward-progress-bar'] {
    height: 6px;
    margin-top: 12px;
    padding: 0;
  }

  [data-essential-cart-element='reward-milestone'] {
    display: none;
  }

  [data-essential-cart-element='reward-progress-bar-track'] {
    width: 100%;
    height: 6px;
    border-radius: 100px;
    background-color: rgb(66 31 26 / 0.1);
  }

  [data-essential-cart-element='reward-progress-bar-fill'] {
    height: 6px;
    border-radius: 100px;
    background-color: var(--cc-cart-text);
  }

  /* Upsell: ein Produkt pro Ansicht, darüber Überschrift („Dazu passt …“, Text in der App) mit Pfeilen rechts.
     Seitlich 16px wie die Gratis-Versand-Zeile darüber */
  :is([data-essential-cart-element='upsell-offer'], [data-essential-cart-element='upsell-container']) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  /* row-gap 0: die App setzt 8px Flex-Abstand zwischen Titelzeile und Produkten */
  [data-essential-cart-element='upsell-container'] {
    row-gap: 0;
    padding: 16px;
  }

  [data-essential-cart-element='cart-drawer-content']:has(> [data-essential-cart-element='reward-goal-bar-wrapper'])
    [data-essential-cart-element='upsell-container'] {
    padding-top: 8px;
  }

  [data-essential-cart-element='upsell-header'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 20px;
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
  }

  [data-essential-cart-element='upsell-title'] {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--cc-cart-text);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [data-essential-cart-element='upsell-navigation'] {
    display: flex;
    flex: none;
    align-items: center;
    margin-inline-end: -4px;
  }

  [data-essential-cart-element='upsell-navigation'] button {
    width: 28px;
    height: 24px;
    min-height: 0;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='upsell-navigation'] button:disabled {
    opacity: 0.3;
  }

  [data-essential-cart-element='upsell-icon'] {
    width: 20px;
    height: 20px;
    color: var(--cc-cart-text);
  }

  /* Pfeile in Burgund – die App färbt das SVG über --fill (inline am Icon) */
  [data-essential-cart-element='upsell-icon'] svg {
    fill: currentColor;
  }

  [data-essential-cart-element='upsell-products'] {
    padding: 0;
  }

  [data-essential-cart-element='upsell-product'] {
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  :is([data-essential-cart-element='upsell-image-container'], [data-essential-cart-element='upsell-image']) {
    width: 56px;
    height: 56px;
    border-radius: 4px;
  }

  [data-essential-cart-element='upsell-product-title'] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='upsell-variant-readonly'] {
    display: none;
  }

  [data-essential-cart-element='upsell-price'] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  :is([data-essential-cart-element='upsell-regular-price'], [data-essential-cart-element='upsell-discounted-price']) {
    font-size: inherit;
    color: inherit;
  }

  /* „+“-Schaltfläche 32px, Beschriftung nur für Screenreader */
  [data-essential-cart-element='upsell-add-to-cart-button'] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cc-cart-text);
    border-radius: 4px;
    background-color: var(--cc-cart-dark);
    color: var(--cc-cart-bg);
  }

  [data-essential-cart-element='upsell-add-to-cart-button'] > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  [data-essential-cart-element='upsell-add-to-cart-button'] svg :is(path, line) {
    fill: currentColor;
  }

  /* Artikelliste */
  [data-essential-cart-element='cart-drawer-item-list-wrapper'] {
    padding: var(--cc-cart-pad);
  }

  [data-essential-cart-element='cart-drawer-item-list'] {
    width: 100%;
    padding: 0;
  }

  [data-essential-cart-element='cart-drawer-item-list'] > * {
    padding: 0;
    border: 0;
  }

  /* App gibt jedem Artikel außer dem ersten 16px Abstand oben – Abstand nur über den Rahmen (12px) */
  [data-essential-cart-element='cart-drawer-item'] {
    padding: 0;
  }

  [data-essential-cart-element='cart-drawer-item-frame'] {
    padding: 12px 0;
    border: 0;
  }

  /* Zeile 1: Titel | Preis mit Linie darunter, Zeile 2: Variante | Löschen + Menge */
  [data-essential-cart-element='cart-drawer-item-frame'] > div {
    display: grid;
    position: relative;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: 0;
    row-gap: 8px;
    width: 100%;
    min-height: 80px;
  }

  :is([data-essential-cart-element='cart-drawer-item-details'], [data-essential-cart-element='cart-drawer-item-price']) {
    display: contents;
  }

  :is([data-essential-cart-element='cart-drawer-item-details'], [data-essential-cart-element='cart-drawer-item-price']) > * {
    grid-column: 2 / -1;
  }

  /* Bild absolut im eigenen Rasterbereich: sonst verteilt das Raster seine 80px auf die Zeilen
     und der Abstand zwischen Titel und Linie wächst */
  [data-essential-cart-element='cart-drawer-item-image'] {
    position: absolute;
    top: 0;
    left: 0;
    grid-row: 1 / -1;
    grid-column: 1;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
  }

  [data-essential-cart-element='line-item-image'] {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
    object-fit: cover;
  }

  [data-essential-cart-element='line-item-title'] {
    grid-column: 2;
    grid-row: 1;
    padding: 0 24px 8px 0;
    border-bottom: 1px solid var(--cc-cart-sand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cc-cart-text);
    text-decoration: none;
  }

  [data-essential-cart-element='line-item-price'] {
    grid-column: 3;
    grid-row: 1;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cc-cart-sand);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
    color: var(--cc-cart-text);
  }

  :is([data-essential-cart-element='line-item-regular-price'], [data-essential-cart-element='line-item-discounted-price']) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }

  :is([data-essential-cart-element='line-item-variant-title'], [data-essential-cart-element='line-item-variant-selector']) {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-cart-muted);
  }

  /* Variantenauswahl (Produkte mit mehreren Größen) wie die Variante: schlicht, mit Pfeil */
  [data-essential-cart-element='line-item-variant-selector'] > div {
    margin: 0;
  }

  [data-essential-cart-element='line-item-variant-selector'] select {
    height: auto;
    padding: 0 20px 0 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-cart-muted);
  }

  [data-essential-cart-element='line-item-variant-selector'] svg {
    fill: var(--cc-cart-muted);
  }

  [data-essential-cart-element='line-item-actions'] {
    grid-column: 3;
    grid-row: 2;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  [data-essential-cart-element='line-item-remove'] {
    width: 24px;
    height: 24px;
    color: var(--cc-cart-text);
  }

  /* Menge als sandfarbene Pill 64 × 24 */
  [data-essential-cart-element='quantity-select-inner'] {
    width: 64px;
    height: 24px;
    padding: 0 8px;
    box-sizing: border-box;
    justify-content: space-between;
    border: 0;
    border-radius: 8px;
    background-color: var(--cc-cart-sand);
  }

  :is([data-essential-cart-element='quantity-decrement'], [data-essential-cart-element='quantity-increment']) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 0;
    height: 24px;
    padding: 0;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='quantity-decrement'] {
    color: var(--cc-cart-muted);
  }

  :is([data-essential-cart-element='quantity-decrement'], [data-essential-cart-element='quantity-increment']) > div {
    width: 14px;
    height: 14px;
    margin: 0;
  }

  :is([data-essential-cart-element='quantity-decrement'], [data-essential-cart-element='quantity-increment']) svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  [data-essential-cart-element='quantity-value'] {
    width: auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  /* Fuß: sandfarben, oben abgerundet */
  [data-essential-cart-element='cart-drawer-footer-wrapper'] {
    background-color: transparent;
  }

  [data-essential-cart-element='cart-drawer-footer'] {
    gap: 8px;
    padding: var(--cc-cart-pad);
    border: 0;
    border-start-start-radius: 16px;
    border-start-end-radius: 16px;
    box-shadow: none;
    background-color: var(--cc-cart-sand);
  }

  [data-essential-cart-element='cart-drawer-footer'] > * {
    padding: 0;
    background-color: transparent;
  }

  [data-essential-cart-element='cart-drawer-footer'] > [data-essential-cart-element='checkout-button-wrapper'] {
    margin-top: 16px;
  }

  [data-essential-cart-element='cart-drawer-footer'] > * > div {
    padding-inline: 0;
  }

  [data-essential-cart-element='subtotal-wrapper'] [data-essential-cart-element='cart-drawer-property-row'] {
    padding: 0;
  }

  [data-essential-cart-element='subtotal-wrapper'] :is([data-essential-cart-element='cart-drawer-property-label'], [data-essential-cart-element='cart-drawer-property-value'], [data-essential-cart-element='cart-drawer-property-value'] span) {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='custom-block-wrapper'] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--cc-cart-muted);
  }

  [data-essential-cart-element='custom-block-wrapper'] :is(p, span, a) {
    font-size: inherit;
    color: inherit !important;
  }

  [data-essential-cart-element='discount-code-link'] {
    font-size: 13px;
    color: var(--cc-cart-text);
  }

  /* Zur Kasse: wie die Hauptschaltflächen (die App setzt ihre Farben mit !important) */
  [data-essential-cart-element='cart-drawer-checkout-button'] {
    height: 48px !important;
    padding: 12px 24px !important;
    border: 1px solid var(--cc-cart-text) !important;
    border-radius: 8px !important;
    background-color: var(--cc-cart-dark) !important;
    color: var(--cc-cart-bg) !important;
    font-family: var(--font-body--family);
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.5;
  }

  [data-essential-cart-element='cart-drawer-checkout-button'] :is(div, span) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
  }

  /* Leerer Warenkorb: nur Kreuz, Überschrift in VF Sans, Schaltfläche darunter, oben ausgerichtet */
  #cart-drawer > div:has([data-essential-cart-element='cart-drawer-empty'])
    :is([data-essential-cart-element='cart-drawer-title'], [data-essential-cart-element='cart-drawer-footer-wrapper']) {
    display: none;
  }

  #cart-drawer > div:has([data-essential-cart-element='cart-drawer-empty']) [data-essential-cart-element='cart-drawer-header'] {
    justify-content: flex-end;
    padding: 20px 24px 0;
  }

  [data-essential-cart-element='cart-drawer-empty'] {
    justify-content: flex-start;
    padding: 72px 24px 20px;
    background-color: var(--cc-cart-bg);
  }

  [data-essential-cart-element='cart-drawer-empty'] div {
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  [data-essential-cart-element='cart-drawer-empty'] > div > div {
    gap: 32px;
  }

  /* Icon aus der App (inline display: flex) ausblenden */
  [data-essential-cart-element='cart-drawer-empty'] [data-essential-cart-element='masked-icon'] {
    display: none !important;
  }

  [data-essential-cart-element='cart-drawer-empty-message'] {
    font-size: 16px;
    line-height: 1.5;
    color: var(--cc-cart-text);
  }

  [data-essential-cart-element='cart-drawer-empty-message'] p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }

  [data-essential-cart-element='cart-drawer-empty-message'] p + p {
    margin-top: 16px;
  }

  [data-essential-cart-element='cart-drawer-empty-message'] p:first-child {
    font-family: var(--font-accent--family);
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    hyphens: auto;
  }

  [data-essential-cart-element='cart-drawer-empty-message'] :is(span, strong, em) {
    font-size: inherit !important;
    color: inherit !important;
  }

  [data-essential-cart-element='cart-drawer-empty-message'] p > br:first-child {
    display: none;
  }

  [data-essential-cart-element='cart-drawer-empty-button'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 12px 24px;
    box-sizing: border-box;
    border: 1px solid var(--cc-cart-text);
    border-radius: 8px;
    background-color: var(--cc-cart-dark);
    color: var(--cc-cart-bg);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
  }
}