/* ctheme2: OpenCart-only markup (stock module output, alerts) - fc2oc/theme/css. No design layout here. */

/* the checkout's address dialog: the design's own address form (add-or-edit-address) in a <dialog> */
dialog.ctheme2-address { padding: 0; border: 0; background: transparent; width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; }
dialog.ctheme2-address::backdrop { background: rgb(0 0 0 / 45%); }
dialog.ctheme2-address .account__main { margin: 0; }

/* a field's error message from OpenCart (forms posted by ctheme2.js) */
.ctheme2-error { margin: 4px 0 0; color: var(--c-required); font-size: 0.875rem; }
.field__control[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--c-required); }

/* profile: the company fields (account custom fields, make_account_maps.py) only while "Pirkite kaip juridinis
   asmuo" is ticked; hidden they are still posted, so a save keeps them */
.account__main:has(input[name="custom_field[account][4][]"]:not(:checked)) .ctheme2-company { display: none; }

/* live search suggestions (ctheme2.js): the mini-cart's panel + product lines, under the search field */
.search { position: relative; }
.ctheme2-suggest { top: calc(100% + 12px); left: 0; right: auto; width: max(100%, min(440px, calc(100vw - 2 * var(--gutter)))); }
.ctheme2-suggest[hidden] { display: none; }
.ctheme2-suggest .minicart__price s { color: var(--c-text-muted); font-size: var(--fs-sm); }
@media (max-width: 767.98px) {
  .ctheme2-suggest { left: auto; right: 0; width: min(440px, calc(100vw - 2 * var(--gutter))); }
}

/* product options (make the client's OpenCart options the design's .variant): a value without a photo is a
   text chip in the swatch's frame; a +price shows small after the name */
.swatch:has(.ctheme2-swatch-text) { width: auto; min-width: 64px; height: auto; min-height: 40px; padding: 8px 16px; }
.ctheme2-swatch-text { display: flex; flex-direction: column; align-items: center; font-size: var(--fs-md); line-height: 20px; white-space: nowrap; }
.ctheme2-swatch-text small { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 16px; }
.ctheme2-swatch-text small:empty { display: none; }
.variant__options { flex-wrap: wrap; }

/* cookie consent (ctheme2.js; the design draws no banner): a panel card bottom-left, the design's buttons */
.ctheme2-consent { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 60; display: flex; flex-direction: column;
  gap: 16px; width: min(480px, calc(100vw - 2 * var(--gutter))); padding: 24px; box-shadow: var(--shadow-lg); font-size: var(--fs-md); line-height: 20px; }
.ctheme2-consent a { color: var(--c-green); text-decoration: underline; }
.ctheme2-consent__actions { display: flex; gap: 8px; justify-content: flex-end; }
/* contact: the embedded map in the photo's box; the "show map" button over the photo until consent */
.office__map .ctheme2-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.office__map .ctheme2-map-ask { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.office__map:has(.ctheme2-map) .tag { left: auto; right: 24px; }   /* (Google's address card sits top-left) */

/* OpenCart's pages FgmCon2 does not draw (make_stock_maps.py): OpenCart's ready-made pagination looks like the
   design's .pager; a field's hint under it */
.ctheme2-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ctheme2-pagination .pagination a, .ctheme2-pagination .pagination span { display: grid; place-items: center; min-width: 32px; height: 32px;
  padding-inline: 8px; border-radius: var(--radius-xs); background: var(--c-surface); box-shadow: var(--shadow-raised); font-size: var(--fs-md); line-height: 20px; }
.ctheme2-pagination .pagination a:hover { color: var(--c-green); }
.ctheme2-pagination .pagination .active span { background: var(--c-green); color: #fff; box-shadow: none; }
.ctheme2-hint { margin: 4px 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 16px; }

/* sitemap / brands: the blog's category links (their .blog-cats look) in a chapter, in columns */
.qa__body .link-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; padding-left: 0; list-style: none; }
.qa__body .link-list a { justify-content: flex-start; align-items: center; color: var(--c-text); }
.qa__body .link-list a:hover { color: var(--c-green); }
.qa__body .link-list .icon { margin-top: 0; color: var(--c-green); }
.qa summary a:hover { color: var(--c-green); }

/* a field row left with one field (a design form re-purposed with fewer fields): that field takes the row */
.field-row > .field:only-child { grid-column: 1 / -1; }

/* Inbank's own calculator (opened by "Skaičiuoti" where the shop has its widget): a panel dialog */
dialog.ctheme2-inbank { width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 48px 24px 24px; border: 0; overflow: auto; }
dialog.ctheme2-inbank::backdrop { background: rgb(0 0 0 / 45%); }
.ctheme2-inbank__close { position: absolute; top: 8px; right: 8px; }

/* while the search's history / suggestions are open the page dims and the header stays bright above it - v1's
   .fse-interaction-overlay (rgb 27 27 27 / 22%; user 2026-10-05, c11.png); a click on it closes the panel
   (ctheme2.js: a click outside the form). Below the topbar (21) and the header (20). */
/* (on <main>, not body::after: that is the design's loading ring - this rule's inset 0 pulled the ring to the
   top-left corner when a search was sent with the suggestions open, user 2026-10-06) */
body:has(.site-header .ctheme2-suggest:not([hidden])) main::after {
  content: ""; position: fixed; inset: 0; z-index: 19; background: rgb(27 27 27 / 22%); pointer-events: none;
}
/* affiliate tracking's link generator (ctheme2.js): the matching products under the field */
.ctheme2-ac { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 6px; list-style: none; border-radius: var(--radius-sm); background: var(--c-surface); box-shadow: var(--shadow-raised); }
.ctheme2-ac[hidden] { display: none; }
.ctheme2-ac button { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ctheme2-ac button:hover { background: var(--c-surface-muted); }
/* blog posts = the client's own HTML (staging, real posts 2026-10-06: a 542px table made the page 582px wide at
   390): pictures and embeds fit the column; a wide table scrolls sideways inside its own box, not the page */
.article__lead :is(img, video) { max-width: 100%; height: auto; }
.article__lead iframe { max-width: 100%; }
.article__lead table { display: block; max-width: 100%; overflow-x: auto; }
/* our live-search suggestions on the phone bottom bar (FgmCon2's bar opens ITS popups upwards; this panel is ours):
   above the whole bar, 12px over its logo / icon row */
@media (min-height: 500px) and (not (min-width: 768px)) {
  .site-header.is-stuck .ctheme2-suggest { top: auto; bottom: calc(100% + var(--stuck-row-gap) + var(--stuck-ctl) + 12px);
    max-height: calc(100dvh - var(--header-stuck-h) - 48px); overflow-y: auto; }
}
/* phones (user 2026-10-06: "arrow up at the bottom sticky header nearby the logo, not at the bottom right corner"):
   ctheme2.js moves .to-top into the bar right after the logo - one of the bar's controls while the bar shows */
@media (min-height: 500px) and (not (min-width: 768px)) {
  .mainbar > .to-top { position: relative; inset: auto; order: 0; width: var(--stuck-ctl); height: var(--stuck-ctl); margin-right: auto;
    border-radius: var(--radius-xs); opacity: 1; visibility: visible; pointer-events: auto; }
  .mainbar > .to-top .icon { width: 18px; height: 18px; }
  /* (position relative: with static, the design's .to-top::before touch area (inset -10px) measured from the bar and
     covered the WHOLE bar - taps on the search field, its x and the magnifier went to the arrow) */
  .mainbar > .to-top::before { inset: -6px -6px -2px; }
  .site-header:not(.is-stuck) .mainbar > .to-top { display: none; }
}
/* phones (Telegram 2026-10-06 03:16): the hidden bottom bar (scrolling down) left the count badges' tops showing at
   the screen's edge - they sit ~8px above the icons; the bar slides 16px further out */
@media (min-height: 500px) and (not (min-width: 768px)) {
  .site-header.is-stuck.is-scrolling-down .mainbar { translate: 0 calc(100% + 16px); }
}
/* the loading ring: the design spins it with the `rotate` property under the name `spin`; some phone browsers / older
   Android web views do not animate it (user: only the white tile showed) - transform-based, a name of its own */
@keyframes ctheme2-spin { to { transform: rotate(360deg); } }
body::after { animation-name: ctheme2-spin; }
/* phones: the search field's own clear x ~30% bigger (user 2026-10-06: hard to tap in the bottom bar) */
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* narrower than 320 (user 2026-10-06: "should, but not so strictly gated" - e.g. the Galaxy Fold's 280px outer
   screen): the design's floor (body min-width 320) lowered to 280 - below that the page scrolls sideways */
body { min-width: 280px; }
/* blog post cards: the whole card opens the post (user 2026-10-06, "Paskutiniai įrašai bloge") - the title's link
   stretched over the card (one link for screen readers), "Skaityti daugiau" keeps its own on top */
.post-card { position: relative; cursor: pointer; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__more { position: relative; z-index: 2; }
.post-card:hover .post-card__title a { color: var(--c-green); }
/* the blog's latest comments with the commenter's face (user 2026-10-06; ctheme_product avatars(): women's / men's
   by the first name) - a 32px circle left of the name / date and the text */
.comment-list li:has(> .ctheme2-avatar) { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
.comment-list .ctheme2-avatar { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; }
/* phones: the bottom bar ~30% bigger (user 2026-10-06) - its controls 28 -> 36px from 390px wide, 32px from 360
   (below 360 a 36px first row - logo, arrow, four icons - does not fit); the logo, icons, search button, count
   badges and the arrow scale with it */
@media (min-height: 500px) and (not (min-width: 768px)) and (min-width: 360px) {
  :root { --stuck-ctl: 32px; }
  .site-header.is-stuck .site-logo { padding: 4px 9px; }
  .site-header.is-stuck .site-logo img { width: 82px; }
  .site-header.is-stuck .catalog-btn { padding: 0 9px; }
  .site-header.is-stuck .search__submit { width: 27px; height: 27px; }
  .site-header.is-stuck :is(.search__submit, .icon-btn) .icon, .mainbar > .to-top .icon { width: 20px; height: 20px; }
  .site-header.is-stuck .icon-btn__count { min-width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
}
@media (min-height: 500px) and (not (min-width: 768px)) and (min-width: 390px) {
  :root { --stuck-ctl: 36px; }
  .site-header.is-stuck .site-logo { padding: 5px 10px; }
  .site-header.is-stuck .site-logo img { width: 94px; }
  .site-header.is-stuck .catalog-btn { padding: 0 10px; }
  .site-header.is-stuck .search { padding-inline: 10px; }
  .site-header.is-stuck .search__input { font-size: 17px; }
  .site-header.is-stuck .search__submit { width: 30px; height: 30px; }
  .site-header.is-stuck :is(.search__submit, .icon-btn) .icon, .mainbar > .to-top .icon { width: 23px; height: 23px; }
  .site-header.is-stuck .icon-btn__count { min-width: 20px; height: 20px; padding-inline: 4px; font-size: 11px; line-height: 20px; }
}
/* phones, the normal top header (user 2026-10-06): the two pill rows as far apart as the pills side by side (4px -
   the forced row break collected the gap twice: 8px), the links row 30% closer to the pills (8 -> 6px) and to the
   screen's top (16 -> 11px; 24 -> 17px from 480) */
@media (not (min-width: 768px)) {
  /* (2px above + below every pill, the block pulled back 2px: 4px between ALL rows - the forced break and the
     natural wraps below 360 alike) */
  .topbar__pills { row-gap: 0; margin-block: -2px; }
  .topbar__pills > li { margin-block: 2px; }
  .topbar { row-gap: 6px; }
  .site-topbar { padding-top: 11px; }
}
@media (min-width: 480px) and (not (min-width: 768px)) {
  .site-topbar { padding-top: 17px; }
}
@media (not (min-width: 480px)) {
  /* (the flag back on the first pill row's centre - `top`, NOT translate: a transform made .dropdown its own stacking
     context, its menu (z 30) fell under the topbar's dim layer (z 25) and the language links could not be tapped) */
  .topbar__settings > .dropdown { top: 1px; }
}