/* ==========================================================================
   Shop: header extras, home, catalogue, product, cart, checkout, orders.
   Built from the shared primitives (rows, hairlines, two buttons).
   ========================================================================== */

/* ---------- Header: search, account, cart --------------------------------- */
.site-header { border-bottom: 1px solid var(--rule); }
.shop-search { position: relative; flex: 1 1 auto; max-width: 30rem; }
.shop-search form { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease); }
.shop-search form:focus-within { border-color: var(--ink); }
.shop-search input { flex: 1; min-width: 0; min-height: 42px; border: 0; background: none; outline: none; }
.shop-search input::placeholder { color: var(--grey-text); opacity: 1; }
.shop-search input::-webkit-search-cancel-button { display: none; }
.shop-search .icon { color: var(--grey-text); }
.header-tools { display: flex; align-items: center; gap: var(--s-4); }
.header-tool { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; }
.header-tool:hover { color: var(--accent-ink); }
.header-tool .icon { width: 22px; height: 22px; }
.cart-count { position: absolute; top: 2px; left: 13px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cart-count:empty { display: none; }
.header-tool__label { font-size: var(--t-s); }
.nav--shop { gap: var(--s-5); }
.nav__link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent-ink); }
.subnav { border-top: 1px solid var(--rule); }
.subnav ul { display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; color: var(--grey-text); font-size: var(--t-s); }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--ink); }
.subnav .icon { width: 16px; height: 16px; }
.subnav__promo { margin-inline-start: auto; color: var(--ink) !important; }
.subnav__promo b { color: var(--accent-ink); }
@media (max-width: 63.99rem) {
  .shop-search { display: none; }
  .header-tool__label { display: none; }
  .subnav__promo { display: none !important; }
}
/* Suggestions under the search boxes */
.suggest__list { max-height: 28rem; }
.suggest__item { align-items: center; }
.suggest__item mark { background: none; color: var(--accent-ink); }
.suggest__code { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.suggest__all { display: block; padding: 12px; color: var(--accent-ink); }

/* ---------- Trust strip (stock sync, delivery, payment) ------------------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); padding-block: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trust li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-s); color: var(--grey-text); }
.trust li b { display: block; color: var(--ink); font-size: var(--t-body); }
.trust .icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--accent-ink); }
@media (max-width: 63.99rem) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 29.99rem) { .trust { grid-template-columns: 1fr; } }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(24 121 78 / 0.5); animation: pulse 2.4s infinite; vertical-align: 0.05em; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(24 121 78 / 0.45); } 70% { box-shadow: 0 0 0 8px rgb(24 121 78 / 0); } 100% { box-shadow: 0 0 0 0 rgb(24 121 78 / 0); } }

/* ---------- Home ---------------------------------------------------------- */
.shop-hero { padding-block: clamp(56px, 9vw, 136px) clamp(40px, 5vw, 72px); row-gap: var(--s-6); }
.shop-hero__title { grid-column: 1 / span 10; font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.shop-hero__title .grey { color: var(--grey); }
.shop-hero__title .accent { color: var(--accent-ink); }
.big-search { grid-column: 1 / span 9; position: relative; margin-block-start: clamp(16px, 3vw, 40px); }
.big-search form { display: flex; align-items: flex-end; gap: var(--s-4); border-bottom: 2px solid var(--ink); }
.big-search label { padding-bottom: 12px; font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); color: var(--grey); white-space: nowrap; }
.big-search input { flex: 1; min-width: 0; min-height: 64px; padding: 0 0 8px; border: 0; background: none; outline: none; font-size: var(--t-l); font-weight: 500; letter-spacing: var(--track-head); }
.big-search input::placeholder { color: var(--grey); opacity: 1; }
.big-search input::-webkit-search-cancel-button { display: none; }
.big-search button { min-height: 56px; margin-bottom: 4px; }
.big-search__try { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px var(--s-4); font-size: var(--t-s); color: var(--grey-text); }
.big-search__try a { color: var(--ink); }
.big-search__try a:hover { color: var(--accent-ink); }
@media (max-width: 63.99rem) {
  .shop-hero__title, .big-search { grid-column: 1 / -1; }
  .big-search label { display: none; }
}

/* Divisions: four big tiles with counts and their categories */
.divisions { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.division-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); padding: var(--s-6); border-radius: var(--radius); background: var(--field); transition: background-color var(--dur) var(--ease); }
.division-card:hover { background: var(--accent-soft); }
.division-card__icon { grid-row: span 3; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--paper); color: var(--accent-ink); }
.division-card__icon .icon { width: 30px; height: 30px; stroke-width: 1.3; }
.division-card__name { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.division-card__name a::after { content: ""; position: absolute; inset: 0; }
.division-card__count { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.division-card__cats { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-block-start: var(--s-3); font-size: var(--t-s); color: var(--grey-text); position: relative; z-index: 1; }
.division-card__cats a:hover { color: var(--accent-ink); }
@media (max-width: 63.99rem) { .divisions { grid-column: 1 / -1; grid-template-columns: 1fr; } .division-card { padding: var(--s-5); } }

/* How ordering works: four steps */
.howto { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); counter-reset: step; }
.howto li { counter-increment: step; padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.howto li::before { content: counter(step, decimal-leading-zero); display: block; margin-block-end: var(--s-4); font-size: var(--t-s); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.howto b { display: block; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.howto p { margin-block-start: var(--s-2); color: var(--grey-text); }
@media (max-width: 63.99rem) { .howto { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 29.99rem) { .howto { grid-template-columns: 1fr; } }

/* ---------- Product cards -------------------------------------------------- */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: var(--s-7) var(--col-gap); }
.row__wide .products, .catalog__main .products { grid-column: 1 / -1; }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); min-width: 0; }
.pcard__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--field); aspect-ratio: 1; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; background: #fff; transition: transform 900ms var(--ease); }
.pcard:hover .pcard__media img, .pcard:hover .art__icon { transform: scale(1.04); }
.pcard__body { display: grid; align-content: start; gap: 4px; min-width: 0; }
.pcard__meta { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.pcard__name { font-size: var(--t-body); line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; }
.pcard:hover .pcard__name a { color: var(--accent-ink); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); position: relative; z-index: 1; }
.pcard__foot form { display: contents; }
.price { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); }
.price--ask { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); }
.add-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: var(--t-s); white-space: nowrap; transition: background-color var(--dur) var(--ease); }
.add-btn:hover { background: var(--accent); }
.add-btn .icon { width: 16px; height: 16px; }
.add-btn--quiet { background: var(--field); color: var(--ink); }
.add-btn--quiet:hover { background: color-mix(in srgb, var(--field) 85%, var(--ink)); }
.add-btn.is-added { background: var(--ok); }

/* Stock labels */
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--ok); white-space: nowrap; }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock--low { color: var(--warn); }
.stock--out { color: var(--grey-text); }
.stock--out::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.pcard .stock { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 8px; border-radius: 4px; background: rgb(255 255 255 / 0.92); }

/* Drawn artwork for items without a photo yet: category line art on a tint, item code in large type */
.art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--art, var(--accent)) 10%, #fff), color-mix(in srgb, var(--art, var(--accent)) 4%, #fff) 70%); }
.art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--art, var(--accent)) 22%, transparent) 1px, transparent 1px); background-size: 14px 14px; mask-image: linear-gradient(180deg, transparent, #000 60%); opacity: 0.6; }
.art__icon { position: relative; width: 44%; height: 44%; color: color-mix(in srgb, var(--art, var(--accent)) 75%, #000); stroke-width: 0.9; transition: transform 900ms var(--ease); }
.art__code { position: absolute; right: 10px; bottom: 8px; font-size: 0.75rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--art, var(--accent)) 60%, #444); font-variant-numeric: tabular-nums; }
.art--lg .art__icon { width: 36%; height: 36%; stroke-width: 0.7; }
.art--lg .art__code { right: 16px; bottom: 14px; font-size: var(--t-s); }
.art--marine-safety { --art: #c2410c; }
.art--hydraulics-lifting { --art: #0b5a8c; }
.art--automation-gas-detection { --art: #0f766e; }
.art--fire-civil-defence { --art: #b91c1c; }

/* ---------- Catalogue: masthead, filters, grid ---------------------------- */
.shop-head { padding-block: var(--s-6) var(--s-7); row-gap: var(--s-4); }
.shop-head__title { grid-column: 1 / span 9; font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); }
.shop-head__intro { grid-column: 1 / span 7; color: var(--grey-text); }
.shop-head__cats { grid-column: 1 / -1; margin-block-start: var(--s-3); }
@media (max-width: 63.99rem) { .shop-head__title, .shop-head__intro { grid-column: 1 / -1; } }
.catalog { padding-block-end: var(--row-end); align-items: start; }
.catalog__side { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-5)); max-height: calc(100dvh - var(--header-h) - var(--s-6)); overflow-y: auto; padding-inline-end: var(--s-4); }
.catalog__main { grid-column: 4 / -1; min-width: 0; }
.catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: 0 var(--s-5); margin-block-end: var(--s-6); border-bottom: 1px solid var(--rule); }
.catalog__count { color: var(--grey-text); font-variant-numeric: tabular-nums; }
.catalog__bar form { display: flex; align-items: center; gap: var(--s-3); }
.filters { display: grid; gap: var(--s-6); }
.filters h2 { margin-block-end: var(--s-2); font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); }
.filters ul { display: grid; }
.filters a { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: 6px; }
.filters a:hover { color: var(--accent-ink); }
.filters a[aria-current="page"], .filters a[aria-pressed="true"] { color: var(--accent-ink); font-weight: 500; }
.filters small { color: var(--grey-text); font-variant-numeric: tabular-nums; }
.filters__sub { padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--rule); }
.filter-toggle { display: none; }
@media (max-width: 63.99rem) {
  .catalog__side { position: static; grid-column: 1 / -1; max-height: none; padding: 0; }
  .catalog__main { grid-column: 1 / -1; }
  .filter-toggle { display: inline-flex; }
  .catalog__side details:not([open]) > :not(summary) { display: none; }
}
.catalog__side summary { display: none; }
@media (max-width: 63.99rem) {
  .catalog__side summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-block-end: var(--s-4); border-bottom: 1px solid var(--rule); cursor: pointer; list-style: none; }
  .catalog__side summary::-webkit-details-marker { display: none; }
  .catalog__side summary::after { content: "+"; font-size: 1.4rem; color: var(--grey-text); }
  .catalog__side details[open] summary::after { content: "–"; }
  .catalog__side details > .filters { margin-block-end: var(--s-6); }
}

/* ---------- Product page --------------------------------------------------- */
.product { padding-block: var(--s-5) var(--row-end); row-gap: var(--s-7); align-items: start; }
.product__media { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.product__frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--field); aspect-ratio: 1; }
.product__frame img { width: 100%; height: 100%; object-fit: contain; padding: 6%; background: #fff; }
.product__info { grid-column: 8 / -1; display: grid; gap: var(--s-5); }
.product__kicker { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); font-size: var(--t-s); color: var(--grey-text); }
.product__kicker a:hover { color: var(--accent-ink); }
.product__title { font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.product__ids { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s-5); font-size: var(--t-s); }
.product__ids dt { color: var(--grey-text); }
.product__ids dd { font-variant-numeric: tabular-nums; }
.buybox { display: grid; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.buybox__price .price { font-size: var(--t-l); }
.buybox__note { font-size: var(--t-s); color: var(--grey-text); }
.buybox form { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.buybox .btn { flex: 1 1 12rem; }
.qty { display: inline-flex; align-items: center; min-height: 52px; border-radius: var(--radius); background: var(--field); }
.qty button { display: grid; place-items: center; width: 44px; height: 52px; padding: 0; border: 0; background: none; }
.qty button:hover { color: var(--accent-ink); }
.qty input { width: 3.5rem; min-height: 44px; border: 0; background: none; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { min-height: 40px; }
.qty--sm button { width: 36px; height: 40px; }
.qty--sm input { width: 2.75rem; min-height: 36px; }
.perks { display: grid; gap: var(--s-3); font-size: var(--t-s); }
.perks li { display: flex; gap: 10px; align-items: flex-start; }
.perks .icon { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
.perks select { min-height: 0; padding: 0 18px 0 0; border: 0; font-size: inherit; width: auto; }
.product__desc { white-space: pre-line; color: var(--grey-text); max-width: 40em; }
.product__alert { display: grid; gap: var(--s-3); }
.product__alert form { display: flex; gap: var(--s-3); align-items: flex-end; }
.product__alert .input { flex: 1; }
.service-note { padding: var(--s-5); border-radius: var(--radius); background: var(--accent-soft); font-size: var(--t-s); }
.service-note b { display: block; margin-block-end: 4px; font-size: var(--t-body); }
@media (max-width: 63.99rem) {
  .product__media { grid-column: 1 / -1; position: static; }
  .product__info { grid-column: 1 / -1; }
}

/* ---------- Free-delivery meter ------------------------------------------- */
.freeship { display: grid; gap: 8px; }
.freeship__text { font-size: var(--t-s); }
.freeship__text b { color: var(--accent-ink); }
.freeship__bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--field); }
.freeship__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms var(--ease); }
.freeship--done .freeship__bar span { background: var(--ok); }

/* ---------- Cart ----------------------------------------------------------- */
.cart { padding-block: var(--s-5) var(--row-end); row-gap: var(--s-7); align-items: start; }
.cart__lines { grid-column: 1 / span 8; }
.cart__summary { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius); background: var(--field); }
@media (max-width: 63.99rem) { .cart__lines, .cart__summary { grid-column: 1 / -1; position: static; } }
.line { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s-2) var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.line:first-child { border-top: 1px solid var(--ink); }
.line__media { grid-row: span 2; position: relative; width: 88px; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--field); }
.line__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; background: #fff; }
.line__media .art__icon { width: 50%; height: 50%; }
.line__media .art__code { display: none; }
.line__name { font-weight: 500; }
.line__name a:hover { color: var(--accent-ink); }
.line__meta { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); font-size: var(--t-s); color: var(--grey-text); }
.line__total { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line__controls { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.line__controls form { display: inline-flex; align-items: center; gap: var(--s-2); }
.line__problem { grid-column: 2 / -1; font-size: var(--t-s); color: var(--danger); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--grey-text); font-size: var(--t-s); }
.link-btn:hover { color: var(--danger); }
.link-btn .icon { width: 16px; height: 16px; }
@media (max-width: 29.99rem) { .line { grid-template-columns: 64px 1fr; } .line__media { width: 64px; } .line__total { grid-column: 2; text-align: start; } }
.sums { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.sums div { display: flex; justify-content: space-between; gap: var(--s-4); }
.sums dt { color: var(--grey-text); }
.sums .sums__total { padding-block-start: var(--s-3); border-top: 1px solid var(--rule); font-size: var(--t-m); font-weight: 500; }
.sums .sums__total dt { color: var(--ink); }
.sums__vat { font-size: var(--t-s); color: var(--grey-text); }
.note-box { padding: var(--s-4); border-inline-start: 2px solid var(--accent); background: var(--paper); font-size: var(--t-s); }
.note-box b { display: block; margin-block-end: 2px; }

/* ---------- Checkout -------------------------------------------------------- */
.checkout { padding-block: var(--s-5) var(--row-end); row-gap: var(--s-7); align-items: start; }
.checkout__form { grid-column: 1 / span 7; display: grid; gap: var(--s-8); }
.checkout__summary { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5)); display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius); background: var(--field); }
@media (max-width: 63.99rem) { .checkout__form, .checkout__summary { grid-column: 1 / -1; position: static; } }
.step-head { display: flex; align-items: baseline; gap: var(--s-4); margin-block-end: var(--s-5); padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.step-head span { font-size: var(--t-s); color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.step-head h2 { font-size: var(--t-m); }
.choice-list { display: grid; gap: var(--s-3); }
.choice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: var(--s-4); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.choice:hover { box-shadow: inset 0 0 0 1px var(--grey); }
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.choice input { grid-row: span 2; margin-top: 3px; accent-color: var(--accent); }
.choice b { font-weight: 500; }
.choice small { color: var(--grey-text); }
.mini-lines { display: grid; gap: var(--s-3); font-size: var(--t-s); }
.mini-lines li { display: flex; justify-content: space-between; gap: var(--s-3); }
.mini-lines span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.agree { font-size: var(--t-s); }
.agree a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Orders ---------------------------------------------------------- */
.order-head { padding-block: var(--s-6) var(--s-6); row-gap: var(--s-4); }
.order-head__title { grid-column: 1 / span 8; font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); }
.order-head__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px var(--s-5); color: var(--grey-text); }
@media (max-width: 63.99rem) { .order-head__title { grid-column: 1 / -1; } }
.progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); counter-reset: p; }
.progress li { padding-block-start: var(--s-3); border-top: 3px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.progress li.is-done { border-color: var(--accent); color: var(--ink); }
.progress li.is-current { border-color: var(--signal); color: var(--ink); font-weight: 500; }
@media (max-width: 47.99rem) { .progress { grid-template-columns: 1fr; } .progress li { border-top: 0; border-inline-start: 3px solid var(--rule); padding: 4px 0 4px var(--s-3); } .progress li.is-done { border-color: var(--accent); } .progress li.is-current { border-color: var(--signal); } }
.order-body { padding-block: var(--s-6) var(--row-end); row-gap: var(--s-7); align-items: start; }
.order-body__main { grid-column: 1 / span 8; display: grid; gap: var(--s-7); }
.order-body__side { grid-column: 9 / -1; display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: var(--radius); background: var(--field); }
@media (max-width: 63.99rem) { .order-body__main, .order-body__side { grid-column: 1 / -1; } }
.callout { display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-radius: var(--radius); background: var(--accent-soft); }
.callout h2 { font-size: var(--t-m); }
.callout--warn { background: #fff4ec; }
.callout .btn-row { margin-block-start: var(--s-2); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s-5); font-size: var(--t-s); }
.kv dt { color: var(--grey-text); }
.order-list .table__primary { font-variant-numeric: tabular-nums; }
.status--quote_requested::before, .status--placed::before { background: var(--signal); }
.status--quoted::before { background: var(--accent); }
.status--confirmed::before, .status--dispatched::before { background: var(--accent-ink); }
.status--delivered::before { background: var(--ok); }
.status--cancelled::before { background: none; box-shadow: inset 0 0 0 1px var(--grey); }

/* ---------- Account, auth --------------------------------------------------- */
.auth { padding-block: var(--s-8) var(--row-end); row-gap: var(--s-6); }
.auth__main { grid-column: 4 / span 6; display: grid; gap: var(--s-6); }
.auth__main h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--track-display); }
.auth__main > p { color: var(--grey-text); }
.auth__alt { padding-block-start: var(--s-5); border-top: 1px solid var(--rule); color: var(--grey-text); }
@media (max-width: 63.99rem) { .auth__main { grid-column: 1 / -1; } }
.account-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); border-bottom: 1px solid var(--rule); }
.account-nav a { display: inline-flex; min-height: 48px; align-items: center; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--grey-text); }
.account-nav a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.addresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--col-gap); }
.address-card { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); font-size: var(--t-s); }
.address-card b { font-size: var(--t-body); }

/* ---------- Quick order ----------------------------------------------------- */
.quick textarea { min-height: 14rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }
.quick-results li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }

/* ---------- Toast (add to cart) -------------------------------------------- */
.toast-stack { position: fixed; right: var(--gutter); bottom: var(--s-5); z-index: 80; display: grid; gap: var(--s-2); width: min(24rem, calc(100vw - 2 * var(--gutter))); }
.toast { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: var(--s-4); border-radius: var(--radius); background: var(--ink); color: var(--paper); box-shadow: 0 16px 40px rgb(0 0 0 / 0.2); animation: toast-in 320ms var(--ease); }
.toast .icon { grid-row: span 2; width: 20px; height: 20px; color: #7dd3a8; }
.toast b { font-weight: 500; }
.toast__actions { grid-column: 2; display: flex; gap: var(--s-4); margin-block-start: 6px; font-size: var(--t-s); }
.toast__actions a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Floating WhatsApp button --------------------------------------- */
.wa-float { position: fixed; right: var(--gutter); bottom: var(--s-5); z-index: 70; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #1f9d55; color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / 0.18); }
.wa-float:hover { background: #17824a; }
.wa-float .icon { width: 26px; height: 26px; }
body:has(.toast) .wa-float { display: none; }

/* ---------- Legal pages, Arabic --------------------------------------------- */
.legal { padding-block: var(--s-5) var(--row-end); }
.legal__nav { grid-column: 1 / span 3; display: grid; align-content: start; gap: 4px; font-size: var(--t-s); }
.legal__nav a { padding-block: 6px; color: var(--grey-text); }
.legal__nav a[aria-current="page"], .legal__nav a:hover { color: var(--ink); }
.legal__body { grid-column: 4 / span 7; }
.legal__body .prose { max-width: 44em; }
.legal__updated { margin-block-end: var(--s-6); font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 63.99rem) { .legal__nav, .legal__body { grid-column: 1 / -1; } .legal__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-block-end: var(--s-6); } }
[dir="rtl"] .prose { font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.8; }
.seller-line { font-size: var(--t-s); color: var(--grey-text); }

/* ---------- Printable quotation --------------------------------------------- */
.doc { max-width: 60rem; margin-inline: auto; padding: var(--s-7) var(--gutter); }
.doc__head { display: flex; justify-content: space-between; gap: var(--s-6); padding-block-end: var(--s-5); border-bottom: 2px solid var(--ink); }
.doc__head h1 { font-size: var(--t-l); }
.doc table { width: 100%; margin-block: var(--s-6); font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.doc th, .doc td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: top; }
.doc .num { text-align: end; }
.doc__foot { display: grid; gap: var(--s-2); font-size: var(--t-s); color: var(--grey-text); }
@media print {
  .site-header, .site-footer, .subnav, .wa-float, .no-print, .flash-stack { display: none !important; }
  .doc { padding: 0; }
  body { font-size: 11pt; }
}
.perks .select { width: auto; field-sizing: content; min-height: 0; padding: 0 18px 0 0; border: 0; font-size: inherit; font-weight: 500; }
.line__name a, .line__name a:not([class]) { text-decoration: none; }
.textarea[rows="2"], .textarea[rows="3"] { min-height: 4.5rem; }
/* Phones: two cards per row */
@media (max-width: 39.99rem) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) 12px; }
  .pcard__meta span + span { display: none; }
  .pcard__name { font-size: var(--t-s); }
  .pcard__foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .pcard__foot .add-btn { width: 100%; }
  .pcard .stock { top: 6px; left: 6px; padding: 2px 6px; font-size: 0.75rem; }
  .art__code { font-size: 0.6875rem; }
  .shop-hero { padding-block-start: var(--s-7); }
}