/* El Terrat by Hafssa — Warenkorb-Schubfach.
   Aus dem Design extrahiert (tienda.html). Das Schubfach erscheint jetzt auf
   jeder Seite, sobald etwas im Korb liegt — deshalb gehört sein CSS hierher
   und nicht in die Seitenvorlage. */
.cartbtn{position:relative;background:none;border:0;cursor:pointer;color:inherit;padding:6px;display:inline-flex;align-items:center}
.cartbtn svg{width:22px;height:22px;display:block}
.cartbtn .cc{position:absolute;top:-3px;right:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:var(--terra);color:#fff;font-size:.56rem;font-weight:600;display:none;align-items:center;justify-content:center;line-height:16px}
.cartbtn.has .cc{display:flex}
.cartscrim{position:fixed;inset:0;z-index:190;background:rgba(12,9,6,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.cartscrim.open{opacity:1;visibility:visible}
.cartd{position:fixed;top:0;right:0;bottom:0;z-index:195;width:min(400px,92vw);background:var(--bg);color:var(--ink);transform:translateX(101%);visibility:hidden;transition:transform .42s cubic-bezier(.2,.7,.2,1),visibility .42s;display:flex;flex-direction:column;box-shadow:-24px 0 70px rgba(0,0,0,.32)}
.cartd.open{transform:none;visibility:visible}
.cartd__h{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--line)}
.cartd__h h3{font-family:var(--serif);font-size:1.15rem;font-weight:300;letter-spacing:.01em}
.cartd__x{background:none;border:0;font-size:1.4rem;cursor:pointer;color:inherit;line-height:1;opacity:.65}
.cartd__x:hover{opacity:1}
.cartd__items{flex:1;overflow-y:auto;padding:4px 26px}
.cartd__empty{opacity:.55;text-align:center;padding:52px 10px;font-size:.9rem}
.citem{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.citem__b{flex:1;min-width:0}
.citem__n{font-size:.92rem;line-height:1.35}
.citem__p{font-size:.8rem;opacity:.6;margin-top:3px}
.citem__q{display:flex;align-items:center;gap:9px;margin-top:10px}
.citem__q button{width:25px;height:25px;border:1px solid var(--line);background:none;color:inherit;cursor:pointer;border-radius:50%;font-size:.9rem;line-height:1;transition:.2s;font-family:inherit}
.citem__q button:hover{border-color:var(--terra);color:var(--terra)}
.citem__q span{font-size:.85rem;min-width:16px;text-align:center}
.citem__rm{background:none;border:0;color:inherit;opacity:.32;cursor:pointer;font-size:1.15rem;line-height:1;padding:2px 4px}
.citem__rm:hover{opacity:1;color:var(--terra)}
.citem__q button{position:relative}
.citem__q button::after{content:"";position:absolute;inset:-9px}
.citem__rm{position:relative}
.citem__rm::after{content:"";position:absolute;inset:-11px}
.cartd__f{border-top:1px solid var(--line);padding:20px 26px}
.cartd__tot{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;margin-bottom:16px;letter-spacing:.04em}
.cartd__tot b{font-weight:600;font-size:1.15rem}
.cbig{display:block;width:100%;text-align:center;background:var(--terra);color:#fff;border:0;padding:16px;font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.3s;font-family:inherit}
.cbig:hover{background:var(--terra-deep)}
.cnote{text-align:center;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-top:13px}
.cartd__done{text-align:center;padding:54px 26px}
.cartd__done .ok{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--terra);color:var(--terra);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 22px}
.cartd__done h4{font-family:var(--serif);font-weight:300;font-size:1.3rem;margin-bottom:12px}
.cartd__done p{opacity:.62;font-size:.86rem;line-height:1.6;max-width:32ch;margin:0 auto}
@media(max-width:520px){
.cartd__h,.cartd__items,.cartd__f{padding-left:20px;padding-right:20px}
}
.citem__t{width:54px;flex:none;overflow:hidden;background:var(--bg2)}
.citem__t img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media(max-width:520px){
.citem__t{width:46px}
}
.cartd__done .ok{background:var(--terra)}
a.cbig{display:block;text-align:center;text-decoration:none}
.cbig--b{margin-top:10px;background:transparent;color:var(--ink);border:1px solid var(--line)}
html.dark .cbig--b{color:#F3ECDD;border-color:rgba(243,236,221,.28)}

/* ---------------------------------------- Bestellen im Schubfach */
/* Es gibt keine Kassenseite mehr: der zweite Schritt liegt hier. */

.cartd__form {
  padding: 0 clamp(18px, 4vw, 26px) 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.cartd__lead {
  margin: 0 0 20px;
  font-size: .86rem;
  line-height: 1.6;
  color: rgba(var(--ink-rgb, 28, 26, 22), .6);
}

.cartd__form label {
  display: block;
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb, 28, 26, 22), .58);
  margin: 0 0 6px;
}

.cartd__form input {
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cartd__form input:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(182, 92, 54, .14);
}

.cartd__err {
  margin: 4px 0 12px;
  padding: 11px 13px;
  border-left: 2px solid #B3452F;
  background: rgba(179, 69, 47, .08);
  font-size: .86rem;
  color: var(--ink);
}

.cartd__paynote {
  margin: 0 0 12px;
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(var(--ink-rgb, 28, 26, 22), .58);
}

.cback {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb, 28, 26, 22), .6);
  cursor: pointer;
}
.cback:hover { color: var(--terra); }

button.cbig { border: 0; width: 100%; cursor: pointer; font-family: var(--sans); }

/* Der Stern an den Pflichtfeldern — wie auf der Kasse, in Terrakotta. */
.cartd__form .req { color: var(--terra); }

/* Ein Sternchen allein sagt nur denen etwas, die es schon kennen. */
.cartd__req {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: rgba(var(--ink-rgb, 28, 26, 22), .5);
}

/* Ein Feld, das der Browser beanstandet, zeigt das auch.
   Aber erst, nachdem jemand es angefasst oder abgeschickt hat: mit
   «:invalid» allein standen alle vier Pflichtfelder von Anfang an rot da,
   als hätte man schon etwas falsch gemacht. («:not(:placeholder-shown)»
   half nicht — ohne Platzhalter trifft das immer zu.) */
.cartd__form input:user-invalid,
.cartd__form textarea:user-invalid { border-color: #B3452F; }

/* Freiwillige Felder und die Zustimmung. */

.cartd__form .opt {
  text-transform: none;
  letter-spacing: 0;
  font-size: .76rem;
  opacity: .8;
}

.cartd__form textarea {
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.55;
  resize: vertical;
  min-height: 78px;
}
.cartd__form textarea:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(182, 92, 54, .14);
}

/* «.cartd__form label» setzt Versalien für die Feldnamen — die Zustimmung
   ist aber ein Satz und muss sich lesen lassen. Darum spezifischer. */
.cartd__form label.cartd__terms {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 6px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.cartd__form label.cartd__terms input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--terra);
  flex: none;
}
.cartd__form label.cartd__terms a { color: var(--terra); border-bottom: 1px solid currentColor; }