/* ==========================================================================
   Design B — retail look (centered logo, rounded cards, warm accent)
   Loaded after style.css on all design-B pages (site root); design A lives in /design-a/.
   ========================================================================== */
:root {
  --font: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --accent: #e0612b;
  --accent-dark: #c44f1c;
  --soft: #f7f3ee;
  --soft-2: #efe8df;
  --line: #ece6de;
  --text: #1d1b19;
  --muted: #7a736b;
  --r: 12px;
}
body { font-size: 15px; }

/* buttons: pills */
.btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-size: 14px; font-weight: 700; }
.btn--sm { font-size: 13px; }
.btn:hover { background: var(--accent-dark); }
.btn:not(.btn--line):not(.btn--white) { background: var(--accent); }
.btn:not(.btn--line):not(.btn--white):hover { background: var(--accent-dark); }
.btn--line { box-shadow: inset 0 0 0 1.5px var(--text); background: transparent; }
.btn--line:hover { background: var(--text); color: #fff; }
.link { text-transform: none; letter-spacing: 0; font-size: 14px; border: 0; color: var(--accent); }
.link:hover { color: var(--accent-dark); }

/* top bar in accent colour */
.topbar { background: var(--accent); color: rgba(255, 255, 255, .85); }
.topbar b, .topbar__lang { color: #fff; }
.topbar nav a:hover, .topbar nav button:hover { color: #fff; }

/* header: logo in the centre */
.theme-b .header__main { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; height: 84px; }
.header__left { display: flex; align-items: center; gap: 8px; }
.theme-b .search { max-width: 320px; }
.theme-b .search input { border-radius: 999px; background: var(--soft); border-color: transparent; padding-left: 20px; }
.theme-b .search input:focus { background: #fff; border-color: var(--text); }
.theme-b .search__drop { border-radius: 12px; overflow: hidden; min-width: 380px; }
.theme-b .brand { flex-direction: column; gap: 6px; text-align: center; }
.theme-b .brand img { width: 26px; }
.theme-b .brand__word { font-size: 18px; letter-spacing: .32em; font-weight: 800; }
.theme-b .brand__word small { letter-spacing: .3em; }
.theme-b .header__actions { justify-self: end; gap: 14px; }
.theme-b .header__cta { font-size: 13px; }
.theme-b .cart-btn { border-radius: 999px; }
.catnav { border-top: 0; }
.catnav .container { justify-content: center; }
.catnav a, .catnav button { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }
.catnav a::after { height: 3px; border-radius: 3px; }

/* hero */
.slider { border-radius: 20px; }
.slide h2 { text-transform: none; font-weight: 800; letter-spacing: -.02em; }
.slide__tag { border-radius: 999px; padding: 6px 14px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.slide__circle { background: rgba(255, 255, 255, .7); }
.slider__dot { border-radius: 3px; }
.benefits { border: 0; gap: 12px; }
.benefit { background: var(--soft); border-radius: var(--r); }
.benefit + .benefit { border-left: 0; }
.benefit:nth-child(n+3) { border-top: 0; }

/* section headings centred, like retail stores */
.sec-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.sec-head h2 { text-transform: none; font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); }
.sec-head__right { gap: 12px; }
.arrows button { border-radius: 50%; }
.page-head h1, .about h2, .about__h, .pro h2, .pro__h, .faq h2, .promo h3, .subscribe h3, .set-row__head h2, .rit__sum h3, .info-card h3, .nf h1, .co h1, .co-block > h2, .drawer__head h3, .popup__aside h3, .popup__form h4, .form-success h4, .cart-empty h4, .cat b, .fgroup h4 { text-transform: none; }
.page-head h1 { font-weight: 800; }

/* skin type: round images */
.needs { gap: 20px; }
.need { background: none; padding: 0; align-items: center; text-align: center; }
.need::before { display: none; }
.need:hover { background: none; }
.need__img { width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--c); }
.need__img img { max-height: 100px; }
.need b { font-size: 14px; }

/* cards: rounded with border */
.card { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 10px 14px; transition: box-shadow .3s, border-color .3s; }
.card:hover { box-shadow: 0 14px 34px rgba(60, 40, 20, .1); border-color: transparent; }
.card__media { border-radius: 8px; background: #fff; }
.section--soft .card__media { background: #fff; }
.card__body { padding: 10px 4px 0; }
.section--soft .card__body { padding: 10px 4px 0; }
.section--soft .card { padding-bottom: 14px; }
.badge { border-radius: 999px; padding: 4px 9px; text-transform: none; letter-spacing: 0; font-size: 11px; }
.badge--hit { background: var(--accent); }
.badge--new { background: #2f8a6d; }
.card__series { width: 10px; height: 10px; border-radius: 50%; }
.card__name { font-size: 15px; font-weight: 700; }
.card__price { font-size: 18px; font-weight: 800; }
.card__buy { border-radius: 999px; background: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; padding: 0 18px; }
.card__buy:hover { background: var(--accent-dark); }

/* promos & tiles */
.promo { border-radius: 20px; }
.promo--warm { background: #fbe9dd; }
.promo__text small { text-transform: none; letter-spacing: 0; font-size: 13px; }
.cat { border-radius: var(--r); }
.cat__img { width: 130px; border-radius: 50%; background: var(--soft); }
.fact { border-radius: var(--r); }
.fact b { color: var(--accent); }

/* catalogue */
.fopt input, .check input { border-radius: 5px; }
.sel select { border-radius: 999px; }
.afilter { border-radius: 999px; }
.fcats a.is-current { background: #fbe9dd; color: var(--accent-dark); }

/* sets */
.rit, .set { border-radius: 16px; overflow: hidden; }
.set::before { display: none; }
.rit__step { border-radius: 12px; }
.rit__step .n { text-transform: none; letter-spacing: 0; font-size: 12px; }

/* product page */
.pp__img { border-radius: 20px; background: var(--soft); }
.tag { border-radius: 999px; background: #fbe9dd; color: var(--accent-dark); }
.size { border-radius: 999px; }
.size.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-dark); }
.qty { border-radius: 999px; overflow: hidden; }
.pmodal__perks { border-radius: 12px; }
.tabs-box { border-radius: 16px; overflow: hidden; }
.tabs-nav button { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* professionals: rounded dark block inside the page */
.pro { background: #fff; color: var(--text); }
.pro .pro__grid { background: #241f1b; color: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 56px); }
.pro__list { border-radius: 12px; overflow: hidden; }
.pro__media { border-radius: 16px; }
.pro__tag { border-radius: 999px; text-transform: none; letter-spacing: 0; }
.steps-row > div { border-radius: var(--r); }
.steps-row b { border-radius: 50%; }
.info-card { border-radius: 16px; }

/* forms */
.field input, .field select, .field textarea, .subscribe input { border-radius: 10px; }
.subscribe { background: #fbe9dd; }
.subscribe input { border-radius: 999px 0 0 999px; }
.subscribe .btn { border-radius: 0 999px 999px 0; }
.roles label { border-radius: 999px; }
.opt { border-radius: 12px; }
.co-block > h2 span { border-radius: 50%; background: var(--accent); }
.popup__box, .pmodal__box { border-radius: 20px; }
.drawer__foot .btn--accent { background: var(--accent); }
.toast { border-radius: 14px; border-left: 0; }
.slider__arrow, .close-btn { border-radius: 50%; }

/* footer: light */
.footer { background: var(--soft); color: var(--muted); }
.footer .brand { color: var(--text); }
.footer .brand img { filter: none; }
.footer h5 { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 15px; }
.footer ul a:hover, .footer ul button:hover, .footer__legal a:hover { color: var(--accent); }
.footer__top { border-bottom-color: var(--line); }
.pay { border-color: #ddd5cb; color: var(--text); background: #fff; border-radius: 6px; }
.made-by { color: var(--muted); }
.made-by svg { color: var(--accent); }
.made-by:hover svg { color: var(--text); }

@media (max-width: 980px) {
  .theme-b .header__main { display: flex; height: 64px; gap: 2px; }
  .header__left { display: contents; }
  .theme-b .brand { flex-direction: row; margin-right: auto; }
  .theme-b .brand__word { font-size: 14px; letter-spacing: .18em; }
  .theme-b .search { max-width: none; }
  .theme-b .search__drop { min-width: 0; }
  .theme-b .header__actions { gap: 0; }
  .pro .pro__grid { border-radius: 16px; }
}
@media (max-width: 720px) {
  .needs { gap: 14px; }
  .need { flex: 0 0 120px; }
  .need__img { width: 108px; height: 108px; }
  .need__img img { max-height: 84px; }
  .card { padding: 6px 6px 10px; }
  .card__name { font-size: 13px; }
  .card__price { font-size: 16px; }
  .benefits { gap: 8px; }
}
.theme-b .footer .brand, .theme-b .mnav .brand { flex-direction: row; text-align: left; gap: 12px; }
.langs summary { border-radius: 999px; background: var(--soft); border-color: transparent; padding-left: 10px; }
.langs summary:hover, .langs[open] summary { background: #fff; border-color: var(--text); }
.langs__list { border-radius: 14px; }
.langs__list a, .mlangs a { border-radius: 10px; }
.flag { border-radius: 3px; }
@media (max-width: 420px) {
  .theme-b .brand { gap: 8px; }
  .theme-b .brand img { width: 22px; }
  .theme-b .brand__word { font-size: 12.5px; letter-spacing: .12em; }
  .langs summary { padding: 0 7px; gap: 5px; }
}

/* accounts, delivery helpers, test payment */
.theme-b .acc-btn { border-radius: 999px; }
.auth__card, .auth__aside, .acc__side, .acc-status, .acc-tile, .acc__empty, .order, .drop, .drop__file, .locker, .locker__item, .locker__chosen, .pp__lock, .co-login, .test-note, .auth__err, .acc-banner, .dev-note, .pay-msg { border-radius: 14px; }
.locker__search input { border-radius: 10px; }
.auth__aside .pro__tag { border-radius: 999px; text-transform: none; letter-spacing: 0; }
.ac-drop { border-radius: 12px; }
.acc__nav a { border-radius: 10px; }