/** Shopify CDN: Minification failed

Line 349:11 Expected ":"

**/
/* Amelia Bristol cart drawer – replicated from Olivia London (2026-09-24) */

  /* ── a gaveta ─────────────────────────────────────────────────────────── */
  .drawer--cart .drawer__inner { width: 525px; max-width: 100vw; }
  .drawer--cart { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }

  /* ── cabeçalho: "Mein Warenkorb • 2" ──────────────────────────────────── */
  /* Centrado, como na gaveta que a app paga desenhava (medido lá, na classe do
     cabeçalho dela). ⚠ Não escrever aqui o nome da app: este comentário vai
     para o HTML de todas as páginas da loja e ficava a apregoar a app que
     acabámos de tirar — foi apanhado na verificação final. */
  .drawer--cart .cart__title {
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
    font-size: 24px; font-weight: 500; color: #000; text-transform: none; letter-spacing: 0;
    width: 100%;
  }
  /* o tema põe o número entre parênteses com ::before e ::after. Trocar só o
     ::before deixava o ")" órfão — "Mein Warenkorb • 2)". Precisam dos dois. */
  .drawer--cart .cart__title .cart__items-count::before { content: "• "; }
  .drawer--cart .cart__title .cart__items-count::after { content: ""; }

  /* a referência não tem rótulo "Produkte" por cima da lista */
  .drawer--cart .drawer__items-title { display: none; }

  /* ── contador ─────────────────────────────────────────────────────────── */
  /* Barra azul clara de ponta a ponta.
     A primeira tentativa usou "margin: 0 -100px" a contar que o pai cortasse
     o excesso — não cortava, e media-se 85px a transbordar em TODAS as
     larguras. O certo é tirar o padding ao invólucro (.cart__custom-code, que
     traz 15px de cada lado) e deixar a barra a 100%. */
  .drawer--cart .cart__custom-code { padding-left: 0; padding-right: 0; }
  /* A cor da barra é a que a app usa NESSA loja: azul-claro na Mia Lucerne,
     rosa na Olivia London. Medido, não escolhido. */
  .kk-timer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: #1c1c1c;
    background: #fbe6e8; padding: 9px 12px; text-align: center;
    margin: 0; width: 100%; box-sizing: border-box;
  }

  /* ⚠ O <cart-drawer> é um elemento personalizado, e esses nascem "inline".
     Neste tema (o export da Olivia) NENHUMA regra lhe dá display — procurei nas
     171 regras que mencionam .drawer e não há uma. Resultado: a gaveta recebia
     a classe is-open, o JS corria, e não se via nada, porque um inline sem
     conteúdo de linha não ocupa espaço. Não é preciso na Mia Lucerne, mas não
     faz mal lá, por isso fica para as duas. */
  cart-drawer.drawer--cart { display: block; }

  /* linha de pagamento seguro (só nas lojas que a têm — ver T.fraseSegura) */
  .kk-secure {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; padding: 14px 15px 12px; text-align: center;
    font-size: 13px; font-weight: 600; color: #1c1c1c;
  }
  .kk-secure svg { flex: none; color: #1c1c1c; }
  .kk-timer[hidden] { display: none; }

  /* ── linhas do carrinho ───────────────────────────────────────────────── */
  /* Como na referência: à esquerda o nome e as opções, à direita o preço com
     o riscado por cima; por baixo, a quantidade à esquerda e a poupança à
     direita. O tema empilhava tudo numa coluna só. */
  /* min-width:0 nos dois: um elemento de grelha (ou de flex) não encolhe abaixo
     do tamanho do seu conteúdo sem isto, e num ecrã de 360px era o preço que
     saía para fora da gaveta. Medido: transbordava 14px a 360 e 54px a 320. */
  .drawer--cart .cart__item { min-width: 0; }
  .drawer--cart .cart__item__content {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "info price" "info saving" "qty trash";
    align-items: start; column-gap: 10px; row-gap: 6px; min-width: 0;
  }
  .drawer--cart .cart__item__content-inner { grid-area: info; min-width: 0; }
  .drawer--cart .cart__price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin: 0; }
  .drawer--cart .kk-saving { grid-area: saving; justify-self: end; }
  /* display:contents dissolve estes dois invólucros para que o − 1 + e o
     caixote fiquem eles próprios na grelha: um à esquerda, o outro à direita,
     como na referência. Sem isto o caixote ficava preso ao lado do contador. */
  .drawer--cart .cart__quantity-wrapper,
  .drawer--cart .cart__quantity-counter { display: contents; }
  .drawer--cart .cart__quantity { grid-area: qty; justify-self: start; align-self: center; }
  .drawer--cart .cart__item__remove { grid-area: trash; justify-self: end; align-self: center; }

  /* Tipografia medida na gaveta da referência (31/07), não estimada:
       imagem 80x80 · título 15px/650 preto
       rótulo das opções 12px rgba(0,0,0,.6) · valores 12px rgba(0,0,0,.8)
       riscado 15px/400 rgb(152,162,179) · preço 15px/700 preto
       poupança 12px/500 rgb(7,148,85)
     A nossa tinha o título mais pequeno, o riscado a 12px e o preço a 600. */
  .drawer--cart .cart__item__image { width: 80px; flex: none; }
  .drawer--cart .cart__item__title { font-size: 15px; font-weight: 650; line-height: 1.3; color: #000; }
  /* "Farbe, Grösse:" numa linha e "Grün, S" na seguinte, como na referência.
     O rótulo é mais claro do que o valor — .6 contra .8 de opacidade. */
  .drawer--cart .cart__item__selected-options { font-size: 12px; color: rgba(0, 0, 0, .8); margin: 3px 0 0; line-height: 1.45; }
  .drawer--cart .cart__item__selected-options strong { display: block; font-weight: 400; color: rgba(0, 0, 0, .6); }
  .drawer--cart .cart__price { font-size: 15px; font-weight: 700; white-space: nowrap; }
  .drawer--cart .cart__price del { order: -1; font-size: 15px; font-weight: 400; color: rgb(152, 162, 179); }
  /* na referência o preço a pagar é preto, não vermelho */
  .drawer--cart .cart__price ins { text-decoration: none; color: #000; font-weight: 700; }

  /* a poupança em pastilha verde clara, com etiqueta de preço — como a dela */
  .kk-saving {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 5px; background: #e7f6ec;
    font-size: 12px; font-weight: 500; color: #079455;
    text-align: right; max-width: 150px;
  }
  .kk-saving svg { width: 13px; height: 13px; flex: none; }

  .drawer--cart .cart__item__image img,
  .drawer--cart .cart__item__image .lazy-image { border-radius: 6px; overflow: hidden; }

  /* "Entfernen" passa a caixote, como na referência. O ícone vai desenhado no
     próprio CSS — não se pede uma imagem a ninguém. */
  .drawer--cart .cart__item__remove {
    font-size: 0; width: 22px; height: 22px; padding: 0; border: 0;
    display: inline-block; vertical-align: middle; margin-left: 10px; opacity: .55;
    background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
  }
  .drawer--cart .cart__item__remove:hover { opacity: 1; }

  /* o − 1 + com caixa, como o dele.
     O campo do tema traz "padding: 10px 30px". Numa caixa estreita isso deixa
     a área de conteúdo a zero e o número desaparece — não é invisível, é
     cortado (overflow: clip). Daí o padding a zero e o box-sizing. */
  .drawer--cart .cart__quantity { display: inline-flex; align-items: center; border: 1px solid #dcdcdc; border-radius: 4px; overflow: hidden; }
  /* No tema os botões são "position: absolute" e ficam por cima do campo (que
     tem padding lateral grande a abrir-lhes espaço). Como aqui o campo é
     estreito, ficavam em cima do número. Passam a estáticos e o flex alinha-os
     pela ordem do HTML: − campo + */
  .drawer--cart .cart__quantity-minus,
  .drawer--cart .cart__quantity-plus {
    position: static !important; width: 30px; height: 32px;
    padding: 0 !important; margin: 0 !important; top: auto !important; transform: none !important;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .drawer--cart .cart__quantity-field {
    box-sizing: border-box; width: 36px !important; height: 32px;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    text-align: center; font-size: 13px !important; line-height: 32px; background: transparent;
  }

  /* ── rodapé ───────────────────────────────────────────────────────────── */
  .drawer--cart .cart__total { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .drawer--cart .kk-rabatte { font-size: 13px; color: #4b4b4b; }
  .drawer--cart .kk-rabatte .kk-rabatte__value { color: #079455; font-weight: 500; }
  .drawer--cart .cart__total__label { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  .drawer--cart .cart__total__price { font-size: 15px; font-weight: 600; }

  /* Mesma sombra do botão de comprar da ficha de produto — pedido dele, para
     o carrinho ficar com o mesmo volume. Duas camadas: uma curta e escura que
     assenta o botão, outra larga e suave que lhe dá o relevo. */
  .drawer--cart .cart__checkout {
    background: #111 !important; border-color: #111 !important; color: #fff !important;
    font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important;
    text-transform: none !important; border-radius: 6px; min-height: 52px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 4px 10px rgba(0, 0, 0, .12);
    transition: box-shadow .2s ease-out, transform .2s ease-out;
  }
  /* O hover da referência é simples: o preto passa a rgba(0,0,0,.8) e mais
     nada. O tema, em vez disso, desliza um bloco cinzento-escuro por cima
     (o ::after) — num botão preto isso lê-se como uma mancha estranha.
     Mata-se o bloco e faz-se o que ela faz. */
  .drawer--cart .cart__checkout::after { content: none !important; }
  .drawer--cart .cart__checkout:hover {
    background: rgba(0, 0, 0, .8) !important; border-color: rgba(0, 0, 0, .8) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 7px 16px rgba(0, 0, 0, .15);
  }
  .drawer--cart .cart__checkout:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transform: translateY(1px);
  }

  .drawer--cart .cart__payment-icons,
  .drawer--cart .payment-icons { display: flex; justify-content: center; gap: 6px; padding-top: 10px; }
  .drawer--cart .cart__note { font-size: 11px; color: #8a8a8a; }

  /* ── espaço entre o botão e os ícones de pagamento ─────────────────────
     Medido na referência: 10px. O nosso dava 53, somados de três sítios —
     15px de margem do botão, 15px de padding do bloco e 10px de margem da
     lista, mais o resto. Zera-se cada um e deixa-se um só valor. */
  .drawer--cart .cart__buttons-all { margin-bottom: 0 !important; }
  .drawer--cart .cart__buttons { margin-bottom: 0 !important; }
  .drawer--cart .cart__checkout { margin-bottom: 0 !important; }
  .drawer--cart .cart__custom-code:has(.kk-pay) { padding-top: 0; padding-bottom: 0; }
  /* os 13px que sobravam eram o padding-bottom do rodapé; passa para baixo dos
     ícones, que é onde faz falta, e a distância fica nos 10px da referência */
  .drawer--cart .cart__foot__inner { padding-bottom: 0 !important; }
  .drawer--cart .kk-pay { margin-top: 10px !important; padding-bottom: 12px; }

  /* ── telemóvel ────────────────────────────────────────────────────────── */
  @media screen and (max-width: 768px) {
    .drawer--cart .drawer__inner { width: 100vw; max-width: 100vw; }
    .drawer--cart .cart__title { font-size: 20px; }
    .drawer--cart .cart__item__title { font-size: 13px; }
    .drawer--cart .cart__checkout { min-height: 48px; font-size: 15px !important; }
    /* espaço para a barra do browser em iOS — vai nos ícones, que agora são o
       último elemento do rodapé */
    .drawer--cart .kk-pay { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ── telemóveis pequenos (iPhone SE e afins) ──────────────────────────── */
  @media screen and (max-width: 400px) {
    .drawer--cart .cart__item__image { width: 64px; }
    .drawer--cart .cart__item__title { font-size: 12.5px; }
    .drawer--cart .cart__price { font-size: 14px; }
    .drawer--cart .cart__price del { font-size: 11px; }
    .drawer--cart .kk-saving { font-size: 11px; }
    .drawer--cart .cart__item__content { column-gap: 8px; }
  }

  /* ── rodapé: a linha "Artikel" sai, como na referência ────────────────── */
  .drawer--cart .kk-artikel { display: none !important; }
  .drawer--cart .cart__total__discount { display: none !important; }
  .drawer--cart .kk-rabatte__label { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .drawer--cart .kk-rabatte__pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border: 1px solid #dcdcdc; border-radius: 4px;
    font-size: 11.5px; color: #4b4b4b;
  }
  .drawer--cart .kk-rabatte__pill svg { width: 12px; height: 12px; flex: none; }

  /* ── carrinho vazio: só o saco e a frase, como na referência ──────────── */
  .drawer--cart .drawer__empty__inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 55vh; gap: 12px; text-align: center;
  }
  .drawer--cart .drawer__empty__inner::before {
    content: ""; width: 30px; height: 30px; display: block;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.2 13.2a1 1 0 01-1 .8H6.2a1 1 0 01-1-.8L4 7z'/%3E%3Cpath d='M9 7V5.5a3 3 0 016 0V7'/%3E%3C/svg%3E");
  }
  .drawer--cart .drawer__empty__message { font-size: 14px; color: #1f1f1f; margin: 0; }
  .drawer--cart .drawer__empty__buttons { display: none !important; }


  /* ═══ o painel e as zonas ══════════════════════════════════════════════ */
  .drawer--cart .drawer__inner{width:450px !important;max-width:100vw;border-left:0 !important;background:#fff}
  /* ⚠ o cabeçalho está DENTRO da área que rola (na fonte é irmão dela).
     position:sticky dá o mesmo resultado sem mexer no DOM, que o tema volta
     a desenhar a cada mudança do carrinho.
     A folga por baixo é padding, não altura fixa: uma altura fixa não protege
     o logótipo quando o cabeçalho aperta (aconteceu no telemóvel). */
  .drawer--cart .cart-block--top{
    position:sticky;top:0;z-index:6;background:#fff;
    min-height:80px;box-sizing:border-box;display:flex;align-items:center;
    padding:8px 0 !important;margin:0 !important;
  }
  .drawer--cart .drawer__body{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    padding-left:30px;padding-right:30px;scrollbar-width:none;
  }
  .drawer--cart .drawer__body::-webkit-scrollbar{width:0}
  .drawer--cart .drawer__body > .cart-block{padding-left:0;padding-right:0}
  .drawer--cart .cart__custom-code{padding-left:0 !important;padding-right:0 !important}
  /* a referência não tem rótulo por cima da lista ("Producten" / "Products") */
  .drawer--cart .drawer__items-title{display:none !important}

  /* ═══ cronómetro ═══════════════════════════════════════════════════════ */
  .drawer--cart .kk-timer{
    background:#f1bcbc;color:#1a1a1a;font-size:13px;font-weight:700;
    border-radius:8px;margin:0;width:100%;padding:9px 10px;box-sizing:border-box;text-align:center;
  }
  .drawer--cart .kk-timer strong{color:#e60000}
  .drawer--cart .kk-timer__icon{display:none}

  /* ═══ barra de patamares ═══════════════════════════════════════════════
     ⚠ Sem altura fixa. A especificação de onde isto veio dizia 129px e aqui
     sobravam ~70px vazios por baixo dos rótulos, que estão em position:
     absolute e só precisam de uns 32. */
  /* 44px em baixo e não 32: o rótulo passou a ter duas linhas e a de baixo
     saía por fora da secção, a encostar ao primeiro produto */
  .drawer--cart .kk-tier{height:auto;box-sizing:border-box;padding:14px 0 44px;border-bottom:1px solid #e8e8e1}
  .drawer--cart .kk-tier[hidden]{display:none}
  .drawer--cart .kk-tier__msg{text-align:center;font-size:13.5px;color:#5a5a5a;margin:0 0 16px}
  /* o destaque é PRETO e não verde: o verde já é a barra, as pastilhas e o
     botão, e um quarto verde na mesma vista tira força a todos. A preto, o que
     salta é o que interessa — quantas faltam e quanto se ganha — e o resto da
     frase recua para cinzento. */
  .drawer--cart .kk-tier__msg strong{color:#1a1a1a;font-weight:700}
  /* ⚠ margem de 34px e não de 12px. O último marco fica a 100% da barra e o
     rótulo dele é centrado no círculo: com 12px de margem, metade de «25% OFF»
     caía fora e alguém tinha resolvido isso a empurrar SÓ o último para a
     esquerda — ficava desalinhado do próprio círculo, que foi o que ele viu.
     Afastando a barra das bordas, todos os rótulos ficam centrados e nenhum
     transborda. 34px chega: o rótulo mede ~53px, logo 27px para cada lado. */
  .drawer--cart .kk-tier__track{position:relative;height:6px;background:#e4f3ea;border-radius:999px;margin:0 34px}
  .drawer--cart .kk-tier__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#409d61;border-radius:999px;transition:width .4s}
  .drawer--cart .kk-tier__cp{position:absolute;top:50%;transform:translate(-50%,-50%);text-align:center}
  .drawer--cart .kk-tier__dot{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #409d61;box-sizing:border-box;position:relative}
  .drawer--cart .kk-tier__cp.is-done .kk-tier__dot{background:#409d61}
  /* a etiqueta dentro dos círculos por conquistar. Vai por MÁSCARA e não por
     background-image: assim o desenho toma a cor do CSS e acompanha o verde da
     loja, em vez de ficar preso à cor com que o SVG foi escrito. */
  .drawer--cart .kk-tier__dot::before{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:12px;height:12px;background-color:#409d61;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M13 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3Cpath fill-rule='evenodd' d='M11.276 3.5a3.75 3.75 0 0 0-2.701 1.149l-4.254 4.417a2.75 2.75 0 0 0 .036 3.852l2.898 2.898a2.5 2.5 0 0 0 3.502.033l4.747-4.571a3.25 3.25 0 0 0 .996-2.341v-2.187a3.25 3.25 0 0 0-3.25-3.25h-1.974Zm-1.62 2.19a2.25 2.25 0 0 1 1.62-.69h1.974c.966 0 1.75.784 1.75 1.75v2.187c0 .475-.194.93-.536 1.26l-4.747 4.572a1 1 0 0 1-1.401-.014l-2.898-2.898a1.25 1.25 0 0 1-.016-1.75l4.253-4.418Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath d='M13 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3Cpath fill-rule='evenodd' d='M11.276 3.5a3.75 3.75 0 0 0-2.701 1.149l-4.254 4.417a2.75 2.75 0 0 0 .036 3.852l2.898 2.898a2.5 2.5 0 0 0 3.502.033l4.747-4.571a3.25 3.25 0 0 0 .996-2.341v-2.187a3.25 3.25 0 0 0-3.25-3.25h-1.974Zm-1.62 2.19a2.25 2.25 0 0 1 1.62-.69h1.974c.966 0 1.75.784 1.75 1.75v2.187c0 .475-.194.93-.536 1.26l-4.747 4.572a1 1 0 0 1-1.401-.014l-2.898-2.898a1.25 1.25 0 0 1-.016-1.75l4.253-4.418Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  /* no conquistado manda o ✓, e a etiqueta sai — dois desenhos no mesmo
     círculo de 22px ficam uma mancha */
  .drawer--cart .kk-tier__cp.is-done .kk-tier__dot::before{content:none}
  .drawer--cart .kk-tier__cp.is-done .kk-tier__dot::after{
    content:"\2713";color:#fff;font-size:12px;font-weight:700;
    position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  }
  /* DUAS linhas: percentagem em cima, palavra por baixo. Numa linha só, o
     «10% RABATT» da Mia deixava 1px entre rótulos e no telemóvel colidia — a
     largura passa a ser a da palavra e deixa de depender da língua. */
  .drawer--cart .kk-tier__label{
    position:absolute;top:26px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;
    white-space:nowrap;color:#1a1a1a;line-height:1.1;
  }
  .drawer--cart .kk-tier__label b{font-size:12.5px;font-weight:700;font-style:normal}
  .drawer--cart .kk-tier__label i{
    font-size:9.5px;font-weight:600;font-style:normal;
    letter-spacing:.4px;color:#6f6f6f;margin-top:1px;
  }

  /* ═══ a linha de produto ═══════════════════════════════════════════════
     ⚠ O tema traz .cart__item__content com width:calc(100% - 90px) e
     padding-left:30px — inofensivo no layout antigo, aqui roubava 90px e
     sobravam 6px para o título, que partia palavra a palavra.
     ⚠ E NADA de altura fixa: o conteúdo real chegou a medir 171 dentro de uma
     caixa de 140 e transbordava para cima da linha separadora. */
  /* ⚠ 14px de intervalo e não 22: com o preço em CHF, o par riscado+actual mede
     179px e sobravam 2px até ao contador. Os 8px que se poupam aqui vão todos
     para essa folga, e a foto continua a 100px. */
  .drawer--cart .cart__item{
    display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:14px;
    padding:14px 0;margin-bottom:0;border-bottom:1px solid #e8e8e1;min-width:0;align-items:start;
  }
  .drawer--cart .cart__item__image{width:100px;height:100px;flex:none;margin:0}
  .drawer--cart .cart__item__image .lazy-image,
  .drawer--cart .cart__item__image img{width:100px;height:100px;object-fit:cover;border-radius:12px;display:block}
  .drawer--cart .cart__item__content{
    width:100% !important;padding-left:0 !important;height:auto;display:grid;
    /* ⚠ TRÊS linhas, e a última à LARGURA TODA.
       Antes eram quatro (preço, poupança, pastilha), cada uma na coluna estreita
       da direita: o bloco descia por baixo do contador e a pastilha caía em cima
       do separador da linha seguinte. Juntá-las na coluna de 111px não chegou —
       «You save £60.02» + «🚀 50% OFF» medem ~204px e partiam à mesma em duas.
       Assim, o contador fica ao lado do PREÇO (é aí que se quer alinhado) e os
       extras ocupam a linha de baixo inteira, onde cabem folgados. */
       🔴 E a coluna do preço deixou de ser 111px fixos. Na Mia o riscado é
       «CHF 330.00» e o par riscado+actual mede 179px: transbordava a coluna
       para a ESQUERDA e ia bater no contador (medido: 1px de sobreposição).
       Agora o título ocupa a linha inteira — como já fazia no telemóvel — e a
       coluna do preço pede a largura que precisa. */
    grid-template-columns:minmax(80px,1fr) auto;grid-template-rows:auto auto auto;
    grid-template-areas:"info info" "qty price" "extras extras";
    column-gap:10px;row-gap:2px;min-width:0;
  }
  .drawer--cart .cart__item__content-inner{grid-area:info;min-width:0;padding-right:26px}
  /* o caixote sai da grelha e vai para o canto, porque o título passou a ocupar
     as duas colunas. ⚠ O quantity-counter tem position:relative E
     display:contents ao mesmo tempo — declara bloco de contenção sem gerar
     caixa e atirava o caixote 168px para baixo. A static devolve o bloco. */
  .drawer--cart .cart__item{position:relative}
  .drawer--cart .cart__quantity-wrapper{position:static !important}
  .drawer--cart .cart__item__remove{position:absolute;top:14px;right:0;align-self:auto;justify-self:auto;margin:0}
  .drawer--cart .cart__item__title{font-size:13.5px;font-weight:400;line-height:1.35;color:#000}
  /* ⚠ O rótulo fica EM LINHA com o valor ("Kleur: Zilver"), não em bloco.
     As duas lojas chegam aqui por caminhos diferentes: a Noor já traz um <p>
     por opção (o tema dela separa-as), a Olivia traz um <p> só com
     "Colour, Size:" e o JS parte-o em .kk-opt. Com display:block o rótulo
     saltava para uma linha sozinho e na Noor saíam linhas vazias pelo meio. */
  .drawer--cart .cart__item__selected-options{font-size:13px;font-weight:400;color:#000;margin:5px 0 0;line-height:1.45}
  .drawer--cart .cart__item__selected-options strong{display:inline;font-weight:700;color:#000}
  .drawer--cart .kk-opt{display:block}
  .drawer--cart .kk-opt strong{display:inline;font-weight:700}
  /* ⚠ display:contents dissolve estes dois invólucros para que o − 1 + e o
     botão de remover fiquem eles próprios NA GRELHA, um à esquerda e outro à
     direita. Sem isto (era o caso da Noor) o invólucro é uma caixa só, cai
     numa célula automática, e a quantidade aparece no canto errado. */
  .drawer--cart .cart__quantity-wrapper,
  .drawer--cart .cart__quantity-counter{display:contents}
  /* ⚠ align-self CENTER e não start. A área qty ocupa as três linhas da
     direita (preço, poupança, pastilha) e o contador, encostado ao topo, ficava
     a meio caminho: o bloco da direita descia por baixo dele e as duas metades
     da linha não liam como uma só. Centrado, partilham o mesmo eixo — que é o
     que se vê na referência. Medido a 16/08: contador 106→133, bloco 99→164. */
  .drawer--cart .cart__quantity{
    grid-area:qty;justify-self:start;align-self:center;margin-top:0;
    width:80px;height:29px;box-sizing:border-box;
    display:inline-flex;align-items:center;border:1px solid #dcdcdc;border-radius:4px;overflow:hidden;
  }
  /* No tema os botões são position:absolute e ficam POR CIMA do campo (que
     tem padding lateral grande a abrir-lhes espaço). Numa caixa estreita
     tapavam o número — que era o que estava a acontecer: o campo tinha
     valor "1" e via-se uma caixa vazia. Passam a estáticos e o flex alinha-os
     pela ordem do HTML: − campo + */
  .drawer--cart .cart__quantity-minus,
  .drawer--cart .cart__quantity-plus{
    position:static !important;width:26px;height:27px;
    padding:0 !important;margin:0 !important;top:auto !important;transform:none !important;
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .drawer--cart .cart__quantity-field{
    box-sizing:border-box;width:28px !important;min-width:0 !important;height:27px;
    padding:0 !important;margin:0 !important;border:0 !important;
    text-align:center;font-size:13px !important;line-height:27px;background:transparent;
  }
  /* "Verwijderen"/"Remove" passa a caixote, como na referência. O ícone vai
     desenhado no próprio CSS — não se pede uma imagem a ninguém. */
  .drawer--cart .cart__item__remove{
    font-size:0 !important;width:22px;height:22px;padding:0;border:0;
    display:inline-block;vertical-align:middle;opacity:.55;
    background:no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E");
  }
  .drawer--cart .cart__item__remove:hover{opacity:1}
  /* ⚠ largura AUTOMÁTICA e com quebra. Fixa em 111px, o par «CHF 330.00
     CHF 164.97» (179px) saía pela esquerda e batia no contador. O flex-wrap é o
     cinto de segurança: numa moeda ainda mais comprida, o riscado passa para
     cima do actual em vez de invadir o que está ao lado. */
  .drawer--cart .cart__price{
    grid-area:price;width:auto;max-width:100%;margin:0;
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:flex-end;column-gap:6px;row-gap:0;
  }
  .drawer--cart .cart__price del{order:-1;color:#b0b0b0;font-size:12.5px;font-weight:400}
  .drawer--cart .cart__price ins{color:#e60000;font-weight:700;font-size:17px;text-decoration:none}
  /* a poupança e a pastilha na MESMA linha, encostadas à direita */
  .drawer--cart .kk-extras{
    grid-area:extras;justify-self:end;display:flex;align-items:center;
    gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:2px;
  }
  .drawer--cart .kk-saving{
    width:auto;text-align:right;margin:0 !important;
    background:none;padding:0;max-width:none;border-radius:0;white-space:nowrap;
    color:#409d61;font-weight:700;font-size:12.5px;
  }
  .drawer--cart .kk-saving svg{display:none}
  .drawer--cart .kk-chip{
    display:inline-flex;align-items:center;gap:4px;margin:0 !important;
    background:#e4f3ea;color:#409d61;font-size:11px;font-weight:700;
    padding:4px 12px;border-radius:999px;white-space:nowrap;
  }

  /* ═══ estado vazio ═════════════════════════════════════════════════════
     Com box-sizing:border-box uma caixa não encolhe abaixo do próprio padding.
     O contentor que o tema colapsa com max-height:0 não pode ter padding, ou
     fica com altura fantasma e encurta a gaveta com o carrinho cheio. */
  .drawer--cart .drawer__empty{padding:0 !important}
  .drawer--cart .drawer__empty__inner{padding:30px 28px}

  /* ═══ rodapé ═══════════════════════════════════════════════════════════ */
  /* ⚠ 22px e não 16. Ele apanhou o «−CHF 121.01» do desconto encostado à borda
     direita. E os ícones de pagamento estavam a 0px dos dois lados — a única
     coisa da gaveta a tocar nas bordas. Todo o rodapé passa à mesma margem. */
  .drawer--cart .cart__foot__inner{padding-left:22px !important;padding-right:22px !important}
  /* ⚠ !important: na Mia (e na Rosita) os ícones de pagamento vivem NOUTRO
     bloco, o kk-icones, que é desenhado DEPOIS deste e ganha com a mesma
     especificidade. Sem isto a regra não pega e eles ficam colados às bordas. */
  .drawer--cart ul.kk-pay{padding-left:22px !important;padding-right:22px !important;box-sizing:border-box}
  /* ⚠ Só as linhas DIRECTAS do bloco de preços saem (artigos e subtotal — o
     total passa a viver dentro do botão). A regra anterior apanhava qualquer
     .cart__total e na Noor levava também a linha do desconto, que ali está
     ANINHADA dentro de .cart__total__discount — o desconto desaparecia. */
  .drawer--cart .cart__price__holder > .cart__total:not(.kk-rabatte){display:none !important}
  .drawer--cart .cart__total__discount{display:none !important}

  /* linha de desconto própria, para as lojas cujo tema não traz a da Olivia */
  .drawer--cart .kk-desc{
    display:flex;align-items:center;gap:8px;height:37px;
    margin-top:7px;margin-bottom:7px;
    font-size:14px;font-weight:500;color:#1a1a1a;letter-spacing:-.35px;
  }
  .drawer--cart .kk-desc__pill{
    background:#f2f2f2;border-radius:8px;padding:5px 12px;
    color:#444;font-size:12px;font-weight:600;letter-spacing:.5px;
  }
  .drawer--cart .kk-desc__val{margin-left:auto;font-size:14px;font-weight:600;color:#1a1a1a}
  /* o nome da loja quando não há logótipo (a Noor ainda não tem nenhum) */
  .drawer--cart .cart__title .kk-cart-nome{
    font-size:20px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#111;
  }
  /* a fonte não tem linha de "pagamento seguro" */
  .drawer--cart .kk-secure{display:none !important}
  .drawer--cart .kk-note{
    height:37px;display:flex;align-items:center;justify-content:center;
    font-size:12px;color:#6b6b6b;text-align:center;margin:0;line-height:1.4;
  }
  /* ⚠ As folgas nota→descontos e descontos→botão vinham AS DUAS da margem de
     15px que o tema põe nesta linha — não do padding da nota nem do botão.
     Metade: 7px. */
  .drawer--cart .cart__total.kk-rabatte{height:37px;align-items:center;margin-top:7px !important;margin-bottom:7px !important}
  .drawer--cart .kk-rabatte{font-size:14px;font-weight:500;color:#1a1a1a;letter-spacing:-.35px}
  /* verde, igual à pastilha do desconto da linha (.kk-chip). Era cinzenta e
     lia-se como uma etiqueta apagada ao lado de um desconto que é a coisa boa
     da gaveta. Mesmos valores da .kk-chip para as duas serem a mesma peça. */
  .drawer--cart .kk-rabatte__pill{
    background:#e4f3ea;border:0;border-radius:999px;padding:4px 12px;
    color:#409d61;font-size:12px;font-weight:700;letter-spacing:.3px;
  }
  .drawer--cart .kk-rabatte__pill svg{display:none}
  .drawer--cart .kk-rabatte__value{font-size:14px;font-weight:600;color:#1a1a1a}

  .drawer--cart .cart__checkout{
    background:#000 !important;border-color:#000 !important;color:#fff !important;
    border-radius:12px !important;height:59px;min-height:59px;
    /* sem espaçamento entre letras: com 4,5px o "CHECKOUT" ficava esticado e
       lia-se como quatro palavras. Pedido dele a 16/08. */
    letter-spacing:0 !important;font-size:15px !important;font-weight:700 !important;
    text-transform:uppercase !important;
    display:flex !important;flex-direction:row !important;
    align-items:center;justify-content:center;gap:10px;white-space:nowrap;
    /* sombreado leve em baixo e à direita: dá volume ao botão sem virar
       mancha. Duas tentativas antes desta falharam para lados opostos —
       difusa demais e depois um bloco duro de 6px. A mesma sombra lê-se
       muito mais pesada num painel estreito do que numa página larga.
       22/08: o botão passou a PRETO (o mesmo do «add to cart» da ficha) e a
       sombra a 2px em baixo e 2px à direita, a pedido dele. Sobre fundo preto
       a sombra precisa de mais opacidade para se ver. */
    box-shadow:5px 5px 12px rgba(0,0,0,.34) !important;
    transition:box-shadow .15s ease-out, transform .15s ease-out, background .25s ease-out !important;
  }
  .drawer--cart .cart__checkout::after{content:none !important}
  .drawer--cart .cart__checkout:hover{
    background:#222 !important;border-color:#222 !important;
    box-shadow:7px 7px 18px rgba(0,0,0,.40) !important;
  }
  .drawer--cart .cart__checkout:active{
    box-shadow:1px 1px 3px rgba(0,0,0,.30) !important;transform:translateY(1px);
  }
  .drawer--cart .kk-btn-total{white-space:nowrap;word-spacing:5px}

  /* ═══ a fila de promessas, por baixo do botão ═══════════════════════════
     Só nasce se a loja tiver garantias definidas — cada frase é uma promessa
     medida, nunca escrita de cor.
     Fica ENTRE o botão e os ícones de pagamento, que é onde ele a desenhou. */
  .drawer--cart .kk-trust{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin:10px 0 0;padding:11px 12px;box-sizing:border-box;
    border:1px solid #e6e6e6;border-radius:10px;background:#fff;
    font-size:12.5px;font-weight:600;color:#3a3a3a;line-height:1;
  }
  .drawer--cart .kk-trust__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .drawer--cart .kk-trust svg{flex:none;width:15px;height:15px}
  .drawer--cart .kk-trust__sep{color:#d5d5d5;font-weight:400}
  @media (max-width:520px){
    .drawer--cart .kk-trust{gap:8px;padding:10px;font-size:11.5px}
  }

  /* ═══ telemóvel ════════════════════════════════════════════════════════ */
  @media screen and (max-width:520px){
    .drawer--cart .drawer__inner{width:100vw !important;max-width:100vw}
    .drawer--cart .drawer__body{padding-left:24px;padding-right:24px}
    .drawer--cart .cart-block--top{height:auto;min-height:64px;padding:10px 0 8px !important}
    .drawer--cart .cart__title .kk-cart-logo{max-height:34px;margin-bottom:2px}
    .drawer--cart .cart__foot__inner{padding-left:16px !important;padding-right:16px !important}
    .drawer--cart .kk-pay{padding-left:16px;padding-right:16px}
    .drawer--cart .kk-tier__label b{font-size:11.5px}
    .drawer--cart .kk-tier__label i{font-size:9px;letter-spacing:.2px}
    /* 🔴 a coluna de preço fixa em 111 deixava ~110px para o título, que
       partia em cinco linhas. Aqui o título ocupa a largura toda. */
    .drawer--cart .cart__item{position:relative;grid-template-columns:80px minmax(0,1fr);column-gap:14px}
    .drawer--cart .cart__item__image,
    .drawer--cart .cart__item__image img,
    .drawer--cart .cart__item__image .lazy-image{width:80px;height:80px}
    .drawer--cart .cart__item__content{
      grid-template-columns:minmax(80px,1fr) auto;
      grid-template-areas:"info info" "qty price" "extras extras";
    }
    /* o quantity-counter traz position:relative E display:contents ao mesmo
       tempo: declara bloco de contenção sem gerar caixa, e atirava o caixote
       168px para baixo. A static devolve o bloco ao .cart__item. */
    .drawer--cart .cart__quantity-wrapper{position:static !important}
    .drawer--cart .cart__item__remove{position:absolute;top:14px;right:0;align-self:auto;justify-self:auto}
    .drawer--cart .cart__item__content-inner{padding-right:26px}
    .drawer--cart .cart__price,.drawer--cart .kk-saving{width:auto}
    .drawer--cart .kk-note{height:auto;padding:8px 0;font-size:11.5px;line-height:1.35}
    .drawer--cart .cart__total.kk-rabatte{height:auto;padding:5px 0}
    .drawer--cart .cart__checkout{height:54px;min-height:54px;font-size:14px !important;letter-spacing:0 !important}
    .drawer--cart .cart__foot__inner{padding-top:4px !important}
  }
  .drawer--cart .cart__title .kk-cart-logo{max-height:44px;width:auto;display:block;margin-bottom:2px}
  /* ⚠ O contador só sai quando há mesmo alguma coisa a ocupar o lugar dele.
     Na Noor não há logótipo nenhum e a versão anterior apagava o texto na
     mesma — o cabeçalho da gaveta ficava em branco. */
  .drawer--cart .cart__title.kk-tem-marca .cart__items-count,
  .drawer--cart .cart__title:has(.kk-cart-logo) .cart__items-count,
  .drawer--cart .cart__title:has(.kk-cart-nome) .cart__items-count{display:none !important}
  .drawer--cart .cart__title{justify-content:center;line-height:1}


  /* imstation:teste-1409 — pedido de 14/09 */
  /* a frase do tamanho fica POR CIMA da linha dourada: a linha passa do topo
     do rodapé para debaixo da frase, à largura toda da gaveta */
  .drawer--cart .cart__foot__inner{border-top:0 !important;padding-top:0 !important}
  .drawer--cart .kk-note{border-bottom:1px solid rgb(211,183,145);margin:0 -22px 12px;padding-left:22px;padding-right:22px}
  /* o logo da Royal Mail no lugar da carrinha. O ficheiro é quadrado (320x320)
     com margem em cima e em baixo; o cover corta só essa margem */
  .drawer--cart .kk-trust .kk-trust__rm{flex:none;display:block;width:36px;height:24px;object-fit:cover}
  @media screen and (max-width:520px){
    .drawer--cart .kk-note{margin:0 -16px 10px;padding:8px 16px}
  }

.kk-rabatte__pill svg,.kk-rabatte__tag svg{width:14px;height:14px;flex:0 0 auto;vertical-align:middle}

  /* o padding lateral que se tirou ao invólucro devolve-se aqui, que é onde faz falta */
  .kk-pay { list-style: none; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; padding: 0 15px; }
  .kk-pay svg { display: block; }
  /* o ficheiro do TWINT é a marca quadrada; os vizinhos são pastilhas largas.
     A mesma moldura para a fila ficar regular. */
  .kk-pay .kk-pay-img {
    width: 38px; height: 24px; object-fit: contain; display: block;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 3px;
    padding: 2px; box-sizing: border-box;
  }

/* AB overrides */
.drawer--cart .cart__item .cart__item__remove { position: absolute !important; top: 14px !important; right: 0 !important; bottom: auto !important; margin: 0 !important; grid-area: auto !important; }
.drawer--cart, .drawer--cart .drawer__body, .drawer--cart .drawer__foot, .drawer--cart p, .drawer--cart span, .drawer--cart a, .drawer--cart button, .drawer--cart li, .drawer--cart h3, .drawer--cart h4 { letter-spacing: normal; }
.drawer--cart .cart__checkout { letter-spacing: .35px; }
.drawer--cart .cart__item { position: relative; }
.drawer--cart .kk-chip { display: none !important; }
.drawer--cart .cart-block--top { border-bottom: 1px solid rgb(211, 183, 145) !important; }
.drawer--cart .kk-cart-logo { height: 52px; max-height: 52px; width: auto; }

.drawer--cart .cart__item__title, .drawer--cart .cart__item__title a { text-transform: none !important; letter-spacing: normal !important; }