:root {
  --chocolate: #24130d;
  --deep: #150d0a;
  --brown: #603a26;
  --copper: #b77b48;
  --wheat: #d2ae76;
  --cream: #f4ede1;
  --paper: #fbf7ef;
  --ink: #261812;
  --muted: #6b5b52;
  --soft: #9b8478;
  --line: rgba(44, 26, 18, .16);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Open Sans', Arial, sans-serif;
  --display: 'Oswald', 'Open Sans', Arial, sans-serif;
  --pad: clamp(22px, 5.5vw, 88px);
  --header-h: 92px;
  --gutter: 34px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--copper); transition: color .2s; }
a:hover, a:focus { color: var(--brown); text-decoration: none; outline: none; }

.sr-only-ob {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ================================================== 02. ТИПОГРАФІКА */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
}

h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; margin: 0 0 26px; }
h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 20px; }
h3 { font-size: 22px; margin: 0 0 16px; }
h4 { font-size: 17px; margin: 0 0 12px; }
h5, h6 { font-size: 14px; margin: 0 0 10px; }

.eyebrow, .section-kicker {
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow { color: var(--wheat); }
.section-kicker { color: var(--copper); }

/* ============================================== 03. ФОРМИ Й КНОПКИ */
label { font-size: 12px; font-weight: 600; }
legend { font-size: 17px; padding: 7px 0; border-bottom: 1px solid var(--line); }

.form-control {
  height: 44px;
  border-radius: 0;
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink);
  font-size: 13px;
}

.form-control:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(183, 123, 72, .12); }
textarea.form-control { height: auto; }
select.form-control { padding: 5px 10px; }
.input-group-addon { border-radius: 0; border-color: var(--line); background: var(--cream); }
div.required .control-label:before, .form-group.required > label:after { color: var(--copper); }
div.required .control-label:before { content: '* '; font-weight: 700; }
.form-group.required > label:after { content: ' *'; }

/* кнопки макета */
.button {
  min-height: 54px;
  padding: 0 25px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.button:hover, .button:focus { transform: translateY(-2px); text-decoration: none; }
.button-primary { background: var(--wheat); border-color: var(--wheat); color: var(--deep); }
.button-primary:hover, .button-primary:focus { background: var(--cream); border-color: var(--cream); color: var(--deep); }
.button-ghost { background: transparent; border-color: rgba(255, 255, 255, .42); color: #fff; }
.button-ghost:hover, .button-ghost:focus { background: #fff; color: var(--deep); }
.button-cream { background: var(--cream); border-color: var(--cream); color: var(--deep); }
.button-cream:hover, .button-cream:focus { background: #fff; color: var(--deep); }
.button-dark { background: var(--chocolate); border-color: var(--chocolate); color: var(--cream); }
.button-dark:hover, .button-dark:focus { background: var(--brown); border-color: var(--brown); color: var(--cream); }

/* кнопки bootstrap */
.btn {
  border-radius: 0;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 11px 18px;
  transition: background .2s, border-color .2s, color .2s;
}

.btn:focus, .btn:active { outline: none; box-shadow: none; }
.btn-xs { padding: 5px 9px; font-size: 11px; }
.btn-sm { padding: 8px 13px; font-size: 11px; }
.btn-lg { padding: 15px 24px; font-size: 13px; }
.btn-default { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-default:hover, .btn-default:focus { background: var(--cream); border-color: var(--copper); color: var(--ink); }
.btn-primary { background: var(--chocolate); border-color: var(--chocolate); color: var(--cream); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn-info, .btn-success { background: var(--copper); border-color: var(--copper); color: #fff; }
.btn-info:hover, .btn-success:hover { background: var(--brown); border-color: var(--brown); color: #fff; }
.btn-danger { background: #b3543f; border-color: #b3543f; color: #fff; }
.btn-warning { background: var(--wheat); border-color: var(--wheat); color: var(--deep); }
.btn-link { color: var(--copper); }
.btn.disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.buttons { margin: 26px 0; }

/* перемикач кількості */
.qty-switch { display: flex; align-items: stretch; }
.qty-switch__input {
  width: 62px; height: 38px; padding: 0 6px;
  border: 1px solid var(--line); border-right: 0;
  text-align: center; font-size: 14px;
}
.qty-switch > div { display: flex; flex-direction: column; }
.qty-switch__btn {
  width: 26px; height: 19px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  background: #fff; color: var(--muted);
  font-size: 9px; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.qty-switch__btn:hover { background: var(--chocolate); color: var(--cream); }
.qty-switch__btn.fa-plus { border-bottom: 0; }

/* ============================================ 04. МОДАЛЬНІ ВІКНА */
.ob-modal {
  position: fixed; inset: 0; z-index: 1060;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ob-modal.is-open { opacity: 1; pointer-events: auto; }
.ob-modal__backdrop { position: absolute; inset: 0; background: rgba(13, 8, 6, .79); backdrop-filter: blur(7px); }
.ob-modal__panel {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: clamp(34px, 5vw, 60px);
  background: var(--paper);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .35);
  transform: translateY(18px); transition: transform .3s;
}
.ob-modal.is-open .ob-modal__panel { transform: translateY(0); }
.ob-modal__panel h2 { margin: 0 0 20px; font-size: clamp(32px, 5vw, 50px); line-height: 1; }
.ob-modal__panel p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.ob-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
}
.ob-modal__close:hover { background: var(--chocolate); border-color: var(--chocolate); color: var(--cream); }
.ob-modal__body[hidden] { display: none; }

.modal-form { margin-top: 24px; display: grid; gap: 16px; }
.modal-form label {
  display: grid; gap: 8px;
  color: var(--ink); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.modal-form input, .modal-form textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0; background: #fff;
  color: var(--ink); font-size: 13px; letter-spacing: 0; text-transform: none;
  outline: none; resize: vertical;
}
.modal-form input:focus, .modal-form textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 2px rgba(183, 123, 72, .12); }
.modal-form .button { width: 100%; margin-top: 4px; }
.form-note { margin: 0; color: var(--copper); font-size: 11px; }
.ob-modal__foot { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; line-height: 1.7; }

/* ==================================================== 05. ШАПКА */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1030;
  color: #fff;
  transition: background .35s, box-shadow .35s;
}
.site-header.is-solid, .site-header.is-scrolled { background: rgba(21, 13, 10, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.header-inner { min-height: var(--header-h); padding: 0 var(--pad); display: flex; align-items: center; gap: clamp(25px, 4vw, 70px); }

.brand { display: inline-flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.brand-logo { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .15)); }
.brand-text { font-family: var(--display); font-size: 24px; color: #fff; text-transform: uppercase; letter-spacing: .04em; }

.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); margin-left: auto; }
.main-nav > a {
  position: relative; padding: 9px 0;
  color: #fff; font-size: 12px; letter-spacing: .055em; text-transform: uppercase;
  opacity: .75; transition: opacity .2s;
}
.main-nav > a::after {
  content: ''; position: absolute; inset: auto 0 2px; height: 1px;
  background: var(--wheat); transform: scaleX(0); transform-origin: right; transition: transform .25s;
}
.main-nav > a:hover, .main-nav > a:focus, .main-nav > a.is-active { opacity: 1; color: #fff; }
.main-nav > a:hover::after, .main-nav > a:focus::after, .main-nav > a.is-active::after { transform: scaleX(1); transform-origin: left; }
.main-nav .nav-login {
  min-height: 42px; padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .36);
  display: inline-flex; align-items: center; gap: 18px;
  color: #fff; opacity: 1; cursor: pointer;
}
.main-nav .nav-login::after { display: none; }
.main-nav .nav-login b { color: var(--wheat); font-size: 14px; font-weight: 400; }
.main-nav .nav-login:hover { background: var(--wheat); border-color: var(--wheat); color: var(--deep); }
.main-nav .nav-login:hover b { color: var(--deep); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.header-phone { display: flex; flex-direction: column; color: #fff; font-size: 12px; line-height: 1.4; white-space: nowrap; }
.header-phone:hover, .header-phone:focus { color: var(--wheat); }
.header-phone span { color: var(--wheat); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }

.icon-button, .cart-button {
  position: relative; width: 43px; height: 43px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .38); background: transparent;
  color: #fff; display: grid; place-items: center;
  transition: background .2s, border-color .2s, color .2s;
}
.icon-button:hover, .icon-button:focus, .cart-button:hover, .cart-button:focus { background: var(--wheat); border-color: var(--wheat); color: var(--deep); }
.icon-button .fa { font-size: 15px; }

.cart-icon { position: relative; width: 18px; height: 13px; margin-top: 4px; border: 1.5px solid currentColor; border-top: 0; transform: skew(-7deg); }
.cart-icon::before { content: ''; position: absolute; top: -6px; left: 5px; width: 7px; height: 5px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; transform: skew(7deg); }
.cart-icon::after { content: ''; position: absolute; left: 2px; bottom: -5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 11px 0 0 currentColor; transform: skew(7deg); }
.cart-count {
  position: absolute; top: -7px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--wheat); color: var(--deep);
  font-family: var(--sans); font-size: 9px; font-weight: 700;
}

.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px 7px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.menu-toggle span:not(.sr-only-ob) { display: block; height: 1px; margin: 5px 0; background: currentColor; transition: transform .25s, opacity .25s; }

.header-search {
  position: absolute; inset: 0 0 auto; z-index: 2;
  padding: 24px var(--pad);
  background: rgba(21, 13, 10, .98);
  transform: translateY(-105%); transition: transform .3s ease;
}
.header-search.is-open { transform: translateY(0); }
.header-search #search { max-width: 900px; margin: 0 auto; }
.header-search .form-control { height: 54px; border: 0; background: var(--paper); font-size: 14px; }
.header-search .btn { height: 54px; padding: 0 26px; border: 0; background: var(--wheat); color: var(--deep); }
.header-search .search-close { position: absolute; top: 8px; right: 12px; border: 0; background: transparent; color: rgba(255, 255, 255, .6); font-size: 26px; line-height: 1; cursor: pointer; }

/* ============================================ 06. ГОЛОВНА СТОРІНКА */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: grid; align-items: center; color: #fff; background: var(--deep); }
.hero-media, .hero-shade, .hero-grain { position: absolute; inset: 0; }
.hero-media {
  background-image: url('../../../../../image/catalog/oldbaker/hero.jpg');
  background-size: cover; background-position: 54% center;
  transform: scale(1.025); animation: ob-settle 1.5s ease-out both;
}
.hero-shade { background: linear-gradient(90deg, rgba(12, 7, 5, .9) 0%, rgba(12, 7, 5, .67) 42%, rgba(12, 7, 5, .17) 75%), linear-gradient(0deg, rgba(12, 7, 5, .5), transparent 40%); }
.hero-grain { opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 2; width: min(760px, 85vw); padding: 142px 0 132px var(--pad); }
.hero h1 { margin: 0; color: #fff; font-size: clamp(50px, 7.9vw, 130px); line-height: .96; letter-spacing: -.02em; }
.hero h1 em, .about h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.045em; }
.hero h1 em { color: var(--wheat); font-size: .86em; }
.hero-lead { max-width: 600px; margin: 30px 0 0; color: rgba(255, 255, 255, .74); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-meta { position: absolute; z-index: 2; left: var(--pad); bottom: 32px; display: flex; align-items: center; gap: 15px; color: rgba(255, 255, 255, .48); font-size: 9px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--wheat); }
.scroll-cue { position: absolute; z-index: 2; right: var(--pad); bottom: 30px; display: flex; align-items: center; gap: 15px; color: rgba(255, 255, 255, .6); font-size: 9px; letter-spacing: .17em; text-transform: uppercase; }
.scroll-cue:hover, .scroll-cue:focus { color: #fff; }
.scroll-cue b { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; font-weight: 400; }

.ob-section { padding: clamp(90px, 10vw, 160px) var(--pad); }
.about { display: grid; grid-template-columns: minmax(320px, .88fr) minmax(400px, 1.12fr); gap: clamp(65px, 8vw, 145px); align-items: start; overflow: hidden; }
.about-visual { position: relative; padding: 24px 0 0 24px; }
.about-visual::before { content: ''; position: absolute; inset: 0 24px 24px 0; border: 1px solid var(--copper); }
.about-visual figure { position: relative; z-index: 1; margin: 0; aspect-ratio: .79; overflow: hidden; background: var(--brown); }
.about-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; transform: scale(1.1); filter: sepia(.08) saturate(.88); }
.quality-seal {
  position: absolute; z-index: 2; right: -45px; bottom: 40px;
  width: 148px; height: 148px; border-radius: 50%;
  background: var(--chocolate); color: var(--cream);
  display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 8px;
  box-shadow: 0 20px 45px rgba(35, 17, 11, .2);
}
.quality-seal span { font-family: var(--display); font-size: 48px; color: var(--wheat); }
.quality-seal small { font-size: 8px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.about h2 { max-width: 750px; font-size: clamp(38px, 5.4vw, 82px); line-height: .96; }
.about h2 em { color: var(--copper); }
.about-text { max-width: 750px; margin-top: 37px; display: grid; gap: 16px; color: var(--muted); font-size: 13px; line-height: 1.82; }
.about-text p { margin: 0; }
.about-text strong { color: var(--ink); font-weight: 700; }
.more-copy {  gap: 16px; }
.more-copy:not([hidden]){
	display: grid;
}
.text-link {
  margin-top: 25px; padding: 0 0 7px;
  border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  color: var(--ink); display: inline-flex; gap: 28px;
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
}
.text-link span { font-size: 16px; line-height: .65; transition: transform .2s; }
.text-link[aria-expanded="true"] span { transform: rotate(45deg); }
.values { margin-top: 58px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.values div { display: flex; align-items: flex-start; gap: 15px; }
.values strong { color: var(--copper); font-family: var(--display); font-size: 12px; font-weight: 500; }
.values span { font-family: var(--display); font-size: 16px; line-height: 1.25; text-transform: uppercase; }

.manifesto { overflow: hidden; padding: 27px 0; background: var(--wheat); color: var(--chocolate); }
.manifesto-track { width: max-content; display: flex; align-items: center; gap: 45px; font-family: var(--display); font-size: clamp(25px, 3.2vw, 48px); text-transform: uppercase; animation: ob-marquee 24s linear infinite; }
.manifesto-track i { font-family: var(--serif); font-style: normal; color: var(--cream); }

@keyframes ob-settle { from { transform: scale(1.085); } to { transform: scale(1.025); } }
@keyframes ob-marquee { to { transform: translateX(-50%); } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==================================================== 07. ФУТЕР */
.site-footer { background: var(--deep); color: var(--cream); }
.footer-top { padding: clamp(70px, 8vw, 120px) var(--pad); display: grid; grid-template-columns: 1.25fr .62fr .85fr 1.25fr; gap: clamp(35px, 5vw, 80px); }
.brand-footer .brand-logo { width: 154px; height: 154px; }
.footer-brand > p { max-width: 325px; margin: 26px 0 30px; color: rgba(255, 255, 255, .55); font-size: 12px; line-height: 1.75; }
.footer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-actions .button { min-width: 160px; }
.button-footer-login { background: transparent; border-color: rgba(255, 255, 255, .34); color: var(--cream); }
.button-footer-login:hover, .button-footer-login:focus { background: var(--wheat); border-color: var(--wheat); color: var(--deep); }
.footer-label { margin: 0 0 28px; color: var(--wheat); font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-column > a { color: rgba(255, 255, 255, .67); font-size: 11px; line-height: 1.45; }
.footer-column > a:hover, .footer-column > a:focus { color: var(--wheat); }
.footer-contacts { gap: 21px; }
.footer-contacts address { margin: 0; color: rgba(255, 255, 255, .75); font-size: 11px; line-height: 1.7; font-style: normal; }
.footer-contacts small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .34); font-size: 9px; letter-spacing: .06em; }
.footer-email { color: var(--wheat); border-bottom: 1px solid rgba(210, 174, 118, .45); }
.footer-bottom {
  min-height: 84px; margin: 0 var(--pad);
  border-top: 1px solid rgba(255, 255, 255, .11);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px;
  color: rgba(255, 255, 255, .33); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
.footer-bottom > div { display: flex; gap: 25px; }
.footer-bottom a { color: rgba(255, 255, 255, .33); }
.footer-bottom a:hover, .footer-bottom a:focus { color: var(--cream); }
.to-top { justify-self: end; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .23); border-radius: 50%; display: grid; place-items: center; font-size: 14px; }

/* ============ 08. КАРКАС ВНУТРІШНІХ СТОРІНОК (єдині відступи для всіх) */
body.has-solid-header { padding-top: var(--header-h); }

#content { min-height: 40vh; padding-bottom: clamp(60px, 8vw, 110px); }
#content > h1:first-child, #content > h2:first-child { margin-top: 0; }

/* хлібні крихти — перший елемент кожної сторінки, задають верхній відступ */
.breadcrumb {
  margin: var(--gutter) 0 26px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li:before { content: '·'; padding: 0 9px; color: var(--copper); }
.breadcrumb > li:after { content: none; }
.breadcrumb a { color: var(--soft); }
.breadcrumb a:hover { color: var(--copper); }
.breadcrumb > li:last-child a { color: var(--ink); }

.pagination { margin: 10px 0 0; }
.pagination > li > a, .pagination > li > span { border-radius: 0; border-color: var(--line); color: var(--ink); }
.pagination > li:first-child > a, .pagination > li:last-child > a { border-radius: 0; }
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > a { background: var(--chocolate); border-color: var(--chocolate); color: var(--cream); }

.alert { border-radius: 0; border-width: 1px; background: #fff; color: var(--ink); }
.alert-success { border-color: #9cb87f; }
.alert-danger { border-color: #c76a5a; }
.alert-warning { border-color: var(--copper); }
.panel, .well { border-radius: 0; box-shadow: none; }
.well { background: #fff; border-color: var(--line); }
.panel { border-color: var(--line); }
.panel-heading { border-radius: 0; border-color: var(--line); background: var(--cream); font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs > li > a { margin-right: 26px; padding: 14px 4px; border: 0; border-radius: 0; background: transparent; color: var(--soft); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.nav-tabs > li > a:hover { border: 0; background: transparent; color: var(--ink); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--copper); background: transparent; color: var(--ink); }
.tab-content { padding: 26px 0 0; color: #5c4d45; font-size: 14px; line-height: 1.8; }
#content .table-responsive { border: 0; }
.table { background: #fff; border-color: var(--line); }
.table > thead > tr > th, .table > thead > tr > td { border-bottom: 1px solid var(--line); background: var(--cream); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.table > tbody > tr > td { border-color: var(--line); vertical-align: middle; font-size: 13px; }
.list-group-item { border-radius: 0; border-color: var(--line); font-size: 13px; }
.list-group-item.active, .list-group-item.active:hover { background: var(--chocolate); border-color: var(--chocolate); }

/* ============================ 09. КАРТКА ТОВАРУ В СПИСКАХ */
.row-products { display: flex; flex-wrap: wrap; }
.row-products > .product-layout { display: flex; }
.row-products > .product-layout > .product-thumb { width: 100%; }

.product-thumb {
  display: flex; flex-direction: column;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color .25s, box-shadow .25s;
}
.product-thumb:hover { border-color: var(--copper); box-shadow: 0 14px 34px rgba(38, 24, 18, .08); }
.product-thumb > div:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.product-thumb .image { overflow: hidden; }
.product-thumb .image img { width: 100%; transition: transform .5s; }
.product-thumb:hover .image img { transform: scale(1.04); }
.product-thumb .caption { flex: 1 1 auto; padding: 16px 16px 10px; }
.product-thumb h4 { margin: 0 0 10px; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.product-thumb h4 a { color: var(--ink); }
.product-thumb h4 a:hover { color: var(--copper); }
.product-thumb .p_sku, .product-thumb .p_desc { margin: 0 0 8px; color: var(--soft); font-size: 11px; line-height: 1.55; }
.product-thumb .price { margin: 0 0 12px; font-family: var(--display); font-size: 22px; color: var(--ink); }
.product-thumb .price-old { margin-right: 6px; color: #b0a196; font-size: 14px; text-decoration: line-through; }
.product-thumb .price-tax { display: none; }
.product-thumb .rating { margin-bottom: 8px; }
.rating .fa-stack { width: 14px; height: 14px; line-height: 14px; font-size: 12px; }
.rating .fa-star-o { color: #cfc3b8; }
.rating .fa-star { color: var(--wheat); }

.product-thumb__content { margin-top: 12px; }
.product-thumb__content .form-group { margin: 0; }
.product-thumb__content .control-label { display: block; margin-bottom: 6px; color: var(--soft); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.product-thumb .button-group { display: flex; border-top: 1px solid var(--line); }
.product-thumb .button-group button, .product-thumb .button-group .btn {
  flex: 1 1 auto;
  padding: 14px 8px;
  border: 0; background: transparent;
  color: var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.product-thumb .button-group button + button, .product-thumb .button-group .btn + button { border-left: 1px solid var(--line); }
.product-thumb .button-group button:hover, .product-thumb .button-group .btn:hover { background: var(--chocolate); color: var(--cream); }

/* --- вигляд списком: рядок «фото · назва · ціна · кількість · кнопка» --- */
.product-list .product-thumb {
  flex-direction: row; align-items: center; gap: 18px;
  padding: 10px 16px; margin-bottom: 10px;
}
.product-list .product-thumb .image { flex: 0 0 84px; max-width: 84px; }
.product-list .product-thumb > div:last-child { flex-direction: row; align-items: center; gap: 18px; }
.product-list .product-thumb .caption { display: flex; align-items: center; gap: 18px; padding: 0; }
.product-list .product-thumb h4 { flex: 1 1 auto; margin: 0; }
.product-list .product-thumb .p_sku,
.product-list .product-thumb .p_desc,
.product-list .product-thumb .rating { display: none; }
.product-list .product-thumb .price { flex: 0 0 auto; min-width: 120px; margin: 0; text-align: right; font-size: 19px; }
.product-list .product-thumb__content { margin: 0; padding: 0; }
.product-list .product-thumb__content .control-label { display: none; }
.product-list .product-thumb .button-group { flex: 0 0 auto; border-top: 0; }
.product-list .product-thumb .button-group button, .product-list .product-thumb .button-group .btn {
  min-width: 132px; padding: 12px 18px;
  border: 1px solid var(--chocolate); background: var(--chocolate); color: var(--cream);
}
.product-list .product-thumb .button-group button:hover { background: var(--copper); border-color: var(--copper); }

/* ================================ 10. СТОРІНКА «КАТАЛОГ ПРОДУКЦІЇ» */
.ob-cat-card { margin-bottom: 26px; border: 1px solid var(--line); background: #fff; transition: border-color .25s, box-shadow .25s; }
.ob-cat-card:hover { border-color: var(--copper); box-shadow: 0 14px 34px rgba(38, 24, 18, .08); }
.ob-cat-image { display: block; overflow: hidden; }
.ob-cat-image img { width: 100%; transition: transform .5s; }
.ob-cat-card:hover .ob-cat-image img { transform: scale(1.04); }
.ob-cat-body { padding: 18px 18px 20px; }
.ob-cat-body h4 { margin: 0 0 6px; font-size: 18px; }
.ob-cat-body h4 a { color: var(--ink); }
.ob-cat-body h4 a:hover { color: var(--copper); }
.ob-cat-total { margin: 0 0 10px; color: var(--soft); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ob-cat-children { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ob-cat-children a { color: var(--muted); font-size: 12px; }
.ob-cat-children a:hover { color: var(--copper); }
.ob-subhead { margin: 44px 0 22px; padding-top: 30px; border-top: 1px solid var(--line); }

/* ============================================ 11. СТОРІНКА ТОВАРУ */
#product-product .thumbnails { margin: 0 0 28px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#product-product h1{margin-top:16px;}
#product-product .thumbnails > li:first-child { grid-column: 1 / -1; }
#product-product .thumbnails .thumbnail { display: block; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 0; background: #fff; overflow: hidden; }
#product-product .thumbnails .thumbnail:hover { border-color: var(--copper); }
#product-product .thumbnails img { width: 100%; }
#product-product .list-unstyled { color: var(--soft); font-size: 12px; }
#product-product #product { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
#product-product .price { margin: 0 0 20px; padding: 0; list-style: none; }
#product-product .price h2 { margin: 0; }
#product-product .price-current { font-family: var(--display); font-size: 40px; color: var(--ink); }
#product-product .price-old { color: #b0a196; font-size: 15px; }
#product .qty-switch { margin-bottom: 14px; }
#product .qty-switch__input { width: 84px; height: 46px; font-size: 16px; }
#product .qty-switch__btn { width: 32px; height: 23px; }
#button-cart { width: 100%; padding: 17px 22px; font-size: 12px; }

/* ============================================ 12. КОШИК І ОФОРМЛЕННЯ */
#checkout-cart .table img { border: 1px solid var(--line); }
#checkout-cart .buttons { margin-top: 26px; }
.ob-min-order { border-color: var(--copper); font-size: 13px; }
#d_quickcheckout .panel, .d_quickcheckout .panel { border-color: var(--line); border-radius: 0; }
#d_quickcheckout .btn-primary, .d_quickcheckout .btn-primary { background: var(--chocolate); border-color: var(--chocolate); }
.ob-guest-block { max-width: 620px; margin: 30px auto; padding: 34px; border: 1px solid var(--copper); background: #fff; text-align: center; }
.ob-guest-block h2 { font-size: 28px; }
.ob-guest-block p { color: var(--muted); font-size: 13px; }

/* ================== 13. КОНТАКТИ, СТАТИЧНІ СТОРІНКИ, КАБІНЕТ */
.ob-article { max-width: 860px; }
.ob-article-body { color: #5c4d45; font-size: 15px; line-height: 1.85; }
.ob-article-body p { margin: 0 0 18px; }
.ob-article-body h2, .ob-article-body h3, .ob-article-body h4 { margin: 38px 0 14px; }
.ob-article-body ul, .ob-article-body ol { margin: 0 0 18px; padding-left: 22px; }
.ob-article-body li { margin-bottom: 8px; }
.ob-article-body table { width: 100%; margin: 0 0 22px; border-collapse: collapse; }
.ob-article-body td, .ob-article-body th { padding: 12px 14px; border: 1px solid var(--line); }
.ob-article-body th { background: var(--cream); font-weight: 700; }
.ob-article-body blockquote { margin: 24px 0; padding: 18px 24px; border: 0; border-left: 2px solid var(--copper); background: #fff; font-size: 15px; }

.ob-contact { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(34px, 5vw, 78px); align-items: start; margin-top: 30px; }
.ob-contact-block { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.ob-contact-block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ob-contact-label { margin: 0 0 20px; color: var(--copper); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ob-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.ob-contact-grid address { margin: 0; color: #5c4d45; font-size: 13px; line-height: 1.75; font-style: normal; }
.ob-contact-grid strong { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 15px; text-transform: uppercase; color: var(--ink); }
.ob-map-link { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(183, 123, 72, .4); }
.ob-phones { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.ob-phones li { display: flex; flex-direction: column; }
.ob-phones a, .ob-phones strong { font-family: var(--display); font-size: 21px; color: var(--ink); }
.ob-phones a:hover { color: var(--copper); }
.ob-phones small { margin-top: 3px; color: var(--soft); font-size: 11px; }
.ob-contact-email { font-family: var(--display); font-size: 24px; color: var(--copper); border-bottom: 1px solid rgba(183, 123, 72, .4); }
.ob-contact-form { padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); background: #fff; }
.ob-contact-form h2 { margin: 0 0 24px; }
.ob-contact-form .form-group { margin-bottom: 18px; }
.ob-contact-form label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.ob-auth { max-width: 460px; margin: 0 auto; padding: clamp(34px, 5vw, 54px); border: 1px solid var(--line); background: #fff; }
.ob-auth h2 { margin: 0 0 8px; font-size: 34px; }
.ob-auth-lead { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.ob-auth .form-group { margin-bottom: 16px; }
.ob-auth-links { margin: 16px 0 0; font-size: 12px; }
.ob-auth-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==================================================== 14. АДАПТИВ */
@media (min-width: 992px) {
  #content .product-grid { width: 25%; }
}

@media (max-width: 1180px) {
  .header-phone { display: none; }
  .main-nav { gap: 20px; }
  .footer-top { grid-template-columns: 1.2fr .7fr 1fr; }
  .footer-column:last-child { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, 1fr); }
  .footer-column:last-child .footer-label { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  :root { --header-h: 76px; --gutter: 26px; }
  .header-inner { min-height: 76px; justify-content: space-between; }
  .brand-logo { width: 62px; height: 62px; }
  .header-actions { margin-left: auto; gap: 9px; }
  .menu-toggle { position: relative; z-index: 2; display: block; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .main-nav {
    position: fixed; inset: 0; z-index: 1; margin: 0;
    padding: 110px var(--pad) 50px;
    background: var(--deep);
    flex-direction: column; align-items: stretch; gap: 7px;
    transform: translateX(100%); transition: transform .35s ease; overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav > a { font-family: var(--display); font-size: clamp(26px, 6vw, 42px); }
  .main-nav .nav-login { width: 100%; min-height: 62px; margin-top: 23px; padding: 0 21px; justify-content: space-between; border-color: var(--wheat); font-family: var(--sans); font-size: 12px; }
  .hero-content { width: min(760px, 92vw); padding-top: 118px; }
  .hero-meta { display: none; }
  .about { grid-template-columns: 1fr; gap: 70px; }
  .about-visual { width: min(560px, 90%); }
  .quality-seal { right: -38px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-column:last-child { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: 1fr auto; padding: 25px 0; }
  .footer-bottom > div { grid-row: 2; grid-column: 1 / -1; flex-wrap: wrap; }
  #product-product .thumbnails { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .ob-contact { grid-template-columns: 1fr; }
  .ob-contact-grid { grid-template-columns: 1fr; }
  .product-list .product-thumb { flex-wrap: wrap; }
  .product-list .product-thumb > div:last-child { flex-wrap: wrap; }
  .product-list .product-thumb .caption { flex: 1 1 100%; flex-wrap: wrap; }
  .product-list .product-thumb h4 { flex: 1 1 100%; }
  .product-list .product-thumb .price { min-width: 0; text-align: left; }
  .product-list .product-thumb .button-group { flex: 1 1 auto; }
  .product-list .product-thumb .button-group button { width: 100%; }
}

@media (max-width: 560px) {
  .brand-logo { width: 54px; height: 54px; }
  .icon-button, .cart-button { width: 39px; height: 39px; }
  .hero { min-height: 700px; }
  .hero-media { background-image: url('../../../../../image/catalog/oldbaker/hero-mobile.jpg'); background-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(12, 7, 5, .9), rgba(12, 7, 5, .35)), linear-gradient(0deg, rgba(12, 7, 5, .72), transparent 50%); }
  .hero-content { width: 100%; padding-right: var(--pad); }
  .hero h1 { font-size: clamp(44px, 15vw, 68px); }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .scroll-cue { left: var(--pad); right: auto; }
  .about-visual { width: calc(100% - 24px); padding: 14px 0 0 14px; }
  .quality-seal { width: 116px; height: 116px; right: -25px; bottom: 24px; }
  .quality-seal span { font-size: 38px; }
  .quality-seal small { font-size: 7px; }
  .about h2 { font-size: 38px; }
  .values { gap: 10px; }
  .values div { flex-direction: column; gap: 7px; }
  .values span { font-size: 13px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-column:last-child { display: flex; }
  .brand-footer .brand-logo { width: 120px; height: 120px; }
  .footer-actions { flex-direction: column; }
  .footer-actions .button { width: 100%; }
  .footer-bottom > div { flex-direction: column; gap: 10px; }
  .ob-modal__panel { padding: 52px 22px 28px; }
  #product-product .thumbnails { grid-template-columns: repeat(2, 1fr); }
}

#d_quickcheckout .btn-group-lg > .btn, #d_quickcheckout .btn-lg{
	border-radius:0px !important;
}
#d_quickcheckout .btn-group-lg > .btn:hover, #d_quickcheckout .btn-lg:hover,
#d_quickcheckout .btn-group-lg > .btn:focus, #d_quickcheckout .btn-lg:focus,
#d_quickcheckout .btn-primary:hover, 
#d_quickcheckout .btn-primary:active, 
#d_quickcheckout .btn-primary.active, 
#d_quickcheckout .btn-primary.disabled, 
#d_quickcheckout .btn-primary[disabled]{
	background: var(--copper) !important;
    border-color: var(--copper) !important;
}