/* Компоненти: кнопки, картка товару, статті, «хлібні крихти», пагінація, повідомлення */

/* ---------- кнопки ---------- */
.vs-btn, .button, button.button, a.button, input[type="submit"].button, .woocommerce-Button, #place_order { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--vs-r-pill); font: 600 15px/1 var(--vs-font); text-decoration: none; cursor: pointer; transition: transform .25s var(--vs-ease), background .2s, border-color .2s, color .2s, box-shadow .25s; }
.vs-btn .vs-ic { width: 18px; height: 18px; transition: transform .25s var(--vs-ease); } .vs-btn:hover .vs-ic { transform: translateX(3px); }
.vs-btn:active, .button:active { transform: scale(.97); }
.vs-btn--primary, .button.alt, .single_add_to_cart_button, #place_order, .woocommerce-Button, .woocommerce-form-login__submit { background: var(--vs-accent); color: var(--vs-on-accent); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--vs-accent) 70%, transparent); }
.vs-btn--primary:hover, .button.alt:hover, .single_add_to_cart_button:hover, #place_order:hover, .woocommerce-Button:hover, .woocommerce-form-login__submit:hover { background: var(--vs-accent-hover); color: var(--vs-on-accent); transform: translateY(-2px); }
.vs-btn--ghost, a.button:not(.alt), button.button:not(.alt) { background: transparent; border-color: var(--vs-border); color: var(--vs-heading); }
.vs-btn--ghost:hover, a.button:not(.alt):hover, button.button:not(.alt):hover { border-color: var(--vs-accent); color: var(--vs-accent); background: transparent; }
.vs-btn--light { background: #fff; color: #17242b; } .vs-btn--light:hover { background: #eef4f6; color: #17242b; transform: translateY(-2px); }
.vs-btn--outline { border-color: rgba(255, 255, 255, .55); color: inherit; } .vs-btn--outline:hover { background: rgba(255, 255, 255, .14); color: inherit; }
button:disabled, .button.disabled, .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
html[data-theme="dark"] .vs-cta__box { background: linear-gradient(135deg, #1d3a46, #14262e); color: #eef4f6; }

/* ---------- картка товару: плитка-«образець» ---------- */
ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vs-gap); margin: 0; padding: 0; list-style: none; }
.vs-card { position: relative; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--vs-border-soft); border-radius: var(--vs-r-lg); background: var(--vs-surface); box-shadow: var(--vs-shadow-1); transition: transform .4s var(--vs-ease), box-shadow .4s var(--vs-ease), border-color .3s; }
.vs-card:hover { transform: translateY(-6px); box-shadow: var(--vs-shadow-2); border-color: color-mix(in srgb, var(--vs-accent) 40%, var(--vs-border)); }
.vs-card__media { position: relative; display: block; margin: 10px 10px 0; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--vs-r-lg) - 6px); background: var(--vs-bg-soft); box-shadow: var(--vs-photo-shadow); }   /* фото-зразок із тінню, як плитка над карткою */
.vs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vs-ease); }
.vs-card:hover .vs-card__media img { transform: scale(1.06); }
.vs-card__media { transition: box-shadow .4s var(--vs-ease); } .vs-card:hover .vs-card__media { box-shadow: var(--vs-photo-shadow-hover); }
.vs-card__sale { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: var(--vs-r-pill); background: var(--vs-sand); color: #3a2b17; font-size: 13px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.vs-card__price del, .single-product .price del { margin-right: 6px; color: var(--vs-muted); font-size: .78em; font-weight: 400; } .vs-card__price ins, .single-product .price ins { text-decoration: none; }
.vs-sale-badge { display: inline-block; margin-left: 10px; padding: 4px 11px; border-radius: var(--vs-r-pill); background: var(--vs-sand); color: #3a2b17; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; vertical-align: middle; }
.vs-card__badge { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: var(--vs-r-pill); background: color-mix(in srgb, var(--vs-surface) 90%, transparent); backdrop-filter: blur(8px); color: var(--vs-muted); font-size: 12px; font-weight: 600; }
.vs-card.is-out .vs-card__media img { filter: saturate(.55); opacity: .85; }
.vs-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 18px 18px; }
.vs-card__title { margin: 0; font-family: var(--vs-font); }
.vs-card__title a { display: grid; gap: 2px; color: var(--vs-heading); text-decoration: none; }
.vs-card__title small { color: var(--vs-muted); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.vs-card__title b { font: 400 22px/1.15 var(--vs-font-display); letter-spacing: -.02em; }
.vs-card__dots { display: flex; gap: 5px; }
.vs-card__dots span { width: 15px; height: 15px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.vs-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.vs-glitter-note { margin: 0 0 10px; color: var(--vs-accent-ink, var(--vs-accent)); font-size: 14px; font-weight: 600; } .vs-glitter-note .amount { color: inherit; }
.vs-card__price { color: var(--vs-heading); font-size: 18px; font-weight: 600; } .vs-card__price .amount { color: inherit; } .vs-from { margin-right: 4px; color: var(--vs-muted); font-size: 13px; font-weight: 500; }
.vs-card__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vs-accent-soft); color: var(--vs-accent); transition: background .25s, color .25s, transform .3s var(--vs-ease); }
.vs-card:hover .vs-card__go { background: var(--vs-accent); color: var(--vs-on-accent); transform: rotate(-45deg); }
.vs-card__go .vs-ic { width: 18px; height: 18px; }
@media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .vs-card__media { margin: 8px 8px 0; } ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; } .vs-card__body { padding: 12px 12px 14px; } .vs-card__title b { font-size: 18px; } .vs-card__price { font-size: 16px; } .vs-card__go { width: 34px; height: 34px; } }

/* ---------- статті ---------- */
.vs-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vs-gap); }
.vs-post { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vs-border-soft); border-radius: var(--vs-r-lg); background: var(--vs-surface); box-shadow: var(--vs-shadow-1); transition: transform .4s var(--vs-ease), box-shadow .4s; }
.vs-post:hover { transform: translateY(-5px); box-shadow: var(--vs-shadow-2); }
.vs-post__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vs-bg-soft); }
.vs-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vs-ease); } .vs-post:hover .vs-post__media img { transform: scale(1.05); }
.vs-post__ph { display: grid; place-items: center; height: 100%; opacity: .5; } .vs-post__ph .vs-logo { height: 64px; }
.vs-post__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 22px 24px; }
.vs-post__body h2 { margin: 0; font-size: 19px; line-height: 1.3; } .vs-post__body h2 a { color: var(--vs-heading); text-decoration: none; }
.vs-post__body p { margin: 0; color: var(--vs-muted); font-size: 15px; flex: 1; }
@media (max-width: 899px) { .vs-posts { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .vs-posts { grid-template-columns: 1fr; } }

/* ---------- службове: крихти, пагінація, повідомлення ---------- */
.vs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 18px; color: var(--vs-muted); font-size: 14px; }
.vs-crumbs a { color: var(--vs-muted); text-decoration: none; } .vs-crumbs a:hover { color: var(--vs-accent); } .vs-crumbs__sep { opacity: .5; }
.woocommerce-pagination, .navigation.pagination { margin-top: 40px; }
.woocommerce-pagination ul, .navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.woocommerce-pagination li { margin: 0; } .woocommerce-pagination a, .woocommerce-pagination span, .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--vs-border); border-radius: var(--vs-r-pill); color: var(--vs-heading); text-decoration: none; font-weight: 500; }
.page-numbers.current { background: var(--vs-accent); border-color: var(--vs-accent); color: var(--vs-on-accent); } a.page-numbers:hover { border-color: var(--vs-accent); color: var(--vs-accent); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 22px; padding: 16px 20px; list-style: none; border: 1px solid var(--vs-border); border-left: 4px solid var(--vs-accent); border-radius: var(--vs-r); background: var(--vs-surface); color: var(--vs-heading); box-shadow: var(--vs-shadow-1); }
.woocommerce-message .button { order: 2; margin-left: auto; min-height: 40px; padding: 0 18px; }
.woocommerce-error { border-left-color: var(--vs-danger); } .woocommerce-error li { margin: 0; }
.woocommerce-notices-wrapper:empty { display: none; }

/* ---------- панель фільтрів каталогу ---------- */
.vs-filters { margin: 0 0 28px; }
.vs-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vs-dd { position: relative; }
.vs-dd__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid var(--vs-border); border-radius: var(--vs-r-pill); background: var(--vs-surface); color: var(--vs-heading); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; transition: border-color .2s, background .2s; }
.vs-dd__btn::-webkit-details-marker { display: none; }
.vs-dd__btn::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid var(--vs-muted); border-bottom: 1.6px solid var(--vs-muted); transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--vs-ease); }
.vs-dd[open] > .vs-dd__btn { border-color: var(--vs-accent); } .vs-dd[open] > .vs-dd__btn::after { transform: translateY(1px) rotate(-135deg); }
.vs-dd__btn:hover { border-color: var(--vs-accent); } .vs-dd__btn.is-active { background: var(--vs-accent-soft); border-color: var(--vs-accent); color: var(--vs-accent); }
.vs-dd__btn .vs-ic { width: 18px; height: 18px; } .vs-dd__btn--sort::after { display: none; }
.vs-dd__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--vs-accent); color: var(--vs-on-accent); font-size: 12px; font-weight: 700; }
.vs-dd__menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; display: grid; gap: 2px; min-width: 240px; max-width: min(92vw, 360px); max-height: 380px; overflow-y: auto; padding: 8px; border: 1px solid var(--vs-border); border-radius: var(--vs-r); background: var(--vs-raised); box-shadow: var(--vs-shadow-3); animation: vs-pop .2s var(--vs-ease); }
.vs-dd__menu--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: min(92vw, 380px); }
.vs-dd__menu--price { gap: 14px; padding: 16px; min-width: 280px; }
.vs-dd--end .vs-dd__menu { left: auto; right: 0; }
.vs-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--vs-text); font-size: 15px; cursor: pointer; text-decoration: none; }
.vs-opt:hover { background: var(--vs-bg-soft); color: var(--vs-heading); } .vs-opt:has(input:checked), .vs-opt.is-current { color: var(--vs-heading); font-weight: 600; background: var(--vs-accent-soft); }
.vs-opt.is-off { opacity: .4; cursor: default; }
.vs-opt { min-width: 0; } .vs-opt > span:not(.vs-opt__dot) { min-width: 0; overflow-wrap: anywhere; }   /* довгі назви («Помаранчевий») переносяться, а не обрізаються */
@media (max-width: 480px) { .vs-opt { gap: 8px; padding: 10px 8px; font-size: 14px; } }
.vs-opt__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.vs-price { display: flex; align-items: center; gap: 8px; } .vs-price input { min-height: 44px; }
.vs-price__hint { margin: 0; color: var(--vs-muted); font-size: 13px; }
.vs-btn--sm { min-height: 44px; padding: 0 22px; font-size: 14px; }
.vs-filters__reset { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--vs-muted); font-size: 14px; text-decoration: none; } .vs-filters__reset .vs-ic { width: 16px; height: 16px; } .vs-filters__reset:hover { color: var(--vs-accent); }
.vs-filters__end { display: flex; align-items: center; gap: 14px; margin-left: auto; } .vs-filters__total { color: var(--vs-muted); font-size: 14px; }
@media (max-width: 760px) {
  .vs-dd__menu { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: none; max-height: 62vh; }
  .vs-dd--end .vs-dd__menu { left: 12px; right: 12px; }
  .vs-filters__end { width: 100%; justify-content: space-between; margin-left: 0; }
}
.vs-opt input { flex: none; }

/* ---------- месенджери (контакти: підвал, головна, сторінка «Контакти») ---------- */
.vs-msg { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 6px; border: 1px solid var(--vs-border); border-radius: var(--vs-r-pill); background: var(--vs-surface); color: var(--vs-heading); font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; transition: border-color .2s, transform .25s var(--vs-ease), box-shadow .25s; }
.vs-msg__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; } .vs-msg__icon svg { width: 19px; height: 19px; }
.vs-msg:hover { border-color: var(--brand, var(--vs-accent)); transform: translateY(-2px); box-shadow: var(--vs-shadow-1); }
.vs-msg:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; }
.vs-msg--sm { min-height: 40px; padding: 0 14px 0 5px; gap: 8px; font-size: 14px; } .vs-msg--sm .vs-msg__icon { width: 30px; height: 30px; } .vs-msg--sm .vs-msg__icon svg { width: 17px; height: 17px; }
.vs-msg--icon { min-height: 0; padding: 4px; } .vs-msg--icon .vs-msg__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vs-cta__actions .vs-msg { border-color: rgba(255, 255, 255, .5); }
.vs-contacts__msgs { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 4px 0 12px; }
/* «Немає в наявності» на картці: одна строка, без переносу; на телефоні — тонка смужка внизу фото, а не велика плашка, що закривала половину кадру */
.vs-card__badge { white-space: nowrap; }
@media (max-width: 560px) { .vs-card__badge { left: 8px; right: 8px; top: auto; bottom: 8px; padding: 4px 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.3; } }