/*
 * IT Lobby storefront — shared styles for products.php, product-single.php and
 * checkout.php.
 *
 * The same markup serves the public website and the FIB Mini App WebView. In the
 * FIB context `body.is-fib` hides the marketing chrome and switches to a compact,
 * single-column, thumb-reachable layout, so there is one storefront rather than
 * two that drift apart.
 */

:root {
    /* Mirrors the Flutter app's default palette (AppColors), so a category pill
       or a selected state looks the same in both clients. */
    --shop-brand: #132a55;
    --shop-brand-soft: #eaf1ff;
    --shop-soft-grey: #f3f7fd;
    --shop-bg: #f7f7f5;
    --shop-surface: #ffffff;
    --shop-line: rgba(11, 11, 13, 0.08);
    --shop-muted: #656562;
    --shop-ink: var(--primary-color, #0b0b0d);
    --shop-radius: 8px;
    --shop-shadow: 0 20px 60px rgba(11, 11, 13, 0.05);
    --shop-success: #147c42;
    --shop-danger: #b33535;
}

.product-catalog {
    background: var(--shop-bg);
    padding: 80px 0;
}

/* Full width header/footer on storefront pages. */
.product-catalog-page .main-header .container,
.product-catalog-page .main-footer .container {
    max-width: 100% !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.product-catalog-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.55fr);
    gap: 30px;
    align-items: end;
    margin-bottom: 42px;
}

.product-catalog-header .section-title {
    margin-bottom: 0;
}

.product-catalog-header .section-title h2 {
    max-width: 760px;
}

.product-catalog-header p {
    margin: 0;
    color: #585858;
}

.product-catalog-layout {
    display: grid;
    grid-template-columns: 315px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.product-filter-panel {
    position: sticky;
    top: 110px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: 0 24px 70px rgba(11, 11, 13, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 18px;
}

.filter-panel-header,
.product-toolbar,
.toolbar-controls,
.category-filter,
.product-meta-line,
.product-card-footer {
    display: flex;
    align-items: center;
}

.filter-panel-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color, var(--shop-line));
    padding-bottom: 16px;
    margin-bottom: 14px;
}

.filter-panel-header span,
.toolbar-kicker {
    font-family: var(--accent-font);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #777;
}

.filter-reset {
    border: none;
    background: #f0f0ed;
    color: var(--shop-ink);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.filter-reset:hover {
    background: var(--shop-ink);
    color: var(--white-color, #fff);
}

.category-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.category-filter {
    width: 100%;
    gap: 10px;
    min-height: 54px;
    border: none;
    background: transparent;
    color: var(--shop-ink);
    text-align: left;
    border-radius: var(--shop-radius);
    padding: 9px 10px;
    font-family: var(--accent-font);
    font-weight: 700;
    transition: all 0.25s ease;
}

.category-filter:hover,
.category-filter.active {
    background: var(--shop-ink);
    color: var(--white-color, #fff);
    transform: translateX(4px);
}

.category-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--shop-radius);
    background: #f0f0ed;
    color: var(--shop-ink);
    flex: 0 0 auto;
    overflow: hidden;
}

.category-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-filter.active .category-icon,
.category-filter:hover .category-icon {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white-color, #fff);
}

.category-label {
    flex: 1;
}

.product-results {
    min-width: 0;
}

.product-toolbar {
    justify-content: space-between;
    gap: 20px;
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 18px;
    margin-bottom: 24px;
    box-shadow: 0 18px 55px rgba(11, 11, 13, 0.05);
}

.product-toolbar h3 {
    font-size: 26px;
    margin-top: 4px;
    margin-bottom: 0;
}

.toolbar-controls {
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.product-search {
    min-width: 260px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--shop-bg);
    border: 1px solid transparent;
    border-radius: var(--shop-radius);
    padding: 0 14px;
    transition: all 0.25s ease;
    margin: 0;
}

.product-search:focus-within {
    border-color: rgba(11, 11, 13, 0.2);
    background: var(--shop-surface);
    box-shadow: 0 12px 32px rgba(11, 11, 13, 0.07);
}

.product-search input,
.product-sort {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--shop-ink);
    font-weight: 600;
}

.product-search input {
    width: 100%;
    min-width: 0;
}

.product-sort {
    height: 48px;
    min-width: 185px;
    background: var(--shop-bg);
    border-radius: var(--shop-radius);
    padding: 0 14px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.product-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    box-shadow: var(--shop-shadow);
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.25s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 80px rgba(11, 11, 13, 0.1);
}

.product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
    background: #eee;
    overflow: hidden;
}

.product-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.06) rotate(1deg);
}

.product-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: var(--shop-ink);
    color: var(--white-color, #fff);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 800;
}

.product-badge.is-out {
    background: var(--shop-danger);
}

.product-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.product-meta-line {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: #777;
}

.stock {
    color: var(--shop-success);
}

.stock.is-out {
    color: var(--shop-danger);
}

.product-card h3 {
    font-size: 21px;
    margin-bottom: 10px;
}

.product-card h3 a {
    color: var(--shop-ink);
}

.product-card p {
    color: var(--shop-muted);
    font-size: 15px;
    line-height: 1.55em;
    margin-bottom: 22px;
}

.product-card-footer {
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    border-top: 1px solid var(--divider-color, var(--shop-line));
    padding-top: 18px;
}

.product-card-footer strong {
    color: var(--shop-ink);
    font-family: var(--accent-font);
    font-size: 22px;
}

/* Buttons ---------------------------------------------------------------- */

.shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--shop-radius);
    background: var(--shop-ink);
    color: var(--white-color, #fff);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.25s ease;
}

.shop-btn:hover:not(:disabled) {
    color: var(--white-color, #fff);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(11, 11, 13, 0.18);
}

.shop-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.shop-btn.is-ghost {
    background: #f0f0ed;
    color: var(--shop-ink);
}

.shop-btn.is-outline {
    background: transparent;
    border-color: var(--shop-line);
    color: var(--shop-ink);
}

.shop-btn.is-block {
    width: 100%;
}

.shop-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.shop-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--white-color, #fff);
    animation: shop-spin 0.7s linear infinite;
}

.shop-btn.is-ghost.is-loading::after,
.shop-btn.is-outline.is-loading::after {
    color: var(--shop-ink);
}

@keyframes shop-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cart badge in the header ----------------------------------------------- */

.shop-cart-trigger {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 1040;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: var(--shop-ink);
    color: var(--white-color, #fff);
    box-shadow: 0 18px 40px rgba(11, 11, 13, 0.28);
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.shop-cart-trigger:hover {
    transform: scale(1.06);
}

.shop-cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--shop-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.shop-cart-trigger[data-count="0"] .shop-cart-count {
    display: none;
}

/* The class sets a display, which would otherwise beat the [hidden] attribute
   the header badge is toggled with. */
.shop-cart-count[hidden] {
    display: none;
}

/* Drawer / modal --------------------------------------------------------- */

.shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    background: rgba(11, 11, 13, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.shop-overlay.is-open {
    display: block;
}

.shop-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--shop-surface);
    box-shadow: -20px 0 60px rgba(11, 11, 13, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.shop-overlay.is-open .shop-drawer {
    transform: translateX(0);
}

.shop-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%);
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 48px);
    display: flex;
    flex-direction: column;
    background: var(--shop-surface);
    border-radius: 14px;
    overflow: hidden;
    opacity: 0;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.shop-overlay.is-open .shop-modal {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.shop-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid var(--shop-line);
}

.shop-panel-header h3 {
    margin: 0;
    font-size: 20px;
}

.shop-panel-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: none;
    border-radius: 50%;
    background: #f0f0ed;
    color: var(--shop-ink);
    cursor: pointer;
}

.shop-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.shop-panel-footer {
    padding: 20px;
    border-top: 1px solid var(--shop-line);
    background: var(--shop-surface);
}

/* Cart lines ------------------------------------------------------------- */

.cart-line {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--shop-line);
}

.cart-line:last-child {
    border-bottom: none;
}

.cart-line-image {
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    border-radius: var(--shop-radius);
    overflow: hidden;
    background: #f0f0ed;
}

.cart-line-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-line-body {
    flex: 1;
    min-width: 0;
}

.cart-line-body h4 {
    margin: 0 0 3px;
    font-size: 15px;
    line-height: 1.3;
}

.cart-line-meta {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--shop-muted);
}

.cart-line-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--shop-ink);
}

.cart-line-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px;
    border: 1px solid var(--shop-line);
    border-radius: 999px;
}

.qty-stepper button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--shop-line);
    border-radius: 50%;
    background: #fff;
    color: var(--shop-ink);
    line-height: 1;
    cursor: pointer;
}

.qty-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-stepper span {
    min-width: 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

.cart-line-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: #fff;
    color: var(--shop-ink);
    cursor: pointer;
}

.total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--shop-muted);
}

.total-line strong {
    color: var(--shop-ink);
    font-weight: 700;
}

.total-line.is-strong {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--shop-line);
    font-size: 16px;
    color: var(--shop-ink);
    font-weight: 800;
}

.total-line.is-strong strong {
    font-size: 19px;
    font-weight: 800;
}

/* Option pickers --------------------------------------------------------- */

.option-group {
    margin-bottom: 20px;
}

.option-group-name {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #777;
}

.option-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.option-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--shop-line);
    border-radius: 999px;
    background: #fff;
    color: var(--shop-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-chip:hover {
    border-color: rgba(11, 11, 13, 0.35);
}

.option-chip.is-active {
    background: var(--shop-ink);
    border-color: var(--shop-ink);
    color: var(--white-color, #fff);
}

.option-chip.is-unavailable {
    opacity: 0.42;
}

.option-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(11, 11, 13, 0.2);
    flex: 0 0 auto;
}

/* Product detail --------------------------------------------------------- */

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: start;
}

.product-gallery-main {
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0ed;
    aspect-ratio: 1 / 1;
}

.product-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.product-gallery-thumbs button {
    width: 76px;
    height: 76px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--shop-radius);
    overflow: hidden;
    background: #f0f0ed;
    cursor: pointer;
}

.product-gallery-thumbs button.is-active {
    border-color: var(--shop-ink);
}

.product-gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-price {
    font-family: var(--accent-font);
    font-size: 34px;
    font-weight: 800;
    color: var(--shop-ink);
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.product-spec-table th,
.product-spec-table td {
    padding: 11px 0;
    border-bottom: 1px solid var(--shop-line);
    font-size: 14px;
    text-align: left;
}

.product-spec-table th {
    width: 40%;
    color: var(--shop-muted);
    font-weight: 600;
}

.product-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

/* States ----------------------------------------------------------------- */

.product-empty,
.shop-state {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 60px 25px;
    text-align: center;
}

.product-empty i,
.shop-state i {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f0ed;
    color: var(--shop-ink);
    border-radius: 50%;
    margin-bottom: 18px;
}

.product-empty h3,
.shop-state h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.product-empty p,
.shop-state p {
    margin: 0;
    color: var(--shop-muted);
}

.shop-skeleton {
    border-radius: var(--shop-radius);
    background: linear-gradient(90deg, #eeeeec 25%, #f6f6f4 37%, #eeeeec 63%);
    background-size: 400% 100%;
    animation: shop-shimmer 1.4s ease infinite;
}

.shop-skeleton-card {
    height: 460px;
}

@keyframes shop-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* Toasts ----------------------------------------------------------------- */

.shop-toasts {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.shop-toast {
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--shop-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(11, 11, 13, 0.3);
    animation: shop-toast-in 0.25s ease;
}

.shop-toast.is-success {
    background: var(--shop-success);
}

.shop-toast.is-error {
    background: var(--shop-danger);
}

.shop-toast.is-warning {
    background: #a8690f;
}

@keyframes shop-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Checkout --------------------------------------------------------------- */

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 32px;
    align-items: start;
}

.checkout-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    box-shadow: var(--shop-shadow);
    padding: 26px;
    margin-bottom: 22px;
}

.checkout-card h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 20px;
}

.checkout-card > p {
    color: var(--shop-muted);
    font-size: 14px;
}

.checkout-step-index {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--shop-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.checkout-summary {
    position: sticky;
    top: 110px;
}

.shop-field {
    margin-bottom: 16px;
}

.shop-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--shop-ink);
}

.shop-field input,
.shop-field select,
.shop-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: var(--shop-bg);
    color: var(--shop-ink);
    font-size: 15px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
}

.shop-field textarea {
    min-height: 90px;
    resize: vertical;
}

.shop-field input:focus,
.shop-field select:focus,
.shop-field textarea:focus {
    border-color: rgba(11, 11, 13, 0.35);
    background: #fff;
}

.shop-field .shop-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--shop-muted);
}

.shop-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.identity-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: var(--shop-bg);
}

.identity-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--shop-ink);
    color: #fff;
    font-weight: 800;
}

.identity-card strong {
    display: block;
    font-size: 15px;
}

.identity-card span {
    font-size: 13px;
    color: var(--shop-muted);
}

.fib-qr {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.fib-qr img {
    width: 168px;
    height: 168px;
    border-radius: var(--shop-radius);
    border: 1px solid var(--shop-line);
    background: #fff;
}

.payment-code {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: var(--shop-radius);
    background: var(--shop-bg);
    font-family: var(--accent-font);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f0f0ed;
    font-size: 13px;
    font-weight: 700;
}

.status-pill.is-paid {
    background: rgba(20, 124, 66, 0.12);
    color: var(--shop-success);
}

.status-pill.is-failed {
    background: rgba(179, 53, 53, 0.12);
    color: var(--shop-danger);
}

.status-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: shop-pulse 1.4s ease infinite;
}

@keyframes shop-pulse {
    50% {
        opacity: 0.25;
    }
}

/* FIB splash ------------------------------------------------------------- */

.fib-splash {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--shop-surface);
    text-align: center;
    padding: 24px;
}

.fib-splash img {
    max-width: 180px;
}

.fib-splash p {
    margin: 0;
    color: var(--shop-muted);
    font-size: 14px;
}

.fib-splash .spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--shop-line);
    border-top-color: var(--shop-ink);
    border-radius: 50%;
    animation: shop-spin 0.8s linear infinite;
}

/* Customer service line — required by FIB for a mini app. */
.shop-support-line {
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px dashed var(--shop-line);
    border-radius: var(--shop-radius);
    background: var(--shop-surface);
    font-size: 14px;
    color: var(--shop-muted);
    text-align: center;
}

.shop-support-line a {
    color: var(--shop-ink);
    font-weight: 800;
}

/* Breadcrumb separator.
   The theme was mirrored from its demo site with HTTrack, which turned the
   separator's `content: url(...)` into the literal string
   "https://html.awaikenthemes.com/". It rendered on every page with a
   breadcrumb and was only ever invisible because the text was white. */
.page-header-box .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    padding-right: 8px;
    opacity: 0.55;
}

/* Hero slider on mobile ---------------------------------------------------
   Three separate problems, all visible on a phone:

   1. `.swiper-slide-active` ran a 7s scale animation on a full-bleed background
      image. Continuously repainting a viewport-sized image is expensive, and it
      overlapped the slide transition — which is what "changing slides freezes"
      was.
   2. The hero was 780px tall inside an 844px viewport, so the first screen was
      the hero and nothing else.
   3. The scrim over the image was rgba(0,0,0,.08) — near-invisible — so the
      headline landed on whatever the image happened to crop to and became
      unreadable (the product photo's own "7T" artwork sat behind the title).
   ------------------------------------------------------------------------ */

@media only screen and (max-width: 991px) {
    /* The slide artwork is landscape (~1.8:1). Cropping it into a tall portrait
       hero with `cover` scaled it ~2.4x and cut most of it away — the "zoomed,
       not showing the image properly" problem. Instead the image keeps its own
       aspect ratio across the full width at the top of the hero, and the copy
       sits below it on solid colour. No scrim over the artwork at all, so
       nothing is darkened. 55.6vw is 100vw / 1.8. */
    /* No bottom padding: the section directly below already supplies the gap,
       and stacking the two produced a band of dead black under the copy. The
       background colour is the same as that section's gradient start, so the
       join between them is invisible instead of a hard seam. */
    .hero {
        min-height: 0;
        height: auto;
        padding: 0;
        background-color: #07111f;
    }

    /* The section under the hero uses the full desktop rhythm; against the hero
       it just reads as more empty space. */
    .home-main > *:first-child {
        padding-top: 36px !important;
    }

    .hero-slider .swiper-slide {
        background-size: contain;
        background-position: center top;
        background-color: #07111f;
    }

    /* The fade has to land exactly where the artwork ends, so it is measured in
       the same vw unit as the image height rather than as a percentage of the
       hero — the hero's height varies with the copy, so a percentage put the
       fade below the photo and left it with a hard bottom edge. */
    .hero-slider .swiper-slide::before {
        background: linear-gradient(
            180deg,
            rgba(7, 17, 31,0) 0,
            rgba(7, 17, 31,0) calc(55.6vw - 88px),
            rgba(7, 17, 31,0.55) calc(55.6vw - 34px),
            #07111f calc(55.6vw + 1px)
        );
    }

    .hero .container {
        position: relative;
        z-index: 2;
        padding-top: calc(55.6vw + 44px);
    }

    /* Nothing follows the copy inside the hero on mobile, so the theme's
       30px gap under it is just black space before the next section. */
    .hero-content .section-title {
        margin-bottom: 0;
    }

    .hero-content .section-title p {
        margin-bottom: 0;
    }

    .hero-content .section-title h1 {
        font-size: 29px;
        line-height: 1.18;
    }

    .hero-content .section-title p {
        font-size: 15px !important;
        line-height: 1.6;
    }

}

/* Swiper's own `.swiper-horizontal > .swiper-pagination-bullets` rule is more
   specific than the theme's `.hero-pagination`, so it won on every property the
   theme tried to set: `left: 0` turned the centring translateX(-50%) into a
   drag off the left edge (which is why dots went missing), and `top: auto`
   discarded the vertical placement. Everything positional therefore has to be
   set at this specificity. */
.hero .hero-pagination.swiper-pagination-bullets {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%) !important;
}

@media only screen and (max-width: 991px) {
    /* Just under the artwork, where the dots read as part of the slider. */
    .hero .hero-pagination.swiper-pagination-bullets {
        top: calc(55.6vw + 14px) !important;
        bottom: auto !important;
    }
}

/* Landscape phone: 55.6vw of image is taller than the whole screen, so the
   image-on-top layout falls apart. There the original overlay treatment is the
   right one — just with a scrim heavy enough to read against. */
@media only screen and (max-width: 991px) and (orientation: landscape) {
    .hero {
        padding: 0 0 34px;
    }

    .hero-slider .swiper-slide {
        background-size: cover;
        background-position: center center;
    }

    .hero-slider .swiper-slide::before {
        background: linear-gradient(
            180deg,
            rgba(7, 17, 31,0.4) 0%,
            rgba(7, 17, 31,0.72) 60%,
            rgba(7, 17, 31,0.92) 100%
        );
    }

    .hero .container {
        padding-top: 96px;
    }

    .hero .hero-pagination.swiper-pagination-bullets {
        top: auto !important;
        bottom: 12px !important;
    }
}

/* The zoom is decorative and expensive; drop it on phones and whenever the
   visitor has asked for less motion. */
@media only screen and (max-width: 991px), (prefers-reduced-motion: reduce) {
    .hero-slider .swiper-slide-active {
        animation: none !important;
        transform: none !important;
    }
}

/* Mini-app bottom navigation.
   Inside FIB the WebView is the whole app: no site header, no browser chrome.
   This is the same Shop / Cart / Orders bar the mobile app has, and it is how a
   customer reaches their order status after paying. */
.fib-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: none;
    align-items: stretch;
    background: var(--shop-surface);
    border-top: 1px solid var(--shop-line);
    box-shadow: 0 -6px 24px rgba(11, 11, 13, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

body.is-fib .fib-bottom-nav {
    display: flex;
}

.fib-bottom-nav a {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    color: var(--shop-muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.fib-bottom-nav a i {
    font-size: 18px;
}

.fib-bottom-nav a.is-active {
    color: var(--shop-brand, #132a55);
}

.fib-bottom-nav .shop-cart-count {
    top: 6px;
    right: 50%;
    margin-right: -22px;
}

/* Room for the bar so it never covers the last row of content. */
body.is-fib .product-catalog {
    padding-bottom: 90px;
}

/* FIB WebView layout ----------------------------------------------------- */

body.is-fib .main-header,
body.is-fib .main-footer,
body.is-fib .page-header-box,
body.is-fib .preloader,
body.is-fib .product-catalog-header,
body.is-fib .product-filter-panel {
    display: none !important;
}

body.is-fib .product-catalog {
    padding: 16px 0 96px;
}

body.is-fib .container,
body.is-fib .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

body.is-fib .product-catalog-layout,
body.is-fib .checkout-layout {
    grid-template-columns: 1fr;
    gap: 18px;
}

body.is-fib .container,
body.is-fib .container-fluid {
    max-width: 100%;
}

body.is-fib .category-chip-strip {
    display: flex;
}

body.is-fib .checkout-card {
    padding: 18px;
}

body.is-fib .checkout-summary {
    position: static;
}

body.is-fib .product-detail-layout {
    grid-template-columns: 1fr;
    gap: 22px;
}

body.is-fib .shop-cart-trigger {
    right: 16px;
    bottom: 16px;
}

/* Storefront mobile header ---------------------------------------------- */

.shop-mobile-header {
    display: none;
    position: sticky;
    top: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 60px;
    padding: 0 12px;
    background: var(--shop-ink);
    box-shadow: 0 6px 24px rgba(11, 11, 13, 0.18);
}

.shop-mobile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
}

.shop-mobile-logo img {
    max-height: 32px;
    max-width: 160px;
    width: auto;
    object-fit: contain;
}

.shop-mobile-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}

.shop-mobile-icon:active {
    background: rgba(255, 255, 255, 0.2);
}

.shop-mobile-icon .shop-cart-count {
    top: 2px;
    right: 2px;
}

.shop-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
}

.shop-mobile-nav a {
    padding: 15px 20px;
    border-bottom: 1px solid var(--shop-line);
    color: var(--shop-ink);
    font-size: 16px;
    font-weight: 700;
}

.shop-mobile-nav a:last-child {
    border-bottom: none;
}

/* Category picker — mirrors the Flutter app's SharedCategoryGrid ---------
   Square pills (icon over a two-line label) in a grid, "All" first and "More"
   last, with the same filled-primary selected state. "More" opens a sheet with
   the three-column circular grid the app uses for its full category list. */

.category-picker {
    display: none;
    margin-bottom: 16px;
}

.category-pill-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.category-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 1 / 1;
    padding: 4px 2px;
    border: 0.7px solid rgba(216, 226, 240, 0.6);
    border-radius: 18px;
    background: #fff;
    color: var(--shop-brand, #132a55);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.category-pill:active {
    transform: scale(0.96);
}

.category-pill i {
    font-size: 19px;
    line-height: 1;
}

.category-pill span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--shop-ink);
}

.category-pill.is-active {
    background: var(--shop-brand, #132a55);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 10px rgba(19, 42, 85, 0.3);
}

.category-pill.is-active span {
    color: #fff;
    font-weight: 800;
}

.category-pill.is-hidden {
    display: none;
}

/* Full category list, as a sheet. */
.category-grid-full {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.category-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 6px;
    border: 1px solid rgba(216, 226, 240, 0.6);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.category-grid-item .icon-circle {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--shop-soft-grey, #f3f7fd);
    color: var(--shop-brand, #132a55);
    font-size: 20px;
}

.category-grid-item span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: var(--shop-ink);
}

.category-grid-item.is-active {
    background: var(--shop-brand-soft, #eaf1ff);
    border-color: rgba(19, 42, 85, 0.5);
}

.category-grid-item.is-active .icon-circle {
    background: var(--shop-brand, #132a55);
    color: #fff;
}

.category-grid-item.is-active span {
    font-weight: 800;
}

/* Quick category chips. Used inside FIB, where the compact strip suits the
   narrow WebView better than a two-row grid. */
.category-chip-strip {
    display: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.category-chip-strip::-webkit-scrollbar {
    display: none;
}

.category-chip-strip button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--shop-line);
    border-radius: 999px;
    background: #fff;
    color: var(--shop-ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.category-chip-strip button.is-active {
    background: var(--shop-ink);
    border-color: var(--shop-ink);
    color: #fff;
}

/* Bottom sheet — the mobile home for the desktop sidebar. */
.shop-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--shop-surface);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -20px 60px rgba(11, 11, 13, 0.25);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.shop-overlay.is-open .shop-sheet {
    transform: translateY(0);
}

.shop-sheet .shop-panel-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--shop-line);
    transform: translateX(-50%);
}

.shop-sheet .shop-panel-header {
    position: relative;
    padding-top: 22px;
}

/* The Filters button only exists where the sidebar does not. */
.filter-sheet-trigger {
    display: none;
    position: relative;
}

.filter-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--shop-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.category-filter.is-child {
    min-height: 44px;
    padding-left: 44px;
    font-size: 14px;
    font-weight: 600;
}

/* Continue-in-the-app handoff ------------------------------------------- */

.handoff-code {
    display: block;
    margin: 4px 0 18px;
    padding: 18px;
    border-radius: 12px;
    background: var(--shop-bg);
    border: 1px dashed var(--shop-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(22px, 6vw, 30px);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    color: var(--shop-ink);
}

.handoff-steps {
    margin: 0 0 18px;
    padding-left: 20px;
    color: var(--shop-muted);
    font-size: 14px;
    line-height: 1.8;
}

.handoff-steps strong {
    color: var(--shop-ink);
}

.store-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.store-button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 0 18px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background: var(--shop-ink);
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.store-button:hover {
    color: #fff;
    transform: translateY(-2px);
}

.store-button i {
    font-size: 26px;
}

.store-button span {
    display: block;
    font-size: 11px;
    opacity: 0.72;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.store-button strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

/* Responsive ------------------------------------------------------------- */

@media only screen and (max-width: 1399px) {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 1199px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-detail-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

/* Mobile: the sidebar moves into a bottom sheet, the toolbar sticks to the top,
   and the grid tightens to two thumb-sized columns. The customer lands on
   products, not on a category list they have to scroll past. */
@media only screen and (max-width: 991px) {
    /* The theme header is replaced by the mobile one on every page. */
    body:not(.is-fib) .main-header,
    body:not(.is-fib) .responsive-menu {
        display: none !important;
    }

    body:not(.is-fib) .shop-mobile-header {
        display: flex;
    }

    /* The theme's hero blocks are built for a desktop viewport; on a phone they
       cost a screen of vertical space before any content. */
    .page-header-box {
        padding-top: 22px !important;
        padding-bottom: 14px !important;
    }

    .page-header-box h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    /* The page header's text is white because it sat over the theme's dark
       header bar. That bar is replaced on mobile, so on the light page the
       heading and breadcrumb have to switch to ink or they vanish. */
    body:not(.is-fib) .page-header-box h1,
    body:not(.is-fib) .page-header-box .breadcrumb,
    body:not(.is-fib) .page-header-box .breadcrumb li,
    body:not(.is-fib) .page-header-box .breadcrumb a,
    body:not(.is-fib) .page-header-box .breadcrumb-item::before,
    body:not(.is-fib) .page-header-box .breadcrumb-item.active {
        color: var(--shop-ink) !important;
    }

    body:not(.is-fib) .page-header-box .breadcrumb a {
        opacity: 0.7;
    }

    /* The breadcrumb hero is desktop furniture: on a phone it costs a whole
       screen before the first product. */
    .product-catalog-page .storefront-page-header {
        display: none;
    }

    /* The header already carries a cart button, so the floating one would be a
       second control for the same thing. */
    .product-catalog-page .shop-cart-trigger {
        display: none;
    }

    .product-catalog {
        padding: 16px 0 40px;
    }

    .category-picker {
        display: block;
    }

    /* The chip strip is the FIB-only variant; on the mobile web the pill grid
       above replaces it. */
    body:not(.is-fib) .category-chip-strip {
        display: none;
    }

    /* The marketing headline is desktop furniture too: on a phone it costs most
       of the first screen before a single product. The app opens straight onto
       its category grid, and so does this. */
    .product-catalog-page .product-catalog-header {
        display: none;
    }

    .product-catalog-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Replaced by the filter sheet + chip strip. */
    .product-filter-panel {
        display: none;
    }

    .category-chip-strip,
    .filter-sheet-trigger {
        display: flex;
    }

    .checkout-summary {
        position: relative;
        top: 0;
    }

    /* Search and filters stay reachable while scrolling a long grid — parked
       just under the sticky header rather than colliding with it. */
    .product-toolbar {
        position: sticky;
        top: 60px;
        z-index: 30;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        margin-bottom: 16px;
        border-radius: 12px;
    }

    .toolbar-heading {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .toolbar-heading .toolbar-kicker {
        font-size: 12px;
    }

    .product-toolbar h3 {
        margin-top: 0;
        font-size: 17px;
    }

    .toolbar-controls {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        width: 100%;
    }

    .product-search {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
        height: 46px;
    }

    .product-sort {
        width: 100%;
        min-width: 0;
        height: 46px;
    }

    .filter-sheet-trigger {
        min-height: 46px;
        white-space: nowrap;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-card {
        border-radius: 12px;
    }

    .product-card:hover {
        transform: none;
        box-shadow: var(--shop-shadow);
    }

    .product-image {
        height: 168px;
    }

    .product-card-body {
        padding: 12px;
    }

    .product-card h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    /* The description and sub-category do not survive a 2-column phone grid;
       the product page carries them. */
    .product-card p,
    .product-meta-line span:first-child {
        display: none;
    }

    .product-meta-line {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .product-card-footer {
        padding-top: 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .product-card-footer strong {
        font-size: 17px;
    }

    .product-card-footer .shop-btn {
        flex: 1 0 100%;
        min-height: 42px;
    }

    .product-detail-price {
        font-size: 28px;
    }

    .product-detail-actions .shop-btn {
        flex: 1 1 140px;
    }

    .shop-panel-body,
    .shop-panel-footer,
    .shop-panel-header {
        padding: 16px;
    }
}

/* Wider phones and small tablets fit another column of category pills, the same
   way the app's grid grows with the available width. */
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .category-pill-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .category-pill span {
        font-size: 10px;
    }

    .category-grid-full {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .container,
    .container-fluid {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .product-image {
        height: 148px;
    }

    /* Price on its own line, then a full-width Add button. Trying to fit both
       side by side in a ~145px card wraps them into a mess anyway, and this way
       the tap target is the width of the card. */
    .product-card-footer strong {
        flex: 1 0 100%;
        font-size: 16px;
    }

    .shop-field-row {
        grid-template-columns: 1fr;
    }

    .product-gallery-thumbs button {
        width: 62px;
        height: 62px;
    }

    .store-buttons {
        grid-template-columns: 1fr;
    }
}