/* Style koszyka. Korzysta ze zmiennych z style.css (--ink, --cream, --mono). */
.cart-open{font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid var(--ink);padding:0;cursor:pointer}
.cart-open:hover{border-bottom-width:2px}
button.btn{font-family:inherit;color:inherit;background:none;cursor:pointer}
button.btn:hover:not(:disabled){background:var(--ink);color:var(--cream)}
button.btn:disabled{opacity:.6;cursor:wait}

#cart{margin:0 0 0 auto;height:100%;max-height:none;width:min(420px,100%);padding:0;
  border:0;border-left:2px solid var(--ink);background:var(--cream);color:var(--ink);font-family:var(--mono)}
#cart::backdrop{background:rgba(58,31,163,.35)}
#cart[open]{animation:cart-in .3s ease both}
@keyframes cart-in{from{transform:translateX(100%)}to{transform:none}}

.cart-in{display:flex;flex-direction:column;height:100%}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem .4rem}
.cart-head h2{font-size:3.4rem;font-weight:400;line-height:1}
.cart-close{font:inherit;font-size:2rem;line-height:1;color:inherit;background:none;border:0;cursor:pointer;padding:.2rem .5rem}

.cart-list{list-style:none;padding:0 1.2rem;margin:0;overflow:auto;flex:1}
.cart-list li{display:grid;grid-template-columns:1fr auto auto auto;gap:.6rem;align-items:center;
  padding:.9rem 0;border-bottom:2px dashed var(--ink)}
.cart-list .q{display:flex;align-items:center;gap:.4rem}
.cart-list .q button,.cart-list .x{font:inherit;color:inherit;background:none;cursor:pointer;
  width:1.7rem;height:1.7rem;border:1.5px solid var(--ink);border-radius:50%;line-height:1;padding:0}
.cart-list .x{border-color:transparent;font-size:1.3rem}
.cart-list button:hover{background:var(--ink);color:var(--cream)}
.cart-list .p{min-width:4.5rem;text-align:right}

.cart-empty{display:none;padding:2rem 1.2rem;text-align:center}
#cart.empty .cart-empty{display:block}
#cart.empty .cart-list,#cart.empty .cart-foot{display:none}

.cart-foot{padding:1rem 1.2rem 1.4rem;text-align:center}
.cart-total{display:flex;justify-content:space-between;font-size:1.2rem;margin-bottom:.3rem}
.cart-note{font-size:.8rem;color:var(--ink-soft);margin-bottom:.8rem}
.cart-err{min-height:1.2em;font-size:.85rem;margin-bottom:.4rem}
.cart-pay{margin:0}

.cart-notice{position:sticky;top:0;z-index:5;margin:0;padding:.8rem 1rem;text-align:center;
  background:var(--ink);color:var(--cream)}

/* Okno wyboru zapachu i ilości */
#pick{margin:auto;width:min(380px,calc(100% - 2rem));padding:0;border:2px solid var(--ink);border-radius:1.2rem;
  background:var(--cream);color:var(--ink);font-family:var(--mono)}
#pick::backdrop{background:rgba(58,31,163,.35)}
#pick[open]{animation:pick-in .25s ease both}
@keyframes pick-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pick-in{display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.4rem 1.2rem;text-align:center}
.pick-name{font-size:1.25rem;font-weight:400}
.pick-price{margin:-.6rem 0 0;font-size:1.1rem}
.pick-field{display:flex;flex-direction:column;gap:.3rem;text-align:left}
div.pick-field{flex-direction:row;justify-content:space-between;align-items:center}
.pick-opt{font:inherit;color:inherit;width:100%;padding:.55rem 1rem;background:var(--cream-2);
  border:2px solid var(--ink);border-radius:999px}
.pick-in .q{display:flex;align-items:center;gap:.7rem}
.pick-in .q button{font:inherit;color:inherit;background:none;cursor:pointer;width:2rem;height:2rem;
  border:1.5px solid var(--ink);border-radius:50%;line-height:1;padding:0}
.pick-in .q button:hover{background:var(--ink);color:var(--cream)}
.pick-add{margin:.2rem auto 0}
.pick-cancel{font:inherit;font-size:.85rem;color:var(--ink-soft);background:none;border:0;cursor:pointer;text-decoration:underline}

/* Strona zamówienia */
.co{max-width:1040px;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 4rem}
.co-head,.co-done,.co-empty{text-align:center}
.co-head{margin-bottom:2.4rem}
.ord-ico{width:34px;height:46px;color:var(--ink)}
.co-title{font-size:clamp(4rem,11vw,6.5rem);font-weight:400;line-height:.95}
.co .swirl{display:block;margin:.5rem auto .8rem}
.ord-sub{font-size:.9rem;color:var(--ink-soft)}
.co-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.co-grid[hidden],.co-empty[hidden],.co-done[hidden],.co-head[hidden]{display:none}

.summary{position:sticky;top:1.5rem;border:2px solid var(--ink);border-radius:1.6rem;background:var(--cream-2);padding:1.4rem 1.5rem}
.summary h2{font-size:1rem;font-weight:400;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem}
.sum-list{list-style:none;padding:0;margin:0 0 1rem}
.sum-list li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:2px dashed var(--ink);font-size:.9rem}
.sum-list span{overflow-wrap:anywhere}
.sum-list b{font-weight:400;white-space:nowrap}
.summary .ord-sum{border:0;padding:0}
.sum-back{display:inline-block;margin-top:1.2rem;font-size:.85rem}

.ord-form{display:flex;flex-direction:column;gap:1.1rem}
.ord-form label{display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.ord-form input:not([type=radio]):not([type=checkbox]),.ord-form textarea{
  font:inherit;font-size:1rem;text-transform:none;letter-spacing:normal;color:inherit;
  background:var(--cream-2);border:2px solid var(--ink);border-radius:.9rem;padding:.65rem .95rem;width:100%}
.ord-form ::placeholder{color:var(--ink-soft);opacity:.7}
.ord-form input:focus-visible,.ord-form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.row2.zip{grid-template-columns:.8fr 1.4fr}

.ord-form fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ord-form legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:0;margin-bottom:.55rem}
.ord-form .radio{position:relative;flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.85rem 1.1rem;border:2px solid var(--ink);border-radius:999px;cursor:pointer;
  font-size:.85rem;text-transform:none;letter-spacing:.02em;transition:background .2s,color .2s}
.ord-form .radio input{position:absolute;opacity:0;pointer-events:none}
.ord-form .radio b{font-weight:400}
.ord-form .radio:not(:has(input:checked)):hover{background:var(--cream-2)}
.ord-form .radio:has(input:checked){background:var(--ink);color:var(--cream)}
.ord-form .radio:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}

.grp{display:flex;flex-direction:column;gap:1.1rem}
.grp[hidden]{display:none}
.hint{font-size:.78rem;color:var(--ink-soft);margin-top:-.4rem}

.ord-sum{padding:1rem 1.2rem;border:2px dashed var(--ink);border-radius:1.2rem;display:flex;flex-direction:column;gap:.3rem;font-size:.95rem}
.ord-sum p{display:flex;justify-content:space-between;margin:0}
.ord-sum b{font-weight:400}
.ord-sum .tot{margin-top:.4rem;padding-top:.5rem;border-top:2px solid var(--ink);font-size:1.2rem}

.ord-form .check{flex-direction:row;align-items:flex-start;gap:.7rem;font-size:.85rem;text-transform:none;letter-spacing:normal;line-height:1.5}
.ord-form .check input{accent-color:var(--ink);width:1.2rem;height:1.2rem;margin-top:.15rem;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ts:empty{display:none}
.ord-send{align-self:flex-start;margin-top:.4rem;padding:.75rem 2.2rem;font-size:.95rem}

.co-done{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:.9rem}
.ord-pay{border:2px solid var(--ink);border-radius:1.2rem;padding:1rem 1.2rem;background:var(--cream-2);text-align:left;font-size:.9rem;overflow-wrap:anywhere}
.ord-pay p{margin:.3rem 0}
.co-done .btn,.co-empty .btn{align-self:center}
.co-empty{padding:3rem 0}
.co-empty p{margin-bottom:1.2rem}

@media (max-width:820px){
  .co-grid{grid-template-columns:1fr}
  .summary{position:static;order:-1}
}
@media (max-width:520px){
  .row2,.row2.zip,.ord-form fieldset{grid-template-columns:1fr}
  .ord-send{align-self:stretch;padding-inline:1rem}
}

/* Tytuł z polskimi literami: Mrs Saint Delafield ich nie ma, więc tu używamy Great Vibes */
.co-title.pl{font-family:"Great Vibes","Brush Script MT",cursive;font-size:clamp(2.8rem,8.5vw,4.8rem);line-height:1.15}

/* Poprawki układu strony zamówienia */
.co-head{margin-bottom:2rem}
.co-title.pl{font-size:clamp(2.4rem,7vw,3.8rem)}

/* większy odstęp między formularzem a podsumowaniem */
.co-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(2.5rem,7vw,5.5rem);row-gap:2.5rem}

/* zgoda i przycisk w ramce podsumowania */
.summary .check{display:flex;flex-direction:row;align-items:flex-start;gap:.7rem;margin-top:1.3rem;font-size:.85rem;line-height:1.5}
.summary .check input{accent-color:var(--ink);width:1.2rem;height:1.2rem;margin-top:.15rem;flex:none}
.summary .ts{margin-top:1rem}
.summary .cart-err{margin-top:.8rem}
.summary .ord-send{display:block;width:100%;margin:1rem 0 0;padding:.8rem 1rem;font-size:.85rem;letter-spacing:.03em;white-space:normal;line-height:1.3}

@media (max-width:820px){
  .summary{order:0}  /* na telefonie podsumowanie jest pod formularzem, żeby przycisk był na końcu */
}

/* Edytuj koszyk (link pod podsumowaniem) */
.sum-links{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1.2rem;font-size:.85rem}
.sum-links .sum-back{margin-top:0}
.sum-edit{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}

/* Szerszy układ strony zamówienia i większy odstęp między formularzem a podsumowaniem */
.co{max-width:1280px}
.co-grid{column-gap:clamp(3rem,9vw,9rem)}
@media (max-width:820px){
  .co-grid{row-gap:3rem}
}