/* Storefront of the store module (shop.php) — on top of the website's theme. Only theme tokens (CSS variables of
   App\Theme\Compiler), logical properties (RTL), no fixed colours or sizes. */
.shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-block-end: var(--spacing-lg); }
.shop-head h1 { margin: 0; }
.shop-tools { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); align-items: center; }
.shop-cats { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-block-end: var(--spacing-lg); }
.shop-out { color: var(--color-error); }
.shop-in { color: var(--color-success); }
.shop-muted { color: var(--color-muted); }
.shop-product { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); }
@media (min-width: 900px) { .shop-product { grid-template-columns: 1fr 1fr; } }
.shop-gallery img { width: 100%; border-radius: var(--radius-md); background: var(--color-surface); }
.shop-thumbs { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; margin-block-start: var(--spacing-sm); }
.shop-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); }
.shop-buy { display: flex; flex-direction: column; gap: var(--spacing-md); }
.shop-buy .price-big { font-size: 1.5em; }
.shop-qty { inline-size: 6em; }
.shop-options { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.shop-option { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.shop-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.shop-option.is-out { opacity: .6; }
.shop-body { margin-block-start: var(--spacing-xl); }
.shop-table { width: 100%; }
.shop-table td, .shop-table th { vertical-align: middle; }
.shop-specs th { inline-size: 35%; font-weight: 400; color: var(--color-muted); }
.shop-totals { max-inline-size: 420px; margin-inline-start: auto; }
.shop-totals div { display: flex; justify-content: space-between; padding-block: var(--spacing-xs); }
.shop-totals .grand { font-weight: 700; border-block-start: var(--border-width) solid var(--color-border); margin-block-start: var(--spacing-xs); padding-block-start: var(--spacing-sm); }
.shop-form { display: grid; gap: var(--spacing-md); grid-template-columns: 1fr; }
@media (min-width: 768px) { .shop-form.two { grid-template-columns: 1fr 1fr; } }
.shop-form label { display: block; font-weight: 600; margin-block-end: var(--spacing-xs); }
.shop-form .wide { grid-column: 1 / -1; }
.shop-choices { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.shop-steps { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); list-style: none; padding: 0; margin: 0 0 var(--spacing-lg); }
.shop-steps li { padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-muted); }
.shop-steps li.done { background: var(--color-primary-soft); color: var(--color-text); }
.shop-log { list-style: none; padding: 0; margin: 0; }
.shop-log li { padding-block: var(--spacing-xs); border-block-end: var(--border-width) solid var(--color-border); }
.shop-account { padding: var(--spacing-md); border: var(--border-width) dashed var(--color-border); border-radius: var(--radius-md); }
.shop-account code { font-size: 1.1em; letter-spacing: .05em; }
.shop-section { margin-block: var(--spacing-xl); }
.shop-cartlink { position: relative; }
.shop-pager { display: flex; justify-content: center; gap: var(--spacing-sm); margin-block-start: var(--spacing-xl); }
.shop-text { line-height: 1.8; }
/* product cards: picture with a label, name (two lines), price, and quantity + "add to cart" right in the list */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 195px), 1fr)); gap: var(--spacing-md); }
.shop-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--color-background); border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.shop-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 0, 0, .09); border-color: var(--color-accent, var(--color-primary)); }
.shop-card-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.shop-card-media img { width: 100%; height: 100%; object-fit: contain; padding: var(--spacing-md); transition: transform .45s ease; }
.shop-card:hover .shop-card-media img { transform: scale(1.06); }
.shop-card.is-out .shop-card-media img { filter: grayscale(.6); opacity: .75; }
.shop-label { position: absolute; inset-block-start: var(--spacing-sm); inset-inline-start: var(--spacing-sm); padding: 2px var(--spacing-sm); border-radius: var(--radius-full);
  font-size: .75rem; font-weight: 700; line-height: 1.6; }
.shop-label.is-sale { background: var(--color-error); color: #fff; }
.shop-label.is-out { background: var(--color-surface-alt); color: var(--color-muted); }
.shop-noimg { color: var(--color-muted); font-size: 2.5em; }
.shop-card-body { display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; padding: var(--spacing-md); border-block-start: var(--border-width) solid var(--color-border); }
.shop-card-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.7; min-height: 3.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card-title a { color: var(--color-text); text-decoration: none; }
.shop-card-title a:hover { color: var(--color-primary); }
.shop-price { font-weight: 800; font-size: 1.05rem; color: var(--color-primary); }
.shop-price del { color: var(--color-muted); font-weight: 400; font-size: .85em; margin-inline-start: var(--spacing-xs); }
/* buying on the card: "add to cart" → one in the cart, then the stepper (− qty +) of the cart's quantity (shop.js) */
.shop-card .shop-buy, .shop-card > .shop-card-body > .shop-add { margin-block-start: auto; }
.shop-buy { position: relative; }
.shop-add { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); white-space: nowrap; width: 100%; min-block-size: 2.6rem; }
.shop-stepper { display: none; align-items: stretch; justify-content: space-between; min-block-size: 2.6rem; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-primary); color: var(--color-on-primary); }
.shop-js .shop-buy.in-cart .shop-buy-add { display: none; }
.shop-js .shop-buy.in-cart .shop-stepper { display: flex; }
.shop-step { inline-size: 2.8rem; border: 0; background: transparent; color: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease; }
.shop-step:hover:not([disabled]) { background: rgba(255, 255, 255, .16); }
.shop-step[disabled] { opacity: .45; cursor: not-allowed; }
.shop-step .shop-step-bin { display: none; }
.shop-step.is-remove .shop-step-minus { display: none; }
.shop-step.is-remove .shop-step-bin { display: block; }
.shop-stepper-qty { flex: 1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.shop-buy.is-busy .shop-stepper, .shop-buy.is-busy .shop-add { opacity: .75; }
/* notice after adding (with a link to the cart) and the cart badge's bump */
.shop-toast { position: fixed; inset-inline: var(--spacing-md); inset-block-end: var(--spacing-lg); z-index: 1000; max-inline-size: 420px; margin-inline: auto; padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md); background: var(--color-text); color: var(--color-background); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); text-align: center;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.shop-toast.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.shop-toast a { color: var(--color-accent, var(--color-primary)); font-weight: 700; }
.header-cart-count { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.header-cart-count.is-bump { transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .shop-toast, .header-cart-count { transition: none; } }
.shop-card .btn.shop-add[disabled] { opacity: .7; cursor: not-allowed; }
/* lists: the filter panel at the start (right in RTL), the products beside it; one column on phones */
.shop-layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: start; }
/* desktop: the panel stays in view under the (sticky) header and scrolls by itself when it is taller than the screen */
@media (min-width: 900px) {
  .shop-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .shop-filters { position: sticky; inset-block-start: calc(var(--navbar-height) + var(--spacing-md)); }
  .shop-filters .shop-filterbox { max-block-size: calc(100vh - var(--navbar-height) - 2 * var(--spacing-md)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.shop-filterbox { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); padding: var(--spacing-md); }
.shop-filterbox > summary { font-weight: 700; cursor: pointer; }
@media (min-width: 900px) { .shop-filterbox > summary { display: none; } }
.shop-fgroup { padding-block: var(--spacing-sm); border-block-end: var(--border-width) solid var(--color-border); }
.shop-fgroup:last-of-type { border-block-end: 0; }
.shop-ftitle { display: block; font-weight: 700; margin-block-end: var(--spacing-xs); cursor: default; }
details.shop-fgroup > summary.shop-ftitle { cursor: pointer; }
.shop-catlist { list-style: none; padding: 0; margin: 0; }
.shop-catlist a { display: block; padding-block: 2px; color: var(--color-text); text-decoration: none; }
.shop-catlist a:hover, .shop-catlist a.is-current { color: var(--color-primary); font-weight: 700; }
.shop-check { display: flex; align-items: center; gap: var(--spacing-xs); padding-block: 2px; cursor: pointer; }
.shop-price-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xs); }
.shop-fbuttons { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-block-start: var(--spacing-sm); padding-block: var(--spacing-sm) var(--spacing-xs);
  position: sticky; inset-block-end: 0; background: var(--color-background); }
.shop-fbuttons .btn { width: 100%; justify-content: center; padding-block: var(--spacing-sm); }
.shop-main { min-width: 0; }
.shop-main .shop-text { margin-block-end: var(--spacing-lg); }
/* header: order tracking link and the cart button with its count */
.header-link { color: var(--color-text); text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--color-primary); }
.header-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border); color: var(--color-text); }
.header-cart:hover { border-color: var(--color-primary); color: var(--color-primary); }
.header-cart-count { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 1.25rem; height: 1.25rem; padding-inline: 4px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-on-primary); font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.header-cart-count.is-empty { background: var(--color-surface-alt); color: var(--color-muted); }