/* ============================================================
   THE SHOP — cart, checkout, order page, header cart, buy box.
   Theme tokens only; logical properties so Arabic mirrors itself.
   ============================================================ */

/* ---------------------------------------------- header cart */
.cartlink{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  inline-size:2.35rem; block-size:2.35rem; border-radius:999px;
  border:var(--rule); color:var(--parchment-dim); text-decoration:none;
  background:rgba(var(--obsidian-rgb),.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:color .4s ease, border-color .4s ease;
  flex:none;
}
.theme-light .cartlink{background:rgba(var(--surface-rgb),.82)}
.cartlink svg{inline-size:1.1rem; block-size:1.1rem}
.cartlink:hover, .cartlink.has-items{color:var(--gold-pale); border-color:var(--gold-soft)}
.cartlink:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.cartlink__n{
  position:absolute; inset-block-start:-.3rem; inset-inline-end:-.3rem;
  min-inline-size:1.15rem; block-size:1.15rem; padding:0 .25rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif-ui); font-size:.6rem; font-weight:600; line-height:1; letter-spacing:0;
  color:var(--obsidian); background:var(--gold);
}
@media(max-width:760px){ .cartlink{inline-size:2.1rem; block-size:2.1rem} }
/* On a phone the header cannot hold the language pill, the account, the cart
   and the menu button side by side — the menu button is pushed off the screen.
   The phone's bottom bar carries the cart there (see the mobile layout). */
@media(max-width:560px){ .nav-right .cartlink{display:none} }

/* ---------------------------------------------- buy box on the piece page */
.shop-buy{margin:1.2rem 0 1.4rem; padding-block:1.1rem; border-block:1px solid var(--filigree)}
.shop-buy__row{display:flex; flex-wrap:wrap; gap:.7rem}
.shop-buy__row .btn{flex:1 1 11rem; text-align:center}
.shop-buy__in{margin:0 0 .7rem; color:var(--gold-pale)}
.shop-buy__note{
  margin:.75rem 0 0; font-family:var(--serif-ui); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
html[dir="rtl"] .shop-buy__note{letter-spacing:0; font-size:.85rem; text-transform:none; font-family:var(--arabic)}

/* ---------------------------------------------- layout */
.shop .section-title{margin:0}
.shop-grid{display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){ .shop-grid{grid-template-columns:minmax(0,1.6fr) minmax(18rem,1fr); align-items:start} }
.shop-empty{display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem}

.shop-link{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:.9rem; color:var(--gold-soft); text-decoration:underline;
  text-underline-offset:.2em; text-decoration-color:var(--filigree-lit);
}
.shop-link:hover{color:var(--gold-pale)}
.shop-hint{font-size:.9rem; color:var(--muted); margin:.8rem 0 0; line-height:1.6}
.shop-hint.is-warn{color:var(--crimson)}
.theme-dark .shop-hint.is-warn{color:var(--gold-pale)}
.shop-notice{
  border:1px solid var(--gold-soft); padding:1rem 1.2rem; margin:0 0 2rem;
  color:var(--parchment); background:rgba(var(--surface-rgb),.6);
}
.shop-full{display:block; inline-size:100%; text-align:center; margin-top:1.3rem}
.shop-full[disabled]{opacity:.45; cursor:not-allowed}
.shop-continue{display:inline-block; margin-top:1rem}

/* ---------------------------------------------- lines */
.shop-lines{list-style:none; margin:0; padding:0; border-block-start:1px solid var(--filigree)}
.shop-line{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:1rem; align-items:center;
  padding:1rem 0; border-block-end:1px solid var(--filigree);
}
.shop-line__img{display:block; aspect-ratio:1; overflow:hidden; background:var(--surface)}
.shop-line__img img{inline-size:100%; block-size:100%; object-fit:cover; display:block}
.shop-line__body{display:flex; flex-direction:column; gap:.25rem; min-inline-size:0}
.shop-line__title{
  color:var(--parchment); text-decoration:none; font-family:var(--serif-display);
  font-size:1.15rem; line-height:1.3;
}
a.shop-line__title:hover{color:var(--gold-pale)}
.shop-line__ref{font-family:var(--serif-ui); font-size:.62rem; letter-spacing:.16em; color:var(--muted)}
html[dir="rtl"] .shop-line__ref{text-align:end}
.shop-line__warn{font-size:.85rem; color:var(--crimson)}
.theme-dark .shop-line__warn{color:var(--gold-pale)}
.shop-line__end{display:flex; flex-direction:column; align-items:flex-end; gap:.4rem}
.shop-line__price{font-family:var(--serif-display); font-size:1.15rem; color:var(--gold-pale); white-space:nowrap}
.shop-line.is-gone{opacity:.55}
@media(max-width:520px){
  .shop-line{grid-template-columns:4.2rem minmax(0,1fr); }
  .shop-line__end{grid-column:2; flex-direction:row; justify-content:space-between; align-items:center}
}

/* ---------------------------------------------- summary card */
.shop-summary{
  border:1px solid var(--filigree); background:rgba(var(--surface-rgb),.55);
  padding:clamp(1.2rem,3vw,1.8rem);
}
@media(min-width:900px){ .shop-summary{position:sticky; top:6.5rem} }
.shop-summary__h{
  margin:0 0 1rem; font-family:var(--serif-ui); font-weight:400; font-size:.7rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
}
html[dir="rtl"] .shop-summary__h{letter-spacing:0; font-size:1rem; font-family:var(--arabic)}
.shop-totals{margin:1rem 0 0; padding:0}
.shop-totals > div{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0}
.shop-totals dt{color:var(--parchment-dim)}
.shop-totals dd{margin:0; color:var(--parchment); white-space:nowrap}
.shop-totals small{color:var(--muted); font-size:.75rem}
.shop-totals .is-quiet dd{color:var(--muted); font-size:.9rem}
.shop-totals .is-good dd{color:var(--gold-pale)}
.shop-totals .is-total{border-block-start:1px solid var(--filigree-lit); margin-block-start:.4rem; padding-block-start:.8rem}
.shop-totals .is-total dt, .shop-totals .is-total dd{font-family:var(--serif-display); font-size:1.35rem; color:var(--parchment)}

.shop-mini{list-style:none; margin:0; padding:0}
.shop-mini li{
  display:grid; grid-template-columns:3rem minmax(0,1fr) auto; gap:.8rem; align-items:center;
  padding:.5rem 0; border-block-end:1px solid var(--filigree);
}
.shop-mini img{inline-size:3rem; block-size:3rem; object-fit:cover; display:block; background:var(--surface)}
.shop-mini span{font-size:.95rem; color:var(--parchment); line-height:1.35}
.shop-mini b{font-weight:400; color:var(--gold-pale); white-space:nowrap}

.shop-code{margin-top:1.2rem}
.shop-code label{
  display:block; font-family:var(--serif-ui); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin-bottom:.45rem;
}
html[dir="rtl"] .shop-code label{letter-spacing:0; font-size:.85rem; font-family:var(--arabic)}
.shop-code__row{display:flex; gap:.5rem}
.shop-code__row input{
  flex:1; min-inline-size:0; background:var(--obsidian-deep); color:var(--parchment);
  border:1px solid var(--filigree); padding:.6rem .7rem; font:inherit; font-size:1rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.shop-code__row input:focus{outline:none; border-color:var(--gold-soft)}

/* ---------------------------------------------- checkout form */
.shop-form{max-width:none}
.shop-form fieldset{border:0; padding:0; margin:0 0 1.8rem}
.shop-form legend{
  padding:0; margin-bottom:1rem; font-family:var(--serif-display); font-size:1.35rem; color:var(--parchment);
}
.shop-form input[type=tel][dir=ltr], .shop-form input[type=email][dir=ltr]{text-align:start}
html[dir="rtl"] .shop-form input[dir=ltr]{text-align:right}
.shop-radio{
  display:flex !important; gap:.8rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--filigree); padding:.9rem 1rem; margin-bottom:.7rem !important;
  text-transform:none !important; letter-spacing:0 !important; font-size:1rem !important;
  font-family:var(--serif-body) !important; color:var(--parchment) !important;
}
.shop-radio:has(input:checked){border-color:var(--gold-soft); background:rgba(var(--surface-rgb),.55)}
.shop-radio input{margin-top:.35rem; accent-color:var(--gold)}
.shop-radio span{display:flex; flex-direction:column; gap:.15rem}
.shop-radio b{font-weight:400}
.shop-radio small{color:var(--muted); font-size:.85rem}
.shop-radio.is-off{opacity:.5; cursor:not-allowed}
html[dir="rtl"] .shop-radio{font-family:var(--arabic) !important}

/* ---------------------------------------------- order page */
.shop-steps{
  list-style:none; margin:0 0 2.2rem; padding:0; display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem;
}
.shop-steps li{display:flex; flex-direction:column; gap:.55rem; font-size:.8rem; color:var(--muted); line-height:1.3}
.shop-steps i{display:block; block-size:3px; background:var(--filigree)}
.shop-steps li.is-done i{background:var(--gold-soft)}
.shop-steps li.is-done{color:var(--parchment-dim)}
.shop-steps li.is-now{color:var(--gold-pale)}
@media(max-width:520px){ .shop-steps{font-size:.7rem} .shop-steps li{font-size:.7rem} }
.shop-lines--plain{margin-bottom:1.5rem}
.shop-two{display:grid; gap:2rem; grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){ .shop-two{grid-template-columns:1fr 1fr} }
.shop-deliver p{margin:0 0 .8rem; color:var(--parchment-dim)}
.shop-deliver__h{
  font-family:var(--serif-ui); font-size:.62rem !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass) !important;
}
html[dir="rtl"] .shop-deliver__h{letter-spacing:0; font-size:.9rem !important}

/* ---------------------------------------------- account: orders */
.shop-account{margin-top:2.5rem}
.shop-orderlist{list-style:none; margin:0; padding:0; border-block-start:1px solid var(--filigree)}
.shop-orderlist a{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:1rem; align-items:center;
  padding:.85rem 0; border-block-end:1px solid var(--filigree); text-decoration:none; color:var(--parchment-dim);
}
.shop-orderlist a:hover{color:var(--parchment)}
.shop-orderlist b{font-weight:400; color:var(--parchment)}
.shop-orderlist__st{font-size:.8rem; color:var(--gold-soft)}
@media(max-width:560px){ .shop-orderlist a{grid-template-columns:1fr auto} }