/* 20 DE ANI SOUNDCREATION — "Promoția Aniversară" page chrome (templates6/aniversar2026.tpl /
   aniversar2026.php, served at /promo/anniversary/). Tibor's file from his mock-up
   (20-ani-2026.rar, 2026-09-30), shipped as delivered: the Back to School b2s2026.css v4 plus his
   changes, each marked "20 ani". Same .b2s scope and class names; loaded only by this page, so the
   Back to School stylesheet itself is untouched. Bump ?v= in the template on every edit.
   Original header follows.

   BACK TO SCHOOL 2026 page chrome (templates6/b2s2026.tpl / b2s2026.php).
   Extracted 2026-08-27 from Tibor's approved mockup (backtoschoolsnd.tiiny.site)
   and scoped under .b2s so nothing leaks into the rest of the site. Product-card
   styling is NOT here — cards are category_v2/card.tpl + static/css/category_v2.css.
   Deviations from the mockup: no font-family override (inherits the site font),
   the chip bar sits at top:0 (the mockup had its own 49px demo topbar), and the
   guiderail block at the end is new (buyer-guides rail, kids-hub pattern). */

.b2s { --pink:#D72680; --pink-d:#B01560; --cyan:#29ABE2; --ink:#201D33; --ink-2:#3A3550; --soft:#6B6580; --line:#E7E4EF; --bg:#ffffff; --bg-2:#F7F6FA; --wrap:1280px; --r:12px;
       color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
.b2s * { box-sizing:border-box }
.b2s img { max-width:100% }
.b2s a { color:inherit;text-decoration:none }
.b2s h1, .b2s h2, .b2s h3 { margin:0;line-height:1.12;letter-spacing:-.02em }
.b2s p { margin:0 }
.b2s .wrap { max-width:var(--wrap);margin:0 auto;padding:0 20px }
.b2s .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
/* Wide-screen presence pass (2026-08-27, operator review at 1728px): height cap raised
   400→480 so the card roughly matches the tile row's width on big displays, and the band
   behind it carries a faint blue→pink wash echoing the artwork's own diagonal — the flat
   grey shoulders read as unfinished at full screen. Still a contained card (Tibor's
   "never half the viewport" rule holds: 480px ≤ half of any desktop viewport we serve). */
/* 20 ani: the anniversary artwork is dark (navy, amber glow top-left), so the band behind the
   contained card goes dark too instead of the light blue->pink wash. Card stays contained:
   never half the viewport. The whole image is a link, because the artwork has a baked-in
   "Descopera" pill that would otherwise be dead. */
.b2s .hero { background:
	radial-gradient(70% 120% at 8% 0%, rgba(255,176,96,.20) 0%, rgba(255,176,96,0) 55%),
	radial-gradient(80% 140% at 96% 100%, rgba(215,38,128,.16) 0%, rgba(215,38,128,0) 60%),
	#060B1D;
	padding:20px 0 24px }
.b2s .hero__in { max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;justify-content:center }
.b2s .hero a { display:block;line-height:0;border-radius:14px }
.b2s .hero img { display:block;width:auto;max-width:100%;max-height:min(52vh,480px);height:auto; border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.45) }
.b2s .bigcats { padding:34px 0 30px;background:var(--bg) }
.b2s .bigcats__head { display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap }
.b2s .bigcats__head h2 { font-size:clamp(22px,2.6vw,30px);font-weight:800 }
.b2s .bigcats__dates { font-size:13px;font-weight:700;color:var(--soft) }
.b2s .bigcats__dates b { color:var(--pink) }
.b2s .bigcats__grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
.b2s .bigcat { position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line); border-radius:var(--r);background:#fff;overflow:hidden;transition:.16s;min-height:104px }
.b2s .bigcat:hover { border-color:var(--ink);box-shadow:0 12px 30px rgba(32,29,51,.10);transform:translateY(-2px) }
.b2s .bigcat:hover .bigcat__thumb img { transform:scale(1.08) }
.b2s .bigcat:hover .bigcat__arrow { transform:translateX(4px) }
.b2s .bigcat__thumb { flex:0 0 78px;height:78px;border-radius:10px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden }
.b2s .bigcat__thumb img { width:100%;height:100%;object-fit:contain;padding:6px;display:block;transition:transform .18s }
.b2s .bigcat__txt { min-width:0 }
.b2s .bigcat__txt b { display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2 }
.b2s .bigcat__txt span { display:block;margin-top:6px;font-size:12.5px;color:var(--soft) }
.b2s .bigcat__arrow { margin-left:auto;font-size:20px;color:var(--pink);font-weight:800;flex:0 0 auto;transition:transform .18s }
.b2s .bigcat--kids { background:linear-gradient(120deg,#EAF7FF 0%,#FFF0F8 100%);border-color:#CDE9F8 }
.b2s .bigcat--kids .bigcat__arrow { color:#0d7fb5 }
/* 20 ani: the promo tile carries the headline number instead of a product photo */
.b2s .bigcat--promo { background:linear-gradient(120deg,#0A1024 0%,#2A1650 100%);border-color:#2A1650;color:#fff }
.b2s .bigcat--promo .bigcat__txt span { color:#c9c3e0 }
.b2s .bigcat--promo .bigcat__thumb { background:linear-gradient(135deg,#D72680,#7A2CC9);color:#fff }
.b2s .bigcat--promo .bigcat__pct { font-size:19px;font-weight:800;letter-spacing:-.02em }
.b2s .bigcat--promo .bigcat__arrow { color:#FF9BD2 }
.b2s .chips { position:fixed;top:0;left:0;right:0;z-index:940;background:rgba(255,255,255,.96); backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 6px 20px rgba(32,29,51,.07); transform:translateY(-130%);visibility:hidden;transition:transform .24s ease,visibility .24s }
.b2s .chips.is-on { transform:none;visibility:visible }
@media(prefers-reduced-motion:reduce) {
  .b2s .chips { transition:none }
}
.b2s .chips .wrap { display:flex;gap:8px;padding-top:10px;padding-bottom:10px;overflow-x:auto;scrollbar-width:none }
.b2s .chips .wrap::-webkit-scrollbar { display:none }
.b2s .chip { flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line); border-radius:999px;padding:8px 14px;font-weight:700;font-size:12.5px;white-space:nowrap;transition:.15s }
.b2s .chip:hover { border-color:var(--ink) }
.b2s .chip--kids { border-color:var(--cyan);color:#0d7fb5;background:#F0FAFF }
.b2s .trustwrap { background:var(--bg);border-bottom:1px solid var(--line) }
.b2s .trustwrap .wrap { padding-top:14px;padding-bottom:14px }
.b2s .cat { padding:54px 0 10px;border-bottom:1px solid var(--line);scroll-margin-top:100px }
.b2s .cat--alt { background:var(--bg-2) } /* 20 ani: explicit, nth-of-type breaks with mixed sections */
.b2s .cat__head { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px }
.b2s .cat__eyebrow { font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:8px }
.b2s .cat h2, .b2s .cat--page h1 { font-size:clamp(24px,3.2vw,36px);font-weight:800 }
.b2s .cat__pitch { margin-top:10px;color:var(--soft);font-size:14.5px;max-width:62ch;line-height:1.5 }
.b2s .btn { display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px; padding:11px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.15s }
.b2s .btn--pink { background:var(--pink);color:#fff }
.b2s .btn--pink:hover { background:var(--pink-d) }
.b2s .btn--ghost { border-color:var(--line);color:var(--ink);background:#fff;white-space:nowrap }
.b2s .btn--ghost:hover { border-color:var(--ink) }
.b2s .grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
.b2s .subhead { margin:36px 0 14px }
.b2s .subhead h3 { font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft) }
.b2s .more { margin:26px 0 42px }
.b2s .more summary { cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px; border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 20px;font-weight:800;font-size:13px }
.b2s .more summary::-webkit-details-marker { display:none }
.b2s .more summary::after { content:"+";font-weight:800;color:var(--pink) }
.b2s .more[open] summary::after { content:"\2013" }
.b2s .more summary:hover { border-color:var(--ink) }
.b2s .more .grid { margin-top:20px }
.b2s .kids { padding:60px 0;background:linear-gradient(135deg,#EAF7FF 0%,#FFF0F8 60%,#FFF6EC 100%);scroll-margin-top:100px }
.b2s .kids__head { text-align:center;max-width:70ch;margin:0 auto 28px }
.b2s .kids__head h2 { font-size:clamp(24px,3.2vw,36px);font-weight:800 }
.b2s .kids__head p { margin-top:12px;color:var(--ink-2);font-size:14.5px;line-height:1.55 }
.b2s .ages { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 24px }
.b2s .age { background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 6px 22px rgba(32,29,51,.06) }
.b2s .age b { display:block;font-size:20px;font-weight:800;color:var(--pink) }
.b2s .age span { display:block;margin-top:8px;font-size:13px;color:var(--soft);line-height:1.5 }
.b2s .kids .grid { grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));justify-content:center } /* 20 ani: was 6 */
.b2s .kids__cta { text-align:center;margin-top:28px }
.b2s .guide { padding:60px 0;scroll-margin-top:100px }
.b2s .guide h2 { font-size:clamp(22px,2.9vw,32px);font-weight:800;margin-bottom:10px }
.b2s .guide__lead { color:var(--soft);font-size:14.5px;max-width:65ch;line-height:1.55;margin-bottom:26px }
.b2s .steps { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
.b2s .step { border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff }
.b2s .step b { display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:10px }
.b2s .step h3 { font-size:16.5px;font-weight:800;margin-bottom:8px }
.b2s .step p { font-size:13px;color:var(--soft);line-height:1.55 }
.b2s .guiderail__head { margin:34px 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft) }
.b2s .guiderail { display:grid;grid-template-columns:repeat(3,1fr);gap:12px }
.b2s .guiderail__item { display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line); border-radius:var(--r);padding:15px 18px;background:#fff;font-size:13.5px;transition:.15s }
.b2s .guiderail__item:hover { border-color:var(--ink);box-shadow:0 8px 22px rgba(32,29,51,.08) }
.b2s .guiderail__go { color:var(--pink);font-weight:800 }
.b2s .faq { padding:54px 0 70px;background:var(--bg-2);border-top:1px solid var(--line) }
.b2s .faq h2 { font-size:clamp(22px,2.9vw,32px);font-weight:800;margin-bottom:20px }
.b2s .q { border-bottom:1px solid var(--line) }
.b2s .q summary { cursor:pointer;list-style:none;padding:16px 0;font-weight:800;font-size:14.5px;display:flex;justify-content:space-between;gap:16px }
.b2s .q summary::-webkit-details-marker { display:none }
.b2s .q summary::after { content:"+";color:var(--pink);font-weight:800 }
.b2s .q[open] summary::after { content:"\2013" }
.b2s .q p { padding:0 0 18px;color:var(--soft);font-size:13.5px;line-height:1.6;max-width:80ch }
/* "b2sclose", not "close": Bootstrap's global .close (modal x button) sets
   float:right + opacity:.2 and shredded this band under the site CSS. */
.b2s .b2sclose { background:var(--ink);color:#fff;padding:54px 0;text-align:center }
.b2s .b2sclose h2 { font-size:clamp(24px,3.4vw,40px);font-weight:800 }
.b2s .b2sclose p { margin:14px auto 22px;color:#b9b4c9;max-width:60ch;font-size:14.5px;line-height:1.55 }
.b2s .foot { padding:20px 0;font-size:12px;color:var(--soft);text-align:center }
/* Per-section pages (/back-to-school/<key>, 2026-09-14): the section rendered alone, fully
   expanded. Same components as the hub (.cat head, .subhead, .grid, .btn--ghost, .chip);
   only the chip row at the bottom needs a static (non-overlay) variant. */
.b2s .cat--page { padding-bottom:50px;border-bottom:0 }
.b2s .cat--page .grid + .subhead { margin-top:40px }
.b2s .othercats { padding:34px 0 46px;border-top:1px solid var(--line);background:var(--bg-2) }
.b2s .othercats h3 { font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);margin-bottom:14px }
.b2s .chips--static { position:static;transform:none;visibility:visible;background:transparent;backdrop-filter:none;border:0;box-shadow:none }
.b2s .chips--static .wrap { padding:0;flex-wrap:wrap;overflow:visible }
.b2s .chips--static .chip { background:#fff }
/* ---- 20 ani: promo band (Promotia Aniversara) ---------------------------------------- */
.b2s .promoband { padding:46px 0;background:linear-gradient(120deg,#0A1024 0%,#1B1240 60%,#3A1350 100%);color:#fff;scroll-margin-top:100px }
.b2s .promoband .wrap { display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap }
.b2s .promoband__eyebrow { font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#FF9BD2;margin-bottom:10px }
.b2s .promoband h2 { font-size:clamp(26px,3.6vw,44px);font-weight:800;color:#fff }
.b2s .promoband h2 em { font-style:normal;color:#FF9BD2 }
.b2s .promoband p { margin-top:12px;color:#c9c3e0;font-size:14.5px;line-height:1.55;max-width:60ch }
.b2s .promoband .grid { margin-top:26px;flex:1 1 100% }
/* ---- 20 ani: outlet / resigilate strip ------------------------------------------------- */
.b2s .stripes { padding:46px 0;background:var(--bg-2);border-top:1px solid var(--line) }
.b2s .stripes .wrap { display:grid;grid-template-columns:repeat(3,1fr);gap:14px } /* 20 ani: 3rd card = kids link */
.b2s .stripe { border-radius:16px;padding:28px 28px 30px;color:#fff }
.b2s .stripe--outlet { background:#241B3D }
.b2s .stripe--resig { background:#0E7C66 }
.b2s .stripe__eyebrow { font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75 }
.b2s .stripe h3 { margin-top:8px;font-size:clamp(20px,2.4vw,26px);font-weight:800;color:#fff }
.b2s .stripe p { margin-top:10px;font-size:14px;line-height:1.55;opacity:.85 }
.b2s .stripe .btn { margin-top:18px;background:#fff;color:var(--ink) }
.b2s .stripe--outlet .btn { background:#c916e2;color:#fff }
.b2s .stripe--resig .btn { color:#0E7C66 }
.b2s .stripe--kids { background:linear-gradient(135deg,#0d7fb5 0%,#6a3fb8 100%) } /* 20 ani: kids band removed, link card instead */
.b2s .stripe--kids .btn { color:#0d7fb5 }
.b2s .cat__more { text-align:center;margin:8px 0 46px }
@media(max-width:1100px) {
  .b2s .grid { grid-template-columns:repeat(3,1fr) }
  .b2s .kids .grid { grid-template-columns:repeat(3,1fr) }
  .b2s .bigcats__grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  .b2s .stripes .wrap { grid-template-columns:1fr }
  .b2s .steps, .b2s .ages { grid-template-columns:1fr }
  .b2s .guiderail { grid-template-columns:1fr }
}
@media(max-width:680px) {
  .b2s .hero { padding:0 }
  .b2s .hero__in { padding:0 }
  .b2s .hero img { max-height:none;width:100%;border-radius:0;box-shadow:none }
  .b2s .hero a { border-radius:0 }
  .b2s .cat { padding-top:38px }
  .b2s .cat__head { flex-direction:column;align-items:flex-start }
  .b2s .grid, .b2s .kids .grid { grid-template-columns:repeat(2,1fr);gap:10px }
  .b2s .promoband { padding:34px 0 }
  .b2s .bigcats__grid { grid-template-columns:1fr }
  .b2s .bigcat { min-height:88px;padding:14px }
  .b2s .bigcat__thumb { flex-basis:62px;height:62px }
}
/* 20 ani: "Toată oferta" - all bundles + promo products in one grid, area chips + sort + load more */
.b2s .cat--all { background:var(--bg-2) }
.b2s .allbar { display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;margin:0 0 22px }
.b2s .allbar__chips { display:flex;flex-wrap:wrap;gap:8px }
.b2s .allbar .chip { background:#fff;cursor:pointer;font-family:inherit;color:var(--ink) }
.b2s .allbar .chip b { font-weight:700;color:var(--soft);font-size:11.5px }
.b2s .allbar .chip.is-on { background:var(--ink);border-color:var(--ink);color:#fff }
.b2s .allbar .chip.is-on b { color:rgba(255,255,255,.7) }
.b2s .allbar__sort { display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--soft) }
.b2s .allbar__sort select { font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:#fff;cursor:pointer }
.b2s .allgrid > [hidden] { display:none !important }
.b2s .allmore { text-align:center;margin:26px 0 42px }
.b2s .allmore[hidden] { display:none }
.b2s .allmore b { color:var(--soft);font-weight:700 }
@media(max-width:680px) {
  .b2s .allbar__chips { flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;width:calc(100% + 32px) }
  .b2s .allbar__chips::-webkit-scrollbar { display:none }
}
/* ---- site integration (2026-09-30, Tibor's review): full-width bands -----------------------
   The site frame caps page content at 1440px on a white column (.contentWrapper, index.tpl), so on
   wide screens the bands stopped at the column edges with the plum site background beside them.
   Here the page root breaks out of that column to the full window width, as in Tibor's preview;
   the content itself stays centred by .wrap (1280px). 100vw also counts a classic (non-overlay)
   scrollbar, which would leave a few pixels of sideways scroll: this stylesheet loads on this page
   only, so the root clips horizontal overflow here ("hidden" first for browsers without "clip").
   Fixed elements (the chip bar) are unaffected: no transform is added on any ancestor. */
html { overflow-x:hidden;overflow-x:clip }
.b2s.a20 { margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw) }