/* Baylan checkout — Organic Checkout skin (ported from thermoalliance 2026-09-04)

   The shop moved off SimpleCheckout, which is ionCube-encoded and licence-bound,
   onto the one-page `organic_checkout` module already proven on our
   thermoalliance shop. The previous SimpleCheckout skin is kept alongside as
   baylan-simplecheckout.css.bak in case that decision is reversed.

   HOW THIS FILE IS BUILT

   The module's own stylesheet came from thermoalliance's organic theme and is
   written entirely against THAT theme's design tokens — --emerald, --paper,
   --mist-2, --r-xl and so on. Rather than rewrite 66 rules by hand and inherit
   a maintenance burden every time the module is updated upstream, the tokens
   themselves are re-pointed at Baylan's. The upstream rules are then pasted
   below UNMODIFIED, so a future re-port is a copy, not a merge.

   The bridge also flattens every corner: the approved prototype is square
   (border-radius: 0 throughout), and the donor theme is rounded.

   This file only loads on checkout routes, so redefining these names at :root
   cannot leak into the rest of the site.
*/

:root {
  /* colour */
  --paper:       var(--bl-color-bg);
  --bg:          var(--bl-color-surface);
  --ink:         var(--bl-color-text);
  --emerald:     var(--bl-color-text);          /* donor's heading colour */
  --muted:       var(--bl-alpha-text-55);
  --sage:        var(--bl-alpha-text-45);
  --line:        var(--bl-color-divider);
  --line-2:      var(--bl-color-divider);
  --mist-2:      var(--bl-color-surface);
  --action:      var(--bl-color-accent);
  --action-tint: var(--bl-alpha-accent-10);
  --danger:      var(--bl-color-danger-fg);
  --new:         var(--bl-color-accent-700);

  /* type */
  --mono: var(--bl-font-heading);

  /* geometry — the prototype is square, the donor theme is not */
  --r-sm: 0;
  --r-md: 0;
  --r-xl: 0;
}

/* ── upstream rules, verbatim from thermoalliance organic/main.css ───────── */

/* Layout */
.oc-checkout-header { padding: 28px 56px 0; }
.oc-checkout-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 32px; padding: 24px 56px 80px; align-items: start; }
.oc-checkout-aside { position: sticky; top: 80px; }
/* Loading overlay */
body.oc-loading::after { content: ''; position: fixed; inset: 0; background: rgba(255,255,255,.4); z-index: 800; pointer-events: none; }
/* Card blocks */
.oc-block { background: var(--paper); border-radius: var(--r-xl); border: 1px solid var(--line-2); margin-bottom: 16px; overflow: hidden; }
.oc-block:last-child { margin-bottom: 0; }
.oc-block-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.oc-block-num { width: 28px; height: 28px; border-radius: 50%; background: var(--mist-2); color: var(--emerald); font-family: var(--mono); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oc-block-title { font-weight: 600; font-size: 15px; color: var(--emerald); }
.oc-block-body { padding: 22px; }
/* Cart items */
.oc-cart-item { display: grid; grid-template-columns: 64px 1fr auto auto 32px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.oc-cart-item:last-child { border-bottom: none; }
.oc-cart-img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-md); background: var(--bg); display: block; }
.oc-cart-name a { text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.35; }
.oc-cart-name a:hover { color: var(--emerald); }
.oc-cart-opts { font-size: 11px; color: var(--muted); margin-top: 3px; }
.oc-cart-qty { display: flex; align-items: center; gap: 6px; }
.oc-qty-btn { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-2); padding: 0; }
.oc-qty-btn:hover { border-color: var(--sage); color: var(--emerald); }
.oc-qty-input { width: 38px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 0; font-size: 13px; font-family: var(--mono); background: var(--paper); color: var(--ink); }
.oc-cart-price { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--emerald); white-space: nowrap; text-align: right; }
.oc-cart-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.oc-cart-remove:hover { color: var(--danger); background: var(--action-tint); }
.oc-cart-voucher { font-size: 13px; color: var(--muted); }
.oc-coupon-row { display: flex; gap: 8px; margin-top: 14px; }
.oc-coupon-row .input { flex: 1; }
/* Checkout form fields */
.oc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.oc-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.oc-field:last-child { margin-bottom: 0; }
.oc-field.full { grid-column: 1 / -1; }
.oc-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--emerald); margin-bottom: 6px; }
.oc-field-error { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.oc-field-error:not(:empty) { display: block; }
.input.oc-warn { border-color: var(--danger) !important; }
.oc-alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 14px; }
.oc-alert-danger { background: var(--action-tint); border: 1px solid rgba(185,76,58,.3); color: var(--danger); }
/* Address toggle */
.oc-addr-radio { display: flex; gap: 8px; flex-direction: column; margin-bottom: 14px; }
.oc-addr-radio label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); }
.oc-addr-radio label:has(input:checked) { border-color: var(--sage); background: var(--mist-2); }
.oc-addr-radio input[type="radio"] { accent-color: var(--emerald); }
/* Shipping & payment method items */
.oc-method-group { display: flex; flex-direction: column; gap: 8px; }
.oc-method { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; display: flex; align-items: flex-start; gap: 12px; }
.oc-method:has(input:checked), .oc-method:hover { border-color: var(--sage); background: var(--mist-2); }
.oc-method input[type="radio"] { accent-color: var(--emerald); margin-top: 2px; flex-shrink: 0; }
.oc-method-content { flex: 1; min-width: 0; }
.oc-method-title { font-size: 13px; font-weight: 500; }
.oc-method-sub { font-size: 12px; color: var(--sage); font-family: var(--mono); margin-top: 3px; }
.oc-method-section { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
/* Totals sidebar */
.oc-totals-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.oc-totals-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.oc-totals-row:last-child { border-bottom: none; padding-bottom: 0; }
.oc-totals-label { color: var(--muted); }
.oc-totals-val { font-family: var(--mono); font-weight: 600; }
.order-total .oc-totals-label,
.total .oc-totals-label { font-size: 15px; font-weight: 600; color: var(--emerald); }
.order-total .oc-totals-val,
.total .oc-totals-val { font-size: 20px; color: var(--emerald); }
.oc-confirm-agree { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; line-height: 1.5; }
.oc-confirm-agree input { accent-color: var(--emerald); margin-top: 2px; flex-shrink: 0; }
/* ── "З цим купують" на оформленні ───────────────────────────────────────── */
.oc-upsell { margin-top: 8px; }
.oc-upsell .oc-block-num-icon { background: var(--action); color: #fff; }
.oc-upsell-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
.oc-upsell-list { margin: 0; padding: 0; display: grid; gap: 10px; }
.oc-upsell-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.oc-upsell-item:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.oc-upsell-img { flex-shrink: 0; line-height: 0; }
.oc-upsell-img img { width: 44px; height: 44px; object-fit: contain; border-radius: var(--r-sm); background: var(--paper); }
.oc-upsell-info { min-width: 0; }
.oc-upsell-name { font-size: 13px; color: var(--ink); text-decoration: none; display: block; line-height: 1.35; }
.oc-upsell-name:hover { text-decoration: underline; }
.oc-upsell-price { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--emerald); margin-top: 2px; }
.oc-upsell-add { flex-shrink: 0; padding: 7px 12px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--paper); color: var(--action); border: 1px solid var(--action); border-radius: var(--r-sm); cursor: pointer; }
.oc-upsell-add:hover { background: var(--action); color: #fff; }
.oc-upsell-add:disabled { opacity: .5; cursor: wait; }

.oc-confirm-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 10px 0 0; text-align: center; }
.oc-confirm-note a { color: inherit; text-decoration: underline; }
.oc-confirm-btn { display: block; width: 100%; padding: 18px; font-size: 16px; font-weight: 600; background: var(--action); color: white; border: none; border-radius: var(--r-md); cursor: pointer; transition: background .15s, transform .1s; text-align: center; }
.oc-confirm-btn:hover { background: var(--action-2); transform: translateY(-1px); }
.oc-confirm-btn:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
/* Toast notification */
.oc-toast-wrap { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.oc-toast { background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: var(--r-md); font-size: 13px; text-align: center; animation: oc-fadeup .2s ease; max-width: 320px; }
.oc-toast.danger { background: var(--danger); }
.oc-toast.success { background: var(--new); }
@media (max-width: 960px) {
  .oc-checkout-header { padding: 16px 16px 0; }
  .oc-checkout-wrap { grid-template-columns: 1fr; padding: 16px 16px 80px; gap: 24px; }
  .oc-checkout-aside { position: static; }
  .oc-input-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* The donor theme hid the quantity stepper and the line price on phones and
     left editing to the cart page. Since 2026-09-08 the cart page redirects
     here for a filled cart, so this is the only place a phone customer can
     change a quantity: keep both. The aside layout below already stacks them
     on their own row, which is what narrow widths need. */
  .oc-cart-item { grid-template-columns: 48px minmax(0, 1fr) 28px; }
}

/* ── Baylan corrections on top of the upstream rules ─────────────────────── */

/* The donor sits its checkout on a 56px page gutter of its own. Baylan already
   has .bl-container doing that job, so the module keeps only its vertical
   rhythm and inherits horizontal alignment from the shell. */
.oc-checkout-header { padding: 0; }
.oc-checkout-wrap { padding-left: 0; padding-right: 0; }

/* Blueprint frame instead of a card: the same hairline the rest of the
   redesign uses, so the checkout does not read as a different product. */
.oc-block { border: var(--bl-hairline); }
.oc-block-num { border-radius: 0; }

/* The confirm button is the primary action of the whole site; use the site's. */
.oc-confirm-btn {
  font-family: var(--bl-font-heading);
  font-weight: var(--bl-font-heading-weight);
  letter-spacing: 0.01em;
}

@media (max-width: 991px) {
  .oc-checkout-wrap { grid-template-columns: 1fr; }
  .oc-checkout-aside { position: static; }
}

/* The donor's H1 carried an inline serif style from its own theme. Removed in
   the template; sized here through the redesign's own scale so it matches the
   H1 on every other page. */
.bl-root .oc-checkout-header { padding: var(--bl-space-5) 0 var(--bl-space-3); }
.bl-root .oc-checkout-header h1 { margin: 0; }

/* ── Order summary: stop the right column overflowing ────────────────────── */

/* The donor's cart row is a five-column grid (64px 1fr auto auto 32px) built for
   a wider aside. At Baylan's 340px column the quantity stepper and the line
   total had nowhere to go and pushed the price out past the card edge. Two rows
   instead of one: media + name on top, controls and price beneath. */
/* Only three of this row's children can be addressed by class. The image is
   wrapped in an <a> and the title sits inside an unnamed <div>, so a `grid-area`
   written on .oc-cart-img or .oc-cart-name lands on an element that is not a
   grid item and is ignored outright. The first version did exactly that and
   also parked the remove button in the "name" area; auto-placement then found
   the name cell taken, dropped the title wrapper into the 56px image column,
   and the product name rendered one character per line.
   
   Fixed by giving the button a column of its own, which leaves the two
   unaddressable children to auto-place into precisely the cells they need:
   the <a> into "img" and the title wrapper into "name". */
.oc-checkout-aside .oc-cart-item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas:
    "img name     remove"
    "img controls controls";
  row-gap: 8px;
  column-gap: 12px;
  align-items: start;
}
.oc-checkout-aside .oc-cart-img { width: 56px; height: 56px; }
.oc-checkout-aside .oc-cart-qty { grid-area: controls; justify-self: start; align-self: center; }
.oc-checkout-aside .oc-cart-price { grid-area: controls; justify-self: end; align-self: center; white-space: nowrap; }
.oc-checkout-aside .oc-cart-remove { grid-area: remove; align-self: start; }

/* Nothing in the aside may exceed its own box. min-width:0 is what lets a grid
   or flex child actually shrink instead of forcing its parent wider. */
.oc-checkout-aside,
.oc-checkout-aside * { min-width: 0; }

/* Breaking mid-word is a last resort for one thing only: a product name with no
   spaces in it. Applied to the whole aside it also broke the totals labels, and
   «Всього» was rendered as «Всьо / го» next to the amount the customer pays. */
.oc-checkout-aside .oc-cart-name,
.oc-checkout-aside .oc-cart-opts { overflow-wrap: anywhere; }
.oc-totals-label { overflow-wrap: normal; }

/* The voucher row was a two-column flex whose button had no room to sit. */
.oc-cart-voucher { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }

/* «Всього2839.93грн.» — the donor prints label and value as adjacent inline
   nodes with no separator. Spaced apart rather than patched in the template,
   which the module owns and a future re-port would overwrite. */
.oc-totals-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.oc-totals-row .oc-totals-value { white-space: nowrap; }

/* The module hides optional address fields with Bootstrap's .hidden. That rule
   lives in bundle.min.css as a bare `.hidden{display:none}` — specificity (0,1,0)
   — and loses to `.oc-field`'s own display declaration further down the cascade.
   Restated here at (0,2,0) so «Країна» and «Область» actually disappear when the
   module is configured to omit them. */
.oc-field.hidden { display: none !important; }

/* The order-summary badge holds an icon rather than a step number. */
.oc-block-num-icon { display: inline-flex; align-items: center; justify-content: center; }
.oc-block-num-icon svg { width: 15px; height: 15px; display: block; }

/* ── Мобільні поля форми: висота й шрифт ─────────────────────────────────── */

/* Клас .input задавав полям лише рамку й колір, але не padding і не висоту.
   Через це висота складалась із line-height 23px + службовий padding браузера
   1px зверху й знизу + рамка 1.6px = 28px. На телефоні це найдрібніші поля
   серед усіх чотирьох магазинів, а це сторінка, де вводять дані замовлення.

   font-size: 16px — не косметика: iOS Safari автоматично зумить сторінку при
   фокусі в поле з меншим шрифтом, після чого користувач вручну відводить
   масштаб назад. Було 15px, тобто зум спрацьовував на кожному полі.

   min-height замість height: тема може дати полю більший вміст, фіксована
   висота його обріже. 44px — це нижня межа, а не підсумкова висота: фактично
   виходить 22.4 (line-height 1.4 від 16px) + 20 (padding) + 3.2 (дві рамки
   по 1.6px) = 45.6px, що й показав замір. 44px лишається як гарантований мінімум
   на випадок іншого шрифта чи масштабу.

   Обмежено 991px — desktop лишається як був. */
@media (max-width: 991.98px) {
  .oc-field .input,
  .oc-field textarea,
  .oc-coupon-row .input {
    box-sizing: border-box;
    min-height: 44px;
    height: auto;
    font-size: 16px;
    line-height: 1.4;
    padding: 10px 12px;
  }

  /* Поле коментаря НЕ чіпаємо: шаблон ставить йому style="min-height:60px"
     інлайном, а інлайн б'є будь-яке правило без !important. Реальна висота
     66px і resize:vertical для необов'язкового коментаря достатні, тож
     ескалація до !important дала б нуль користі й лишила б у файлі правило,
     яке виглядає робочим, але ним не є. Якщо висоту треба буде збільшити —
     прибирати інлайн у шаблоні, а не перебивати його звідси. */
}