/* The live store's additions to soter.css. soter.css is the approved mock's stylesheet
   and is kept as it came; what the live pages need beyond it - states the mock never
   had to draw, and the inline styles it carried in its markup - lives here. */

/* The mock wrote this grid inline on the header. */
.header-core { grid-template-columns: 165px minmax(360px, 1fr) auto; gap: 36px; align-items: center; }

/* An account still under review: said once, under the header, on every page. */
.review-banner { background: #fff8e6; border-bottom: 1px solid #f6dfa3; color: #7a5300; font-size: .88rem; font-weight: 600; padding: 10px 0; }

/* No picture yet: a drawn placeholder rather than a broken-image glyph. It fills the
   frame the picture would, so a card without one is the same height as its neighbours. */
.img-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; color: #d7c9d0; background: #fbf7f9; border-radius: inherit; font-size: 2rem; }
/* Frames with an aspect ratio and no fixed height: the placeholder fills them from edge
   to edge rather than collapsing to its icon at the top. */
.category-image .img-placeholder, .department-hero .img-placeholder { position: absolute; inset: 0; min-height: 0; }
.mini-product .img-placeholder { width: 75px; height: 88px; min-height: 0; flex-shrink: 0; font-size: 1.4rem; }
.department-button .img-placeholder { width: 44px; height: 44px; min-height: 0; font-size: 1.1rem; }

/* The mock drew the quantity as text; here it is a box that can be typed into. */
.quantity-control .qty-input { width: 100%; min-width: 0; border: 0; border-inline: 1px solid var(--soter-border); text-align: center; font-size: .8rem; font-weight: 700; -moz-appearance: textfield; background: #fff; }
.quantity-control .qty-input::-webkit-outer-spin-button,
.quantity-control .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.detail-qty { max-width: 150px; }

/* Under review: the price gate, said as a state rather than a link back to sign in. */
.price-gate-review { border-style: solid; border-color: #f2c86b; background: #fff8e6; color: #7a5300; cursor: default; }
.price-gate-review:hover { background: #fff8e6; color: #7a5300; border-color: #f2c86b; }

/* The mock wrote these widths inline. */
.auth-container { max-width: 1100px; }
.signup-container { max-width: 1180px; }
.sort-select { min-width: 190px; }

/* The pager is links here - each page is an address - and links need the button's look. */
a.pager-btn { display: inline-grid; place-items: center; text-decoration: none; }
a.pager-btn:hover { border-color: var(--soter-primary); color: var(--soter-primary); }
a.pager-btn.is-active:hover { color: #fff; }
a.pager-btn.disabled { opacity: .42; pointer-events: none; }
.pager-gap { align-self: center; color: var(--soter-muted); padding: 0 4px; }

/* Brand names in the strip are links to their products. */
a.brand-name { text-decoration: none; }
a.brand-name:hover { color: var(--soter-primary); }

/* A home-hero banner, and an offer card's single picture. */
.hero-banner { text-decoration: none; color: inherit; }
.bundle-card { display: block; text-decoration: none; color: inherit; }
.bundle-image-single { grid-template-columns: 1fr; }
.bundle-image-single img { object-fit: cover; mix-blend-mode: normal; border-radius: 12px; }

/* The categories page's department buttons are links now. */
a.department-button { text-decoration: none; color: inherit; }
.department-hero { display: block; text-decoration: none; color: inherit; }
.dept-cta { margin: 4px 22px 22px; }

/* The cart. The mock wrote the quantity box's width inline. */
.cart-qty { width: 132px; }
.cart-item .img-placeholder { width: 115px; height: 115px; min-height: 0; }
.cart-item h3 a { color: inherit; text-decoration: none; }
.summary-note { font-size: .8rem; line-height: 1.6; padding: 7px 10px; border-radius: 10px; margin-top: 8px; }
.summary-note.is-good { background: #edf8f0; color: #11692e; }
.summary-note.is-warn { background: #fff8e6; color: #7a5300; }
@media (max-width: 991.98px) { .cart-item .img-placeholder { width: 80px; height: 80px; } }

/* Orders. */
.order-no { color: inherit; font-weight: 800; text-decoration: none; }
.order-no:hover { color: var(--soter-primary); }
.status-pill.is-cancelled { background: #f1eef2; color: #6c6470; }
.order-products .img-placeholder { width: 46px; height: 46px; min-height: 0; font-size: 1rem; }
.checkout-line img, .checkout-line .img-placeholder { width: 55px; height: 55px; min-height: 0; object-fit: contain; flex-shrink: 0; font-size: 1rem; }
.order-placed { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 16px; background: #edf8f0; color: #11692e; border: 1px solid #c7e9d2; }
.order-placed > i { font-size: 1.8rem; }
.order-placed b { display: block; font-size: 1.02rem; }
.order-placed span { font-size: .88rem; }

/* The checkout steps' connector, turned for RTL. The mock's rule ran each line from a
   step towards the next one on its left, so the last step's line hung 161px past the
   page edge and the whole page scrolled sideways. In RTL the step before is on the
   right, so the line runs from each step's centre to the one before it. */
.checkout-step::after { right: calc(-50% + 35px); left: calc(50% + 35px); }

/* The steps as a stepper (6 October): each step a centred column - the circle with its
   label under it - so the line between two circles runs from centre to centre and never
   crosses a label, which it did while the label sat beside the circle. The line into a
   step that has been reached takes the brand colour. */
.checkout-steps { max-width: 760px; margin: 0 auto 32px; }
.checkout-step { flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center; font-size: .85rem; font-weight: 600; }
.checkout-step::after { top: 18px; right: calc(-50% + 26px); left: calc(50% + 26px); height: 2px; border-radius: 2px; }
.checkout-step.active::after { background: var(--soter-primary); }
.checkout-step span { font-weight: 800; transition: box-shadow .2s ease; }
.checkout-step.active span { box-shadow: 0 0 0 5px var(--soter-primary-soft, rgba(228, 36, 108, .12)); }
.checkout-step:not(.active) span { color: var(--soter-muted); }

/* Signing in and up with no shell around them: the auth page fills the window, or the
   body's white shows as a strip under the card on a tall screen. */
.auth-main{display:flex;flex-direction:column;min-height:100vh}
.auth-main>.auth-page{flex:1}

/* The account pages. */
.account-avatar { font-weight: 800; font-size: 1.25rem; }
.account-state { color: #2f6b4f; font-size: .74rem; font-weight: 700; margin-top: 4px; }
.account-state.is-pending { color: #8a5a12; }
.account-nav .nav-count { margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--soter-primary-soft); color: var(--soter-primary); font-size: .7rem; font-weight: 800; text-align: center; }
.stat-link { color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.stat-link:hover { border-color: #eca9c2; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(122, 20, 64, .08); color: inherit; }
.wallet-strip { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 14px; background: linear-gradient(90deg, #fff4f7, #fff); border: 1px solid #f5d9e4; color: #4b1631; text-decoration: none; font-size: .88rem; }
.wallet-strip > i:first-child { font-size: 1.3rem; color: var(--soter-primary); }
.wallet-strip > i:last-child { margin-inline-start: auto; color: var(--soter-primary); }
.wallet-strip:hover { color: #4b1631; border-color: #eca9c2; }

/* The wallet and points: two balances side by side, never summed. */
.balance-card { position: relative; overflow: hidden; display: grid; gap: 6px; padding: 22px 24px; border-radius: 18px; color: #fff; min-height: 150px; isolation: isolate; }
.balance-card::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255, 255, 255, .12); z-index: -1; }
.balance-card.is-wallet { background: linear-gradient(135deg, #3a0f27, #7a1c4a 60%, #c2185b); }
.balance-card.is-points { background: linear-gradient(135deg, #2b2240, #4c3a75 60%, #8c6ad1); }
.balance-label { font-size: .82rem; font-weight: 700; opacity: .85; }
.balance-card strong { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; }
.balance-card strong small { font-size: .9rem; font-weight: 600; opacity: .8; }
.balance-sub { font-size: .78rem; opacity: .85; }
.balance-card .tier-pill { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: #fff; }
.ledger-expire .ledger-icon { background: #f3eff2; color: #8b838f; }
.ledger-expire strong { color: #8b838f; }
.ledger-empty { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px dashed #e8dbe2; border-radius: 12px; color: var(--soter-muted); font-size: .86rem; }
.ledger-empty i { font-size: 1.5rem; color: #d7b9c8; }

/* Addresses. */
.address-card { height: 100%; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s; }
.address-card.is-editing { border-color: var(--soter-primary); box-shadow: 0 0 0 3px var(--soter-primary-soft); }
.address-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.address-actions form { margin: 0; }
.address-warn { color: #8a5a12; background: #fff8e6; border-radius: 8px; padding: 6px 10px; }

/* The heart: a form around the mock's button, so the form takes the button's place. */
/* Inside the picture, not on its corner: the thumb sits 12px in, and the heart and the
   offer badge sit 10px further (6 October). */
.favorite-form { position: absolute; z-index: 2; top: 22px; left: 22px; margin: 0; }
.product-card > .product-badge { top: 22px; right: 22px; }
.favorite-form .favorite-btn { position: static; transition: transform .15s, background .2s, color .2s, border-color .2s; }
.favorite-form .favorite-btn:hover { color: var(--soter-primary); transform: scale(1.06); }
/* The same answer the header's heart gives (6 October): it beats, fills and glows. */
.favorite-form .favorite-btn i { display: inline-block; }
.favorite-form .favorite-btn:hover { border-color: #efb0c8; background: var(--soter-primary-soft); box-shadow: 0 0 0 4px rgba(207, 21, 89, .08), 0 6px 16px rgba(207, 21, 89, .2); }
.favorite-form .favorite-btn:hover .bi-heart::before { content: "\f415"; }
.favorite-form .favorite-btn:hover i { animation: hdr-beat .7s ease; }
/* On the product page the heart sat on the gallery's own corner, outside the picture's
   rounded edge. It belongs on the picture: the gallery's 25px padding, then the same
   16px breathing room a card gives it. */
.detail-gallery > .favorite-form { top: 41px; left: 41px; }
.detail-gallery > .product-badge { top: 41px; right: 41px; }
.detail-gallery > .favorite-form .favorite-btn { width: 42px; height: 42px; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(28, 18, 40, .12); }
@media (prefers-reduced-motion: reduce) { .favorite-form .favorite-btn:hover i { animation: none; } }
.favorite-btn.is-pop i { animation: heart-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes heart-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.action-badge.is-zero { display: none; }
@media (max-width: 575.98px) { .favorite-form { left: 16px; top: 16px; } .product-card > .product-badge { top: 16px; right: 16px; } }

/* Returns. */
.return-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #f0ecef; }
.return-head > div b { display: block; font-size: 1rem; }
.return-head > div span { font-size: .8rem; color: var(--soter-muted); }
.return-row { transition: background .2s; border-radius: 10px; padding-inline: 8px; }
.return-row.is-picked { background: #fff8fb; }
.return-row.is-done { opacity: .55; }
.return-pick img, .return-pick .img-placeholder { width: 46px; height: 46px; min-height: 0; flex-shrink: 0; object-fit: contain; border-radius: 9px; background: #faf7f9; font-size: 1rem; }
.return-qty { flex: 0 0 132px; width: 132px; grid-template-columns: 1fr 46px 1fr; }
.return-fields .return-qty input[type="number"] { width: 100%; }
.return-max { font-size: .72rem; color: var(--soter-muted); min-width: 52px; }
.photo-drop { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 22px; border: 1.5px dashed #e0b4c5; border-radius: 14px; background: #fffafc; color: #8b5a70; cursor: pointer; transition: background .2s, border-color .2s; font-size: .88rem; }
.photo-drop i { font-size: 1.5rem; color: var(--soter-primary); }
.photo-drop:hover, .photo-drop.is-over { background: #fff1f6; border-color: var(--soter-primary); }
.photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.photo-preview img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; border: 1px solid var(--soter-border); animation: pop-in .3s ease both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.return-status { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #f4f0f3; }
.return-status > div b { display: block; font-size: .88rem; }
.return-status > div span { font-size: .74rem; color: var(--soter-muted); }
.return-status.is-closed .return-pending { background: #edf8f0; color: #11692e; border-color: #c7e9d2; }
.return-status.is-rejected .return-pending { background: #fbe9ed; color: #a8324a; border-color: #f2c4cf; }
@media (max-width: 575.98px) { .return-fields { width: 100%; } .return-fields select { min-width: 0; flex: 1; } }

/* Reviews. */
.stars { display: inline-flex; gap: 1px; color: #f2a516; font-size: .82rem; vertical-align: middle; }
.card-rating { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 800; color: #3d2a33; }
.card-rating i { color: #f2a516; font-size: .72rem; }
.card-rating small { color: var(--soter-muted); font-weight: 600; }
.detail-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: inherit; text-decoration: none; font-size: .86rem; }
.detail-rating span { color: var(--soter-muted); }
.detail-rating:hover b { color: var(--soter-primary); }
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 999px; background: var(--soter-primary-soft); color: var(--soter-primary); font-size: .7rem; font-weight: 800; }
.reviews-summary { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid #f0ecef; }
.reviews-score { display: grid; justify-items: center; gap: 4px; text-align: center; }
.reviews-score strong { font-size: 3rem; font-weight: 800; color: var(--soter-primary); line-height: 1; }
.reviews-score .stars { font-size: 1rem; }
.reviews-score span { font-size: .8rem; color: var(--soter-muted); }
.reviews-bars { display: grid; gap: 6px; }
.reviews-bar { display: grid; grid-template-columns: 42px 1fr 32px; gap: 10px; align-items: center; font-size: .8rem; }
.reviews-bar span i { color: #f2a516; font-size: .7rem; }
.reviews-bar > div { height: 8px; border-radius: 99px; background: #f4eef1; overflow: hidden; }
.reviews-bar > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f2a516, #f7c25b); transform-origin: right; animation: bar-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.reviews-bar b { color: var(--soter-muted); font-weight: 700; text-align: end; }
.my-review { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: #fffaf0; border: 1px solid #f6dfa3; }
.my-review.is-approved { background: #edf8f0; border-color: #c7e9d2; }
.my-review.is-rejected { background: #fbe9ed; border-color: #f2c4cf; }
.my-review-state { font-size: .74rem; font-weight: 800; }
.review-form { margin-top: 20px; padding: 18px; border: 1px dashed #e0b4c5; border-radius: 14px; background: #fffafc; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.6rem; color: #e6dbe0; cursor: pointer; transition: color .15s, transform .15s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f2a516; }
.star-input label:hover { transform: scale(1.15); }
.star-input input:focus-visible + label { outline: 2px solid var(--soter-primary); outline-offset: 2px; border-radius: 4px; }
.review-list { display: grid; gap: 4px; margin-top: 18px; }
.review-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #f4f0f3; }
.review-avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soter-primary-soft); color: var(--soter-primary); font-weight: 800; }
.review-item time { font-size: .74rem; color: var(--soter-muted); }
.review-verified { display: inline-block; margin-top: 4px; font-size: .72rem; color: #2f6b4f; font-weight: 700; }
@media (max-width: 575.98px) { .reviews-summary { grid-template-columns: 1fr; } }

/* The magazine. A piece with no cover yet, or one that cannot be fetched, keeps its frame. */
.editorial-hero > .img-placeholder, .story-card > .img-placeholder, .article-cover > .img-placeholder { position: absolute; inset: 0; min-height: 0; border-radius: 0; font-size: 3rem; }
.story-card { display: block; color: inherit; text-decoration: none; }
.story-card h3 { font-size: 1.05rem; font-weight: 800; margin: 6px 0; }
.story-card p { font-size: .76rem; color: #6f6670; margin-bottom: 10px; line-height: 1.7; }
.story-card--full { grid-column: span 6; }
.editorial-hero { color: inherit; text-decoration: none; }
.article-cover { position: relative; overflow: hidden; min-height: 360px; border-radius: 22px; background: var(--soter-plum); display: flex; align-items: flex-end; isolation: isolate; }
.article-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.article-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(26, 12, 22, .88), rgba(26, 12, 22, .35) 55%, rgba(26, 12, 22, 0)); }
.article-cover-copy { padding: 34px 40px; color: #fff; max-width: 760px; }
.article-cover-copy > span { color: #ff8fb6; font-size: .78rem; font-weight: 800; }
.article-cover-copy h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; margin: 8px 0 10px; line-height: 1.25; }
.article-cover-copy p { color: rgba(255, 255, 255, .85); line-height: 1.9; margin-bottom: 12px; }
.article-cover-copy small { color: rgba(255, 255, 255, .7); }
.album { display: grid; gap: 22px; max-width: 980px; margin: 28px auto 0; }
.album-slide { position: relative; display: block; overflow: hidden; margin: 0; border-radius: 20px; background: #f6eef2; color: inherit; text-decoration: none; box-shadow: 0 18px 40px rgba(60, 14, 38, .08); }
.album-slide img { display: block; width: 100%; height: auto; min-height: 260px; max-height: 760px; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
a.album-slide:hover img { transform: scale(1.025); }
.album-num { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 4px 11px; border-radius: 99px; background: rgba(26, 12, 22, .6); color: #fff; font-size: .74rem; font-weight: 700; backdrop-filter: blur(6px); }
.album-caption { position: absolute; inset-inline: 14px; bottom: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.album-caption b { font-size: .98rem; }
.album-caption .magazine-action { padding: 9px 15px; border-radius: 9px; background: var(--soter-primary); color: #fff; }
@media (max-width: 767.98px) {
  .article-cover { min-height: 300px; border-radius: 16px; }
  .article-cover-copy { padding: 22px; }
  .story-card, .story-card--wide, .story-card--full { grid-column: span 6; }
  .album-slide img { min-height: 200px; }
  .album-caption { position: static; border-radius: 0; box-shadow: none; }
}

/* Orders: the head reads number, stage and date as one identity on the start side and
   the total on the end; the body is pictures and count, then the buttons - one filled
   (the details) and the rest quiet; a return on the order is its own strip under the
   body instead of a chip squeezed between the count and the buttons. */
.order-card .order-head { gap: 12px; flex-wrap: nowrap; }
.order-id { min-width: 0; }
.order-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.order-id .order-no { font-size: 1rem; }
.order-id .status-pill { font-size: .72rem; padding: 4px 10px; }
.order-id .order-date { flex-basis: 100%; color: var(--soter-muted); font-size: .76rem; }
.order-total { display: grid; justify-items: end; line-height: 1.3; white-space: nowrap; }
.order-total span { color: var(--soter-muted); font-size: .72rem; }
.order-total strong { color: var(--soter-primary); font-size: 1.1rem; font-weight: 800; }
.order-summary b { display: block; font-size: .92rem; }
.order-summary span { display: flex; align-items: center; gap: 5px; color: var(--soter-muted); font-size: .8rem; margin-top: 2px; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding-inline: 14px; border-radius: 10px; font-weight: 700; font-size: .8rem; white-space: nowrap; }
.order-actions .btn-light { background: #fff; border: 1px solid var(--soter-border); color: var(--soter-ink); }
.order-actions .btn-light:hover { border-color: var(--soter-primary); color: var(--soter-primary); background: #fff; }
.order-return { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid #f5e6cf; background: #fffaf2; color: #8a5a12; font-size: .82rem; font-weight: 700; text-decoration: none; }
.order-return span { flex: 1; }
.order-return:hover { background: #fff4e3; color: #6f470c; }
@media (max-width: 767.98px) {
  .order-body { flex-wrap: wrap; }
  .order-summary { min-width: 0; flex: 1 1 140px; }
  .order-actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .order-actions .btn { padding-inline: 6px; gap: 4px; font-size: .74rem; }
  .order-card .order-head, .order-body, .order-return { padding-inline: 14px; }
  .order-total strong { font-size: 1rem; }
}

/* The account menu on a phone: the seven stacked links pushed every account page below
   the fold, so below lg they become one scrolling row of chips and the name block goes -
   the header already says who is signed in. A deliberate change to the mock's layout. */
@media (max-width: 991.98px) {
  .account-sidebar { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .account-sidebar .account-user { display: none; }
  .account-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a { flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--soter-border); border-radius: 999px; background: #fff; white-space: nowrap; scroll-snap-align: start; }
  .account-nav a.active { border-color: var(--soter-primary); background: var(--soter-primary); color: #fff; }
  .account-nav .nav-count { margin-inline-start: 4px; }
  .account-nav a.active .nav-count { background: rgba(255, 255, 255, .25); color: #fff; }
}

/* ───────────── Motion, loading and messages (design pass, 5 October) ───────────── */

/* Toasts: top corner, coloured by how it went, a bar running down their five seconds. */
.soter-toasts { position: fixed; z-index: 2000; top: 16px; inset-inline-end: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.soter-toast-item { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px 16px; border-radius: 14px; background: #fff; color: #1f1622; box-shadow: 0 18px 40px rgba(27, 14, 34, .18), 0 0 0 1px rgba(27, 14, 34, .05); font-size: .9rem; font-weight: 600; pointer-events: auto; animation: toast-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
.soter-toast-item > i { font-size: 1.35rem; }
.soter-toast-item.is-ok > i { color: #16a34a; }
.soter-toast-item.is-error > i { color: #dc2626; }
.soter-toast-item.is-ok { border-inline-start: 4px solid #16a34a; }
.soter-toast-item.is-error { border-inline-start: 4px solid #dc2626; }
.soter-toast-item button { border: 0; background: transparent; color: #8b838f; padding: 2px 4px; }
/* Faint and thin (Peter, 6 October): it says the message is on a clock without
   competing with it. It stops while the pointer is on the message - so does the clock. */
.soter-toast-bar { position: absolute; inset-inline: 0; bottom: 0; height: 2px; opacity: .28; transform-origin: right; animation: toast-bar 5s linear both; }
.soter-toast-item:hover .soter-toast-bar { animation-play-state: paused; }
.is-ok .soter-toast-bar { background: #16a34a; }
.is-error .soter-toast-bar { background: #dc2626; }
.soter-toast-item.is-leaving { animation: toast-out .26s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Leaving a page: what you are leaving settles back a little while the next one is
   fetched - held back 150ms, so a quick answer shows no wait at all - and the loader
   below comes up over it a moment later. */
main { transition: opacity .25s ease .15s, filter .25s ease .15s; }
.is-navigating main { opacity: .55; filter: saturate(.7); pointer-events: none; }
/* Arriving in place: the new page fades up, as a first load does. */
main.page-enter { animation: page-in .35s ease both; }

/* A button whose press is on its way to the server turns into a spinner and stops
   taking presses - the label stays in place (hidden) so the button keeps its size.
   Filled buttons spin in white, light and outlined ones in the brand colour. */
.is-sending { position: relative; pointer-events: none; color: transparent !important; --spin: #fff; --spin-track: rgba(255, 255, 255, .35); }
.is-sending > * { visibility: hidden; }
.is-sending::after { content: ""; position: absolute; inset: 0; width: 1.15em; height: 1.15em; margin: auto; border: 2px solid var(--spin-track); border-top-color: var(--spin); border-radius: 50%; animation: btn-spin .7s linear infinite; }
:is(.btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-link, .favorite-btn).is-sending { --spin: var(--soter-primary); --spin-track: rgba(0, 0, 0, .1); }
.favorite-btn.is-sending, .btn.is-sending:disabled { opacity: 1; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-sending::after { animation-duration: 1.6s; } }

/* Pictures paint as they arrive, over a quiet flat tone - never hidden until complete:
   a large photo shown as it comes in reads as loading, a blank frame reads as broken. */
img[data-fallback]:not(.is-loaded) { background: #f7f1f4; }

/* Skeletons: a streamed page's shape, drawn before its data arrives - flat blocks of the
   size the real thing will be, breathing slowly. */
.sk-block { display: block; background: #f3ecf0; border-radius: .6rem; animation: sk-breathe 1.6s ease-in-out infinite; }
.sk-line { display: block; height: .9rem; margin-block: .55rem; background: #f3ecf0; border-radius: 999px; animation: sk-breathe 1.6s ease-in-out infinite; }
.sk-line.is-short { width: 40%; } .sk-line.is-mid { width: 65%; } .sk-line.is-title { height: 1.6rem; width: 45%; }
.sk-card { border: 1px solid #f1e6ec; border-radius: 1rem; padding: .9rem; background: #fff; }
.sk-card .sk-block { aspect-ratio: 1; margin-bottom: .75rem; }
@keyframes sk-breathe { 50% { opacity: .55; } }
.img-placeholder.is-fallback { background: repeating-linear-gradient(135deg, #fbf7f9 0 12px, #f7eff3 12px 24px); }
.product-thumb .img-placeholder, .detail-main-image .img-placeholder { min-height: 180px; }

/* Things rise into place as they scroll in - a row's cards one after another. Only once
   the script has run, so with no script everything is simply there. */
/* An animation, not a transition: once it has played the card is handed back to its own
   styles, so the mock's hover lift and eased shadow still work. */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: rise .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* The page itself, and the hero's words, arrive rather than appear. */
main { animation: page-in .45s ease both; }
@keyframes page-in { from { opacity: 0; } }
.hero-copy > *, .editorial-hero-copy > *, .article-cover-copy > * { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.hero-copy > :nth-child(2), .editorial-hero-copy > :nth-child(2), .article-cover-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3), .editorial-hero-copy > :nth-child(3), .article-cover-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4), .editorial-hero-copy > :nth-child(4), .article-cover-copy > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.hero-card > img, .editorial-hero > img, .article-cover > img { animation: hero-zoom 1.6s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes hero-zoom { from { transform: scale(1.06); } }
.hero-discount { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* Hover: cards lift, the arrow in a call to action leans the way it points. */
.category-card, .story-card, .bundle-card, .checkout-card, .account-panel, .account-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.story-card:hover, .bundle-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(60, 14, 38, .12); }
.magazine-action i, .section-link i, .btn i.bi-arrow-left { transition: transform .25s ease; }
a:hover > .magazine-action i, a:hover .magazine-action i, .section-link:hover i, .btn:hover i.bi-arrow-left { transform: translateX(-4px); }
.add-cart-btn { transition: transform .15s ease, background .2s ease; }
.add-cart-btn:active { transform: scale(.9); }

/* Badges: hidden at zero, and they bump when they change. */
.action-badge.is-bump { animation: bump .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { transform: scale(1.45); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .sk-block, .sk-line { animation: none; }
}
/* A hero banner whose picture cannot be fetched keeps the hero's colour, not a broken frame. */
.hero-card > .img-placeholder { position: absolute; inset: 0; min-height: 0; border-radius: 0; background: linear-gradient(135deg, #2a1230, #5b1a40); color: rgba(255, 255, 255, .25); font-size: 4rem; }
/* soter.css un-sticks the gallery on narrow screens with position:static, which left the
   heart anchored to the page instead - behind the header. Relative keeps it on the picture. */
@media (max-width: 991.98px) { .detail-gallery { position: relative; } }
/* A pending button keeps its own colour - Bootstrap's disabled state paints it its own blue. */
.btn-primary.is-sending, .btn-primary.is-sending:disabled { background-color: var(--soter-primary); border-color: var(--soter-primary); }
.btn-outline-primary.is-sending:disabled, .btn-light.is-sending:disabled, .btn-outline-secondary.is-sending:disabled { background-color: #fff; }
.sk-card .sk-button { aspect-ratio: auto; height: 2.4rem; margin: .9rem 0 0; }
.sk-panel { min-height: 8rem; }
.sk-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-block: 1rem; }
.sk-figures .sk-block { height: 5.5rem; }
.sk-detail-image { aspect-ratio: 1; width: 100%; border-radius: 1.25rem; }
/* A disabled primary button - checkout under the minimum - stays in the brand's colour,
   faded. Bootstrap paints its own blue there, which the mock never sets. */
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--soter-primary); border-color: var(--soter-primary); color: #fff; opacity: .45; }

/* Card pictures fill their frame. The mock fits a cut-out product on white (contain +
   multiply); a real upload is as often a full photo, and fitted into a square it left
   wide bands of nothing above and below. Cover crops the edges instead, so every card's
   picture is the same full frame. */
.product-thumb { background: #f7f1f4; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
/* The card's money and buttons sit on one line across a row, whatever is above them -
   a unit line or a rating on one card and not the next. */
.product-card { display: flex; flex-direction: column; }
.product-body { display: flex; flex: 1; flex-direction: column; }
.product-body > .d-flex:has(.stock-status) { margin-top: auto; padding-top: 6px; }
.products-list-mode .product-card { display: grid; }

/* Every product picture across the store, one rule: a fixed square frame, the picture
   filling it (cover), a soft tone behind it, rounded corners - and the drawn placeholder
   for a product with no picture takes exactly the same frame. The mock fits cut-outs on
   white (contain + multiply); real uploads are as often full photos, and fitted they
   left bands of nothing and frames of every size. Each slot keeps the mock's size. */
:is(.mini-product, .cart-item, .order-products, .checkout-line, .return-pick, .offcanvas-cart-item, .suggestion-item) :is(img, .img-placeholder) {
  flex-shrink: 0; min-height: 0; object-fit: cover; mix-blend-mode: normal; background: #f7f1f4; border-radius: 12px; font-size: 1.1rem;
}
.mini-product :is(img, .img-placeholder) { width: 80px; height: 80px; }
.cart-item :is(img, .img-placeholder) { width: 105px; height: 105px; border-radius: 14px; font-size: 1.6rem; }
.offcanvas-cart-item :is(img, .img-placeholder) { width: 72px; height: 72px; }
.checkout-line :is(img, .img-placeholder) { width: 56px; height: 56px; border-radius: 10px; }
.return-pick :is(img, .img-placeholder) { width: 48px; height: 48px; border-radius: 10px; }
.suggestion-item :is(img, .img-placeholder) { width: 48px; height: 48px; border-radius: 10px; }
.order-products :is(img, .img-placeholder) { width: 56px; height: 56px; margin-left: -12px; border: 2px solid #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(42, 18, 48, .08); }
.order-products > :last-child { margin-left: 0; }
@media (max-width: 991.98px) { .cart-item :is(img, .img-placeholder) { width: 78px; height: 78px; } }

/* The product page: the main picture fills its frame too, and the thumbnails under it. */
.detail-main-image { overflow: hidden; border-radius: 18px; background: #f7f1f4; }
.detail-main-image img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.detail-thumb { overflow: hidden; padding: 0; background: #f7f1f4; }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bundle-images img { object-fit: cover; mix-blend-mode: normal; border-radius: 12px; }

/* The uploaded logo, wherever the wordmark stood. It is held by its height - a tall
   lockup and a wide one then weigh the same on the page - and the width follows. */
.brand-logo.has-image { min-width: 0; }
.brand-logo.has-image img { display: block; width: auto; height: 76px; object-fit: contain; }
.mobile-header .brand-logo.has-image img { height: 50px; }
.offcanvas .brand-logo.has-image img { height: 56px; }
.auth-panel .brand-logo.has-image img, .auth-panel-top .brand-logo.has-image img { height: 96px; }
/* The footer is dark and the logo is drawn for a light page: it sits on its own tile. */
.footer-brand .brand-logo.has-image { padding: 12px 16px; border-radius: 16px; background: #fff; }
.footer-brand .brand-logo.has-image img { height: 70px; }
/* After an in-place move, Blazor puts focus on the page's heading so a screen reader
   announces the new page. Keep that, but not the ring it draws around the title. */
h1:focus, h1:focus-visible { outline: none; }

/* The contact page: a card per way to reach Soter, each one the whole tap target. */
.announcement-bar a.announcement-contact { color: #fff; font-weight: 400; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-content: start; gap: 16px; height: 100%; }
.contact-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--soter-border); border-radius: 18px; background: #fff; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.contact-card:hover { transform: translateY(-3px); border-color: var(--soter-primary); box-shadow: var(--soter-shadow); color: inherit; }
.contact-icon { display: grid; width: 48px; height: 48px; margin-bottom: 8px; place-items: center; border-radius: 14px; background: var(--soter-primary-soft); color: var(--soter-primary); font-size: 1.35rem; }
.contact-label { color: var(--soter-muted); font-size: .78rem; }
.contact-card strong { font-size: 1.15rem; line-height: 1.6; overflow-wrap: break-word; }
.contact-card strong[dir="ltr"]:not(:only-of-type) { font-size: 1.05rem; }
.contact-card strong[dir="ltr"] { text-align: right; }
.contact-action { margin-top: auto; padding-top: 10px; color: var(--soter-primary); font-size: .8rem; font-weight: 700; }
.contact-card.is-primary { grid-column: 1 / -1; background: linear-gradient(135deg, var(--soter-primary-soft), #fff 70%); }
.contact-card.is-primary strong { font-size: 1.7rem; }
.contact-card.is-whatsapp .contact-icon { background: #e8f8ee; color: #1f9d55; }
.contact-visual { position: relative; overflow: hidden; height: 100%; min-height: 360px; border-radius: 22px; background: var(--soter-plum); }
.contact-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-visual-copy { position: absolute; inset-inline: 0; bottom: 0; padding: 70px 26px 26px; background: linear-gradient(0deg, rgba(27, 14, 34, .95) 0%, rgba(27, 14, 34, .8) 45%, rgba(27, 14, 34, 0)); color: #fff; }
.contact-visual-copy span { display: block; color: rgba(255, 255, 255, .75); font-size: .8rem; }
.contact-visual-copy b { font-size: 1.4rem; }

/* A standing page (policies, terms, about): a readable column of text. */
.page-article { padding: 34px 38px; border: 1px solid var(--soter-border); border-radius: 20px; background: #fff; }
.page-body { color: #3d3742; font-size: .98rem; line-height: 2.05; }
.page-body h2 { margin: 30px 0 10px; padding-top: 22px; border-top: 1px solid var(--soter-border); font-size: 1.2rem; font-weight: 700; }
.page-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.page-body p { margin: 0 0 14px; }
.page-body ul { margin: 0 0 16px; padding-inline-start: 22px; }
.page-body li { margin-bottom: 8px; }
.page-body li::marker { color: var(--soter-primary); }
.page-body li ul { margin: 8px 0 4px; }
.page-body li li::marker { color: var(--soter-muted); }
.page-note { display: flex; gap: 10px; margin: 6px 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--soter-primary-soft); color: var(--soter-ink); }
.page-note i { color: var(--soter-primary); margin-top: 4px; }
.page-aside { position: sticky; top: 120px; padding: 24px; border: 1px solid var(--soter-border); border-radius: 18px; background: var(--soter-surface); }
.page-aside b { display: block; font-size: 1.05rem; }
.page-aside p { margin: 6px 0 16px; color: var(--soter-muted); font-size: .85rem; }
@media (max-width: 767.98px) { .page-article { padding: 22px 18px; } }

/* The footer's contact block, social icons and app buttons. */
.footer-contact { margin: 18px 0 0; padding: 0; list-style: none; font-size: .82rem; }
.footer-contact li { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; color: rgba(255, 255, 255, .82); }
.footer-contact i { color: rgba(255, 255, 255, .55); }
.footer-contact a { color: #fff; }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .2s ease, transform .2s ease; }
.footer-social a:hover { background: var(--soter-primary); transform: translateY(-2px); color: #fff; }
.footer-apps { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); font-size: .82rem; }
.footer-app { display: inline-flex; gap: 10px; align-items: center; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; color: #fff; line-height: 1.2; }
.footer-app:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }
.footer-app i { font-size: 1.4rem; }
.footer-app small { display: block; color: rgba(255, 255, 255, .6); font-size: .65rem; }
.signup-terms { margin: 12px 0 0; color: var(--soter-muted); font-size: .75rem; text-align: center; }
.signup-terms a { color: var(--soter-primary); font-weight: 700; }
/* What the admin's rich-text editor writes: sub-headings, numbered lists, quotes, and
   its own alignment and indent classes. */
.page-body h3 { margin: 22px 0 8px; font-size: 1.05rem; font-weight: 700; }
.page-body ol { margin: 0 0 16px; padding-inline-start: 22px; }
.page-body blockquote { display: block; margin: 6px 0 18px; padding: 14px 16px; border-inline-start: 4px solid var(--soter-primary); border-radius: 14px; background: var(--soter-primary-soft); color: var(--soter-ink); }
.page-body a { color: var(--soter-primary); text-decoration: underline; }
.page-body .ql-align-center { text-align: center; } .page-body .ql-align-left { text-align: left; } .page-body .ql-align-justify { text-align: justify; }
.page-body .ql-indent-1 { padding-inline-start: 2em; } .page-body .ql-indent-2 { padding-inline-start: 4em; } .page-body .ql-indent-3 { padding-inline-start: 6em; }

/* ===================================================================================
   The header, redesigned (5 October, Peter: "the logo bigger, the menu is in pieces").
   One pinned block: a tall top row that shows the logo at a size it can be read at,
   settling into a compact bar once the page scrolls; and under it a single strip -
   every department, the ones in view, then the magazine and the offers together.
   =================================================================================== */
.store-header { position: sticky; top: 0; z-index: 1030; border-bottom: 0; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(12px); transition: box-shadow .3s ease; }
.store-header.is-scrolled { box-shadow: 0 10px 30px rgba(28, 18, 40, .08); }

/* The top row. */
.store-header .header-core { grid-template-columns: auto minmax(360px, 640px) auto; justify-content: space-between; gap: 40px; min-height: 118px; transition: min-height .35s cubic-bezier(.2, .8, .2, 1); }
.store-header.is-scrolled .header-core { min-height: 76px; }
.store-header .header-core > .brand-logo.has-image img { height: 98px; transition: height .35s cubic-bezier(.2, .8, .2, 1); }
.store-header.is-scrolled .header-core > .brand-logo.has-image img { height: 60px; }
.store-header .header-core > .brand-logo:not(.has-image) b { transition: font-size .35s ease; }
.store-header.is-scrolled .header-core > .brand-logo:not(.has-image) b { font-size: 2.3rem; }

/* Search: one rounded field, the button sitting inside it. */
.store-header .header-search { position: relative; width: 100%; }
.store-header .header-search .form-control { height: 56px; padding: 0 50px 0 104px; border: 1.5px solid transparent; border-radius: 999px; background: var(--soter-surface, #f8f5f7); box-shadow: inset 0 0 0 1px var(--soter-border); font-size: .9rem; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease; }
.store-header .header-search .form-control:hover { background: #fff; }
.store-header .header-search .form-control:focus { border-color: var(--soter-primary); background: #fff; box-shadow: 0 0 0 5px var(--soter-primary-soft); }
.store-header .header-search-icon { position: absolute; top: 50%; right: 20px; z-index: 2; transform: translateY(-50%); color: var(--soter-muted); font-size: 1.05rem; pointer-events: none; }
.store-header .header-search button { position: absolute; top: 6px; bottom: 6px; left: 6px; width: auto; height: auto; padding: 0 24px; border: 0; border-radius: 999px; background: var(--soter-primary); color: #fff; font-size: .85rem; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.store-header .header-search button:hover { background: var(--soter-primary-dark); }
.store-header.is-scrolled .header-search .form-control { height: 48px; }

/* The three places a buyer keeps going back to. */
.header-actions { display: flex; gap: 6px; align-items: center; }
.store-header .header-action { gap: 10px; padding: 6px 10px 6px 12px; border-radius: 999px; transition: background .2s ease; }
.store-header .header-action:hover, .store-header .header-action.is-current { background: var(--soter-surface, #f8f5f7); color: var(--soter-ink); }
.header-action-icon { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--soter-surface, #f8f5f7); font-size: 1.2rem; transition: background .2s ease, color .2s ease; }
.store-header .header-action i { font-size: 1.2rem; }
.store-header .header-action:hover .header-action-icon, .store-header .header-action.is-current .header-action-icon { background: var(--soter-primary-soft); color: var(--soter-primary); }
.header-action-text { display: flex; flex-direction: column; line-height: 1.25; }
.header-action-text small { color: var(--soter-muted); font-size: .7rem; }
.header-action-text b { font-size: .82rem; font-weight: 700; }
.header-action-icon .action-badge { top: -4px; right: -6px; }
.header-cart { position: relative; display: inline-flex; gap: 10px; align-items: center; height: 50px; margin-inline-start: 6px; padding: 0 22px 0 26px; border-radius: 999px; background: var(--soter-plum); color: #fff; font-size: .88rem; font-weight: 700; box-shadow: 0 10px 22px rgba(28, 18, 40, .18); transition: transform .2s ease, box-shadow .2s ease; }
.header-cart i { font-size: 1.2rem; }
.header-cart:hover, .header-cart.is-current { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(28, 18, 40, .24); }
.header-cart .action-badge { position: static; border-color: transparent; background: var(--soter-primary); }
.store-header.is-scrolled .header-cart { height: 44px; }

/* The strip: one row, packed, the far end holding the two standing destinations. */
.store-header .category-navbar { border-top: 1px solid var(--soter-border); border-bottom: 1px solid var(--soter-border); background: transparent; }
.cat-strip { display: flex; gap: 14px; align-items: center; min-height: 58px; }
.cat-all { display: inline-flex; flex: 0 0 auto; gap: 9px; align-items: center; height: 40px; padding: 0 18px; border-radius: 12px; background: var(--soter-primary); color: #fff; font-size: .84rem; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.cat-all:hover, .cat-all.is-current { background: var(--soter-primary-dark); color: #fff; }
.cat-links { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(270deg, #000 92%, transparent); mask-image: linear-gradient(270deg, #000 92%, transparent); }
.cat-links::-webkit-scrollbar { display: none; }
.cat-link { position: relative; flex: 0 0 auto; padding: 9px 14px; border-radius: 10px; color: var(--soter-ink); font-size: .84rem; font-weight: 600; white-space: nowrap; transition: background .2s ease, color .2s ease; }
/* The current category is a soft pill, not an underline (Peter, 6 October) - the same
   shape as the magazine chip beside it, so the strip speaks one way. */
.cat-link:hover { background: var(--soter-surface, #f8f5f7); color: var(--soter-primary); }
.cat-link.is-current { background: var(--soter-primary-soft); color: var(--soter-primary); font-weight: 700; }
.cat-extras { display: flex; flex: 0 0 auto; gap: 8px; padding-inline-start: 14px; border-inline-start: 1px solid var(--soter-border); }
.cat-extra { display: inline-flex; gap: 7px; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.cat-extra.is-magazine { background: var(--soter-surface, #f8f5f7); color: var(--soter-ink); }
.cat-extra.is-magazine:hover, .cat-extra.is-magazine.is-current { background: var(--soter-primary-soft); color: var(--soter-primary); }
.cat-extra.is-offers { background: linear-gradient(115deg, var(--soter-primary), #ff6f9f); color: #fff; box-shadow: 0 6px 16px rgba(207, 21, 89, .25); }
.cat-extra.is-offers:hover, .cat-extra.is-offers.is-current { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(207, 21, 89, .32); }
.cat-extra.is-offers i { animation: offer-flash 2.4s ease-in-out infinite; }
@keyframes offer-flash { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .35; } }

/* ---- The header's buttons answer the pointer (Peter, 6 October) ------------------ */
/* One movement per icon, each saying what the button is: the account hops, the heart
   beats and fills, the bag swings as if lifted, the magazine turns a page, the offers
   bolt flashes with a shine crossing the chip. Under half a second, on hover only. */
.header-action-icon i, .header-cart > i, .cat-extra i { display: inline-block; }
.header-action.is-account:hover .header-action-icon { box-shadow: 0 0 0 4px var(--soter-primary-soft), 0 6px 16px rgba(122, 20, 64, .16); }
.header-action.is-account:hover .header-action-icon i { animation: hdr-hop .5s ease; }
.header-action.is-favorites:hover .header-action-icon { box-shadow: 0 0 0 4px var(--soter-primary-soft), 0 6px 16px rgba(122, 20, 64, .16); }
.header-action.is-favorites:hover .bi-heart::before { content: "\f415"; }
.header-action.is-favorites:hover .header-action-icon i { animation: hdr-beat .7s ease; }
.header-cart:hover > i { animation: hdr-swing .55s ease; transform-origin: 50% 0; }
.cat-extra.is-magazine:hover i { animation: hdr-page .5s ease; }
.cat-extra.is-magazine:hover { box-shadow: 0 6px 16px rgba(24, 144, 204, .18); }
.cat-extra.is-offers { position: relative; overflow: hidden; }
.cat-extra.is-offers::after { position: absolute; inset-block: 0; width: 40%; inset-inline-start: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); pointer-events: none; content: ""; }
.cat-extra.is-offers:hover::after { animation: hdr-shine .6s ease; }
.cat-extra.is-offers:hover i { animation: hdr-bolt .45s ease; }
@keyframes hdr-hop { 40% { transform: translateY(-4px); } 70% { transform: translateY(1px); } }
@keyframes hdr-beat { 20%, 60% { transform: scale(1.22); } 40%, 80% { transform: scale(.95); } }
@keyframes hdr-swing { 25% { transform: rotate(12deg); } 55% { transform: rotate(-9deg); } 80% { transform: rotate(4deg); } }
@keyframes hdr-page { 0% { transform: perspective(120px) rotateY(0); } 50% { transform: perspective(120px) rotateY(180deg); } 100% { transform: perspective(120px) rotateY(360deg); } }
@keyframes hdr-shine { to { inset-inline-start: 120%; } }
@keyframes hdr-bolt { 30% { transform: scale(1.3) rotate(-8deg); filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); } }
/* Category pictures take the offers chip's shine on hover - home tiles, the
   department banner, and the sub-category thumbnails. */
.subcat-thumb { position: relative; display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 10px; }
.subcategory-card .subcat-thumb img { width: 100%; height: 100%; }
.subcat-thumb .img-placeholder { min-height: 0; font-size: 1.3rem; }
@media (max-width: 991.98px) { .subcat-thumb { width: 54px; height: 54px; } }
@media (max-width: 575.98px) { .subcat-thumb { width: 52px; height: 52px; } }
:is(.category-image, .department-hero, .subcat-thumb)::after { position: absolute; z-index: 1; inset-block: 0; width: 60%; inset-inline-start: -80%; background: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, .55) 50%, transparent 78%); pointer-events: none; content: ""; }
:is(.category-card:hover .category-image, .department-hero:hover, .subcategory-card:hover .subcat-thumb)::after { animation: hdr-shine .75s ease; }
/* White does not show on a pale placeholder, so there the sweep is a soft tint of the ink. */
:is(.category-image, .department-hero, .subcat-thumb):has(> .img-placeholder)::after { background: linear-gradient(105deg, transparent 22%, rgba(99, 91, 190, .16) 50%, transparent 78%); }
.department-hero::after { width: 28%; inset-inline-start: -40%; }
@media (prefers-reduced-motion: reduce) {
  .header-action:hover .header-action-icon i, .header-cart:hover > i, .cat-extra:hover i,
  .cat-extra.is-offers:hover::after,
  :is(.category-card:hover .category-image, .department-hero:hover, .subcategory-card:hover .subcat-thumb)::after { animation: none; }
}

/* On a phone: the mark a size up, the cart a round button. */
.store-header .mobile-header { min-height: 76px; }
.store-header .mobile-header .brand-logo.has-image img { height: 58px; }
.store-header .mobile-header .header-action { padding: 0; }
.store-header .header-search .form-control::-webkit-search-cancel-button { display: none; }
@media (max-width: 991.98px) {
  .store-header .header-search .form-control { height: 50px; padding-inline: 46px 84px; }
  .store-header .header-search button { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .cat-extra.is-offers i { animation: none; } }
/* The mock hides every label span in a header action on small screens; the icon's own
   round frame is a span too, and went with them - leaving the phone with no cart. */
.store-header .header-action .header-action-icon { display: grid; }

/* ===================================================================================
   Sign-in pages (5 October): one frame for signing in, forgetting the password,
   activating an account and choosing a new password. The form in a calm column with
   the mark large above it; the other half a brand panel that tells a trader why.
   =================================================================================== */
.auth-main { min-height: 100vh; background: var(--soter-surface, #faf8fa); }
.auth2 { display: grid; grid-template-columns: minmax(420px, 1fr) 1fr; min-height: 100vh; }
.auth2-form { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px 24px; background: #fff; }
.auth2-inner { width: 100%; max-width: 440px; margin: auto; }
.auth2-logo { display: flex; justify-content: center; margin-bottom: 28px; }
.auth2-logo .brand-logo.has-image img { height: 132px; }
.auth2-logo .brand-logo:not(.has-image) { align-items: center; }
.auth2-kicker { display: block; color: var(--soter-primary); font-size: .82rem; font-weight: 700; text-align: center; }
.auth2-title { margin: 6px 0 8px; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 800; text-align: center; }
.auth2-sub { margin: 0 auto 26px; max-width: 380px; color: var(--soter-muted); font-size: .9rem; line-height: 1.8; text-align: center; }
.auth2-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: #fdecee; color: #a8324a; font-size: .85rem; }
.auth2-alert.is-info { background: var(--soter-surface, #faf8fa); color: var(--soter-ink); }
.auth2-alert i { margin-top: 2px; }
.auth2-fields { display: flex; flex-direction: column; gap: 16px; }
.auth2-field label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 700; }
.auth2-field label small { color: var(--soter-muted); font-weight: 400; }
.auth2-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.auth2-label-row a { color: var(--soter-primary); font-size: .8rem; font-weight: 700; }
.auth2-input { position: relative; display: flex; align-items: stretch; border: 1.5px solid var(--soter-border); border-radius: 14px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.auth2-input:focus-within { border-color: var(--soter-primary); box-shadow: 0 0 0 4px var(--soter-primary-soft); }
.auth2-input input, .auth2-input textarea { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: transparent; font-size: .95rem; outline: none; }
.auth2-input textarea { height: auto; padding: 12px 16px; resize: vertical; }
.auth2-prefix { display: grid; place-items: center; padding: 0 14px; border-inline-end: 1.5px solid var(--soter-border); color: var(--soter-muted); font-size: .9rem; font-weight: 700; }
.auth2-eye { display: grid; width: 48px; place-items: center; border: 0; background: none; color: var(--soter-muted); }
.auth2-submit { width: 100%; height: 54px; margin-top: 4px; border-radius: 14px; font-size: 1rem; font-weight: 700; }
.auth2-or { display: flex; gap: 12px; align-items: center; margin: 24px 0 18px; color: var(--soter-muted); font-size: .8rem; }
.auth2-or::before, .auth2-or::after { flex: 1; height: 1px; background: var(--soter-border); content: ""; }
.auth2-alts { display: grid; gap: 10px; }
.auth2-alt { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1.5px solid var(--soter-border); border-radius: 14px; color: var(--soter-ink); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.auth2-alt:hover { border-color: var(--soter-primary); background: var(--soter-primary-soft); color: var(--soter-ink); transform: translateY(-1px); }
.auth2-alt > i { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--soter-primary-soft); color: var(--soter-primary); font-size: 1.2rem; }
.auth2-alt b { display: block; font-size: .9rem; }
.auth2-alt small { color: var(--soter-muted); font-size: .76rem; }
.auth2-alt.is-whatsapp > i { background: #e8f8ee; color: #1f9d55; }
.auth2-back { margin: 20px 0 0; text-align: center; font-size: .85rem; }
.auth2-back a { color: var(--soter-muted); }
.auth2-done { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 20px; text-align: center; }
.auth2-done-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: #e8f8ee; color: #1f9d55; font-size: 2rem; animation: pop-in .4s ease both; }
.auth2-done b { font-size: 1.15rem; }
.auth2-done p { margin: 0; color: var(--soter-muted); font-size: .88rem; line-height: 1.8; }
.auth2-foot { display: flex; gap: 18px; justify-content: center; padding-top: 24px; font-size: .78rem; }
.auth2-foot a { color: var(--soter-muted); }
.auth2-visual { position: relative; overflow: hidden; background: var(--soter-plum); }
.auth2-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth2-visual::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27, 14, 34, .92) 0%, rgba(27, 14, 34, .45) 45%, rgba(27, 14, 34, .1) 100%); content: ""; }
.auth2-visual-copy { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: 48px 56px; color: #fff; }
.auth2-badge { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: .78rem; backdrop-filter: blur(6px); }
.auth2-visual-copy h2 { margin: 0 0 22px; color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; line-height: 1.5; }
.auth2-visual-copy ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.auth2-visual-copy li { display: flex; gap: 12px; align-items: center; font-size: .95rem; }
.auth2-visual-copy li i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .12); }
@media (max-width: 991.98px) {
  .auth2 { grid-template-columns: 1fr; }
  .auth2-visual { display: none; }
  .auth2-form { padding: 28px 20px 20px; }
  .auth2-logo .brand-logo.has-image img { height: 104px; }
}

/* The page a store page goes to when the gateway does not answer. */
.offline-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.offline-card { max-width: 460px; padding: 44px 36px; border: 1px solid var(--soter-border); border-radius: 24px; background: #fff; box-shadow: var(--soter-shadow); text-align: center; }
.offline-icon { display: inline-grid; width: 84px; height: 84px; margin-bottom: 18px; place-items: center; border-radius: 50%; background: var(--soter-primary-soft); color: var(--soter-primary); font-size: 2.4rem; }
.offline-card h1 { font-size: 1.6rem; font-weight: 800; }
.offline-card p { color: var(--soter-muted); line-height: 1.9; }
.offline-hint { margin: 18px 0 0; font-size: .8rem; }

/* The browser has no network: a strip at the top until it is back. */
.offline-bar { position: fixed; z-index: 2200; top: 0; inset-inline: 0; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 10px 16px; background: #1f1c24; color: #fff; font-size: .85rem; transform: translateY(-100%); transition: transform .3s ease; }
.offline-bar.is-on { transform: none; }

/* The under-review banner can ask for a look. */
.review-banner .container-xxl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.review-banner-form { margin-inline-start: auto; }
.review-banner-form .btn { border: 1px solid #e8c56a; background: #fff; color: #7a5300; font-weight: 700; }
.review-banner-form .btn:hover { background: #7a5300; color: #fff; }

/* Sign-up in the sign-in frame: a wider column for its rows of two, and its Bootstrap
   fields drawn like the sign-in page's - one family of inputs across the four pages. */
.auth2.is-wide { grid-template-columns: minmax(520px, 1.15fr) 1fr; }
.auth2.is-wide .auth2-inner { max-width: 580px; }
.auth2 .form-label { margin-bottom: 7px; font-size: .84rem; font-weight: 700; }
.auth2 .form-control, .auth2 .form-select { min-height: 52px; border: 1.5px solid var(--soter-border); border-radius: 14px; font-size: .95rem; box-shadow: none; }
.auth2 textarea.form-control { min-height: 0; padding-block: 12px; }
.auth2 .form-control:focus, .auth2 .form-select:focus { border-color: var(--soter-primary); box-shadow: 0 0 0 4px var(--soter-primary-soft); }
.auth2 .input-group .input-group-text { border: 1.5px solid var(--soter-border); border-radius: 14px 0 0 14px; color: var(--soter-muted); font-weight: 700; }
.auth2 .input-group .form-control { border-radius: 0 14px 14px 0; }
.auth2 .signup-progress { margin: 0 0 22px; }
.auth2 .signup-step-heading { margin-bottom: 16px; }
.auth2 .signup-actions { margin-top: 22px; }
.auth2 .signup-actions .btn { min-height: 52px; border-radius: 14px; font-weight: 700; }
@media (max-width: 1199.98px) { .auth2.is-wide { grid-template-columns: 1fr; } .auth2.is-wide .auth2-visual { display: none; } }
.auth2 .signup-step { min-height: 0; }

/* The cart between a press and the server's answer: nothing waits. Only the total is
   marked, since it carries the last answer's discounts until the new one lands; the way
   on is held only while the minimum is not met. */
.summary-card.is-estimate .summary-total strong { opacity: .6; }
.summary-card.is-estimate .summary-total span::after { content: " (بيتحسب)"; font-size: .72rem; font-weight: 600; color: var(--soter-muted); }
.cart-go.is-disabled { opacity: .45; pointer-events: none; }
.cart-item { transition: opacity .25s ease, transform .25s ease; }
.cart-item.is-leaving { opacity: 0; transform: translateX(-12px); }

/* A cart line that changed since it went in: the notice sits under the name in amber, and
   a line that will not be on the order at all fades and has its figure struck through. */
.cart-notice { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff8e6; color: #8a5a12; font-size: .78rem; font-weight: 600; line-height: 1.5; }
.cart-notice.is-out { background: #fbe9ed; color: #a8324a; }
.cart-item.is-out :is(img, .img-placeholder, h3, .cart-qty) { opacity: .5; }
.cart-item.is-out .cart-item-price, .checkout-line.is-out strong { color: var(--soter-muted) !important; text-decoration: line-through; }
.checkout-line.is-out :is(img, .img-placeholder) { opacity: .5; }

/* The brand wall on the home page: the brands spread evenly across a white strip with a
   hairline between them. The name is the site's own face, heavy and in a quiet grey that
   comes up to ink on hover, so the strip reads as a row of marks rather than as links;
   an uploaded logo takes the name's place, greyed until hovered, so a wall of mixed
   colours still sits as one row. */
.brand-wall { padding-block: 34px 30px; border-block: 1px solid var(--soter-border); background: #fff; }
.brand-wall-head { margin: 0 0 18px; text-align: center; color: var(--soter-muted); font-size: .8rem; font-weight: 700; letter-spacing: .3px; }
.brand-wall-head i { color: var(--soter-primary); }
.brand-wall-head span { margin-inline: 6px; opacity: .5; }
.brand-wall-row { display: flex; align-items: stretch; justify-content: center; }
.brand-wall-item { flex: 1 1 0; max-width: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 18px; color: inherit; text-decoration: none; text-align: center; }
.brand-wall-item + .brand-wall-item { border-inline-start: 1px solid var(--soter-border); }
.brand-wall-name { color: #9a929c; font-size: 1.75rem; font-weight: 800; line-height: 1.25; letter-spacing: -.2px; transition: color .2s ease; }
.brand-wall-logo { height: 52px; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s ease, opacity .2s ease; }
.brand-wall-item .img-placeholder { width: 52px; height: 52px; min-height: 0; font-size: 1.2rem; }
.brand-wall-item small { color: var(--soter-muted); font-size: .72rem; font-weight: 600; opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; }
.brand-wall-item:hover .brand-wall-name, .brand-wall-item:focus-visible .brand-wall-name { color: var(--soter-ink); }
.brand-wall-item:hover .brand-wall-logo, .brand-wall-item:focus-visible .brand-wall-logo { filter: none; opacity: 1; }
.brand-wall-item:hover small, .brand-wall-item:focus-visible small { opacity: 1; transform: none; }
@media (max-width: 767.98px) {
  .brand-wall-row { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .brand-wall-item { flex: 0 0 auto; max-width: none; padding-inline: 22px; }
  .brand-wall-name { font-size: 1.4rem; }
  .brand-wall-item small { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .brand-wall-name, .brand-wall-logo, .brand-wall-item small { transition: none; } }

/* The checkout (6 October): a new address opens under the saved ones, the empty points
   line says why there is no box, and the one way to pay is stated, not drawn as a picked
   option - a lone selected card in the brand pink read as a warning. */
.checkout-add { margin-top: 14px; border: 1px dashed var(--soter-border); border-radius: 13px; }
.checkout-add[open] { border-style: solid; }
.checkout-add > summary { display: flex; align-items: center; gap: 8px; padding: 13px 16px; color: var(--soter-primary); font-size: .85rem; font-weight: 700; cursor: pointer; list-style: none; }
.checkout-add > summary::-webkit-details-marker { display: none; }
.checkout-add > form { padding: 0 16px 16px; }
.checkout-points-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 13px; border-radius: 11px; background: var(--soter-surface); color: var(--soter-muted); font-size: .8rem; }
.checkout-points-all { text-decoration: none; color: var(--soter-primary); }
.payment-fixed { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--soter-border); border-radius: 13px; background: #fff; }
.payment-fixed > i { color: #2f6b4f; font-size: 1.5rem; }
.payment-fixed b { display: block; font-size: .85rem; }
.payment-fixed small { color: var(--soter-muted); font-size: .74rem; }
.payment-fixed em { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e9f7ed; color: #2f6b4f; font-size: .72rem; font-style: normal; font-weight: 700; white-space: nowrap; }
/* An apply button waiting for a code: quiet grey, not Bootstrap's disabled blue. */
.coupon-box .btn:disabled { color: var(--soter-muted); border-color: var(--soter-border); background: #fff; opacity: 1; }

/* ---- The account's stat cards (6 October) ------------------------------------------ */
/* A soft circle in one colour per card, so the number is what you read first rather
   than four loud tiles that look like buttons. */
.stat-card .stat-icon { border-radius: 50%; box-shadow: none; }
.stat-icon.is-sky { background: #eaf6fc; color: #1890cc; }
.stat-icon.is-amber { background: #fff4e5; color: #c46a0a; }
.stat-icon.is-rose { background: var(--soter-primary-soft); color: var(--soter-primary); }
.stat-icon.is-violet { background: #f1ebf7; color: #602484; }

/* ---- Home hero motion (6 October) ---------------------------------------------------
   Until a banner is set from the admin, the fixed hero carries a little life of its own:
   a glint that crosses "بسعر الجملة" every few seconds, a shine across the button with
   its arrow leaning the way it points, a slow drift of the photograph, and a soft glow
   breathing behind the words. Quiet loops, all paused for reduced motion. */
.hero-copy h1 strong {
  --glint-base: linear-gradient(#ee4e89, #ee4e89);
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat, var(--glint-base);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-glint 5.5s ease-in-out 1.4s infinite;
}
@keyframes text-glint { 0% { background-position: 130% 0, 0 0; } 32%, 100% { background-position: -30% 0, 0 0; } }

.hero-copy .btn { position: relative; overflow: hidden; }
.hero-copy .btn::after { position: absolute; inset-block: 0; width: 45%; inset-inline-start: -60%; pointer-events: none; content: "";
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .6) 50%, transparent 80%);
  animation: btn-glint 4.5s ease-in-out 2.2s infinite; }
@keyframes btn-glint { 0%, 62% { inset-inline-start: -60%; } 88%, 100% { inset-inline-start: 120%; } }
.hero-copy .btn i { display: inline-block; animation: arrow-lean 2.4s ease-in-out 1.8s infinite; }
@keyframes arrow-lean { 0%, 55%, 100% { transform: none; } 70% { transform: translateX(-5px); } 85% { transform: translateX(-1px); } }
.hero-copy .btn:hover i { animation-duration: .9s; }

.hero-card > img { animation: hero-zoom 1.6s cubic-bezier(.2, .8, .2, 1) backwards, hero-drift 16s ease-in-out 1.6s infinite alternate; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1.2%); } }

.hero-copy::before { position: absolute; z-index: -1; top: 18%; inset-inline-start: 6%; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; content: "";
  background: radial-gradient(circle, rgba(238, 78, 137, .28), transparent 65%); filter: blur(10px);
  animation: glow-breathe 7s ease-in-out infinite alternate; }
@keyframes glow-breathe { from { opacity: .45; transform: translate(0, 0) scale(.9); } to { opacity: 1; transform: translate(-30px, 18px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .hero-copy h1 strong, .hero-copy .btn::after, .hero-copy .btn i, .hero-copy::before { animation: none !important; }
  .hero-card > img { animation: none !important; }
}

/* ---- Search suggestions (6 October) --------------------------------------------------
   The mock's drop-down, under the redesigned round search field: matches with their
   picture, brand and price, then the way on to every result. */
.store-header .search-suggestions { top: calc(100% + 8px); max-height: min(70vh, 520px); overflow-y: auto; border-radius: 18px; text-align: start; }
.store-header .search-suggestions.is-busy > :not(.suggest-empty) { opacity: .55; transition: opacity .15s ease; }
.search-suggestions.is-open { animation: suggest-in .18s ease; }
@keyframes suggest-in { from { opacity: 0; transform: translateY(-6px); } }
.suggestion-item { color: inherit; text-decoration: none; outline: 0; }
.suggestion-item:focus-visible { background: var(--soter-primary-soft); }
.suggest-name { min-width: 0; line-height: 1.5; }
.suggest-name b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--soter-ink); }
.suggest-name small { display: block; margin-top: 2px; color: var(--soter-muted); font-size: .7rem; }
.suggestion-item > span { white-space: nowrap; }
.suggest-all { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 14px; background: #fbf8fa; color: var(--soter-primary); font-size: .8rem; font-weight: 700; text-decoration: none; outline: 0; }
.suggest-all:hover, .suggest-all:focus-visible { background: var(--soter-primary-soft); }
.suggest-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 16px; color: var(--soter-muted); font-size: .8rem; }
.suggest-spin { width: 14px; height: 14px; border: 2px solid var(--soter-border); border-top-color: var(--soter-primary); border-radius: 50%; animation: btn-spin .7s linear infinite; }

/* ---------------------------------------------------------------------------------
   Home sections (ق-40, 12 October): the page is a list the admin lays out. Ported from
   the home concept (mocks/home-concept) under real names. */
.home-section { padding-block: 26px 30px; }
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.home-head .section-title { margin-bottom: 0; }

/* A row of product cards: five across on a wide screen, and on a phone a strip that
   scrolls sideways rather than a column of cards a screen long. */
.home-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.home-rail-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-rail > div { min-width: 0; }
@media (max-width: 1199.98px) { .home-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-rail-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-rail > div:nth-child(n + 5) { display: none; } .home-rail-4 > div:nth-child(n + 4) { display: none; } }
@media (max-width: 767.98px) {
  .home-rail, .home-rail-4 { display: flex; gap: 12px; margin-inline: -16px; padding: 2px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .home-rail::-webkit-scrollbar { display: none; }
  .home-rail > div, .home-rail-4 > div { display: block !important; flex: 0 0 62%; scroll-snap-align: start; }
}

/* A curated category drawn as a picture band over its row. */
.home-band { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 190px; margin-bottom: 18px; padding: 24px 28px; overflow: hidden; border-radius: 22px; background: var(--soter-plum, #1f1c5c); color: #fff; }
.home-band > img, .home-band > .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; object-fit: cover; opacity: .55; }
.home-band > .img-placeholder { background: transparent; color: rgba(255, 255, 255, .25); font-size: 4rem; }
.home-band::after { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(31, 28, 92, .92) 0%, rgba(31, 28, 92, .55) 45%, rgba(31, 28, 92, .1) 100%); content: ""; }
.home-band-copy, .home-band-all { position: relative; z-index: 1; }
.home-band-copy > small { color: #9fe3f4; font-size: .8rem; font-weight: 700; }
/* The theme colours headings; on the band it has to be white. */
.home-band-copy h2 { margin: 2px 0 10px; color: #fff !important; font-size: 2rem; font-weight: 800; }
.home-band-all { flex-shrink: 0; border-radius: 99px; font-size: .82rem; font-weight: 700; }
.home-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.home-chip { padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; color: #fff; font-size: .74rem; text-decoration: none; transition: background .2s ease; }
a.home-chip:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* ... or as a tall tile beside four cards. */
.home-tile { position: relative; display: flex; align-items: flex-end; height: 100%; min-height: 360px; overflow: hidden; border-radius: 22px; background: var(--soter-plum, #1f1c5c); color: #fff; text-decoration: none; }
.home-tile > img, .home-tile > .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; object-fit: cover; transition: transform .5s ease; }
.home-tile > .img-placeholder { background: transparent; color: rgba(255, 255, 255, .25); font-size: 4rem; }
.home-tile:hover > img { transform: scale(1.04); }
.home-tile::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31, 28, 92, .95) 0%, rgba(31, 28, 92, .55) 50%, rgba(31, 28, 92, .05) 100%); content: ""; }
.home-tile-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px; }
.home-tile-copy > small { color: #9fe3f4; font-size: .78rem; font-weight: 700; }
.home-tile-copy > b { font-size: 1.7rem; font-weight: 800; }
.home-tile-copy .home-chips { margin: 6px 0 12px; }
.home-tile-copy > em { font-style: normal; font-size: .82rem; font-weight: 700; }

/* Offers ending soon. */
.home-offers-bg { background: linear-gradient(180deg, var(--soter-surface), #fff); }
.home-offer { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--soter-border); border-radius: 20px; background: #fff; color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.home-offer:hover { transform: translateY(-4px); box-shadow: var(--soter-shadow); color: inherit; }
.home-offer-img { position: relative; display: block; height: 170px; overflow: hidden; background: var(--soter-surface); }
.home-offer-img > img, .home-offer-img > .img-placeholder { width: 100%; height: 100%; min-height: 0; border-radius: 0; object-fit: cover; }
.home-offer-kind { position: absolute; top: 14px; right: 14px; padding: 5px 12px; border-radius: 99px; background: var(--soter-primary); color: #fff; font-size: .74rem; font-weight: 800; }
.home-offer-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 16px 18px; }
.home-offer-body > b { color: var(--soter-ink); font-size: 1rem; }
.home-offer-body > span { color: var(--soter-muted); font-size: .8rem; }
.home-offer-body > .home-offer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--soter-border); color: var(--brand-indigo, #2e2a7f); font-size: .76rem; font-weight: 700; }
.home-offer-left { color: var(--soter-primary); }

/* The magazine: the first piece large, the next two beside it. */
.home-mag { position: relative; display: block; flex: 1; min-height: 182px; overflow: hidden; border-radius: 22px; background: var(--soter-plum, #1f1c5c); color: #fff; text-decoration: none; }
.home-mag-lead { height: 100%; min-height: 380px; }
.home-mag-side { display: flex; flex-direction: column; gap: 16px; }
.home-mag > img, .home-mag > .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; object-fit: cover; transition: transform .5s ease; }
.home-mag:hover > img { transform: scale(1.04); }
.home-mag::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(31, 28, 92, .9), rgba(31, 28, 92, .1) 65%); content: ""; }
.home-mag-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 6px; padding: 24px; }
.home-mag-copy small { color: #9fe3f4; font-size: .74rem; font-weight: 700; }
.home-mag-copy b { font-size: 1.05rem; font-weight: 800; line-height: 1.5; }
.home-mag-lead .home-mag-copy b { font-size: 1.6rem; line-height: 1.45; }
.home-mag-copy em { font-style: normal; font-size: .82rem; font-weight: 700; }

@media (max-width: 991.98px) {
  .home-band { flex-direction: column; align-items: flex-start; }
  .home-tile { min-height: 240px; }
  .home-mag-lead { min-height: 280px; }
}
@media (max-width: 575.98px) { .home-band-copy h2 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .home-offer, .home-tile > img, .home-mag > img { transition: none; }
  .home-offer:hover { transform: none; }
}

/* ---------------------------------------------------------------------------------
   The page-change loader (15 October): the store's mark in a white disc with a ring in
   the logo's colours turning round it. Comes up 250ms into a wait - a quick answer never
   shows it - over a frosted page, and goes the moment the next page is in. */
.nav-loader { position: fixed; inset: 0; z-index: 1070; display: grid; place-content: center; justify-items: center; gap: 18px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.is-navigating .nav-loader { opacity: 1; visibility: visible; transition: opacity .3s ease .25s, visibility 0s linear .25s; }
.nav-loader-disc { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #fff; box-shadow: 0 22px 60px rgba(46, 42, 127, .22), 0 0 0 1px rgba(46, 42, 127, .06); transform: scale(.85); transition: transform .45s cubic-bezier(.2, .9, .3, 1.3) .25s; }
.is-navigating .nav-loader-disc { transform: scale(1); }
.nav-loader-disc > img { width: 64px; height: 64px; object-fit: contain; animation: nav-breathe 1.6s ease-in-out infinite; }
.nav-loader-disc > b { color: var(--soter-primary); font-size: 1.3rem; font-weight: 800; animation: nav-breathe 1.6s ease-in-out infinite; }
/* A ring cut from a conic gradient: transparent at its tail, sky through to the brand pink at its head. */
.nav-loader-ring { position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, #3cc4e4 55%, var(--soter-primary) 92%, transparent 92%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation: nav-spin .9s linear infinite; }
.nav-loader-dots { display: flex; gap: 7px; }
.nav-loader-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--soter-primary); animation: nav-dot 1.1s ease-in-out infinite; }
.nav-loader-dots i:nth-child(2) { background: #8f6fd6; animation-delay: .15s; }
.nav-loader-dots i:nth-child(3) { background: #3cc4e4; animation-delay: .3s; }
@keyframes nav-spin { to { transform: rotate(1turn); } }
@keyframes nav-breathe { 50% { transform: scale(.92); } }
@keyframes nav-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .nav-loader-ring { animation-duration: 2.4s; }
  .nav-loader-disc > img, .nav-loader-disc > b, .nav-loader-dots i { animation: none; }
  .nav-loader-disc { transition: none; transform: none; }
}

/* The wallet on the checkout page (15 October): the buyer's tick, off by default. */
.checkout-wallet { padding: 14px 16px; border: 1px solid var(--soter-border); border-radius: 14px; background: var(--soter-surface); }
.checkout-wallet .form-check { display: flex; align-items: flex-start; gap: 12px; padding: 0; }
.checkout-wallet .form-check-input { flex-shrink: 0; float: none; width: 2.6em; height: 1.4em; margin: 2px 0 0; cursor: pointer; }
.checkout-wallet .form-check-label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.checkout-wallet .form-check-label b { color: var(--soter-ink); font-size: .92rem; }
.checkout-wallet .form-check-label small { color: var(--soter-muted); font-size: .78rem; line-height: 1.6; }
.summary-wallet-hint { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--soter-border); color: var(--soter-muted); font-size: .8rem; line-height: 1.7; }