/*!
 * GNT.GE storefront — design system v2
 * Deep navy + cool neutrals + one restrained blue accent.
 * Layered on Bootstrap 4 (kept for account/plugin markup); all new UI uses the g- prefix.
 */

/* ------------------------------------------------------------------ fonts */
@font-face {
    font-family: "GNT Georgian";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/gnt/noto-sans-georgian-georgian-wght-normal.woff2") format("woff2");
    unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
    font-family: "GNT Latin";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/gnt/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "GNT Latin";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/gnt/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
    --g-ink: #0b1a30;
    --g-navy-900: #0b1a30;
    --g-navy-800: #12284a;
    --g-navy-700: #1b3863;
    --g-navy-600: #2b4d7e;

    --g-accent: #0a66c2;
    --g-accent-600: #0857a6;
    --g-accent-50: #eaf3fc;
    --g-accent-100: #d3e6f8;
    --g-cyan: #2bb3d6;

    --g-bg: #f3f5f8;
    --g-surface: #ffffff;
    --g-surface-2: #f7f9fb;
    --g-line: #e2e7ee;
    --g-line-strong: #cdd5df;
    --g-text: #101d2e;
    --g-text-2: #3d4b5e;
    --g-muted: #627186;
    --g-subtle: #8a97a8;

    --g-success: #157a4c;
    --g-success-50: #e8f5ee;
    --g-warning: #9a6200;
    --g-warning-50: #fdf3df;
    --g-danger: #c0362c;
    --g-danger-50: #fcebea;

    --g-font: "GNT Latin", "GNT Georgian", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Georgian", "Sylfaen", sans-serif;

    --g-fs-xs: .75rem;
    --g-fs-sm: .8125rem;
    --g-fs-base: .9375rem;
    --g-fs-md: 1.0625rem;
    --g-fs-lg: 1.25rem;
    --g-fs-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --g-fs-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
    --g-fs-3xl: clamp(1.875rem, 1.25rem + 2.4vw, 2.875rem);

    --g-r-sm: 6px;
    --g-r: 10px;
    --g-r-lg: 14px;

    --g-shadow-sm: 0 1px 2px rgba(11, 26, 48, .06);
    --g-shadow: 0 1px 2px rgba(11, 26, 48, .05), 0 6px 18px -8px rgba(11, 26, 48, .14);
    --g-shadow-lg: 0 18px 48px -18px rgba(11, 26, 48, .32);

    --g-gutter: 16px;
    --g-container: 1280px;
    --g-header-h: 0px;
    --g-ease: cubic-bezier(.2, .7, .2, 1);
    --g-focus: 0 0 0 3px rgba(10, 102, 194, .32);
}
@media (min-width: 768px) {
    :root { --g-gutter: 24px; }
}

/* ------------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body.g-body {
    margin: 0;
    font-family: var(--g-font);
    font-size: var(--g-fs-base);
    line-height: 1.6;
    color: var(--g-text);
    background: var(--g-surface);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
body.g-body.is-locked { overflow: hidden; }
.g-body h1, .g-body h2, .g-body h3, .g-body h4, .g-body h5, .g-body h6 {
    font-family: var(--g-font);
    color: var(--g-ink);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-transform: none;
}
.g-body a { color: var(--g-accent); text-decoration: none; }
.g-body a:hover { color: var(--g-accent-600); }
.g-body img { max-width: 100%; height: auto; }
.g-body ::selection { background: var(--g-accent-100); }
.g-body :focus { outline: none; }
.g-body :focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; box-shadow: none; }
.g-body button { font-family: inherit; }
.g-icon {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
}
.g-skip {
    position: absolute; left: 12px; top: -48px; z-index: 2000;
    background: var(--g-ink); color: #fff !important; padding: 10px 16px; border-radius: var(--g-r-sm);
}
.g-skip:focus { top: 12px; }
.g-main { display: block; min-height: 40vh; }
.g-container { width: 100%; max-width: calc(var(--g-container) + 2 * var(--g-gutter)); margin: 0 auto; padding: 0 var(--g-gutter); }
.g-muted { color: var(--g-muted); }
.g-num, .g-price { font-variant-numeric: tabular-nums; }
.g-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--g-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--g-accent);
}
.g-stack > * + * { margin-top: 12px; }
@media (max-width: 575.98px) { .g-hide-sm { display: none !important; } }
@media (max-width: 767.98px) { .g-hide-md { display: none !important; } }
@media (max-width: 991.98px) { .g-hide-lg { display: none !important; } }
@media (min-width: 992px) { .g-show-lg { display: none !important; } }

/* ---------------------------------------------------------------- buttons */
.g-btn {
    --b-bg: var(--g-surface); --b-fg: var(--g-ink); --b-bd: var(--g-line-strong);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    font: 600 var(--g-fs-base)/1.2 var(--g-font);
    color: var(--b-fg) !important; background: var(--b-bg);
    border: 1px solid var(--b-bd); border-radius: var(--g-r-sm);
    cursor: pointer; white-space: nowrap; text-decoration: none !important;
    transition: background-color .15s var(--g-ease), border-color .15s var(--g-ease), color .15s, box-shadow .15s;
}
.g-btn .g-icon { width: 18px; height: 18px; }
.g-btn:hover { --b-bg: var(--g-surface-2); --b-bd: var(--g-subtle); }
.g-btn:focus-visible { box-shadow: var(--g-focus); outline: none; }
.g-btn--primary { --b-bg: var(--g-accent); --b-fg: #fff; --b-bd: var(--g-accent); }
.g-btn--primary:hover { --b-bg: var(--g-accent-600); --b-bd: var(--g-accent-600); }
.g-btn--dark { --b-bg: var(--g-ink); --b-fg: #fff; --b-bd: var(--g-ink); }
.g-btn--dark:hover { --b-bg: var(--g-navy-700); --b-bd: var(--g-navy-700); }
.g-btn--secondary { --b-bg: var(--g-surface); --b-fg: var(--g-ink); --b-bd: var(--g-line-strong); }
.g-btn--soft { --b-bg: var(--g-accent-50); --b-fg: var(--g-accent-600); --b-bd: transparent; }
.g-btn--soft:hover { --b-bg: var(--g-accent-100); --b-bd: transparent; }
.g-btn--danger { --b-bg: var(--g-danger); --b-fg: #fff; --b-bd: var(--g-danger); }
.g-btn--danger:hover { --b-bg: #a42c23; --b-bd: #a42c23; }
.g-btn--light { --b-bg: #fff; --b-fg: var(--g-ink); --b-bd: #fff; }
.g-btn--light:hover { --b-bg: #eef3f9; --b-bd: #eef3f9; }
.g-btn--ghost-light { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .38); }
.g-btn--ghost-light:hover { --b-bg: rgba(255, 255, 255, .08); --b-bd: rgba(255, 255, 255, .7); }
.g-btn--sm { min-height: 36px; padding: 0 12px; font-size: var(--g-fs-sm); }
.g-btn--lg { min-height: 52px; padding: 0 24px; font-size: var(--g-fs-md); }
.g-btn--block { display: flex; width: 100%; }
.g-btn[disabled], .g-btn.is-disabled, .g-btn.btn-disabled { opacity: .5; pointer-events: none; }
.g-btn.button-loading, .button-loading { position: relative; color: transparent !important; pointer-events: none; }
.g-btn.button-loading > *, .button-loading > * { visibility: hidden; }
.g-btn.button-loading::after, .button-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    color: var(--b-fg, var(--g-accent)); animation: g-spin .7s linear infinite; visibility: visible;
}
.g-btn--primary.button-loading::after, .g-btn--dark.button-loading::after { color: #fff; }
@keyframes g-spin { to { transform: rotate(360deg); } }

.g-iconbtn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--g-r-sm);
    background: transparent; color: var(--g-ink) !important; cursor: pointer;
    transition: background-color .15s;
}
.g-iconbtn:hover { background: var(--g-surface-2); }
.g-iconbtn .g-icon { width: 22px; height: 22px; }
.g-badge {
    position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    color: #fff; background: var(--g-accent); border-radius: 9px; border: 2px solid #fff; box-sizing: content-box;
}
.g-badge[hidden] { display: none; }
.g-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--g-fs-sm); }
.g-link-arrow .g-icon { width: 16px; height: 16px; transition: transform .15s var(--g-ease); }
.g-link-arrow:hover .g-icon { transform: translateX(3px); }

/* ----------------------------------------------------------------- inputs */
.g-input, .g-select, .g-textarea {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px;
    font: 400 var(--g-fs-base)/1.4 var(--g-font); color: var(--g-text);
    background: var(--g-surface); border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm);
    transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
.g-textarea { min-height: 120px; resize: vertical; }
.g-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627186' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}
.g-input:hover, .g-select:hover, .g-textarea:hover { border-color: var(--g-subtle); }
.g-input:focus, .g-select:focus, .g-textarea:focus { border-color: var(--g-accent); box-shadow: var(--g-focus); outline: none; }
.g-input.is-invalid, .g-textarea.is-invalid, .g-select.is-invalid { border-color: var(--g-danger); }
.g-field { display: flex; flex-direction: column; gap: 6px; }
.g-field > label, .g-label { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-text-2); margin: 0; }
.g-field .g-req { color: var(--g-danger); }
.g-field__hint { font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-field__error { font-size: var(--g-fs-xs); color: var(--g-danger); }
.g-form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-form-grid--2 { grid-template-columns: 1fr 1fr; } .g-form-grid .g-span-2 { grid-column: span 2; } }
.g-inline-field { display: flex; gap: 8px; }
.g-inline-field .g-input { flex: 1; min-width: 0; }
.g-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--g-fs-sm); color: var(--g-text-2); margin: 0; }
.g-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--g-accent); flex: none; }
.g-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm); background: #fff; height: 44px; }
.g-qty button { width: 40px; border: 0; background: transparent; color: var(--g-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-qty button:hover { background: var(--g-surface-2); }
.g-qty button .g-icon { width: 16px; height: 16px; }
.g-qty input { width: 48px; border: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--g-ink); -moz-appearance: textfield; background: transparent; }
.g-qty input::-webkit-outer-spin-button, .g-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.g-qty--sm { height: 36px; }
.g-qty--sm button { width: 32px; }
.g-qty--sm input { width: 36px; }

/* ------------------------------------------------------------ notes/chips */
.g-note { padding: 10px 12px; border-radius: var(--g-r-sm); font-size: var(--g-fs-sm); background: var(--g-surface-2); color: var(--g-text-2); border: 1px solid var(--g-line); }
.g-note--success { background: var(--g-success-50); color: var(--g-success); border-color: transparent; }
.g-note--danger { background: var(--g-danger-50); color: var(--g-danger); border-color: transparent; }
.g-note--info { background: var(--g-accent-50); color: var(--g-accent-600); border-color: transparent; }
.g-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
    font-size: var(--g-fs-xs); font-weight: 600; border-radius: 12px; white-space: nowrap;
    background: var(--g-surface-2); color: var(--g-text-2); border: 1px solid var(--g-line);
}
.g-pill--success { background: var(--g-success-50); color: var(--g-success); border-color: transparent; }
.g-pill--warning { background: var(--g-warning-50); color: var(--g-warning); border-color: transparent; }
.g-pill--danger { background: var(--g-danger-50); color: var(--g-danger); border-color: transparent; }
.g-pill--accent { background: var(--g-accent-50); color: var(--g-accent-600); border-color: transparent; }
.g-pill--dark { background: var(--g-ink); color: #fff; border-color: transparent; }
.g-pill .g-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.g-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px 0 12px;
    font-size: var(--g-fs-sm); color: var(--g-ink) !important; background: var(--g-accent-50);
    border: 1px solid var(--g-accent-100); border-radius: 16px;
}
.g-chip .g-icon { width: 16px; height: 16px; color: var(--g-accent-600); }
.g-chip:hover { background: var(--g-accent-100); }

/* ---------------------------------------------------------------- toasts */
.g-toasts { position: fixed; z-index: 1100; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.g-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 380px;
    padding: 12px 12px 12px 14px; background: var(--g-ink); color: #fff; border-radius: var(--g-r);
    box-shadow: var(--g-shadow-lg); font-size: var(--g-fs-sm); animation: g-toast-in .25s var(--g-ease);
}
.g-toast .g-icon { width: 20px; height: 20px; margin-top: 1px; }
.g-toast--success .g-toast__icon { color: #6fe0a5; }
.g-toast--danger .g-toast__icon { color: #ff9b92; }
.g-toast__msg { flex: 1; }
.g-toast__msg a { color: #9cc9f5; font-weight: 600; }
.g-toast__close { border: 0; background: none; color: rgba(255, 255, 255, .7); padding: 0; cursor: pointer; display: inline-flex; }
.g-toast__close .g-icon { width: 18px; height: 18px; }
@keyframes g-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .g-toasts { left: auto; bottom: 24px; right: 24px; } }

/* ----------------------------------------------------------------- header */
.g-header { position: relative; z-index: 1000; background: var(--g-surface); }
.g-header.is-sticky { position: sticky; top: 0; }
.g-header.is-scrolled { box-shadow: 0 1px 0 var(--g-line), 0 8px 24px -16px rgba(11, 26, 48, .25); }
.g-header.is-scrolled .g-topbar { display: none; }
.g-topbar { background: var(--g-navy-900); color: #c6d1df; font-size: var(--g-fs-xs); }
.g-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.g-topbar ul { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.g-topbar a, .g-topbar span { color: #c6d1df; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.g-topbar a:hover { color: #fff; }
.g-topbar .g-icon { width: 15px; height: 15px; opacity: .8; }
.g-topbar__contacts li:last-child span span { overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.g-currency { gap: 2px !important; display: inline-flex; padding: 2px; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.g-currency a { padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.g-currency a.is-active { background: rgba(255, 255, 255, .14); color: #fff; }

.g-mainbar { border-bottom: 1px solid var(--g-line); }
.g-mainbar__inner { display: flex; align-items: center; gap: 12px; min-height: 64px; }
@media (min-width: 992px) { .g-mainbar__inner { gap: 28px; min-height: 80px; } }
.g-logo { display: inline-flex; align-items: center; flex: none; }
.g-logo img { display: block; height: 38px; width: auto; }
@media (min-width: 992px) { .g-logo img { height: 46px; } }
.g-logo__text { font-weight: 800; font-size: 24px; color: var(--g-ink); letter-spacing: .02em; }

.g-search { position: relative; flex: 1; min-width: 0; order: 10; flex-basis: 100%; margin: 0 0 10px; }
@media (min-width: 992px) { .g-search { order: 0; flex-basis: auto; margin: 0; max-width: 680px; } }
.g-mainbar__inner { flex-wrap: wrap; }
@media (min-width: 992px) { .g-mainbar__inner { flex-wrap: nowrap; } }
.g-search__field { position: relative; display: flex; align-items: center; height: 46px; background: var(--g-surface-2); border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.g-search__field:focus-within { background: #fff; border-color: var(--g-accent); box-shadow: var(--g-focus); }
.g-search__icon { position: absolute; left: 12px; color: var(--g-muted); pointer-events: none; }
.g-search__input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 42px; border: 0; background: transparent; font: inherit; color: var(--g-text); }
.g-search__input::placeholder { color: var(--g-subtle); }
.g-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.g-search__input:focus { outline: none; }
.g-search__submit { align-self: stretch; margin: 4px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--g-ink); color: #fff; font-weight: 600; font-size: var(--g-fs-sm); cursor: pointer; }
.g-search__submit:hover { background: var(--g-navy-700); }
.g-search__results {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
    max-height: min(70vh, 560px); overflow: auto; background: #fff;
    border: 1px solid var(--g-line); border-radius: var(--g-r); box-shadow: var(--g-shadow-lg); padding: 6px;
}
.g-suggest__label { padding: 8px 10px 4px; font-size: var(--g-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--g-subtle); }
.g-suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--g-r-sm); color: var(--g-text) !important; }
.g-suggest__item[aria-selected="true"], .g-suggest__item:hover { background: var(--g-accent-50); }
.g-suggest__img { width: 44px; height: 44px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--g-line); border-radius: 6px; padding: 2px; }
.g-suggest__catico { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--g-surface-2); border-radius: 6px; color: var(--g-accent-600); }
.g-suggest__name { flex: 1; min-width: 0; font-size: var(--g-fs-sm); font-weight: 500; line-height: 1.35; }
.g-suggest__name mark { padding: 0; background: none; color: var(--g-accent-600); font-weight: 700; }
.g-suggest__meta { display: block; font-size: var(--g-fs-xs); color: var(--g-muted); font-weight: 400; }
.g-suggest__price { font-size: var(--g-fs-sm); font-weight: 700; white-space: nowrap; color: var(--g-ink); }
.g-suggest__price.is-request { font-weight: 500; color: var(--g-muted); font-size: var(--g-fs-xs); }
.g-suggest__all { display: flex; justify-content: center; gap: 6px; margin-top: 4px; padding: 10px; border-top: 1px solid var(--g-line); font-weight: 600; font-size: var(--g-fs-sm); }
.g-suggest__empty { padding: 18px 12px; text-align: center; color: var(--g-muted); font-size: var(--g-fs-sm); }

.g-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 992px) { .g-actions { margin-left: 0; gap: 4px; } }
.g-consult { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; padding-right: 16px; border-right: 1px solid var(--g-line); color: var(--g-ink) !important; }
.g-consult__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--g-accent-50); color: var(--g-accent); }
.g-consult__text { display: flex; flex-direction: column; line-height: 1.2; }
.g-consult__text small { font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-consult__text strong { font-size: var(--g-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }

.g-navbar { border-bottom: 1px solid var(--g-line); background: #fff; }
.g-navbar__inner { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.g-navbar__menu { flex: 1; min-width: 0; }
.g-navbar__cta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--g-r-sm); font-weight: 600; font-size: var(--g-fs-sm); color: var(--g-accent-600) !important; background: var(--g-accent-50); white-space: nowrap; }
.g-navbar__cta:hover { background: var(--g-accent-100); }
.g-navbar__cta .g-icon { width: 18px; height: 18px; }

.g-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.g-menu__item { position: relative; }
.g-menu__link { display: inline-flex; align-items: center; gap: 4px; height: 52px; padding: 0 12px; font-weight: 500; font-size: var(--g-fs-sm); color: var(--g-text-2) !important; white-space: nowrap; }
.g-menu__link:hover, .g-menu__item.is-active > .g-menu__link { color: var(--g-ink) !important; }
.g-menu__item.is-active > .g-menu__link { box-shadow: inset 0 -2px 0 var(--g-accent); }
.g-menu__caret { width: 14px !important; height: 14px !important; opacity: .7; }
.g-menu__dropdown {
    position: absolute; top: 100%; left: 0; z-index: 40; min-width: 220px; padding: 6px;
    background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r); box-shadow: var(--g-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.g-menu__item:hover > .g-menu__dropdown, .g-menu__item:focus-within > .g-menu__dropdown { opacity: 1; visibility: visible; transform: none; }
.g-menu__dropdown ul { list-style: none; margin: 0; padding: 0; }
.g-menu__sublink { display: block; padding: 8px 10px; border-radius: var(--g-r-sm); font-size: var(--g-fs-sm); color: var(--g-text-2) !important; }
.g-menu__sublink:hover { background: var(--g-surface-2); color: var(--g-ink) !important; }
.g-menu__subitem ul { padding-left: 10px !important; }
.g-menu--vertical { flex-direction: column; align-items: stretch; gap: 0; }
.g-menu--vertical .g-menu__link { height: auto; padding: 12px 4px; font-size: var(--g-fs-base); color: var(--g-ink) !important; border-bottom: 1px solid var(--g-line); width: 100%; }
.g-menu--vertical .g-menu__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
.g-menu--vertical .g-menu__item.is-active > .g-menu__link { box-shadow: none; color: var(--g-accent) !important; }

/* mega menu */
.g-mega { position: static; }
.g-mega__toggle {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 12px; margin-right: 8px;
    font-weight: 600; font-size: var(--g-fs-sm); color: #fff; background: var(--g-ink); border: 0; border-radius: var(--g-r-sm); cursor: pointer;
}
.g-mega__toggle:hover, .g-mega.is-open .g-mega__toggle { background: var(--g-navy-700); }
.g-mega__toggle .g-icon { width: 18px; height: 18px; }
.g-mega__caret { transition: transform .2s; }
.g-mega.is-open .g-mega__caret { transform: rotate(180deg); }
.g-mega__panel {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 50;
    width: min(var(--g-container), calc(100vw - 2 * var(--g-gutter)));
    display: grid; grid-template-columns: 300px 1fr; min-height: 360px;
    background: #fff; border: 1px solid var(--g-line); border-top: 0; border-radius: 0 0 var(--g-r-lg) var(--g-r-lg); box-shadow: var(--g-shadow-lg); overflow: hidden;
}
.g-mega__panel[hidden] { display: none; }
.g-mega__roots { margin: 0; padding: 8px; list-style: none; background: var(--g-surface-2); border-right: 1px solid var(--g-line); }
.g-mega__root { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--g-r-sm); color: var(--g-text) !important; font-size: var(--g-fs-sm); font-weight: 500; }
.g-mega__root.is-active { background: #fff; color: var(--g-ink) !important; box-shadow: var(--g-shadow-sm); }
.g-mega__root-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; flex: none; border-radius: 8px; background: #fff; color: var(--g-accent-600); border: 1px solid var(--g-line); font-size: 18px; }
.g-mega__root.is-active .g-mega__root-icon { background: var(--g-accent-50); border-color: transparent; }
.g-mega__root-icon .g-icon { width: 18px; height: 18px; }
.g-mega__root-name { flex: 1; }
.g-mega__root-caret { width: 16px !important; height: 16px !important; color: var(--g-subtle); }
.g-mega__pane { display: none; position: relative; padding: 24px 28px; padding-right: 230px; }
.g-mega__pane.is-active { display: block; }
.g-mega__pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--g-line); }
.g-mega__pane-title { font-size: var(--g-fs-lg); font-weight: 650; color: var(--g-ink) !important; }
.g-mega__children { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.g-mega__children a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--g-r-sm); color: var(--g-text) !important; font-size: var(--g-fs-sm); }
.g-mega__children a:hover { background: var(--g-surface-2); }
.g-mega__child-icon { color: var(--g-accent-600); display: inline-flex; }
.g-mega__child-icon .g-icon { width: 18px; height: 18px; }
.g-mega__pane-img { position: absolute; right: 28px; top: 24px; width: 180px; height: 200px; object-fit: contain; background: var(--g-surface-2); border-radius: var(--g-r); padding: 12px; }
.g-mega__empty { margin: 0; }

/* drawers */
.g-drawer { position: fixed; inset: 0; z-index: 1050; }
.g-drawer[hidden] { display: none; }
.g-drawer__backdrop { position: absolute; inset: 0; background: rgba(11, 26, 48, .48); animation: g-fade .2s; }
.g-drawer__panel {
    position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); display: flex; flex-direction: column;
    background: #fff; box-shadow: var(--g-shadow-lg); animation: g-slide-r .25s var(--g-ease);
}
.g-drawer--left .g-drawer__panel { left: 0; animation-name: g-slide-l; width: min(360px, 88vw); }
.g-drawer--right .g-drawer__panel { right: 0; }
.g-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--g-line); }
.g-drawer__title { font-weight: 650; font-size: var(--g-fs-md); color: var(--g-ink); }
.g-drawer__body { flex: 1; overflow: auto; padding: 16px 20px 24px; -webkit-overflow-scrolling: touch; }
.g-drawer__label { margin: 0 0 6px; font-size: var(--g-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--g-subtle); }
.g-drawer__menu { margin: 16px 0; }
.g-drawer__links { list-style: none; margin: 0 0 16px; padding: 0; }
.g-drawer__links a { display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--g-text) !important; border-bottom: 1px solid var(--g-line); }
.g-drawer__links .g-icon { color: var(--g-muted); }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-slide-r { from { transform: translateX(100%); } }
@keyframes g-slide-l { from { transform: translateX(-100%); } }

.g-accordion { list-style: none; margin: 0; padding: 0; }
.g-accordion__item { border-bottom: 1px solid var(--g-line); }
.g-accordion__row { display: flex; align-items: center; }
.g-accordion__row > a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 0; color: var(--g-ink) !important; font-weight: 500; }
.g-accordion__icon { display: inline-flex; color: var(--g-accent-600); }
.g-accordion__toggle { width: 44px; height: 44px; border: 0; background: none; color: var(--g-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-accordion__toggle .g-icon { transition: transform .2s; }
.g-accordion__toggle[aria-expanded="true"] .g-icon { transform: rotate(180deg); }
.g-accordion__panel { list-style: none; margin: 0; padding: 0 0 10px 32px; }
.g-accordion__panel a { display: block; padding: 7px 0; color: var(--g-text-2) !important; font-size: var(--g-fs-sm); }

/* modal (bootstrap) */
.g-modal .modal-content { border: 0; border-radius: var(--g-r-lg); box-shadow: var(--g-shadow-lg); overflow: hidden; }
.g-modal__body { padding: 28px; }
.g-modal__title { font-size: var(--g-fs-lg); margin: 0 0 6px; }
.g-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--g-surface-2); color: var(--g-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.g-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.modal-backdrop.show { opacity: .5; background: var(--g-ink); }

.g-totop { position: fixed; right: 16px; bottom: 16px; z-index: 900; width: 44px; height: 44px; border: 1px solid var(--g-line); border-radius: 50%; background: #fff; color: var(--g-ink); box-shadow: var(--g-shadow); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-totop[hidden] { display: none; }
.g-totop .g-icon { transform: rotate(180deg); }

/* --------------------------------------------------------------- page head */
.g-pagehead { background: var(--g-bg); border-bottom: 1px solid var(--g-line); padding: 18px 0 22px; }
.g-pagehead__title { margin: 6px 0 0; font-size: var(--g-fs-2xl); }
.g-pagehead__sub { margin: 6px 0 0; color: var(--g-muted); max-width: 70ch; }
.g-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; padding: 0; list-style: none; font-size: var(--g-fs-sm); }
.g-breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--g-muted); min-width: 0; }
.g-breadcrumbs a { color: var(--g-muted); }
.g-breadcrumbs a:hover { color: var(--g-accent); }
.g-breadcrumbs .g-icon { width: 14px; height: 14px; color: var(--g-subtle); }
.g-breadcrumbs li[aria-current] span { color: var(--g-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* ---------------------------------------------------------------- sections */
.g-section { padding: 40px 0; }
@media (min-width: 992px) { .g-section { padding: 64px 0; } }
.g-section--tint { background: var(--g-bg); }
.g-section--tight { padding: 28px 0; }
.g-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.g-section__title { margin: 4px 0 0; font-size: var(--g-fs-xl); }
.g-section__sub { margin: 6px 0 0; color: var(--g-muted); max-width: 62ch; }

/* ----------------------------------------------------------- product card */
.g-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .g-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.g-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-r);
    transition: border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);
}
.g-card:hover { border-color: var(--g-line-strong); box-shadow: var(--g-shadow); }
.g-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; border-radius: var(--g-r) var(--g-r) 0 0; overflow: hidden; }
.g-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .35s var(--g-ease); }
.g-card:hover .g-card__media img { transform: scale(1.035); }
.g-card__labels { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.g-card__tools { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.g-card__tool {
    width: 34px; height: 34px; border: 1px solid var(--g-line); border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--g-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s, opacity .15s;
}
.g-card__tool .g-icon { width: 17px; height: 17px; }
.g-card__tool:hover { color: var(--g-accent); border-color: var(--g-accent-100); }
.g-card__tool.active, .g-card__tool.js-remove-from-wishlist-button { color: var(--g-danger); }
.g-card__tool.active .g-icon, .g-card__tool.js-remove-from-wishlist-button .g-icon { fill: currentColor; }
@media (hover: hover) and (min-width: 992px) {
    .g-card__tools .g-card__tool { opacity: 0; }
    .g-card:hover .g-card__tool, .g-card__tool:focus-visible, .g-card__tool.active { opacity: 1; }
}
.g-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 12px 14px 14px; border-top: 1px solid var(--g-line); }
.g-card__brand { font-size: var(--g-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--g-muted); }
.g-card__title { margin: 0; font-size: var(--g-fs-sm); font-weight: 600; line-height: 1.4; }
.g-card__title a { color: var(--g-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.g-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--g-r); }
.g-card__title a:hover { color: var(--g-accent); }
.g-card__sku { font-size: var(--g-fs-xs); color: var(--g-subtle); font-variant-numeric: tabular-nums; }
.g-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.g-card__cta { position: relative; z-index: 2; flex: none; }
.g-price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.g-price__now { font-size: var(--g-fs-md); font-weight: 700; color: var(--g-ink); }
.g-price__old { font-size: var(--g-fs-xs); color: var(--g-subtle); text-decoration: line-through; }
.g-price__request { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-text-2); line-height: 1.3; }
.g-price__request small { display: block; font-weight: 400; color: var(--g-muted); font-size: var(--g-fs-xs); }
.g-price--sale .g-price__now { color: var(--g-danger); }
.g-card__add {
    width: 40px; height: 40px; border: 0; border-radius: var(--g-r-sm); background: var(--g-ink); color: #fff !important;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s;
}
.g-card__add:hover { background: var(--g-accent); }
.g-card__add .g-icon { width: 20px; height: 20px; }
.g-card__add.active { background: var(--g-success); }
.g-card__ask { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--g-r-sm); font-size: var(--g-fs-xs); font-weight: 600; color: var(--g-accent-600) !important; background: var(--g-accent-50); white-space: nowrap; }
.g-card__ask:hover { background: var(--g-accent-100); }
.g-card__ask .g-icon { width: 16px; height: 16px; }
@media (max-width: 400px) {
    .g-card__body { padding: 10px 10px 12px; }
    .g-card__ask span { display: none; }
    .g-card__ask { width: 36px; padding: 0; justify-content: center; }
}

/* horizontal list card (catalog list view / wishlist) */
.g-grid.is-list { grid-template-columns: 1fr; }
.g-grid.is-list .g-card { flex-direction: row; }
.g-grid.is-list .g-card__media { width: 160px; flex: none; aspect-ratio: auto; border-radius: var(--g-r) 0 0 var(--g-r); }
.g-grid.is-list .g-card__body { border-top: 0; border-left: 1px solid var(--g-line); padding: 16px 20px; }
.g-grid.is-list .g-card__title a { min-height: 0; }
@media (max-width: 575.98px) { .g-grid.is-list .g-card__media { width: 110px; } }

/* rails (horizontal scroll-snap lists) */
.g-rail { position: relative; }
.g-rail__track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2); gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
    padding-bottom: 6px; scrollbar-width: none;
}
.g-rail__track::-webkit-scrollbar { display: none; }
.g-rail__track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px) { .g-rail__track { gap: 16px; grid-auto-columns: calc((100% - 32px) / 3); } }
@media (min-width: 1200px) { .g-rail__track { grid-auto-columns: calc((100% - 48px) / 4); } .g-rail--5 .g-rail__track { grid-auto-columns: calc((100% - 64px) / 5); } }
.g-rail__nav { display: none; gap: 6px; }
@media (min-width: 768px) { .g-rail__nav { display: inline-flex; } }
.g-rail__btn { width: 38px; height: 38px; border: 1px solid var(--g-line-strong); border-radius: 50%; background: #fff; color: var(--g-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.g-rail__btn:hover:not([disabled]) { border-color: var(--g-ink); }
.g-rail__btn[disabled] { opacity: .35; cursor: default; }
.g-rail__btn .g-icon { width: 18px; height: 18px; }

/* -------------------------------------------------------------- homepage */
.g-hero { position: relative; overflow: hidden; color: #fff; background: var(--g-navy-900); isolation: isolate; }
.g-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(900px 420px at 85% 20%, rgba(43, 179, 214, .18), transparent 60%),
        linear-gradient(180deg, var(--g-navy-900), #0e2342);
}
.g-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 55%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.g-hero__inner { display: grid; gap: 32px; padding: 36px 0 40px; align-items: center; }
@media (min-width: 992px) { .g-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; padding: 56px 0 60px; } }
.g-hero .g-eyebrow { color: #8fd3ea; }
.g-hero__title { margin: 12px 0 14px; color: #fff !important; font-size: var(--g-fs-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; max-width: 18ch; }
.g-hero__text { margin: 0; color: #c6d1df; font-size: var(--g-fs-md); max-width: 54ch; }
.g-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.g-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.g-hero__chips a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; font-size: var(--g-fs-sm); color: #dbe4ee !important; border: 1px solid rgba(255, 255, 255, .16); border-radius: 17px; background: rgba(255, 255, 255, .04); }
.g-hero__chips a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.g-hero__chips .g-icon { width: 16px; height: 16px; color: #8fd3ea; }
.g-hero__visual { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 300px; }
@media (min-width: 992px) { .g-hero__visual { min-height: 400px; } }
.g-hero__tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px;
    background: #fff; border-radius: var(--g-r-lg); overflow: hidden; color: var(--g-ink) !important;
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6); transition: transform .25s var(--g-ease);
}
.g-hero__tile:hover { transform: translateY(-3px); }
.g-hero__tile img { position: absolute; inset: 10px 10px 44px; width: calc(100% - 20px); height: calc(100% - 54px); object-fit: contain; }
.g-hero__tile span { position: relative; font-size: var(--g-fs-xs); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-hero__tile:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.g-hero__tile:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 2; }
.g-hero__tile:nth-child(3) { grid-column: 4 / 6; }
.g-hero__tile:nth-child(4) { grid-column: 6 / 7; grid-row: 2 / 3; }
.g-hero__tile:nth-child(1) span { font-size: var(--g-fs-sm); }
.g-hero__tile:nth-child(4) span { display: none; }
.g-hero__tile:nth-child(4) img { inset: 8px; height: calc(100% - 16px); width: calc(100% - 16px); }
@media (max-width: 575.98px) { .g-hero__visual { min-height: 240px; gap: 8px; } }

.g-trust { border-bottom: 1px solid var(--g-line); background: #fff; }
.g-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .g-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g-trust__item { display: flex; align-items: flex-start; gap: 12px; padding: 18px 12px; }
@media (min-width: 992px) { .g-trust__item { padding: 22px 20px; } .g-trust__item + .g-trust__item { border-left: 1px solid var(--g-line); } }
.g-trust__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; flex: none; border-radius: 10px; background: var(--g-accent-50); color: var(--g-accent-600); }
.g-trust__title { margin: 0; font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-ink); }
.g-trust__text { margin: 2px 0 0; font-size: var(--g-fs-xs); color: var(--g-muted); line-height: 1.45; }

.g-cats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .g-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .g-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-cats .g-cat__media { aspect-ratio: 16 / 8; } }
.g-cat {
    position: relative; display: flex; flex-direction: column; min-height: 100%;
    background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r); overflow: hidden; color: var(--g-ink) !important;
    transition: border-color .2s, box-shadow .2s;
}
.g-cat:hover { border-color: var(--g-line-strong); box-shadow: var(--g-shadow); }
.g-cat__media { position: relative; aspect-ratio: 16 / 10; background: var(--g-surface-2); display: flex; align-items: center; justify-content: center; }
.g-cat__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; transition: transform .3s var(--g-ease); }
.g-cat:hover .g-cat__media img { transform: scale(1.04); }
.g-cat__media .g-icon { width: 44px; height: 44px; color: var(--g-accent-600); stroke-width: 1.4; }
.g-cat__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; }
.g-cat__name { margin: 0; font-size: var(--g-fs-sm); font-weight: 650; line-height: 1.35; }
.g-cat__count { display: block; margin-top: 2px; font-size: var(--g-fs-xs); color: var(--g-muted); font-weight: 400; }
.g-cat__arrow { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--g-surface-2); color: var(--g-ink); transition: background-color .15s, color .15s; }
.g-cat__arrow .g-icon { width: 16px; height: 16px; }
.g-cat:hover .g-cat__arrow { background: var(--g-ink); color: #fff; }
.g-cat__subs { display: none; }
@media (min-width: 768px) {
    .g-cat__subs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -4px 14px 14px; padding: 0; list-style: none; font-size: var(--g-fs-xs); }
    .g-cat__subs li { color: var(--g-muted); }
}

.g-solutions { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-solutions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.g-solution { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r); color: var(--g-text) !important; transition: border-color .2s, box-shadow .2s; }
.g-solution:hover { border-color: var(--g-accent-100); box-shadow: var(--g-shadow); }
.g-solution__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: var(--g-ink); color: #fff; }
.g-solution__icon .g-icon { width: 22px; height: 22px; }
.g-solution__title { margin: 4px 0 0; font-size: var(--g-fs-md); }
.g-solution__text { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); line-height: 1.5; }
.g-solution__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }

.g-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .g-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .g-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.g-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 112px; padding: 16px; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r); transition: border-color .2s, box-shadow .2s; }
.g-brand:hover { border-color: var(--g-line-strong); box-shadow: var(--g-shadow); }
.g-brand img { max-height: 48px; max-width: 80%; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .78; transition: filter .2s, opacity .2s; }
.g-brand:hover img { filter: none; opacity: 1; }
.g-brand span { font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-brand strong { font-size: var(--g-fs-md); color: var(--g-ink); }

.g-b2b { display: grid; gap: 24px; padding: 28px; border-radius: var(--g-r-lg); background: var(--g-ink); color: #c6d1df; position: relative; overflow: hidden; isolation: isolate; }
.g-b2b::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 300px at 100% 0, rgba(43, 179, 214, .16), transparent 70%); }
@media (min-width: 992px) { .g-b2b { grid-template-columns: 1.1fr .9fr; padding: 44px; gap: 40px; align-items: center; } }
.g-b2b h2 { color: #fff !important; font-size: var(--g-fs-xl); margin: 8px 0 10px; }
.g-b2b .g-eyebrow { color: #8fd3ea; }
.g-b2b p { margin: 0; }
.g-b2b__steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.g-b2b__steps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--g-r); background: rgba(255, 255, 255, .03); counter-increment: step; }
.g-b2b__steps li::before { content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--g-fs-sm); background: rgba(143, 211, 234, .14); color: #8fd3ea; }
.g-b2b__steps strong { display: block; color: #fff; font-weight: 600; font-size: var(--g-fs-sm); }
.g-b2b__steps span { font-size: var(--g-fs-xs); }
.g-b2b__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.g-cta-band { background: var(--g-navy-800); color: #c6d1df; }
.g-cta-band__inner { display: flex; flex-direction: column; gap: 18px; padding: 32px var(--g-gutter); }
@media (min-width: 992px) { .g-cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 36px; padding-bottom: 36px; } }
.g-cta-band h2 { margin: 0 0 6px; color: #fff !important; font-size: var(--g-fs-lg); }
.g-cta-band p { margin: 0; font-size: var(--g-fs-sm); max-width: 62ch; }
.g-cta-band__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

/* ----------------------------------------------------------------- footer */
.g-footer { background: var(--g-navy-900); color: #aab7c8; font-size: var(--g-fs-sm); }
.g-footer__grid { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 40px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .g-footer__grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 40px; } }
.g-footer__logo img { height: 46px; width: auto; }
.g-footer__about { margin: 16px 0 0; line-height: 1.6; max-width: 40ch; }
.g-footer__title { margin: 0 0 14px; font-size: var(--g-fs-sm); font-weight: 650; color: #fff !important; letter-spacing: .01em; }
.g-footer__links, .g-footer__contact { list-style: none; margin: 0; padding: 0; }
.g-footer__links li + li { margin-top: 8px; }
.g-footer__links a, .g-footer__contact a { color: #aab7c8; }
.g-footer__links a:hover, .g-footer__contact a:hover { color: #fff; }
.g-footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.g-footer__contact li + li { margin-top: 10px; }
.g-footer__contact .g-icon { width: 18px; height: 18px; margin-top: 1px; color: #6f8aa8; }
.g-footer__social { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.g-footer__social a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #dbe4ee; border: 1px solid rgba(255, 255, 255, .14); }
.g-footer__social a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.g-footer__newsletter { margin-top: 20px; }
.g-footer__newsletter label { display: block; margin-bottom: 8px; color: #fff; font-weight: 600; }
.g-footer__newsletter .g-input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.g-footer__newsletter .g-input::placeholder { color: #7f91a8; }
.g-footer__newsletter .g-note { margin-top: 8px; }
.g-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
.g-footer__bottom-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
@media (min-width: 768px) { .g-footer__bottom-inner { flex-direction: row; justify-content: space-between; } }
.g-footer__copy { margin: 0; font-size: var(--g-fs-xs); }
.g-footer__payments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g-footer__payments img { height: 24px; width: auto; background: #fff; border-radius: 4px; padding: 2px 4px; }

/* ---------------------------------------------------------------- catalog */
.g-catalog { padding: 24px 0 48px; }
.g-catalog__layout { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .g-catalog__layout { grid-template-columns: 272px minmax(0, 1fr); gap: 32px; } }
.g-catalog__intro { margin: 0 0 18px; color: var(--g-text-2); max-width: 80ch; }
.g-subcats { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 18px; padding: 0 0 4px; list-style: none; scrollbar-width: thin; }
.g-subcats a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--g-line-strong); border-radius: 19px; white-space: nowrap; color: var(--g-ink) !important; font-size: var(--g-fs-sm); background: #fff; }
.g-subcats a:hover { border-color: var(--g-ink); }
.g-subcats .g-icon { width: 16px; height: 16px; color: var(--g-accent-600); }
.g-subcats small { color: var(--g-muted); }
.g-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--g-line); }
.g-toolbar__count { margin: 0; color: var(--g-muted); font-size: var(--g-fs-sm); }
.g-toolbar__count strong { color: var(--g-ink); }
.g-toolbar__controls { display: flex; align-items: center; gap: 8px; }
.g-toolbar__controls .g-select { min-height: 40px; width: auto; font-size: var(--g-fs-sm); }
.g-viewtoggle { display: inline-flex; border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm); overflow: hidden; }
.g-viewtoggle button { width: 40px; height: 38px; border: 0; background: #fff; color: var(--g-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-viewtoggle button[aria-pressed="true"] { background: var(--g-ink); color: #fff; }
.g-viewtoggle .g-icon { width: 18px; height: 18px; }
.g-filters-btn { display: inline-flex; }
@media (min-width: 992px) { .g-filters-btn { display: none; } }
.g-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.g-active-filters__reset { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-danger) !important; margin-left: 4px; }

.g-filters { display: none; }
@media (min-width: 992px) { .g-filters { display: block; position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow: auto; padding-right: 4px; scrollbar-width: thin; } }
.g-filters.is-open { display: block; position: fixed; inset: 0; z-index: 1060; background: #fff; overflow: auto; padding: 0; max-height: none; }
.g-filters__head { display: none; }
.g-filters.is-open .g-filters__head { display: flex; position: sticky; top: 0; z-index: 2; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 8px 0 20px; background: #fff; border-bottom: 1px solid var(--g-line); }
.g-filters.is-open .g-filters__body { padding: 8px 20px 100px; }
.g-filters__foot { display: none; }
.g-filters.is-open .g-filters__foot { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--g-line); }
.g-filters.is-open .g-filters__foot .g-btn { flex: 1; }
.g-fgroup { padding: 16px 0; border-bottom: 1px solid var(--g-line); }
.g-fgroup:first-child { padding-top: 0; }
.g-fgroup__title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: var(--g-fs-sm); font-weight: 650; color: var(--g-ink); }
.g-fcats, .g-fchecks { list-style: none; margin: 0; padding: 0; }
.g-fcats a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--g-r-sm); color: var(--g-text-2) !important; font-size: var(--g-fs-sm); }
.g-fcats a:hover { background: var(--g-surface-2); color: var(--g-ink) !important; }
.g-fcats a.is-active { background: var(--g-accent-50); color: var(--g-accent-600) !important; font-weight: 600; }
.g-fcats small { color: var(--g-subtle); font-variant-numeric: tabular-nums; }
.g-fcats ul { list-style: none; margin: 2px 0 4px; padding: 0 0 0 12px; border-left: 1px solid var(--g-line); }
.g-fchecks li + li { margin-top: 8px; }
.g-fchecks .g-check { width: 100%; }
.g-fchecks .g-check span { flex: 1; display: flex; justify-content: space-between; gap: 8px; }
.g-fchecks small { color: var(--g-subtle); }
.g-fchecks--scroll { max-height: 240px; overflow: auto; }
.g-frange { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.g-frange .g-input { min-height: 40px; font-size: var(--g-fs-sm); }
.g-frange span { color: var(--g-subtle); }
.g-fapply { margin-top: 10px; }

.g-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--g-line-strong); border-radius: var(--g-r-lg); background: var(--g-surface-2); }
.g-empty__icon { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--g-accent-600); border: 1px solid var(--g-line); }
.g-empty__icon .g-icon { width: 26px; height: 26px; }
.g-empty h2, .g-empty h3 { margin: 6px 0 0; font-size: var(--g-fs-lg); }
.g-empty p { margin: 0; color: var(--g-muted); max-width: 52ch; }
.g-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

.g-pagination { margin-top: 28px; display: flex; justify-content: center; }
.g-pagination .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.g-pagination .page-item .page-link, .g-pagination .page-item > span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm) !important; color: var(--g-ink); background: #fff; font-weight: 600; font-size: var(--g-fs-sm); margin: 0;
}
.g-pagination .page-item.active .page-link, .g-pagination .page-item.active > span { background: var(--g-ink); border-color: var(--g-ink); color: #fff; }
.g-pagination .page-item.disabled .page-link, .g-pagination .page-item.disabled > span { opacity: .45; }
.g-pagination .page-link:hover { border-color: var(--g-ink); color: var(--g-ink); }

.g-skeleton { position: relative; overflow: hidden; background: var(--g-surface-2); border-radius: var(--g-r-sm); }
.g-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: g-shimmer 1.2s infinite; }
@keyframes g-shimmer { to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- product */
.g-pdp { padding: 20px 0 48px; }
.g-pdp__top { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 992px) { .g-pdp__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; } }
.g-gallery { display: grid; gap: 12px; }
@media (min-width: 768px) { .g-gallery { grid-template-columns: 76px minmax(0, 1fr); } .g-gallery__thumbs { order: -1; flex-direction: column; } }
.g-gallery__main { position: relative; aspect-ratio: 1 / 1; background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); overflow: hidden; cursor: zoom-in; }
.g-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px; transition: transform .15s ease-out; transform-origin: var(--zx, 50%) var(--zy, 50%); }
.g-gallery__main.is-zoomed img { transform: scale(2); }
.g-gallery__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--g-line); border-radius: 50%; background: #fff; color: var(--g-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.g-gallery__labels { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.g-gallery__thumbs { display: flex; gap: 8px; overflow: auto; scrollbar-width: none; }
.g-gallery__thumbs::-webkit-scrollbar { display: none; }
.g-gallery__thumb { flex: none; width: 72px; height: 72px; padding: 4px; border: 1px solid var(--g-line); border-radius: var(--g-r-sm); background: #fff; cursor: pointer; }
.g-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.g-gallery__thumb[aria-current="true"], .g-gallery__thumb.active { border-color: var(--g-ink); box-shadow: inset 0 0 0 1px var(--g-ink); }
.g-lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: rgba(11, 26, 48, .92); padding: 56px 16px 16px; }
.g-lightbox[hidden] { display: none; }
.g-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: var(--g-r); }
.g-lightbox__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.g-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.g-lightbox__nav--prev { left: 12px; } .g-lightbox__nav--next { right: 12px; }

.g-buy__brand { display: inline-flex; align-items: center; gap: 8px; font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-muted) !important; }
.g-buy__brand img { height: 22px; width: auto; }
.g-buy__title { margin: 8px 0 10px; font-size: var(--g-fs-2xl); line-height: 1.2; }
.g-buy__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; padding: 0; list-style: none; font-size: var(--g-fs-sm); color: var(--g-muted); }
.g-buy__meta strong { color: var(--g-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-buy__box { padding: 20px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: var(--g-surface); }
@media (min-width: 992px) { .g-buy__box { padding: 24px; } }
.g-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.g-buy__price .g-price__now { font-size: var(--g-fs-2xl); }
.g-buy__price .g-price__old { font-size: var(--g-fs-md); }
.g-buy__request { display: flex; gap: 12px; align-items: flex-start; }
.g-buy__request-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; border-radius: 10px; background: var(--g-accent-50); color: var(--g-accent-600); }
.g-buy__request strong { display: block; font-size: var(--g-fs-lg); color: var(--g-ink); }
.g-buy__request p { margin: 2px 0 0; font-size: var(--g-fs-sm); color: var(--g-muted); }
.g-buy__stock { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-buy__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.g-buy__row .g-btn--primary, .g-buy__row .g-btn--dark { flex: 1 1 180px; }
.g-buy__secondary { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
.g-buy__secondary a, .g-buy__secondary button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font-size: var(--g-fs-sm); font-weight: 500; color: var(--g-text-2) !important; cursor: pointer; }
.g-buy__secondary a:hover, .g-buy__secondary button:hover { color: var(--g-accent) !important; }
.g-buy__secondary .g-icon { width: 18px; height: 18px; }
.g-buy__secondary .active .g-icon, .g-buy__secondary .js-remove-from-wishlist-button .g-icon { fill: var(--g-danger); color: var(--g-danger); }
.g-buy__msg { margin-top: 12px; }
.g-buy__excerpt { margin: 18px 0 0; color: var(--g-text-2); font-size: var(--g-fs-sm); }
.g-buy__excerpt > :last-child { margin-bottom: 0; }
.g-assure { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); overflow: hidden; }
.g-assure li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; font-size: var(--g-fs-sm); }
.g-assure li + li { border-top: 1px solid var(--g-line); }
.g-assure .g-icon { color: var(--g-accent-600); margin-top: 1px; }
.g-assure strong { display: block; color: var(--g-ink); font-weight: 600; }
.g-assure span { color: var(--g-muted); font-size: var(--g-fs-xs); }
.g-swatches { margin-top: 16px; }
.g-swatches .attribute-swatches-wrapper { margin-bottom: 12px; }
.g-swatches label.attribute-name { display: block; margin: 0 0 6px; font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-text-2); }
.g-swatches ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-swatches .attribute-swatch-item label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 40px; padding: 0 12px; margin: 0; border: 1px solid var(--g-line-strong); border-radius: var(--g-r-sm); cursor: pointer; font-size: var(--g-fs-sm); background: #fff; }
.g-swatches .attribute-swatch-item input { position: absolute; opacity: 0; pointer-events: none; }
.g-swatches .attribute-swatch-item input:checked + span, .g-swatches .attribute-swatch-item input:checked ~ span { font-weight: 700; }
.g-swatches .attribute-swatch-item label:has(input:checked) { border-color: var(--g-ink); box-shadow: inset 0 0 0 1px var(--g-ink); }
.g-swatches .attribute-swatch-item.pe-none { opacity: .4; }
.g-swatches .visual-swatch label { width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.g-swatches .visual-swatch label span { width: 26px; height: 26px; border-radius: 50%; display: block; }
.g-swatches select { max-width: 280px; }

.g-tabs { margin-top: 40px; }
.g-tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--g-line); overflow-x: auto; scrollbar-width: none; }
.g-tabs__list::-webkit-scrollbar { display: none; }
.g-tabs__tab { position: relative; flex: none; height: 48px; padding: 0 16px; border: 0; background: none; font-weight: 600; font-size: var(--g-fs-base); color: var(--g-muted); cursor: pointer; }
.g-tabs__tab[aria-selected="true"] { color: var(--g-ink); }
.g-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--g-accent); }
.g-tabs__tab small { margin-left: 4px; color: var(--g-subtle); font-weight: 500; }
.g-tabs__panel { padding: 24px 0 0; }
.g-tabs__panel[hidden] { display: none; }
.g-specs { width: 100%; max-width: 760px; border-collapse: collapse; font-size: var(--g-fs-sm); }
.g-specs th, .g-specs td { padding: 11px 14px; border-bottom: 1px solid var(--g-line); vertical-align: top; text-align: left; }
.g-specs th { width: 38%; font-weight: 500; color: var(--g-muted); background: var(--g-surface-2); }
.g-specs td { color: var(--g-ink); font-weight: 500; }
.g-specs tr:first-child th, .g-specs tr:first-child td { border-top: 1px solid var(--g-line); }
.g-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* rich text from the editor (product content, pages, posts) */
.g-prose { color: var(--g-text-2); max-width: 82ch; overflow-wrap: anywhere; }
.g-prose > :first-child { margin-top: 0; }
.g-prose h2, .g-prose h3, .g-prose h4 { margin: 1.6em 0 .6em; }
.g-prose h2 { font-size: var(--g-fs-xl); } .g-prose h3 { font-size: var(--g-fs-lg); } .g-prose h4 { font-size: var(--g-fs-md); }
.g-prose p, .g-prose ul, .g-prose ol { margin: 0 0 1em; }
.g-prose ul, .g-prose ol { padding-left: 1.25em; }
.g-prose li + li { margin-top: .35em; }
.g-prose img { border-radius: var(--g-r); height: auto !important; }
.g-prose table { width: 100% !important; max-width: 760px; border-collapse: collapse; margin: 0 0 1.25em; font-size: var(--g-fs-sm); display: block; overflow-x: auto; }
.g-prose table td, .g-prose table th { padding: 10px 14px; border: 1px solid var(--g-line); vertical-align: top; }
.g-prose table tr td:first-child { color: var(--g-muted); background: var(--g-surface-2); font-weight: 500; }
.g-prose a { text-decoration: underline; text-underline-offset: 2px; }
.g-prose iframe { max-width: 100%; border-radius: var(--g-r); }
.g-prose blockquote { margin: 0 0 1em; padding: 12px 18px; border-left: 3px solid var(--g-accent); background: var(--g-surface-2); border-radius: 0 var(--g-r-sm) var(--g-r-sm) 0; }

.g-reviews__summary { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.g-stars { position: relative; display: inline-block; width: 90px; height: 18px; background: linear-gradient(90deg, #d4dbe4 0 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cg%3E%3Cpath id='s' d='m9 1.5 2.2 4.6 5 .6-3.7 3.5.9 5L9 12.8l-4.4 2.4.9-5-3.7-3.5 5-.6Z'/%3E%3Cuse href='%23s' x='18'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='54'/%3E%3Cuse href='%23s' x='72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'%3E%3Cg%3E%3Cpath id='s' d='m9 1.5 2.2 4.6 5 .6-3.7 3.5.9 5L9 12.8l-4.4 2.4.9-5-3.7-3.5 5-.6Z'/%3E%3Cuse href='%23s' x='18'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='54'/%3E%3Cuse href='%23s' x='72'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.g-stars i { position: absolute; inset: 0 auto 0 0; background: #e3a008; }
.g-review { padding: 16px 0; border-bottom: 1px solid var(--g-line); }
.g-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: var(--g-fs-sm); }
.g-review__head strong { color: var(--g-ink); }
.g-review__head time { color: var(--g-subtle); font-size: var(--g-fs-xs); }
.g-review p { margin: 0; color: var(--g-text-2); font-size: var(--g-fs-sm); }
.g-rate { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.g-rate input { position: absolute; opacity: 0; pointer-events: none; }
.g-rate label { cursor: pointer; color: #cfd6df; margin: 0; padding: 2px; }
.g-rate label .g-icon { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.g-rate input:checked ~ label, .g-rate label:hover, .g-rate label:hover ~ label { color: #e3a008; }
.g-rate input:focus-visible + label { outline: 2px solid var(--g-accent); border-radius: 4px; }

/* sticky mobile buy bar */
.g-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; align-items: center; gap: 12px; padding: 10px var(--g-gutter) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--g-line); box-shadow: 0 -8px 24px -16px rgba(11, 26, 48, .3); transform: translateY(110%); transition: transform .25s var(--g-ease); }
.g-buybar.is-visible { transform: none; }
.g-buybar .g-price { flex: 1; min-width: 0; }
.g-buybar__name { font-size: var(--g-fs-xs); color: var(--g-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 992px) { .g-buybar { display: none; } }
body.has-buybar .g-totop { bottom: 84px; }

/* ------------------------------------------------------------------ cart */
.g-cartpage { padding: 24px 0 48px; }
.g-cartpage__layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .g-cartpage__layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } }
.g-lines { border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; }
.g-line { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
.g-line + .g-line { border-top: 1px solid var(--g-line); }
@media (min-width: 768px) { .g-line { grid-template-columns: 96px minmax(0, 1fr) auto auto auto; align-items: center; gap: 20px; padding: 18px 20px; } }
.g-line__img { width: 84px; height: 84px; border: 1px solid var(--g-line); border-radius: var(--g-r-sm); background: #fff; overflow: hidden; display: block; }
@media (min-width: 768px) { .g-line__img { width: 96px; height: 96px; } }
.g-line__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.g-line__name { font-weight: 600; color: var(--g-ink) !important; font-size: var(--g-fs-sm); line-height: 1.4; }
.g-line__opts { margin: 4px 0 0; font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-line__unit { font-size: var(--g-fs-xs); color: var(--g-muted); margin-top: 4px; }
.g-line__controls { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 768px) { .g-line__controls { display: contents; } }
.g-line__total { font-weight: 700; color: var(--g-ink); font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.g-line__remove { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--g-muted) !important; }
.g-line__remove:hover { background: var(--g-danger-50); color: var(--g-danger) !important; }
.g-line__remove .g-icon { width: 18px; height: 18px; }
.g-line.is-invalid { background: var(--g-warning-50); }
.g-cartpage__below { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 16px; }
.g-summary { position: sticky; top: 150px; padding: 20px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: var(--g-surface-2); }
.g-summary h2 { margin: 0 0 14px; font-size: var(--g-fs-md); }
.g-summary dl { margin: 0; }
.g-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--g-fs-sm); color: var(--g-text-2); }
.g-summary__row dd { margin: 0; font-weight: 600; color: var(--g-ink); font-variant-numeric: tabular-nums; }
.g-summary__row--total { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--g-line-strong); font-size: var(--g-fs-base); }
.g-summary__row--total dd { font-size: var(--g-fs-lg); }
.g-summary__note { margin: 8px 0 16px; font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-coupon { margin: 14px 0; }
.g-coupon .coupon-error-msg { font-size: var(--g-fs-xs); }

/* mini cart */
.g-mini { display: flex; flex-direction: column; min-height: 100%; }
.g-mini__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.g-mini__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--g-line); align-items: start; }
.g-mini__img { width: 64px; height: 64px; border: 1px solid var(--g-line); border-radius: var(--g-r-sm); background: #fff; display: block; }
.g-mini__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.g-mini__name { display: block; font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-ink) !important; line-height: 1.35; }
.g-mini__meta { margin-top: 4px; font-size: var(--g-fs-xs); color: var(--g-muted); font-variant-numeric: tabular-nums; }
.g-mini__meta strong { color: var(--g-ink); }
.g-mini__remove { color: var(--g-muted) !important; display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; }
.g-mini__remove:hover { background: var(--g-danger-50); color: var(--g-danger) !important; }
.g-mini__remove .g-icon { width: 16px; height: 16px; }
.g-mini__foot { position: sticky; bottom: -24px; margin: 16px -20px -24px; padding: 16px 20px 20px; background: #fff; border-top: 1px solid var(--g-line); }
.g-mini__total { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: var(--g-fs-sm); color: var(--g-text-2); }
.g-mini__total strong { color: var(--g-ink); font-size: var(--g-fs-md); font-variant-numeric: tabular-nums; }
.g-mini__buttons { display: grid; gap: 8px; margin-top: 12px; }

/* ----------------------------------------------------------------- quote */
.g-quote { padding: 24px 0 56px; }
.g-quote__layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .g-quote__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
.g-panel { padding: 20px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; }
@media (min-width: 768px) { .g-panel { padding: 28px; } }
.g-panel__title { margin: 0 0 4px; font-size: var(--g-fs-lg); }
.g-panel__sub { margin: 0 0 20px; color: var(--g-muted); font-size: var(--g-fs-sm); }
.g-quote__items { list-style: none; margin: 0 0 4px; padding: 0; border: 1px solid var(--g-line); border-radius: var(--g-r); }
.g-quote__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; }
.g-quote__item + .g-quote__item { border-top: 1px solid var(--g-line); }
.g-quote__item img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--g-line); border-radius: 6px; padding: 3px; background: #fff; }
.g-quote__item strong { font-size: var(--g-fs-sm); color: var(--g-ink); font-weight: 600; line-height: 1.35; }
.g-quote__item button { border: 0; background: none; color: var(--g-muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.g-quote__item button:hover { background: var(--g-danger-50); color: var(--g-danger); }
.g-quote__aside { display: grid; gap: 16px; }
.g-contactcard { padding: 20px; border-radius: var(--g-r-lg); background: var(--g-ink); color: #c6d1df; }
.g-contactcard h2 { color: #fff !important; font-size: var(--g-fs-md); margin: 0 0 12px; }
.g-contactcard ul { list-style: none; margin: 0; padding: 0; }
.g-contactcard li { display: flex; gap: 10px; padding: 8px 0; font-size: var(--g-fs-sm); }
.g-contactcard li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.g-contactcard a { color: #fff; }
.g-contactcard .g-icon { color: #8fd3ea; }
.g-checklist { list-style: none; margin: 0; padding: 0; }
.g-checklist li { display: flex; gap: 10px; padding: 6px 0; font-size: var(--g-fs-sm); color: var(--g-text-2); }
.g-checklist .g-icon { color: var(--g-success); width: 18px; height: 18px; margin-top: 2px; }
.g-success { text-align: center; padding: 40px 20px; }
.g-success__icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--g-success-50); color: var(--g-success); }
.g-success__icon .g-icon { width: 30px; height: 30px; }

/* ---------------------------------------------------------------- account */
.g-account { padding: 24px 0 56px; }
.g-account__layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 992px) { .g-account__layout { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; } }
.g-account__side { padding: 16px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; }
.g-account__user { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--g-line); }
.g-account__user strong { display: block; color: var(--g-ink); font-size: var(--g-fs-sm); line-height: 1.3; word-break: break-word; }
.g-account__user span { font-size: var(--g-fs-xs); color: var(--g-muted); word-break: break-all; }
.g-account__avatar { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--g-surface-2); }
.g-account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.g-account__avatar .mt-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 26, 48, .5); color: #fff; opacity: 0; transition: opacity .15s; }
.g-account__avatar:hover .mt-overlay { opacity: 1; }
.g-account__avatar .g-icon { width: 18px; height: 18px; }
.g-account__nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 992px) { .g-account__nav { flex-direction: column; overflow: visible; } }
.g-account__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--g-r-sm); color: var(--g-text-2) !important; font-size: var(--g-fs-sm); font-weight: 500; white-space: nowrap; }
.g-account__nav a:hover { background: var(--g-surface-2); color: var(--g-ink) !important; }
.g-account__nav a.is-active { background: var(--g-accent-50); color: var(--g-accent-600) !important; font-weight: 600; }
.g-account__nav .g-icon { width: 18px; height: 18px; }
.g-account__main .card, .g-account__main .g-panel { border: 1px solid var(--g-line); border-radius: var(--g-r-lg); }
.g-account__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.g-account__head h2 { margin: 0; font-size: var(--g-fs-lg); }
.g-kv { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
@media (min-width: 640px) { .g-kv { grid-template-columns: 180px 1fr; } }
.g-kv dt, .g-kv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--g-line); font-size: var(--g-fs-sm); }
.g-kv dt { color: var(--g-muted); font-weight: 500; }
@media (max-width: 639.98px) { .g-kv dt { padding-bottom: 0; border-bottom: 0; } }
.g-kv dd { color: var(--g-ink); font-weight: 500; word-break: break-word; }
.g-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 20px; }
.g-stat { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; color: var(--g-ink) !important; }
.g-stat:hover { border-color: var(--g-line-strong); }
.g-stat__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--g-accent-50); color: var(--g-accent-600); }
.g-stat strong { display: block; font-size: var(--g-fs-sm); }
.g-stat span { font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; }
.g-table { width: 100%; border-collapse: collapse; font-size: var(--g-fs-sm); }
.g-table th { padding: 12px 16px; text-align: left; font-size: var(--g-fs-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--g-muted); background: var(--g-surface-2); border-bottom: 1px solid var(--g-line); white-space: nowrap; }
.g-table td { padding: 14px 16px; border-bottom: 1px solid var(--g-line); vertical-align: middle; color: var(--g-text); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767.98px) {
    .g-table--stack thead { display: none; }
    .g-table--stack tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--g-line); }
    .g-table--stack tr:last-child { border-bottom: 0; }
    .g-table--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; }
    .g-table--stack td::before { content: attr(data-label); color: var(--g-muted); font-size: var(--g-fs-xs); text-align: left; }
    .g-table--stack .is-num { text-align: right; }
}
.g-auth { padding: 32px 0 64px; }
.g-auth__card { max-width: 460px; margin: 0 auto; }
.g-auth__card--wide { max-width: 640px; }
.g-auth__alt { margin: 20px 0 0; text-align: center; font-size: var(--g-fs-sm); color: var(--g-muted); }
.g-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g-auth__social { margin-top: 16px; }
.g-order-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 4px 0 24px; padding: 0; list-style: none; counter-reset: s; }
.g-order-status li { position: relative; text-align: center; font-size: var(--g-fs-xs); color: var(--g-muted); padding-top: 34px; }
.g-order-status li::before { content: ""; position: absolute; top: 9px; left: 50%; width: 20px; height: 20px; transform: translateX(-50%); border-radius: 50%; background: #fff; border: 2px solid var(--g-line-strong); z-index: 1; }
.g-order-status li::after { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 2px; background: var(--g-line-strong); }
.g-order-status li:first-child::after { display: none; }
.g-order-status li.is-done { color: var(--g-ink); font-weight: 600; }
.g-order-status li.is-done::before { background: var(--g-success); border-color: var(--g-success); }
.g-order-status li.is-done::after { background: var(--g-success); }
.g-order-status li.is-cancel::before { background: var(--g-danger); border-color: var(--g-danger); }

/* ----------------------------------------------------- blog / page / errors */
.g-page { padding: 32px 0 56px; }
.g-page--narrow .g-container { max-width: 920px; }
.g-posts { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .g-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .g-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g-post { display: flex; flex-direction: column; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); overflow: hidden; background: #fff; }
.g-post__img { aspect-ratio: 16 / 9; background: var(--g-surface-2); overflow: hidden; display: block; }
.g-post__img img { width: 100%; height: 100%; object-fit: cover; }
.g-post__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.g-post__meta { font-size: var(--g-fs-xs); color: var(--g-muted); }
.g-post__title { margin: 0; font-size: var(--g-fs-md); line-height: 1.35; }
.g-post__title a { color: var(--g-ink); }
.g-post__excerpt { margin: 0; color: var(--g-text-2); font-size: var(--g-fs-sm); }
.g-error { padding: 72px 0; text-align: center; }
.g-error__code { font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; color: var(--g-line-strong); line-height: 1; letter-spacing: -.04em; }
.g-error h1 { margin: 12px 0 8px; font-size: var(--g-fs-xl); }
.g-error p { color: var(--g-muted); max-width: 52ch; margin: 0 auto; }
.g-error .g-search { max-width: 560px; margin: 24px auto 0; order: 0; }

/* compare */
.g-compare { overflow-x: auto; border: 1px solid var(--g-line); border-radius: var(--g-r-lg); background: #fff; }
.g-compare table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: var(--g-fs-sm); }
.g-compare th, .g-compare td { padding: 14px 16px; border-bottom: 1px solid var(--g-line); vertical-align: top; text-align: left; min-width: 200px; }
.g-compare th { position: sticky; left: 0; z-index: 1; width: 160px; min-width: 140px; background: var(--g-surface-2); color: var(--g-muted); font-weight: 500; }
.g-compare tr:last-child td, .g-compare tr:last-child th { border-bottom: 0; }
.g-compare__img { width: 140px; height: 140px; object-fit: contain; display: block; margin-bottom: 8px; }

/* contact form shortcode */
.g-contact-form .contact-message { margin-top: 12px; }

/* --------------------------------------------- legacy & bootstrap harmony */
/* Classes produced by plugins / older templates keep a consistent look. */
.g-body .btn { font-family: var(--g-font); font-weight: 600; border-radius: var(--g-r-sm); }
.g-body .btn-fill-out, .g-body .btn-primary { color: #fff !important; background: var(--g-accent); border: 1px solid var(--g-accent); padding: 10px 18px; }
.g-body .btn-fill-out:hover, .g-body .btn-primary:hover { background: var(--g-accent-600); border-color: var(--g-accent-600); }
.g-body .btn-fill-line, .g-body .btn-line-fill, .g-body .btn-outline-primary { color: var(--g-ink) !important; background: #fff; border: 1px solid var(--g-line-strong); padding: 10px 18px; }
.g-body .btn-fill-line:hover, .g-body .btn-line-fill:hover { border-color: var(--g-ink); background: var(--g-surface-2); }
.g-body .btn-dark { background: var(--g-ink); border-color: var(--g-ink); }
.g-body .form-control { min-height: 44px; border-color: var(--g-line-strong); border-radius: var(--g-r-sm); font-family: var(--g-font); font-size: var(--g-fs-base); color: var(--g-text); }
.g-body .form-control:focus { border-color: var(--g-accent); box-shadow: var(--g-focus); }
.g-body textarea.form-control { min-height: 110px; }
.g-body label { font-size: var(--g-fs-sm); font-weight: 600; color: var(--g-text-2); }
.g-body .form-group { margin-bottom: 16px; }
.g-body .card { border: 1px solid var(--g-line); border-radius: var(--g-r-lg); overflow: hidden; }
.g-body .card-header { background: var(--g-surface-2); border-bottom: 1px solid var(--g-line); padding: 14px 20px; }
.g-body .card-header h3, .g-body .card-header h4, .g-body .card-header h5 { margin: 0; font-size: var(--g-fs-md); }
.g-body .card-body { padding: 20px; }
.g-body .table { color: var(--g-text); font-size: var(--g-fs-sm); }
.g-body .table th { border-top: 0; color: var(--g-muted); font-weight: 600; font-size: var(--g-fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.g-body .table td, .g-body .table th { border-color: var(--g-line); vertical-align: middle; }
.g-body .alert { border-radius: var(--g-r-sm); border: 0; font-size: var(--g-fs-sm); }
.g-body .alert-success { background: var(--g-success-50); color: var(--g-success); }
.g-body .alert-danger, .g-body .alert-warning { background: var(--g-danger-50); color: var(--g-danger); }
.g-body .text-danger { color: var(--g-danger) !important; }
.g-body .text-success { color: var(--g-success) !important; }
.g-body .badge, .g-body .label { border-radius: 10px; font-weight: 600; padding: 4px 8px; }
.g-body .label-success, .g-body .badge-success { background: var(--g-success-50); color: var(--g-success); }
.g-body .label-warning, .g-body .badge-warning { background: var(--g-warning-50); color: var(--g-warning); }
.g-body .label-danger, .g-body .badge-danger { background: var(--g-danger-50); color: var(--g-danger); }
.g-body .label-info, .g-body .badge-info, .g-body .label-primary { background: var(--g-accent-50); color: var(--g-accent-600); }
.g-body .custome-checkbox { display: flex; align-items: center; gap: 8px; }
.g-body .custome-checkbox .form-check-input { position: static; margin: 0; width: 18px; height: 18px; accent-color: var(--g-accent); }
.g-body .custome-checkbox .form-check-label { margin: 0; font-weight: 400; }
.g-body .section { padding: 32px 0 56px; }
.g-body .heading_s1 h3, .g-body .heading_s1 h4, .g-body .heading_s1 h5, .g-body .heading_s1 h6 { font-size: var(--g-fs-lg); margin-bottom: 14px; }
.g-body .pagination_style1 .pagination { gap: 4px; }
.g-body .page-link { border-radius: var(--g-r-sm) !important; color: var(--g-ink); border-color: var(--g-line-strong); }
.g-body .page-item.active .page-link { background: var(--g-ink); border-color: var(--g-ink); }
.g-body .avatar-view { cursor: pointer; }
.g-body #avatar-modal .modal-content { border-radius: var(--g-r-lg); }
.g-body .dashboard_content .card-header h3 { font-size: var(--g-fs-md); }
/* cookie consent (plugin) */
.js-cookie-consent { font-family: var(--g-font) !important; font-size: var(--g-fs-sm) !important; background: var(--g-ink) !important; }
.js-cookie-consent .js-cookie-consent-agree, .js-cookie-consent button { background: #fff !important; color: var(--g-ink) !important; border-radius: var(--g-r-sm) !important; font-weight: 600 !important; padding: 8px 14px !important; border: 0 !important; }

/* --------------------------------------------------------- accessibility */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .g-header, .g-footer, .g-cta-band, .g-buybar, .g-totop, .g-toasts { display: none !important; }
}

/* legacy slider / banners */
.g-slides { grid-auto-columns: 100% !important; gap: 0 !important; border-radius: var(--g-r-lg); overflow-x: auto; }
.g-slide { position: relative; display: grid; align-items: center; min-height: 240px; border-radius: var(--g-r-lg); overflow: hidden; background: var(--g-navy-900); }
.g-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-slide__body { position: relative; padding: 28px; max-width: 560px; }
.g-slide__title { margin: 0 0 8px; font-size: var(--g-fs-2xl); }
.g-slide__text { margin: 0 0 16px; color: var(--g-text-2); }
@media (min-width: 992px) { .g-slide { min-height: 360px; } .g-slide__body { padding: 48px; } }
.g-slides__nav { position: absolute; right: 16px; bottom: 16px; }
.g-banners { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g-banner { display: block; border-radius: var(--g-r-lg); overflow: hidden; }
.g-banner img { width: 100%; height: auto; display: block; transition: transform .3s var(--g-ease); }
.g-banner:hover img { transform: scale(1.03); }
.g-footer__newsletter .g-inline-field { flex-direction: column; }

.g-gallery--single { grid-template-columns: 1fr !important; }
.g-pagehead--compact { padding: 12px 0; }
.g-card__foot--request { flex-direction: column; align-items: stretch; gap: 8px; }
.g-card__foot--request .g-card__ask { justify-content: center; width: 100% !important; padding: 0 10px !important; }
.g-card__foot--request .g-card__ask span { display: inline !important; }
.g-brand img { height: 64px; max-height: none; width: auto; max-width: 100%; }

/* layout safety: grid children must be allowed to shrink (prevents mobile overflow) */
.g-catalog__main, .g-catalog__layout > *, .g-pdp__top > *, .g-cartpage__layout > *, .g-quote__layout > *, .g-account__layout > * { min-width: 0; }
.g-toolbar__controls { flex-wrap: wrap; }
@media (max-width: 575.98px) { .g-toolbar__controls .g-select { max-width: 60vw; } }

/* cookie consent (plugin markup) — compact card instead of a full-width black bar */
.js-cookie-consent.cookie-consent { left: 12px !important; right: 12px !important; bottom: 12px !important; width: auto !important; max-width: 560px; padding: 14px 16px !important; border-radius: var(--g-r-lg) !important; box-shadow: var(--g-shadow-lg); }
.js-cookie-consent .cookie-consent-body { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px; max-width: none !important; padding: 0 !important; text-align: left !important; }
.js-cookie-consent .cookie-consent__message { flex: 1 1 240px; margin: 0 !important; font-size: var(--g-fs-sm) !important; line-height: 1.5 !important; }
.js-cookie-consent a { color: #9cc9f5 !important; }
@media (max-width: 575.98px) {
    .g-toolbar__controls { width: 100%; flex-wrap: nowrap; }
    .g-toolbar__controls .g-select { flex: 1; max-width: none; min-width: 0; }
}
/* toasts: top-right on desktop so they never cover the mini-cart buttons */
@media (min-width: 768px) { .g-toasts { top: 96px; bottom: auto; } }