/* static/css/oos_alternatives.css — "Vă recomandăm din stoc" substitute strip on out-of-stock product pages
   (phase 2A, 2026-09-15). Loaded by the product-page loader (product_details.php) with ?v=SC_RECO_STRIP_ASSET_VER —
   bump that constant in includes/i18n_config.inc.php on EVERY edit (static-asset delivery trap).
   Two scopes (2026-09-15 §12): #oos_alternatives = the slot on the product page; #atc_alternatives = the same strip
   inside the "Produsul a fost adăugat în coș" box (loaded by the popup hook in product_details.tpl). The card rules
   are paired 1:1 for both ids; the page band, the page heading, the 5-column rail and the viewport breakpoints are
   page-only — the box gets its own block at the end. No display rule on either id itself: the loaders lift the
   [hidden] attribute, and an author display rule on the id would override that and show an empty slot. */
#oos_alternatives,#atc_alternatives{--oa-ink:#201D33;--oa-soft:#6B6580;--oa-line:#E7E4EF;--oa-accent:#D72680;--oa-ok:#13753E;--oa-band:#f7f6f6}
#oos_alternatives .oosalt,#atc_alternatives .oosalt,#oos_alternatives .oosalt *,#atc_alternatives .oosalt *{box-sizing:border-box}
#oos_alternatives .oosalt{margin:18px 0 0;padding:16px 20px 18px;background:var(--oa-band);border-radius:10px;color:var(--oa-ink)}
#oos_alternatives .oosalt-h{margin:0;font-family:inherit;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:0;text-transform:none;color:var(--oa-ink)}
#oos_alternatives .oosalt-sub,#atc_alternatives .oosalt-sub{margin:2px 0 12px;font-size:13px;line-height:1.4;color:var(--oa-soft)}
#oos_alternatives .oosalt-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}

/* card: stretched link (z1) under the button (z2) and the in-cart band (z3) */
#oos_alternatives .oosalt-card,#atc_alternatives .oosalt-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--oa-line);border-radius:10px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
#oos_alternatives .oosalt-link,#atc_alternatives .oosalt-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}
#oos_alternatives .oosalt-link:focus-visible,#atc_alternatives .oosalt-link:focus-visible{outline:2px solid var(--oa-accent);outline-offset:-2px;border-radius:10px}
#oos_alternatives .oosalt-img,#atc_alternatives .oosalt-img{position:relative;aspect-ratio:3/2;padding:8px 8px 0;background:#fff}
@supports not (aspect-ratio:1){#oos_alternatives .oosalt-img,#atc_alternatives .oosalt-img{height:150px}}
#oos_alternatives .oosalt-img picture,#atc_alternatives .oosalt-img picture,#oos_alternatives .oosalt-img img,#atc_alternatives .oosalt-img img{display:block;width:100%;height:100%}
#oos_alternatives .oosalt-img img,#atc_alternatives .oosalt-img img{object-fit:contain}
#oos_alternatives .oosalt-badge,#atc_alternatives .oosalt-badge{position:absolute;top:8px;left:8px;z-index:2;padding:3px 7px;border-radius:6px;background:var(--oa-accent);color:#fff;font-size:11px;font-weight:800;line-height:1.2;pointer-events:none}

/* in-cart band (site_tiles.js toggles .hidden and writes .__count em); pointer-transparent so the card link still works */
#oos_alternatives .__productInCart,#atc_alternatives .__productInCart{position:absolute;top:auto;left:0;right:0;bottom:0;z-index:3;background:rgba(32,29,51,.92);color:#fff;font-size:12px;font-weight:700;line-height:1.2;pointer-events:none;border-radius:0;padding:0;text-align:left}
#oos_alternatives .__productInCart.hidden,#atc_alternatives .__productInCart.hidden{display:none}
#oos_alternatives .oosalt-pic,#atc_alternatives .oosalt-pic{padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#oos_alternatives .oosalt-pic b,#atc_alternatives .oosalt-pic b{margin-right:4px;font-weight:800}
#oos_alternatives .__productInCart em,#atc_alternatives .__productInCart em{font-style:normal;font-weight:800}

/* body: price + button pushed to the bottom so the row lines up whatever the title length */
#oos_alternatives .oosalt-body,#atc_alternatives .oosalt-body{display:flex;flex:1 1 auto;flex-direction:column;gap:3px;min-width:0;padding:10px 12px 12px}
#oos_alternatives .oosalt-brand,#atc_alternatives .oosalt-brand{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oa-soft)}
#oos_alternatives .oosalt-title,#atc_alternatives .oosalt-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-family:inherit;font-size:13px;line-height:1.35;font-weight:700;text-transform:none;color:var(--oa-ink)}
#oos_alternatives .oosalt-type,#atc_alternatives .oosalt-type{font-size:12px;color:var(--oa-soft)}
#oos_alternatives .oosalt-stock,#atc_alternatives .oosalt-stock{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:12px;font-weight:700;color:var(--oa-ok)}
#oos_alternatives .oosalt-stock i,#atc_alternatives .oosalt-stock i{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--oa-ok)}
#oos_alternatives .oosalt-price,#atc_alternatives .oosalt-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:auto;padding-top:8px}
#oos_alternatives .oosalt-now,#atc_alternatives .oosalt-now{font-size:18.5px;font-weight:800;line-height:1.1;color:var(--oa-ink);white-space:nowrap}
#oos_alternatives .oosalt-now sup,#atc_alternatives .oosalt-now sup{position:relative;top:-.5em;font-size:11px;line-height:0;vertical-align:baseline}
#oos_alternatives .oosalt-now small,#atc_alternatives .oosalt-now small{font-size:12px;font-weight:700}
#oos_alternatives .oosalt-old,#atc_alternatives .oosalt-old{font-size:12px;color:var(--oa-soft);white-space:nowrap}
#oos_alternatives .oosalt-old sup,#atc_alternatives .oosalt-old sup{font-size:9px;line-height:0}

/* add-to-cart: black pill, magenta icon; the JS swaps the children for a spinner and restores data-orig-html */
#oos_alternatives .oosalt-atc,#atc_alternatives .oosalt-atc{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:38px;margin:8px 0 0;padding:0 10px;border:0;border-radius:8px;background:#111;color:#fff;font-size:13px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;opacity:1;bottom:auto;right:auto;transition:background .15s ease}
#oos_alternatives .oosalt-atc:hover,#atc_alternatives .oosalt-atc:hover,#oos_alternatives .oosalt-atc:focus,#atc_alternatives .oosalt-atc:focus{background:#2b2b2b;color:#fff;text-decoration:none}
#oos_alternatives .oosalt-atc:focus-visible,#atc_alternatives .oosalt-atc:focus-visible{outline:2px solid var(--oa-accent);outline-offset:2px}
#oos_alternatives .oosalt-atc svg,#atc_alternatives .oosalt-atc svg{flex:0 0 15px;color:var(--oa-accent)}
#oos_alternatives .oosalt-atc span,#atc_alternatives .oosalt-atc span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* added state — class scv2-atc-added is set by the site JS; label via attr() because the children get wiped */
#oos_alternatives .oosalt-atc.scv2-atc-added,#atc_alternatives .oosalt-atc.scv2-atc-added,#oos_alternatives .oosalt-atc.scv2-atc-added:hover,#atc_alternatives .oosalt-atc.scv2-atc-added:hover{background:var(--oa-ok);color:#fff}
#oos_alternatives .oosalt-atc.scv2-atc-added>*,#atc_alternatives .oosalt-atc.scv2-atc-added>*{display:none}
#oos_alternatives .oosalt-atc.scv2-atc-added::before,#atc_alternatives .oosalt-atc.scv2-atc-added::before{content:"\2713";font-weight:800}
#oos_alternatives .oosalt-atc.scv2-atc-added::after,#atc_alternatives .oosalt-atc.scv2-atc-added::after{content:attr(data-added-label);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* hover lift on pointer devices only; nothing moves under reduced motion */
@media (hover:hover) and (min-width:576px){#oos_alternatives .oosalt-card:hover,#atc_alternatives .oosalt-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(32,29,51,.10)}}
@media (prefers-reduced-motion:reduce){#oos_alternatives .oosalt-card,#atc_alternatives .oosalt-card,#oos_alternatives .oosalt-atc,#atc_alternatives .oosalt-atc{transition:none}#oos_alternatives .oosalt-card:hover,#atc_alternatives .oosalt-card:hover{transform:none}}

/* breakpoints (page slot only): 5 / 4 / 3 equal columns, then a snap rail on phones */
@media (max-width:999px){#oos_alternatives .oosalt-rail{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:759px){
	#oos_alternatives .oosalt{padding:14px 16px 16px}
	#oos_alternatives .oosalt-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
	#oos_alternatives .oosalt-atc{font-size:12px}
}
@media (max-width:575px){
	#oos_alternatives .oosalt-rail{display:flex;gap:10px;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch}
	#oos_alternatives .oosalt-card{flex:0 0 200px;scroll-snap-align:start}
}

/* ---- box copy of the strip: "Vă recomandăm din stoc" inside the added-to-cart box (#addedToCartPopup, the grey
   second .modal-body, slot <div id="atc_alternatives" hidden>). Design pass 2026-09-15 (Fable design subagent, "simpler
   beats richer"). NOT paired on purpose: the page band (.oosalt margin/padding/background/radius — the box body is
   already #f7f6f6), the page heading (.oosalt-h sets font-family:inherit; here the h2 keeps the .bs5 heading font so it
   matches the "Alții au mai cumpărat:" h4 under it), the 5-column rail and the three viewport breakpoints (the Bootstrap
   dialog is 800 px on desktop, 500 px between 576 and 991 px, full width on phones — the viewport says nothing about the
   rail's width). No snap rail: the box scrolls vertically only. rem on purpose: the box's root font drops to 90 % on
   small screens (padding 16 → 14.4 px, h4 24 → 21.6 px) and the heading and paddings must follow the accessory block. */
#atc_alternatives .oosalt{margin:0 0 1rem}
#atc_alternatives .oosalt-h{margin:0;padding:1rem 1rem 0;font-size:1.5rem;line-height:1.2;font-weight:700;letter-spacing:0;text-transform:none;color:var(--oa-ink)}
#atc_alternatives .oosalt-sub{padding:0 1rem}
#atc_alternatives .oosalt-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:991.98px){
	#atc_alternatives .oosalt-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
	#atc_alternatives .oosalt-atc{font-size:12px}
}

/* ---- loading placeholder for the PRODUCT-PAGE strip (Tibor's review 2026-09-15 afternoon + design pass section F).
   product_details.tpl bakes it into the slot at render time when a stored list with >= 2 products exists and the rule says
   the strip shows: the real heading + sub-line (known at render) and N card boxes with the real card's shape — 1 px
   border, a 3:2 image area (grey, inset 8 px like the picture) and 182.6 px reserved for the body (brand, one-line title,
   type, stock, price, button) with the button pill drawn at the bottom: 335.6 px tall at 228 px width, 316.6 px at 200 px
   (measured live 2026-09-15). It reuses .oosalt / .oosalt-rail, so the band, the 5/4/3 columns and the phone rail come
   from the rules above and the footprint cannot drift; the async answer replaces the whole innerHTML, so nothing below
   the strip moves and the sticky tab bar (which measures its position once at page ready) is measured right. */
#oos_alternatives .oosalt-skel-card{position:relative;min-width:0;padding:0 0 182.6px;border:1px solid var(--oa-line);border-radius:10px;background:#fff}
#oos_alternatives .oosalt-skel-card::before{content:"";display:block;box-sizing:border-box;aspect-ratio:3/2;padding:8px 8px 0;background:var(--oa-line);background-clip:content-box}
#oos_alternatives .oosalt-skel-card::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:38px;border-radius:8px;background:var(--oa-line)}
@supports not (aspect-ratio:1){#oos_alternatives .oosalt-skel-card::before{height:150px}}
@keyframes oosalt-skel{50%{opacity:.5}}
#oos_alternatives .oosalt-skel-card::before,#oos_alternatives .oosalt-skel-card::after{animation:oosalt-skel 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#oos_alternatives .oosalt-skel-card::before,#oos_alternatives .oosalt-skel-card::after{animation:none}}
/* the real rail drops to 4 and 3 columns; hide the boxes that would wrap to a second row */
@media (max-width:999px){#oos_alternatives .oosalt-skel-card:nth-child(n+5){display:none}}
@media (max-width:759px){#oos_alternatives .oosalt-skel-card:nth-child(n+4){display:none}}
/* phone: same 200 px boxes as the real rail, but the placeholder never scrolls */
@media (max-width:575px){#oos_alternatives .oosalt-skel .oosalt-rail{overflow:hidden}#oos_alternatives .oosalt-skel-card{flex:0 0 200px}}