/* ================================================================
   HOKU APP — Livewire integracijos + puslapių stiliai, kurių nėra
   style.css / hoku-components.css. Kraunasi paskutinis.
   ================================================================ */

/* ---- Sidebar backdrop + open state (fallback, jei style.css kitaip) ---- */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 998;
}
.sidebar-backdrop.on {
    opacity: 1;
    pointer-events: auto;
}
.halo-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--bg-1, #141414);
    border-left: 1px solid var(--line, #2a2a2a);
    transform: translateX(102%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 999;
    display: flex;
    flex-direction: column;
    color: var(--ink, #f0f0f0);
}
.halo-sidebar.open { transform: translateX(0); }
body.sidebar-open { overflow: hidden; }

.halo-sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line, #2a2a2a);
}
.halo-sidebar-header .title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.halo-sidebar-close {
    margin-left: auto;
    order: 3;
    color: var(--ink-mute, #888);
    font-size: 16px;
    text-decoration: none;
    line-height: 1;
    padding: 4px 6px;
}
.halo-sidebar-close:hover { color: var(--red, #c0392b); }
.halo-sidebar-close svg { width: 14px; height: 14px; fill: currentColor; }
.wrapper-cartCount {
    order: 2;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
}
.wrapper-cartCount .cartCount { color: var(--red, #c0392b); font-weight: 600; }
.halo-sidebar-wrapper {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
}
.halo-sidebar .previewCartList { flex: 1; margin: 0; padding: 0; }
.halo-sidebar .previewCartInfo { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line, #2a2a2a); }

/* ---- Formų laukai (auth sidebar + account) ---- */
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute, #888);
}
.form-label em { color: var(--red, #c0392b); font-style: normal; }
.form-input {
    background: var(--bg-2, #1a1a1a);
    border: 1px solid var(--line, #2a2a2a);
    color: var(--ink, #f0f0f0);
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--red, #c0392b); }
.form-error {
    display: block;
    font-size: 12px;
    color: var(--red, #c0392b);
    margin-top: 4px;
}
.hiddenLabel { display: none; }

/* Auth/sidebar mygtukai (button-1 raudonas, button-2 ghost) */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-family: 'Archivo Black', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    width: 100%;
}
.button-1 { background: var(--red, #c0392b); color: #fff; }
.button-1:hover { background: var(--red-dark, #a93226); color: #fff; }
.button-2 { background: transparent; color: var(--ink, #f0f0f0); border-color: var(--line, #2a2a2a); }
.button-2:hover { border-color: var(--ink-mute, #888); }
.previewCartAction .previewCartGroup { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* ---- Alerts ---- */
.hoku-alert {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 2px solid var(--line, #2a2a2a);
    background: var(--bg-2, #1a1a1a);
    color: var(--ink, #f0f0f0);
    margin: 0 0 16px;
}
.hoku-alert-ok { border-left-color: #22c55e; }
.hoku-alert-danger { border-left-color: var(--red, #c0392b); }

/* ---- Formų tinklelis (checkout, contact, reviews) ---- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.form-grid .field.full { grid-column: 1 / -1; }
.field textarea {
    width: 100%;
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    color: var(--ink, #f0f0f0);
    padding: 11px 12px;
    font-size: 14px;
    outline: none;
    resize: vertical;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.15s;
}
.field textarea:focus { border-color: var(--red, #c0392b); }

/* ---- Checkout papildomi ---- */
.checkout-back {
    display: inline-block;
    margin-top: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--ink-mute, #888);
    text-decoration: none;
}
.checkout-back:hover { color: var(--ink, #f0f0f0); }
.ship-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-2, #1a1a1a);
    border: 1px solid var(--line, #2a2a2a);
    color: var(--ink-mute, #888);
    font-size: 13px;
    margin-bottom: 8px;
}
.pay-method-card { cursor: pointer; }
.pay-method-card + .pay-method-card,
.pay-method-card + .fieldset { margin-top: 10px; }
.order-summary .product__image { position: relative; }
.order-summary .product__quantity {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--red, #c0392b);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}
/* Promo laukas checkout suvestinėje (style.css jį stilizuoja tik .cart-summary viduje) */
.order-summary .promo {
    display: flex;
    border: 1px solid var(--line, #2a2a2a);
    background: var(--bg-2, #1a1a1a);
}
.order-summary .promo input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--ink, #f0f0f0);
    padding: 12px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
}
.order-summary .promo input::placeholder { color: var(--ink-mute, #888); }
.order-summary .row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-mute, #888);
    padding: 6px 0;
}
.order-summary .row b { color: var(--ink, #f0f0f0); font-weight: 600; }
.order-summary .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid var(--line, #2a2a2a);
}
.order-summary .total .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink-mute, #888);
}
.order-summary .total .value {
    font-family: 'Archivo Black', sans-serif;
    font-size: 26px;
}

/* ---- PDP buybox / reviews ---- */
.pdp-buybox { display: flex; flex-direction: column; gap: 4px; }
.reviews-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) { .reviews-layout { grid-template-columns: 1fr; } }
.review-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--line, #2a2a2a);
}
.review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.review-head .star { color: var(--red, #c0392b); letter-spacing: 2px; }
.review-date {
    margin-left: auto;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute, #888);
}
.review-title { font-weight: 700; margin-top: 6px; font-size: 14px; }
.review-body { color: var(--ink-mute, #888); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.review-form-wrap {
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    padding: 24px;
}

/* ---- Account ---- */
.account-signin {
    max-width: 480px;
    margin: 24px auto 64px;
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    padding: 40px;
}
.account-signin h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    margin: 8px 0 12px;
    text-transform: uppercase;
}
.account-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin: 16px 0 32px;
    flex-wrap: wrap;
}
.account-head h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.02;
    margin: 8px 0 0;
    text-transform: uppercase;
}
.account-head .meta {
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
}
.account-section { margin: 0 0 40px; }

/* Account dashboard — dizaino kalba (orders + information perrašyti be Bootstrap komponentų) */
.account-panel {
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    margin-bottom: 24px;
}
.account-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line, #2a2a2a);
    background: var(--bg-2, #1a1a1a);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink, #f0f0f0);
}
.account-panel__head .hint {
    font-size: 10px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
}
.account-panel__body { padding: 20px; }
.account-panel__body--flush { padding: 0; }

/* Plona dizaino lentelė (orders sąrašas + produktai) */
.hk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hk-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ink, #f0f0f0);
}
.hk-table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute, #888);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line, #2a2a2a);
    background: var(--bg-2, #1a1a1a);
    white-space: nowrap;
}
.hk-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft, #1f1f1f);
    vertical-align: middle;
}
.hk-table tbody tr:hover td { background: var(--bg-2, #1a1a1a); }
.hk-table tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--line, #2a2a2a);
    padding: 10px 16px;
    color: var(--ink-mute, #888);
}
.hk-table tfoot tr:first-child td { padding-top: 14px; }
.hk-table .num,
.hk-table .t-right { text-align: right; }
.hk-table .t-center { text-align: center; }
.hk-table .mono {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.05em;
}
.hk-table .strong { color: var(--ink, #f0f0f0); font-weight: 700; }

/* Užsakymo statuso ženkliukas — mono etiketė plona linija */
.hk-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--line, #2a2a2a);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink, #f0f0f0);
    white-space: nowrap;
}
.hk-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.hk-status--mute { color: var(--ink-mute, #888); }
.hk-status--ok { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); }
.hk-status--red { color: var(--red, #c0392b); border-color: var(--red, #c0392b); }

/* Mažas ghost mygtukas lentelėms / back veiksmams */
.btn-ghost-sm {
    height: 34px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--line, #2a2a2a);
    color: var(--ink, #f0f0f0);
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.btn-ghost-sm:hover { border-color: var(--red, #c0392b); background: var(--red-soft, rgba(192, 57, 43, 0.1)); color: var(--ink, #f0f0f0); }

/* Užsakymo detalės */
.order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.order-detail-grid .lab {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute, #888);
    margin-bottom: 10px;
}
.order-detail-grid p { margin: 0 0 6px; font-size: 13px; color: var(--ink, #f0f0f0); }
.order-detail-grid p .k { color: var(--ink-mute, #888); margin-right: 6px; }
.hk-sublabel {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute, #888);
    margin: 0 0 10px;
}
.order-history { list-style: none; margin: 0; padding: 0; }
.order-history li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft, #1f1f1f);
}
.order-history li:last-child { border-bottom: none; }
.order-history .comment { color: var(--ink-mute, #888); font-size: 12px; }
.order-history .when {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin-left: auto;
}
.account-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-mute, #888);
    font-size: 13px;
}
.account-form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.account-form .form-actions { margin-top: 4px; }

/* Laravel pagination (default links()) */
.account-section nav[role="navigation"] { font-size: 13px; }
.account-section nav[role="navigation"] svg { width: 16px; height: 16px; }
.account-section nav[role="navigation"] a,
.account-section nav[role="navigation"] span[aria-current] > span {
    color: var(--ink, #f0f0f0);
    padding: 4px 10px;
    border: 1px solid var(--line, #2a2a2a);
    text-decoration: none;
    margin: 0 2px;
}
.account-section nav[role="navigation"] span[aria-current] > span {
    background: var(--red, #c0392b);
    border-color: var(--red, #c0392b);
    color: #fff;
}

/* ---- Wishlist ---- */
.wishlist-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin: 16px 0 28px;
    flex-wrap: wrap;
}
.wishlist-head h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 0.95;
    margin: 10px 0 0;
    text-transform: uppercase;
}
.wishlist-head .tag,
.account-head .tag,
.account-signin .tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--red, #c0392b);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.wishlist-head .meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
    text-align: right;
}
.wishlist-card .icon-btn { align-self: stretch; }

/* ---- Topbar sep ---- */
.topbar .sep { margin: 0 8px; color: var(--ink-dim, #555); }

/* ---- Mega menu wrapper (mega-panel/mega-grid be stilių) ---- */
.mega .mega-panel { min-width: 0; }
.mega .mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px 16px;
}

/* ---- Kortelės širdelė aktyvi ---- */
.product-card .wish.on { color: var(--red, #c0392b); }
.product-card .wish.on svg { fill: currentColor; }
.icon-btn.on { color: var(--red, #c0392b); border-color: var(--red, #c0392b); }

/* ---- Contact puslapis (nebuvo jokiame įkeltame CSS) ---- */
.contact-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin: 24px 0 32px;
}
.contact-head .tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--red, #c0392b);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.contact-head .meta {
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.08em;
    line-height: 1.9;
}
.contact-head .meta .phone,
.contact-head .meta .email { color: var(--ink, #f0f0f0); }
.contact-head h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 0.95;
    text-transform: uppercase;
    margin: 10px 0 0;
}
.contact-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 64px;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-form {
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    padding: 32px;
}
.form-section-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--red, #c0392b);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-card {
    background: var(--bg-1, #141414);
    border: 1px solid var(--line, #2a2a2a);
    padding: 20px 24px;
    font-size: 13px;
    color: var(--ink-mute, #888);
    line-height: 1.6;
}
.contact-card b, .contact-card .lab {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink, #f0f0f0);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.contact-card .phone, .contact-card .email, .contact-card .addr { color: var(--ink, #f0f0f0); }
.faq { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line, #2a2a2a); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink, #f0f0f0);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus { color: var(--red, #c0392b); font-family: 'IBM Plex Mono', monospace; }
.faq-item[open] .plus { transform: rotate(45deg); }
.faq-item .answer { padding: 0 4px 16px; color: var(--ink-mute, #888); font-size: 13px; line-height: 1.6; }

/* ---- Bendri smulkūs ---- */
.btn-ghost { cursor: pointer; }
button.btn-ghost { background: transparent; }
.plp-pagination .btn-ghost, .wishlist-pagination .btn-ghost { text-decoration: none; }

/* ---- Checkout success (dizaino pakete puslapio nebuvo) ---- */
.confirm-wrap {
    max-width: 620px;
    margin: 48px auto 96px;
    text-align: center;
    padding: 0 20px;
}
.confirm-check {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    border: 2px solid #22c55e;
    color: #22c55e;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirm-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--red, #c0392b);
    letter-spacing: 0.3em;
    margin-bottom: 16px;
}
.confirm-wrap h1 {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.02;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.confirm-wrap p { color: var(--ink-mute, #888); margin: 0 0 20px; }
.confirm-order-num {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.2em;
    padding: 10px 18px;
    border: 1px dashed var(--line, #2a2a2a);
    color: var(--ink, #f0f0f0);
}

/* ================================================================
   UI/UX AUDITAS 2026-07 — mobile nav, sticky bar, a11y, responsive
   ================================================================ */

/* ---- Raudona „tag" linijelė (head'ų <span class="line">) ---- */
.wishlist-head .tag .line,
.account-head .tag .line,
.account-signin .tag .line,
.contact-head .tag .line,
.form-section-tag .line {
    width: 40px;
    height: 1px;
    background: var(--red, #c0392b);
    display: inline-block;
    flex-shrink: 0;
}
.form-section-tag {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---- Header paieškos focus (mega-search jį turi, header — ne) ---- */
.search:focus-within { border-color: var(--red, #c0392b); }

/* ---- Vehicle finder: „model" laukas per 2 stulpelius (vietoj inline style) ---- */
.finder-field.model { grid-column: span 2; }

/* ---- Mega menu valdomas tik per JS .open (style.css :hover atidaro
       panelę užvedus ant BET KURIO nav punkto — išjungiam) ---- */
.nav:hover .mega:not(.open) { display: none; }
.nav .mega.open { display: block; }

/* ---- Klaviatūros fokusas dizaino kalba ---- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
label.opt:focus-within {
    outline: 2px solid var(--red, #c0392b);
    outline-offset: 2px;
}

/* ---- Livewire loading būsenos: disabled mygtukai matomai prigesę ---- */
.btn-add:disabled,
.btn-red:disabled,
.btn-ghost:disabled,
.btn-ghost-sm:disabled,
.button:disabled,
.checkot-btn:disabled,
.qty button:disabled,
.qty-s button:disabled,
.opt:disabled,
.icon-btn:disabled,
.btn-quantity[disabled],
.previewCartItem-remove[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Toast: pozicija per klasę (JS neberašo inline bottom/right) ---- */
.hoku-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    max-width: 340px;
}

/* ---- Cart alertai laikosi puslapio ritmo ---- */
.cart-alerts {
    max-width: var(--max-w, 1440px);
    margin: 0 auto;
    padding: 0 32px;
}

/* ---- Hamburger (rodomas tik ≤768px) ---- */
.nav-burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line, #2a2a2a);
    background: var(--bg-1, #141414);
    color: var(--ink, #f0f0f0);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}
.nav-burger:hover { border-color: var(--red, #c0392b); color: var(--red, #c0392b); }
.nav-burger svg { width: 20px; height: 20px; }

/* ---- Kairysis sidebar variantas (mobile meniu) ---- */
.halo-sidebar.halo-sidebar-left {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--line, #2a2a2a);
    transform: translateX(-102%);
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.5);
}
.halo-sidebar.halo-sidebar-left.open { transform: translateX(0); }
/* Sub-paneliai (markių modeliai) matomi TIK atidarius drawer — kitaip jų
   translateX(100%) iškiša juos atgal į ekraną pro paslėptą tėvą. */
.halo-sidebar-left:not(.open) .mobile-nav-sub { display: none; }
/* Atidarius drawer, sub-panelis su translateX(100%) laukia už krašto — apkerpam */
.halo-sidebar.halo-sidebar-left { overflow: hidden; }

/* ---- Mobile meniu turinys ---- */
.mobile-menu-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-2, #1a1a1a);
    border: 1px solid var(--line, #2a2a2a);
    padding: 0 12px;
    height: 44px;
    margin-bottom: 20px;
    transition: border-color 0.15s;
}
.mobile-menu-search:focus-within { border-color: var(--red, #c0392b); }
.mobile-menu-search svg { color: var(--ink-mute, #888); flex: none; }
.mobile-menu-search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--ink, #f0f0f0);
    font-size: 14px;
}
.mobile-menu-search input::placeholder { color: var(--ink-mute, #888); }
.mobile-menu-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ink-mute, #888);
    margin: 18px 0 6px;
}
.mobile-menu-nav { display: flex; flex-direction: column; }
.mobile-menu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--line-soft, #1f1f1f);
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink, #f0f0f0);
    text-decoration: none;
}
.mobile-menu-nav a .arr { color: var(--red, #c0392b); font-family: 'IBM Plex Mono', monospace; }
.mobile-menu-nav a:hover, .mobile-menu-nav a:active { color: var(--red, #c0392b); }
.mobile-menu-foot {
    margin-top: auto;
    padding-top: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.1em;
    line-height: 2;
}
.mobile-menu-foot a { color: var(--ink, #f0f0f0); text-decoration: none; }
.mobile-menu-foot a:hover { color: var(--red, #c0392b); }

/* ---- PDP sticky bottom bar (tik mobile) ---- */
.pdp-mobile-bar { display: none; }

/* ---- Responsyvumo papildymai (dizaino breakpointai) ---- */
@media (max-width: 1100px) {
    .order-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-burger { display: inline-flex; }
    .header-inner { grid-template-columns: auto auto 1fr; }
    .header-inner .actions { justify-self: end; }

    /* Sidebar'ai telefone per visą plotį (dizaino sprendimas) */
    .halo-sidebar { width: min(420px, 100vw); }

    /* Formos stack'inasi (contact / checkout / reviews) */
    .form-grid { grid-template-columns: 1fr; }

    /* Head'ai stack'inasi, meta kairėje */
    .account-head, .wishlist-head, .contact-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .account-head .meta, .wishlist-head .meta, .contact-head .meta { text-align: left; }

    .contact-layout, .reviews-layout { gap: 24px; margin-bottom: 40px; }
    .contact-form { padding: 20px 16px; }
    .review-form-wrap { padding: 16px; }
    .account-signin { padding: 24px 16px; margin: 16px auto 48px; }
    .account-panel__body { padding: 16px; }
    .hk-table { min-width: 520px; }
    .order-summary, .cart-summary { padding: 20px 16px; }
    .cart-alerts { padding: 0 16px; }

    /* PLP toolbar: skaičius + sort telpa eilėje, o siaurėjant — laužosi */
    .toolbar-wrapper { flex-wrap: wrap; gap: 10px; }

    /* Toast aukščiau sticky juostos ir per visą plotį */
    .hoku-toast {
        left: 16px;
        right: 16px !important;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: none !important;
    }

    /* PDP sticky bottom bar */
    .pdp-mobile-bar {
        display: flex;
        align-items: center;
        gap: 14px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 95;
        background: var(--bg-1, #141414);
        border-top: 1px solid var(--line, #2a2a2a);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .pdp-mobile-bar .lab {
        display: block;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        letter-spacing: 0.2em;
        color: var(--ink-mute, #888);
        text-transform: uppercase;
    }
    .pdp-mobile-bar .val {
        font-family: 'Archivo Black', sans-serif;
        font-size: 22px;
        color: var(--ink, #f0f0f0);
        line-height: 1.1;
    }
    .pdp-mobile-bar .btn-add {
        flex: 1;
        margin-top: 0;
        height: 48px;
        text-decoration: none;
    }
    body.page-pdp main { padding-bottom: 84px; }
}

@media (max-width: 428px) {
    .sort-select { flex: 1 1 100%; }
    .toolbar-wrapper { padding: 12px 0; }
    .hk-table { min-width: 480px; }
    .pdp-mobile-bar .val { font-size: 19px; }
    .contact-head h1, .wishlist-head h1 { font-size: 34px; }
    .account-head h1 { font-size: 30px; }
}

@media (max-width: 390px) {
    .mobile-menu-nav a { font-size: 13px; padding: 12px 2px; }
    .btn-ghost { padding: 0 14px; font-size: 11px; }
}

@media (max-width: 360px) {
    .pdp-mobile-bar { gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .pdp-mobile-bar .btn-add { font-size: 11px; letter-spacing: 0.08em; }
}

/* ---- design-2 smulkūs helperiai ---- */
.price .per-pc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    color: var(--ink-mute, #888);
    letter-spacing: 0.15em;
}
@media (max-width: 768px) {
    .account-guest-grid { grid-template-columns: 1fr !important; }
}

/* ---- QA fix'ai (2026-07-12) ---- */
/* ADD TO CART mygtuko suma atskirta nuo teksto */
.btn-add-with-sum { width: 100%; }
.btn-add-with-sum .sum { margin-left: auto; padding-left: 16px; }
/* Account guest: auth formos be sidebar padding'ų — lygiuojasi su antraštėm */
.account-guest-grid .halo-sidebar-wrapper { padding: 0; overflow: visible; }
.account-guest-grid .auth-sidebar-inner { min-height: auto; }
/* Kortelės be nuotraukos — placeholder ratlankio siluetas */
.product-card .img img[src=""] { display: none; }
.product-card .img .img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.18;
}
.product-card .img .img-placeholder img { width: 70%; height: 70%; object-fit: contain; display: block; }

/* ============ WHEELS TUNING — linijų plytelės (mega-lines) ============ */
.mega-lines .mega-inner { padding: 24px 32px 28px; }
.lines-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.line-tile {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.line-tile:hover {
    border-color: var(--red);
    transform: translateY(-2px);
}
.line-tile-img {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: radial-gradient(ellipse at 50% 55%, var(--bg-2), var(--bg) 80%);
    overflow: hidden;
}
.line-tile-img img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    display: block;
}
.line-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--line-soft);
}
.line-tile-name {
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}
.line-tile:hover .line-tile-name { color: var(--red); }
.line-tile-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

@media (max-width: 900px) {
    .lines-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ PLP — šoniniai filtrai (facetai) ============ */
.plp-layout {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.plp-layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* tinklelis jau turi savo paddingą — sidebar layout'e jo nebereikia */
.plp-layout .products-grid,
.plp-layout .toolbar { padding-left: 0; padding-right: 0; max-width: none; }
.plp-layout .toolbar-wrapper { padding-left: 0; padding-right: 0; }

.plp-sidebar {
    position: sticky;
    top: 120px;
    background: var(--bg-1);
    border: 1px solid var(--line);
}
.plp-sidebar-head {
    display: none; /* matomas tik mobile drawer režime */
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink);
}
.plp-sidebar-close {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.plp-sidebar-close:hover { color: var(--red); }

.facet { border-bottom: 1px solid var(--line-soft); }
.facet:last-of-type { border-bottom: none; }
.facet-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 13px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.facet-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}
.facet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--red);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 10px;
    border-radius: 8px;
}
.facet-chev {
    color: var(--ink-mute);
    font-size: 10px;
    transition: transform 0.18s ease;
}
.facet.is-open .facet-chev { transform: rotate(180deg); }

.facet-body { display: none; padding: 0 16px 14px; }
.facet.is-open .facet-body { display: block; }
.facet-body.is-scroll { max-height: 232px; overflow-y: auto; }
.facet-body.is-scroll::-webkit-scrollbar { width: 4px; }
.facet-body.is-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.facet-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-dim);
}
.facet-opt:hover { color: var(--ink); }
.facet-opt input { accent-color: #d92626; width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }
.facet-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-opt-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-mute);
    flex-shrink: 0;
}
.facet-opt.is-empty { opacity: 0.35; }

.facet-range { display: flex; align-items: center; gap: 8px; }
.facet-range input {
    flex: 1;
    min-width: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 8px 10px;
    outline: none;
}
.facet-range input:focus { border-color: var(--red); }
.facet-range-sep { color: var(--ink-mute); font-size: 12px; }

.plp-sidebar-actions {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
}
.plp-sidebar-actions .facet-apply { flex: 1; justify-content: center; }
/* Desktop'e filtrai taikomi iškart pažymėjus — APPLY lieka tik mobile drawer'iui */
.facet-apply { display: none; }

.chip-clear { border-color: var(--red); color: var(--red); }

.plp-filters-btn { display: none; }
.plp-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 90;
}
.plp-sidebar-backdrop.open { display: block; }

/* ── Mobile: sidebar kaip drawer ── */
@media (max-width: 980px) {
    .plp-layout { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }

    .plp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(88vw, 340px);
        z-index: 95;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        border: none;
        border-right: 1px solid var(--line);
    }
    .plp-sidebar.open { transform: translateX(0); }
    .plp-sidebar-head { display: flex; }
    .plp-filters-btn { display: inline-flex; }
    .facet-apply { display: inline-flex; }
}

/* PLP chip'ų juosta — tas pats konteineris kaip hero/tinklelis */
.plp-chips {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 16px 32px 0;
}
@media (max-width: 980px) {
    .plp-chips { padding: 14px 16px 0; }
}

/* Sidebar lieka vietoje slinkant: sticky po sticky header'iu (73px) + vidinis
   slinkimas, nes filtrų sąrašas gali būti aukštesnis už ekraną (988px vs 900px). */
@media (min-width: 981px) {
    .plp-sidebar {
        position: sticky;
        top: 89px;
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .plp-sidebar::-webkit-scrollbar { width: 5px; }
    .plp-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
    .plp-sidebar::-webkit-scrollbar-track { background: transparent; }
    /* grupių vidinis scroll nebereikalingas — slenka visas sidebar'as */
    .plp-sidebar .facet-body.is-scroll { max-height: none; overflow-y: visible; }
}

/* ============ Prekės kortelė: nuotrauka per visą plotį ============ */
/* Anksčiau padding 14% (mobile 12%) mažino nuotrauką iki ~68% kortelės pločio,
   nors pačioje miniatiūroje turinys užima ~94%. Nuimam paraštę — ratlankis
   užpildo kortelę iki kampų. */
.product-card .img img { padding: 2%; }

/* Specifikacijų užrašas dabar gula ant pačios nuotraukos, todėl jam reikia
   tamsaus persišviečiančio pagrindo, kad nepablogėtų skaitomumas. */
.spec-overlay {
    padding-top: 20px;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.55) 55%, rgba(13, 13, 13, 0) 100%);
}

@media (max-width: 767px) {
    .product-card .img img { padding: 2%; }
}

/* Mobiliame kortelė ~175 px — specifikacijos laužėsi į 2 eilutes ir gulė ant
   ratlankio. Sutalpinam vienoje eilutėje (dydis/PCD/ET yra pagrindinė pirkimo
   informacija, todėl neslepiam). */
@media (max-width: 767px) {
    .spec-overlay {
        font-size: 8.5px;
        letter-spacing: 0.04em;
        gap: 4px;
        padding: 14px 8px 5px;
        white-space: nowrap;
    }
    .spec-overlay span { overflow: hidden; text-overflow: ellipsis; }
}

/* ============ Footer: socialiniai tinklai ============ */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    color: var(--ink-mute);
    transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.footer-social a:hover {
    color: var(--red);
    border-color: var(--red);
    transform: translateY(-2px);
}
.footer-social svg { display: block; }