/* Ahifi — component styles, recreated from the site's style.min.css (desktop ≥1024px values; mobile noted). */


/* ---------- Button ---------- */
.btn { background: none; border: 0; cursor: pointer; display: inline-block; font-family: var(--font-sans); margin: 0; padding: 0; position: relative; text-decoration: none; }
.btn__text { align-items: center; background: var(--ink); border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--on-dark); display: flex; gap: var(--space-1-5); font-size: 16px; font-weight: 600; line-height: 26px; padding: 10px var(--space-6); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.btn:hover .btn__text { background: var(--ink-hover); color: var(--on-dark); }
.btn--s .btn__text { font-size: 14px; line-height: 26px; padding: var(--space-1-5) 18px; }
.btn--xs .btn__text { font-size: 12px; font-weight: 500; line-height: 1; padding: var(--space-1-5) var(--space-2-5); }
.btn--l .btn__text { padding: var(--space-4) 36px; gap: var(--space-2-5); }
.btn--block { display: block; width: 100%; }
.btn--block .btn__text { justify-content: center; }
.btn--success .btn__text { background: var(--success-soft); color: var(--success); }
.btn--success:hover .btn__text { background: var(--success); color: var(--on-dark); }
.btn--info .btn__text { background: var(--info-soft); color: var(--info); }
.btn--info:hover .btn__text { background: var(--info); color: var(--on-dark); }
.btn--warning .btn__text { background: var(--warning-soft); color: var(--warning); }
.btn--warning:hover .btn__text { background: var(--warning); color: var(--on-dark); }
.btn--danger .btn__text { background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover .btn__text { background: var(--danger); color: var(--on-dark); }
.btn--light .btn__text { background: var(--muted); color: var(--on-dark); }
.btn--light:hover .btn__text { background: var(--muted-hover); }
.btn--dark .btn__text { background: var(--line); color: var(--ink); }
.btn--dark:hover .btn__text { background: var(--ink); color: var(--on-dark); }
.btn--white .btn__text { background: var(--surface); color: var(--ink); }
.btn--white:hover .btn__text { background: var(--success-hover); color: var(--on-dark); }
.btn--turquoise .btn__text { background: var(--turquoise); color: var(--ink); }
.btn--turquoise:hover .btn__text { background: var(--turquoise-hover); color: var(--ink); }
.btn--outline .btn__text { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover .btn__text { background: var(--ink); color: var(--on-dark); }
.btn--light.btn--outline .btn__text { background: transparent; border-color: var(--muted); color: var(--muted); }
.btn--white.btn--outline .btn__text { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }
.btn--white.btn--outline:hover .btn__text { background: var(--surface); color: var(--ink); }
.btn:disabled, .btn.disabled { opacity: .4; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: var(--radius-pill); }

/* ---------- Flag ---------- */
.flag { background: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-m); color: var(--on-dark); display: inline-block; font-size: 12px; font-weight: 500; line-height: 12px; padding: 5px var(--space-2-5); white-space: nowrap; }
.flag--success, .flag--warning, .flag--danger { font-weight: 600; }
.flag--success { background: var(--success); border-color: var(--success); }
.flag--warning { background: var(--warning); border-color: var(--warning); }
.flag--danger { background: var(--danger); border-color: var(--danger); }
.flag--white { background: var(--surface); border-color: var(--surface); color: var(--ink); }
.flag--outline { background: transparent; border-color: var(--muted); color: var(--muted); font-weight: 400; }
.flag--white.flag--outline { border-color: var(--on-dark); color: var(--on-dark); }

/* ---------- Availability + dot ---------- */
.dot { background: var(--muted); border-radius: .7em; display: inline-block; height: .7em; width: .7em; }
.dot--success { background: var(--success); } .dot--info, .dot--primary { background: var(--info); }
.dot--warning { background: var(--warning); } .dot--danger { background: var(--danger); }
.availability { color: var(--ink); display: block; font-size: 12px; font-weight: 500; line-height: 18px; white-space: nowrap; }
.availability .dot { margin-right: 2px; }
.availability--l { font-size: 14px; line-height: 22px; }
.availability--l .dot { margin-right: var(--space-2); }

/* ---------- Product card ---------- */
.b-product { background: var(--surface-soft); border-radius: var(--radius-product); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; height: 100%; }
.b-product__top { position: relative; overflow: hidden; }
.b-product__image { background: var(--surface); padding: var(--space-10) var(--space-7-5) var(--space-2-5); text-align: center; position: relative; box-shadow: var(--shadow-image-well); }
.b-product__image .ph { aspect-ratio: 1/1; transition: transform .3s; }
.b-product:hover .b-product__image .ph { transform: scale(1.1); }
.b-product__flags { display: flex; flex-wrap: wrap; gap: var(--space-1-5); left: var(--space-4-5); top: var(--space-4-5); right: 60px; position: absolute; margin: 0; z-index: 2; }
.b-product__bottom { padding: 0 var(--space-5) var(--space-5); position: relative; }
.b-product__title { font-size: 18px; line-height: 20px; font-weight: 600; margin: var(--space-4) 0 var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-product__title a { color: var(--ink); text-decoration: none; }
.b-product__text { color: var(--muted); font-size: 12px; line-height: 16px; max-height: 32px; margin: 0 0 var(--space-2); padding-right: var(--space-5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-product__availability { margin: 0 0 var(--space-5); }
.b-product__action { align-items: center; display: flex; justify-content: space-between; gap: var(--space-2-5); }
.b-product__price { display: flex; align-items: flex-end; gap: var(--space-2-5); margin: 0; white-space: nowrap; }
.b-product__price strong { font-size: 20px; font-weight: 600; line-height: 1; }
.b-product__price small { color: var(--muted); font-size: 12px; line-height: 14px; text-decoration: line-through; }
@media (max-width: 1023px) { .b-product { border-radius: var(--radius-s); } .b-product__title { font-size: 16px; line-height: 18px; } .b-product__price strong { font-size: 16px; } }

/* ---------- Category tile ---------- */
.b-category { background: var(--surface-soft); border-radius: var(--radius-l); padding: var(--space-1) var(--space-5); position: relative; transition: background-color .3s; }
.b-category--vertical { padding: var(--space-7-5); text-align: center; }
.b-category--vertical .b-category__image { margin-bottom: var(--space-5); }
.b-category__image .ph { aspect-ratio: 1/1; mix-blend-mode: multiply; transition: transform .3s; }
.b-category__title { font-size: 18px; font-weight: 600; line-height: 24px; margin: 0; }
.b-category__link { color: var(--ink); text-decoration: none; }
.b-category__link::after { content: ""; position: absolute; inset: 0; }
.b-category:hover { background: var(--line); }
.b-category:hover .ph { transform: scale(1.1); }
.b-category--horizontal { display: flex; align-items: center; gap: var(--space-2-5); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-5) var(--space-1) var(--space-1); }
.b-category--horizontal .b-category__image { flex: 0 0 40px; }
.b-category--horizontal .b-category__title { font-size: 12px; white-space: nowrap; }

/* ---------- Input ---------- */
.inp { margin-bottom: var(--space-10); }
.inp__label { color: var(--muted); display: block; font-size: 14px; font-weight: 500; margin-bottom: var(--space-2-5); padding: 0 var(--space-5); }
.inp__control { appearance: none; background: var(--surface-soft); border: 1px solid var(--surface-soft); border-radius: var(--radius-pill); box-sizing: border-box; color: var(--ink); display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 16px; outline: 0; padding: 11px var(--space-5); width: 100%; transition: border-color .3s; }
.inp__control::placeholder { color: var(--muted); }
.inp__control:focus { border-color: var(--ink); }
textarea.inp__control { border-radius: var(--radius-l); padding: var(--space-3-5) var(--space-5); }
.inp--white .inp__control { background: var(--surface); border-color: transparent; }
.inp--l .inp__control { font-size: 18px; line-height: 22px; padding: 18px var(--space-7-5); }
.inp--l .inp__label { padding: 0 var(--space-7-5); }
.inp__control.is-error { background: var(--error-soft); }
.inp__error { color: var(--error); display: block; font-size: 13px; font-weight: 500; line-height: 1.3; padding: var(--space-1-5) var(--space-5) 0; }
.inp__info { color: var(--muted); display: block; font-size: 12px; font-weight: 500; padding: var(--space-2-5) var(--space-7-5) 0; }

/* ---------- Promo card / tile (photo + overlay text) ---------- */
.b-card { position: relative; }
.b-card__media { border-radius: var(--radius-l); overflow: hidden; position: relative; }
.b-card__media .ph { transition: transform .3s; height: 100%; }
.b-card--portrait .b-card__media { aspect-ratio: 2/3; }
.b-card--landscape .b-card__media { aspect-ratio: 3/2; }
.b-card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.2) 40%, var(--scrim)); pointer-events: none; }
.b-card__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: var(--space-10); text-align: center; color: var(--on-dark); }
.b-card__title { color: var(--on-dark); margin: 0 0 var(--space-2-5); max-width: 440px; text-wrap: balance; }
.b-card__text { font-size: 14px; font-weight: 500; margin: 0 0 var(--space-5); max-width: 440px; text-wrap: balance; }
.b-card:hover .ph { transform: scale(1.1); }

/* ---------- Reference / article card ---------- */
.b-reference { position: relative; }
.b-reference__media { border-radius: var(--radius-l); overflow: hidden; margin-bottom: var(--space-5); position: relative; aspect-ratio: 3/2; }
.b-reference__media .ph { height: 100%; transition: transform .3s; }
.b-reference:hover .ph { transform: scale(1.1); }
.b-reference__flags { position: absolute; top: var(--space-4-5); left: var(--space-4-5); display: flex; gap: var(--space-1-5); z-index: 2; margin: 0; }
.b-reference__date { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0 0 var(--space-2); }
.b-reference__title { font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-3); padding-right: var(--space-10); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.b-reference__title a { color: var(--ink); text-decoration: none; }
.b-reference__price { font-size: 18px; font-weight: 600; margin: 0; }

/* ---------- Placeholder used by previews in place of product/photo imagery ---------- */
.ph { display: block; width: 100%; background: var(--line); border-radius: inherit; }
.ph--product { background: radial-gradient(circle at 50% 50%, var(--line-soft) 0 28%, var(--surface-soft) 29% 100%); border-radius: var(--radius-s); }
.ph--photo { background: linear-gradient(135deg, #3a3d44, #15161a); }

/* ---------- System additions (not in source CSS) ---------- */
.b-card--tile .b-card__content { align-items: flex-start; text-align: left; }
.b-card--wide .b-card__media { aspect-ratio: 16/9; }
.btn__icon { display: inline-flex; width: 24px; height: 24px; }