/* Sound Weekends — cart drawer (спільний компонент, підключати на всіх сторінках) */

/* лічильник на іконці кошика в хедері */
.hd__cart{position:relative}
.hd__cart b{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  display:none;align-items:center;justify-content:center;border-radius:9px;
  background:#B85C1F;color:#fff;font-size:10px;font-weight:400;letter-spacing:0;line-height:1}
.hd__cart.has-n b{display:flex}

/* ---------- шухляда ---------- */
.cd{position:fixed;inset:0;z-index:300;visibility:hidden}
.cd.is-open{visibility:visible}
.cd__bg{position:absolute;inset:0;background:rgba(20,22,26,.42);opacity:0;
  transition:opacity .3s ease;cursor:pointer}
.cd.is-open .cd__bg{opacity:1}
.cd__p{position:absolute;top:0;right:0;height:100%;width:min(420px,100%);
  display:flex;flex-direction:column;background:var(--sw-hd,#fff);border-left:1px solid #E6E4E0;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1)}
.cd.is-open .cd__p{transform:none}

.cd__h{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:26px 26px 18px;border-bottom:1px solid #E6E4E0}
.cd__h h2{font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.cd__x{width:32px;height:32px;margin:-6px -8px -6px 0;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:#6B6E74;cursor:pointer;font:inherit}
.cd__x svg{width:15px;height:15px}
.cd__x:hover{color:#14161A}

.cd__body{flex:1 1 auto;overflow-y:auto;padding:8px 26px 26px}

/* позиція */
.ci{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid #F0EEEA}
.ci__ph{position:relative;display:block;width:72px;height:72px;overflow:hidden;background:#EFEDE9}
.ci__ph img{width:100%;height:100%;object-fit:cover}
.ci__b{min-width:0}
.ci__t{display:block;font-size:13px;line-height:1.45}
.ci__t:hover{text-decoration:underline}
.ci__m{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8D93}
.ci__r{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.ci__q{display:inline-flex;align-items:center;border:1px solid #E6E4E0}
.ci__q button{width:26px;height:26px;border:0;background:none;color:#3A3D42;font:inherit;font-size:13px;
  line-height:1;cursor:pointer}
.ci__q button:hover{color:#14161A}
.ci__q span{min-width:22px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.ci__p{font-size:13px;font-variant-numeric:tabular-nums}
.ci__x{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;font:inherit;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8D93}
.ci__x:hover{color:#14161A}

/* порожньо */
.cd__empty{padding:56px 0 0;text-align:center}
.cd__empty p{font-size:13.5px;line-height:1.8;color:#6B6E74}
.cd__empty a{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid #14161A;padding-bottom:3px}

/* підвал */
.cd__f{flex:none;padding:22px 26px 26px;border-top:1px solid #E6E4E0}
.cd__sub{display:flex;align-items:baseline;justify-content:space-between;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.cd__sub b{font-size:15px;letter-spacing:0;font-weight:400;font-variant-numeric:tabular-nums}
.cd__note{margin-top:10px;font-size:11.5px;line-height:1.7;color:#8A8D93}
.cd__go{display:flex;align-items:center;justify-content:center;height:52px;margin-top:16px;
  background:#14161A;color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.cd__go:hover{background:#31353C}
.cd__cont{display:block;width:100%;margin-top:12px;padding:6px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8D93}
.cd__cont:hover{color:#14161A}
.cd.is-empty .cd__f{display:none}

@media (max-width:520px){
  .cd__h,.cd__body,.cd__f{padding-left:20px;padding-right:20px}
}

/* кнопка Add to cart тепер <button>, а не <a> */
button.btn{border:0;cursor:pointer;font-family:inherit;font-weight:400;line-height:1}
