/* ===========================================================================
   OCMOD.NET storefront UI  -  v1.0
   ---------------------------------------------------------------------------
   One shared look for every block an OCMOD.NET module puts on a storefront.
   Path: catalog/view/theme/default/stylesheet/ocmod/ocmod-ui-1.0.css

   Rules of the file:
   - every selector starts with an .ocm- class: no theme class, no bare tag;
   - no !important, no shadows, no gradients, no translucency, no motion
     that moves a block up or down;
   - font family and size are inherited from the theme; colours come from
     the variables on .ocm, so a theme is matched by one override file
     (ocmod-ui-theme.css) instead of editing modules;
   - a released file is never edited: new rules ship as ocmod-ui-1.1.css.
   =========================================================================== */

/* ---------- root: every block of every module carries class="ocm ..." ---- */
.ocm {
  --ocm-accent:      #0077c2;  /* brand action colour: buttons, progress, links */
  --ocm-accent-ink:  #ffffff;  /* text on the accent fill */
  --ocm-accent-dark: #005f9c;  /* hover of the accent, accent text on a tint */
  --ocm-accent-tint: #e8f2fa;  /* solid light fill of the accent */

  --ocm-good:        #0b7a54;  /* money back, saving, in stock, done */
  --ocm-good-tint:   #e7f6ef;
  --ocm-bad:         #c4291d;  /* discount, deadline, error */
  --ocm-bad-tint:    #fdecea;
  --ocm-warn:        #a15c07;  /* almost gone, pending, check this */
  --ocm-warn-tint:   #fdf3e2;

  --ocm-ink:         #1f2937;  /* headings and figures */
  --ocm-text:        #334155;  /* running text */
  --ocm-muted:       #64748b;  /* conditions, dates, captions */
  --ocm-line:        #e3e8f0;  /* every border */
  --ocm-line-strong: #cbd5e1;  /* inputs, the plus between set items */
  --ocm-surface:     #ffffff;  /* block background */
  --ocm-subtle:      #f6f8fa;  /* header row, footer row, hover */

  --ocm-r:           6px;      /* blocks, buttons, fields */
  --ocm-r-sm:        3px;      /* chips, timer cells */
  --ocm-gap:         12px;     /* the one spacing step; 2x and 0.5x of it */
  --ocm-font-num:    inherit;  /* figures; a theme may set a tabular face */

  box-sizing: border-box;
  color: var(--ocm-text);
  line-height: 1.45;
}
.ocm *, .ocm *:before, .ocm *:after { box-sizing: border-box; }
.ocm-num { font-family: var(--ocm-font-num); font-variant-numeric: tabular-nums; }

/* ---------- block: bordered box with an optional head and foot ---------- */
.ocm-block {
  container: ocm-block / inline-size;
  margin: 0 0 calc(var(--ocm-gap) * 2);
  border: 1px solid var(--ocm-line);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
}
.ocm-block__head {
  display: flex;
  align-items: center;
  gap: var(--ocm-gap);
  padding: calc(var(--ocm-gap) * .75) var(--ocm-gap);
  border-bottom: 1px solid var(--ocm-line);
}
.ocm-block__title {
  margin: 0;
  color: var(--ocm-ink);
  font-size: 1.07em;
  font-weight: 700;
  line-height: 1.3;
}
.ocm-block__aside { margin-left: auto; color: var(--ocm-muted); font-size: .93em; }
.ocm-block__body { padding: var(--ocm-gap); }
.ocm-block__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--ocm-gap);
  padding: calc(var(--ocm-gap) * .75) var(--ocm-gap);
  border-top: 1px solid var(--ocm-line);
  background: var(--ocm-subtle);
  border-radius: 0 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px);
}
/* a block heading that stands above the box rather than inside it */
.ocm-heading {
  margin: 0 0 var(--ocm-gap);
  color: var(--ocm-ink);
  font-size: 1.43em;
  font-weight: 700;
  line-height: 1.25;
}

/* ---------- icon: inline SVG, 18px, stroke follows the text colour ------- */
.ocm-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ocm-icon--sm { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- chip: a short fact on a card or next to a price -------------- */
.ocm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r-sm);
  background: var(--ocm-surface);
  color: var(--ocm-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}
.ocm-chip--accent { border-color: var(--ocm-accent);  background: var(--ocm-accent-tint); color: var(--ocm-accent-dark); }
.ocm-chip--good   { border-color: var(--ocm-good);    background: var(--ocm-good-tint);   color: var(--ocm-good); }
.ocm-chip--bad    { border-color: var(--ocm-bad);     background: var(--ocm-bad-tint);    color: var(--ocm-bad); }
.ocm-chip--warn   { border-color: var(--ocm-warn);    background: var(--ocm-warn-tint);   color: var(--ocm-warn); }
/* the one loud chip: a discount figure on a price */
.ocm-chip--solid  { border-color: var(--ocm-bad);     background: var(--ocm-bad);         color: #fff; }
.ocm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }

/* ---------- note: one offer next to the buy button ------------------------
   A plain bordered box: icon and title on one line, terms and a link under
   the title. No coloured strip or column on the left edge - the colour lives
   in the icon and the figure only. Several notes stack as one list with
   shared borders, not as separate coloured boxes. */
.ocm-note {
  margin: 0 0 var(--ocm-gap);
  padding: 10px 12px 11px;
  border: 1px solid var(--ocm-line);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
}
.ocm-note__title .ocm-icon { margin-right: 6px; vertical-align: -3px; color: var(--ocm-accent); }
.ocm-note--good .ocm-note__title .ocm-icon { color: var(--ocm-good); }
.ocm-note--bad  .ocm-note__title .ocm-icon { color: var(--ocm-bad); }
.ocm-note--warn .ocm-note__title .ocm-icon { color: var(--ocm-warn); }
/* terms and list start under the title text, not under the icon */
.ocm-note__title ~ * { margin-left: 24px; }
.ocm-note__title {
  margin: 0;
  color: var(--ocm-ink);
  font-weight: 700;
  line-height: 1.35;
}
.ocm-note__title .ocm-num { color: var(--ocm-good); }
.ocm-note--accent .ocm-note__title .ocm-num { color: var(--ocm-accent-dark); }
.ocm-note__text { margin: 3px 0 0; color: var(--ocm-muted); font-size: .93em; }
.ocm-note__text a,
.ocm-note__link { color: var(--ocm-accent-dark); font-weight: 600; text-decoration: none; }
.ocm-note__text a:hover,
.ocm-note__link:hover { text-decoration: underline; }
/* a list of conditions inside one note: one line each, no bullets */
.ocm-note__list { margin: 6px 0 0; padding: 0; list-style: none; }
.ocm-note__list > li {
  padding: 5px 0;
  border-top: 1px solid var(--ocm-line);
  font-size: .93em;
}
.ocm-note__list > li:first-child { border-top: 0; padding-top: 2px; }
.ocm-note__list b { color: var(--ocm-ink); }
.ocm-note__list .ocm-note__when { display: block; color: var(--ocm-muted); font-size: 12px; }
/* notes next to each other share a border and read as one panel */
.ocm-notes > .ocm-note { margin: 0; border-radius: 0; }
.ocm-notes > .ocm-note + .ocm-note { border-top: 0; }
.ocm-notes > .ocm-note:first-child { border-radius: var(--ocm-r) var(--ocm-r) 0 0; }
.ocm-notes > .ocm-note:last-child  { border-radius: 0 0 var(--ocm-r) var(--ocm-r); }
.ocm-notes > .ocm-note:only-child  { border-radius: var(--ocm-r); }
.ocm-notes { margin: 0 0 var(--ocm-gap); }

/* ---------- goal: how far to a gift, free delivery, the next level ------- */
.ocm-goal { margin: 0 0 var(--ocm-gap); }
.ocm-goal__row {
  display: flex;
  align-items: baseline;
  gap: var(--ocm-gap);
  margin-bottom: 6px;
}
.ocm-goal__text { color: var(--ocm-ink); font-weight: 600; }
.ocm-goal__left { margin-left: auto; color: var(--ocm-muted); font-size: .93em; white-space: nowrap; }
.ocm-goal__bar {
  height: 8px;
  border-radius: 4px;
  background: var(--ocm-line);
  overflow: hidden;
}
.ocm-goal__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ocm-accent);
}
.ocm-goal--done .ocm-goal__fill { background: var(--ocm-good); }
/* the steps under the bar: amount marks with a label each */
.ocm-goal__steps { display: flex; justify-content: space-between; margin-top: 4px; color: var(--ocm-muted); font-size: 12px; }

/* ---------- price: new, old, saving -------------------------------------- */
.ocm-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ocm-price > * { white-space: nowrap; }
.ocm-price__now { color: var(--ocm-ink); font-size: 1.43em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ocm-price__old { color: var(--ocm-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.ocm-price__save { color: var(--ocm-bad); font-weight: 600; font-variant-numeric: tabular-nums; }
.ocm-price--sm .ocm-price__now { font-size: 1em; }

/* ---------- timer: time left, digits in cells ----------------------------
   Two sizes. The block timer shows days, hours, minutes, seconds in cells.
   The card timer is one line laid over the bottom of the product image, so
   a card with a timer is exactly as tall as a card without one. */
.ocm-timer { display: inline-flex; align-items: flex-start; gap: 4px; }
.ocm-timer__cell {
  min-width: 42px;
  padding: 4px 4px 3px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r-sm);
  background: var(--ocm-surface);
  text-align: center;
}
.ocm-timer__num {
  display: block;
  color: var(--ocm-ink);
  font-family: var(--ocm-font-num);
  font-size: 1.29em;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ocm-timer__unit { display: block; color: var(--ocm-muted); font-size: 12px; line-height: 1.3; }
.ocm-timer__label { align-self: center; margin-right: 4px; color: var(--ocm-muted); font-size: .93em; }
.ocm-timer--urgent .ocm-timer__num { color: var(--ocm-bad); }
/* one line: "До кінця акції 4 дн 01:04:12" */
.ocm-timer--line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  color: var(--ocm-muted);
  font-size: .93em;
}
.ocm-timer--line b { color: var(--ocm-bad); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* on a product card: a strip over the bottom edge of the image */
.ocm-overlay { position: relative; }
.ocm-overlay > .ocm-timer--card {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  justify-content: center;
  padding: 3px 8px;
  border: 1px solid var(--ocm-bad);
  border-radius: var(--ocm-r-sm);
  background: var(--ocm-surface);
  flex-wrap: nowrap;
  font-size: 12px;
  white-space: nowrap;
}

/* on a card there is room for the time only: the clock icon says what it is */
.ocm-overlay > .ocm-timer--card .ocm-timer__label { display: none; }
.ocm-overlay > .ocm-timer--card .ocm-icon { color: var(--ocm-bad); }

/* ---------- button ------------------------------------------------------- */
.ocm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--ocm-accent);
  border-radius: var(--ocm-r);
  background: var(--ocm-accent);
  color: var(--ocm-accent-ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ocm-btn:hover,
.ocm-btn:focus { border-color: var(--ocm-accent-dark); background: var(--ocm-accent-dark); color: var(--ocm-accent-ink); text-decoration: none; }
.ocm-btn:focus-visible { outline: 2px solid var(--ocm-accent-dark); outline-offset: 2px; }
.ocm-btn--line { background: var(--ocm-surface); color: var(--ocm-accent-dark); }
.ocm-btn--line:hover,
.ocm-btn--line:focus { background: var(--ocm-accent-tint); color: var(--ocm-accent-dark); }
.ocm-btn--quiet { border-color: var(--ocm-line-strong); background: var(--ocm-surface); color: var(--ocm-text); }
.ocm-btn--quiet:hover,
.ocm-btn--quiet:focus { border-color: var(--ocm-muted); background: var(--ocm-subtle); color: var(--ocm-ink); }
.ocm-btn--sm { min-height: 32px; padding: 5px 12px; font-size: .93em; }
.ocm-btn--wide { display: flex; width: 100%; }
.ocm-btn[disabled],
.ocm-btn--busy { border-color: var(--ocm-line); background: var(--ocm-subtle); color: var(--ocm-muted); cursor: default; }
.ocm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- set: products bought together --------------------------------
   Items in one row with a plus between them, the offer on the right. On a
   narrow screen items become a list and the offer goes under it. */
.ocm-set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  border: 1px solid var(--ocm-line);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
}
.ocm-set__items {
  display: flex;
  align-items: stretch;
  min-width: 0;
  padding: var(--ocm-gap);
}
.ocm-set__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.ocm-set__item img { display: block; max-width: 100%; height: auto; margin-bottom: 6px; }
.ocm-set__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--ocm-ink);
  font-size: .93em;
  font-weight: 600;
  line-height: 1.3;
}
.ocm-set__item .ocm-price { justify-content: center; margin-top: 4px; font-size: .93em; }
.ocm-set__plus {
  display: flex;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 24px;
  height: 24px;
  margin: 0 6px 40px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: 50%;
  color: var(--ocm-muted);
  font-weight: 700;
  line-height: 1;
}
.ocm-set__offer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--ocm-gap);
  border-left: 1px solid var(--ocm-line);
  background: var(--ocm-subtle);
  border-radius: 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px) 0;
}
.ocm-set__title { margin: 0; color: var(--ocm-ink); font-weight: 700; }
.ocm-set__sub { margin: -4px 0 0; color: var(--ocm-muted); font-size: .93em; }
.ocm-set__offer .ocm-btn { margin-top: auto; }
/* The set follows the width of its block, not of the screen: in a product
   column of 480px on a laptop three items in a row squeeze their prices
   into three lines. .ocm-block is a size container; a browser without
   container queries uses the screen width instead. */
@container ocm-block (max-width: 640px) {
  .ocm-set { grid-template-columns: 1fr; }
  .ocm-set__items { flex-direction: column; gap: 0; padding: 0 var(--ocm-gap); }
  .ocm-set__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--ocm-gap);
    padding: 10px 0;
    border-top: 1px solid var(--ocm-line);
    text-align: left;
  }
  .ocm-set__item:first-child { border-top: 0; }
  .ocm-set__item img { width: 56px; margin: 0; }
  .ocm-set__item .ocm-price { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; }
  .ocm-set__plus { display: none; }
  .ocm-set__offer { border-left: 0; border-top: 1px solid var(--ocm-line); border-radius: 0 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px); }
}
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
  .ocm-set { grid-template-columns: 1fr; }
  .ocm-set__items { flex-direction: column; gap: 0; padding: 0 var(--ocm-gap); }
  .ocm-set__item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--ocm-gap);
    padding: 10px 0;
    border-top: 1px solid var(--ocm-line);
    text-align: left;
  }
  .ocm-set__item:first-child { border-top: 0; }
  .ocm-set__item img { width: 56px; margin: 0; }
  .ocm-set__item .ocm-price { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; }
  .ocm-set__plus { display: none; }
  .ocm-set__offer { border-left: 0; border-top: 1px solid var(--ocm-line); border-radius: 0 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px); }
}
}

/* ---------- stars and score ---------------------------------------------- */
.ocm-stars { display: inline-flex; gap: 1px; color: var(--ocm-warn); line-height: 1; vertical-align: middle; }
.ocm-stars .ocm-icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.ocm-stars .ocm-icon--off { fill: var(--ocm-line-strong); }
.ocm-score { display: inline-flex; align-items: center; gap: 8px; }
.ocm-score__value { color: var(--ocm-ink); font-size: 1.29em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ocm-score__count { color: var(--ocm-muted); font-size: .93em; }
/* the corner badge: one per page, bottom right, clear of the theme's
   "to top" button */
.ocm-score--corner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  padding: 6px 12px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
  color: inherit;
  text-decoration: none;
}

/* ---------- review: one card for product reviews, store reviews, Google -- */
.ocm-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ocm-gap);
  margin: 0 0 var(--ocm-gap);
}
.ocm-reviews--list { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--ocm-line); border-radius: var(--ocm-r); }
.ocm-review {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: var(--ocm-gap);
  border: 1px solid var(--ocm-line);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
}
.ocm-reviews--list > .ocm-review { border: 0; border-top: 1px solid var(--ocm-line); border-radius: 0; }
.ocm-reviews--list > .ocm-review:first-child { border-top: 0; }
.ocm-review__top { display: flex; align-items: center; gap: 8px; }
.ocm-review__date { margin-left: auto; color: var(--ocm-muted); font-size: 12px; white-space: nowrap; }
.ocm-review__text { margin: 0; color: var(--ocm-text); overflow-wrap: anywhere; }
.ocm-reviews:not(.ocm-reviews--list) .ocm-review__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.ocm-review__author { display: flex; align-items: center; gap: 8px; margin-top: auto; min-width: 0; }
.ocm-review__avatar {
  display: flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: 50%;
  background: var(--ocm-subtle);
  color: var(--ocm-ink);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.ocm-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ocm-review__name { color: var(--ocm-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocm-review__meta { color: var(--ocm-good); font-size: 12px; font-weight: 600; }
.ocm-review__source { margin-left: auto; color: var(--ocm-muted); }
.ocm-review__product {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ocm-line);
  color: var(--ocm-text);
  font-size: .93em;
  text-decoration: none;
}
.ocm-review__product img { width: 32px; height: 32px; object-fit: contain; }
.ocm-review__media { display: flex; flex-wrap: wrap; gap: 6px; }
.ocm-review__media img { width: 64px; height: 64px; border: 1px solid var(--ocm-line); border-radius: var(--ocm-r-sm); object-fit: cover; }
.ocm-review__reply { margin: 0; padding: 8px 10px; border: 1px solid var(--ocm-line); border-radius: var(--ocm-r-sm); background: var(--ocm-subtle); font-size: .93em; }
.ocm-review__actions { display: flex; align-items: center; gap: 12px; color: var(--ocm-muted); font-size: .93em; }
.ocm-review__vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ocm-review__vote:hover { color: var(--ocm-ink); }
.ocm-review__vote.is-on { color: var(--ocm-accent-dark); }

/* ---------- accordion: FAQ and long conditions, native <details> ---------- */
.ocm-acc { margin: 0 0 var(--ocm-gap); border: 1px solid var(--ocm-line); border-radius: var(--ocm-r); background: var(--ocm-surface); }
.ocm-acc__item + .ocm-acc__item { border-top: 1px solid var(--ocm-line); }
.ocm-acc__q {
  display: flex;
  align-items: center;
  gap: var(--ocm-gap);
  padding: 12px var(--ocm-gap);
  color: var(--ocm-ink);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.ocm-acc__q::-webkit-details-marker { display: none; }
.ocm-acc__q:after {
  content: "+";
  margin-left: auto;
  color: var(--ocm-muted);
  font-size: 1.29em;
  font-weight: 400;
  line-height: 1;
}
.ocm-acc__item[open] > .ocm-acc__q:after { content: "\2212"; }
.ocm-acc__a { padding: 0 var(--ocm-gap) var(--ocm-gap); }
.ocm-acc__a > :last-child { margin-bottom: 0; }

/* ---------- list: files, documents, links -------------------------------- */
.ocm-list { margin: 0 0 var(--ocm-gap); padding: 0; list-style: none; border: 1px solid var(--ocm-line); border-radius: var(--ocm-r); }
.ocm-list__row {
  display: flex;
  align-items: center;
  gap: var(--ocm-gap);
  padding: 10px var(--ocm-gap);
  border-top: 1px solid var(--ocm-line);
}
.ocm-list__row:first-child { border-top: 0; }
.ocm-list__main { min-width: 0; }
.ocm-list__name { color: var(--ocm-ink); font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.ocm-list__sub { display: block; color: var(--ocm-muted); font-size: 12px; }
.ocm-list__end { margin-left: auto; white-space: nowrap; }
.ocm-list__icon { color: var(--ocm-accent); }

/* ---------- form: fields and the one-line form (subscribe, coupon) ------- */
.ocm-field { margin: 0 0 var(--ocm-gap); }
.ocm-field__label { display: block; margin-bottom: 4px; color: var(--ocm-ink); font-weight: 600; }
.ocm-input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
  color: var(--ocm-ink);
  font: inherit;
}
.ocm-input:focus { border-color: var(--ocm-accent); outline: 2px solid var(--ocm-accent-tint); outline-offset: 0; }
.ocm-field__hint { margin-top: 4px; color: var(--ocm-muted); font-size: 12px; }
.ocm-field--error .ocm-input { border-color: var(--ocm-bad); }
.ocm-field--error .ocm-field__hint { color: var(--ocm-bad); }
.ocm-inline { display: flex; gap: 8px; }
.ocm-inline > .ocm-input { flex: 1 1 auto; min-width: 0; }
.ocm-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; cursor: pointer; }
.ocm-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ocm-accent); }

/* ---------- coupon: a code to copy --------------------------------------- */
.ocm-coupon {
  display: flex;
  align-items: center;
  gap: var(--ocm-gap);
  padding: 10px var(--ocm-gap);
  border: 1px dashed var(--ocm-accent);
  border-radius: var(--ocm-r);
  background: var(--ocm-accent-tint);
}
.ocm-coupon__code {
  color: var(--ocm-ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.14em;
  font-weight: 700;
  letter-spacing: .04em;
}
.ocm-coupon .ocm-btn { margin-left: auto; }

/* ---------- bar: one line across the top of the page -------------------- */
.ocm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px var(--ocm-gap);
  padding: 8px 44px 8px 16px;
  position: relative;
  border-bottom: 1px solid var(--ocm-line);
  background: var(--ocm-accent-tint);
  color: var(--ocm-ink);
  font-size: .93em;
  text-align: center;
}
.ocm-bar .ocm-btn { min-height: 30px; padding: 4px 12px; }

/* ---------- close button: one look for bar, dialog and toast ------------- */
.ocm-close {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 0;
  border-radius: var(--ocm-r-sm);
  background: none;
  color: var(--ocm-muted);
  font: inherit;
  font-size: 20px;
  line-height: 30px;
  cursor: pointer;
}
.ocm-close:hover { background: var(--ocm-subtle); color: var(--ocm-ink); }

/* ---------- dialog: age check, terms, cookies -----------------------------
   Native <dialog> opened by OcmUI.dialog(): one dialog at a time, the next
   waits in a queue. The backdrop is a solid colour, not a translucent veil. */
.ocm-dialog {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
  color: var(--ocm-text);
}
.ocm-dialog::backdrop { background: #e9edf2; }
.ocm-dialog--hard::backdrop { background: #f6f8fa; }
.ocm-dialog__head { position: relative; padding: 16px 48px 12px 20px; border-bottom: 1px solid var(--ocm-line); }
.ocm-dialog__title { margin: 0; color: var(--ocm-ink); font-size: 1.14em; font-weight: 700; }
.ocm-dialog__head .ocm-close { top: 14px; margin-top: 0; }
.ocm-dialog__body { padding: 16px 20px; }
.ocm-dialog__body > :last-child { margin-bottom: 0; }
.ocm-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--ocm-line);
  background: var(--ocm-subtle);
  border-radius: 0 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px);
}
.ocm-dialog__big { margin: 0 0 8px; color: var(--ocm-ink); font-size: 2.57em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ocm-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ---------- toast: result of an action, bottom left ---------------------- */
.ocm-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 44px 10px 14px;
  border: 1px solid var(--ocm-line-strong);
  border-radius: var(--ocm-r);
  background: var(--ocm-surface);
  color: var(--ocm-ink);
}
.ocm-toast--good { border-color: var(--ocm-good); }
.ocm-toast--bad  { border-color: var(--ocm-bad); }

/* ---------- empty: nothing here yet -------------------------------------- */
.ocm-empty { padding: calc(var(--ocm-gap) * 2) var(--ocm-gap); color: var(--ocm-muted); text-align: center; }
.ocm-empty .ocm-btn { margin-top: var(--ocm-gap); }

/* ---------- table: order lines, levels, history -------------------------- */
.ocm-table-wrap { overflow-x: auto; margin: 0 0 var(--ocm-gap); border: 1px solid var(--ocm-line); border-radius: var(--ocm-r); }
.ocm-table { width: 100%; border-collapse: collapse; }
.ocm-table th {
  padding: 8px var(--ocm-gap);
  border-bottom: 1px solid var(--ocm-line);
  background: var(--ocm-subtle);
  color: var(--ocm-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.ocm-table td { padding: 8px var(--ocm-gap); border-top: 1px solid var(--ocm-line); vertical-align: middle; }
.ocm-table tr:first-child td { border-top: 0; }
.ocm-table .ocm-num, .ocm-table .is-num { text-align: right; white-space: nowrap; }
.ocm-table tr.is-current td { background: var(--ocm-accent-tint); }

/* ---------- social: sign in with a provider ------------------------------ */
.ocm-social { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ocm-social .ocm-btn { justify-content: flex-start; border-color: var(--ocm-line-strong); background: var(--ocm-surface); color: var(--ocm-ink); }
.ocm-social .ocm-btn:hover { border-color: var(--ocm-muted); background: var(--ocm-subtle); }
.ocm-social .ocm-icon { width: 20px; height: 20px; stroke: none; }

/* ---------- points: two to four short benefits with an icon each ------- */
.ocm-points { margin: 0 0 var(--ocm-gap); padding: 0; list-style: none; }
.ocm-points > li { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.ocm-points .ocm-icon { margin-top: 1px; color: var(--ocm-accent); }

/* ---------- compositions ------------------------------------------------- */
.ocm-block > .ocm-set { border: 0; border-radius: 0 0 calc(var(--ocm-r) - 1px) calc(var(--ocm-r) - 1px); }
.ocm-block__body > :last-child,
.ocm-goal:last-child { margin-bottom: 0; }
.ocm-block__body > .ocm-block__title { margin-bottom: 4px; }
.ocm-block__body > .ocm-block__title + p { margin: 0 0 var(--ocm-gap); color: var(--ocm-muted); }
.ocm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--ocm-gap); }
.ocm-toolbar > .ocm-btn:last-child { margin-left: auto; }
.ocm-toolbar > .ocm-input { width: auto; }
.ocm-note > .ocm-inline { margin-top: 8px; }
.ocm-dialog__center { text-align: center; }
.ocm-dialog__center .ocm-dialog__title { margin-bottom: 6px; }
.ocm-dialog__center .ocm-selects { margin: var(--ocm-gap) 0; }
.ocm-dialog__body > .ocm-note__list { margin: 0; }
.ocm-actions + .ocm-actions,
.ocm-actions + .ocm-chips { margin-top: 10px; }

/* ---------- utilities the components need -------------------------------- */
.ocm-muted { color: var(--ocm-muted); }
.ocm-good  { color: var(--ocm-good); }
.ocm-bad   { color: var(--ocm-bad); }
.ocm-hide  { display: none; }
.ocm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- narrow screens ---------------------------------------------- */
@media (max-width: 479px) {
  .ocm-note__title ~ * { margin-left: 0; }
  .ocm-wide { display: none; }
  .ocm-inline { flex-wrap: wrap; }
  .ocm-inline > .ocm-btn { flex: 1 1 auto; }
  .ocm-coupon { flex-wrap: wrap; }
  .ocm-coupon .ocm-btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ocm-btn { transition: none; }
}