/*
Theme Name:        AKK Kadence Child
Theme URI:         https://urakk.com
Description:       Custom child theme for AKK Platinum Installations. Brand styling, block patterns, and WooCommerce polish on top of Kadence.
Author:            AKK Installations
Author URI:        https://urakk.com
Template:          kadence
Version:           0.1.0
Requires at least: 6.4
Requires PHP:      8.0
Text Domain:       akk-kadence-child
*/

/* ─────────────────────────────────────────────────────────────
   AKK brand tokens — kept in sync with theme.json color palette.
   theme.json is the source of truth for the block editor; this
   file exposes the same tokens as CSS variables for any custom
   CSS we author by hand (component overrides, hover states,
   transitions, etc.).
   ───────────────────────────────────────────────────────────── */
:root {
    /* Primary palette — pulled from AKK Platinum Installations logo v3 */
    --akk-primary:        #1E3A8A;  /* navy from house icon */
    --akk-primary-dark:   #152A66;  /* navy hover state */
    --akk-gray:           #9CA3AF;  /* gray from "PLATINUM" text */
    --akk-gray-dark:      #4B5563;  /* body text gray */
    --akk-accent:         #D62828;  /* refined red, sparing use */
    --akk-accent-dark:    #A11D1D;  /* red hover state */
    --akk-black:          #0A0A0F;  /* Tesla-grade near-black */

    /* Neutrals */
    --akk-ink:            #0F172A;
    --akk-ink-soft:       #475569;
    --akk-line:           #E5E7EB;
    --akk-bg:             #FFFFFF;
    --akk-bg-muted:       #F8FAFC;

    /* Semantic */
    --akk-success:        #10B981;
    --akk-warning:        #F59E0B;
    --akk-danger:         #DC2626;

    /* Radii + shadows — Calendly-style soft card aesthetic */
    --akk-radius-sm:      6px;
    --akk-radius:         12px;
    --akk-radius-lg:      20px;
    --akk-shadow-sm:      0 1px 2px rgba(13, 26, 74, 0.06);
    --akk-shadow:         0 4px 12px rgba(13, 26, 74, 0.08);
    --akk-shadow-lg:      0 12px 32px rgba(13, 26, 74, 0.12);

    /* Transitions */
    --akk-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --akk-duration:       180ms;
}

/* ─────────────────────────────────────────────────────────────
   Foundational overrides — minimal; most styling comes from
   theme.json + Kadence parent. Add component CSS in
   assets/css/ and enqueue from functions.php.
   ───────────────────────────────────────────────────────────── */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--akk-ink);
    background: var(--akk-bg);
    overflow-x: hidden;
}

/* Polished link underlines — offset, not flush */
a {
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.08em;
}

/* Calendly-style card */
.akk-card {
    background: var(--akk-bg);
    border: 1px solid var(--akk-line);
    border-radius: var(--akk-radius);
    box-shadow: var(--akk-shadow-sm);
    padding: 1.5rem;
    transition: box-shadow var(--akk-duration) var(--akk-ease),
                border-color var(--akk-duration) var(--akk-ease);
}

.akk-card:hover {
    border-color: color-mix(in srgb, var(--akk-primary) 20%, var(--akk-line));
    box-shadow: var(--akk-shadow);
}

/* ─────────────────────────────────────────────────────────────
   Homepage section polish — hover states, transitions, and
   responsive adjustments that block patterns can't express.
   ───────────────────────────────────────────────────────────── */

/* Doorway cards — lift on hover */
.wp-block-column > .wp-block-group.has-border-color {
    transition: transform var(--akk-duration) var(--akk-ease),
                box-shadow var(--akk-duration) var(--akk-ease),
                border-color var(--akk-duration) var(--akk-ease);
}

.wp-block-column > .wp-block-group.has-border-color:hover {
    transform: translateY(-4px);
    box-shadow: var(--akk-shadow-lg);
}

/* Buttons — smooth hover transitions */
.wp-block-button__link {
    transition: background-color var(--akk-duration) var(--akk-ease),
                color var(--akk-duration) var(--akk-ease),
                transform 120ms var(--akk-ease);
}

.wp-block-button__link:hover {
    transform: translateY(-1px);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* Stats bar — subtle separator between stat columns */
.wp-block-group[style*="background-color:#0A0A0F"] .wp-block-columns .wp-block-column + .wp-block-column {
    border-left: 1px solid rgba(30, 58, 138, 0.4);
    padding-left: 1.5rem;
}

/* Footer list reset */
.wp-block-group[style*="background-color:#0A0A0F"] ul {
    list-style: none;
}

.wp-block-group[style*="background-color:#0A0A0F"] ul a:hover {
    color: var(--akk-bg) !important;
}

/* Review cards — match height */
.wp-block-columns > .wp-block-column > .wp-block-group.has-border-color {
    height: 100%;
}

/* Mobile: 4 doorways become 2x2 */
@media (max-width: 781px) {
    .wp-block-group[style*="background-color:#0A0A0F"] .wp-block-columns .wp-block-column + .wp-block-column {
        border-left: none;
        padding-left: 0;
    }
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* ─────────────────────────────────────────────────────────────
   E-COMMERCE HOMEPAGE — Phase 1
   Hero · Trust Bar · Featured Products · Category Tiles
   ───────────────────────────────────────────────────────────── */

/* Orange urgency token — used for shop CTAs, prices, urgency labels */
:root {
    --akk-orange:      #D62828;  /* alias kept for backward compat — resolves to brand red */
    --akk-orange-dark: #A11D1D;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.akk-hero-cover {
    position: relative;
}

/* Shop buttons pulse-glow on load (draws eye to primary CTA) */
.akk-btn-shop .wp-block-button__link {
    box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.4);
    animation: akk-pulse 2.5s ease-out 1.2s 2;
}

@keyframes akk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(214, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}

/* Stats bar — vertical dividers between stat columns */
.akk-hero-stats .wp-block-column + .wp-block-column {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 1rem;
}

@media (max-width: 781px) {
    .akk-hero-stats .wp-block-column + .wp-block-column {
        border-left: none;
        padding-left: 0;
    }
}

/* ── Trust Bar ────────────────────────────────────────────────── */

.akk-trust-bar .akk-trust-bar__inner {
    padding: 1.5rem 2rem;
}

.akk-trust-item + .akk-trust-item {
    border-left: 1px solid var(--akk-line);
}

@media (max-width: 781px) {
    .akk-trust-item + .akk-trust-item {
        border-left: none;
        border-top: 1px solid var(--akk-line);
        padding-top: 1rem;
        margin-top: 0.5rem;
    }
    .akk-trust-bar .akk-trust-bar__inner {
        padding: 1.25rem 1rem;
    }
}

/* ── Featured Products Grid ───────────────────────────────────── */

.akk-products-section {
    background:
        radial-gradient(circle at 1px 1px, rgba(30, 58, 138, 0.07) 1px, transparent 0) 0 0 / 26px 26px,
        linear-gradient(180deg, #EEF2F9 0%, #F8FAFC 55%, #FFFFFF 100%);
}

.akk-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.akk-product-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: var(--akk-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    transition: transform var(--akk-duration) var(--akk-ease),
                box-shadow var(--akk-duration) var(--akk-ease),
                border-color var(--akk-duration) var(--akk-ease);
}

.akk-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    border-color: color-mix(in srgb, var(--akk-primary) 35%, var(--akk-line));
}

.akk-product-card__image {
    width: 100%;
    height: 220px;
    background: radial-gradient(120% 120% at 30% 15%, #FFFFFF 0%, #EEF3FB 60%, #E2EAF7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.akk-product-card__image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--akk-primary) 0%, var(--akk-orange) 100%);
}

.akk-product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.14));
    transition: transform 300ms var(--akk-ease);
}

.akk-product-card:hover .akk-product-card__image img {
    transform: scale(1.05);
}

.akk-product-card__image-placeholder {
    font-size: 2.5rem;
    opacity: 0.2;
}

.akk-product-card__body {
    padding: 1.1rem 1.1rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.akk-product-card__brand {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akk-primary);
}

.akk-product-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--akk-ink);
    line-height: 1.4;
    margin: 0;
}

.akk-product-card__price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--akk-orange);
    margin: 0.15rem 0 0;
}

.akk-product-card__price-from {
    font-size: 0.7rem;
    font-weight: 400;
    color: #94A3B8;
    margin-right: 0.2rem;
}

.akk-product-card__stars {
    font-size: 0.8rem;
    color: var(--akk-orange);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.akk-product-card__stars-count {
    color: #94A3B8;
    font-size: 0.72rem;
}

.akk-product-card__install {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--akk-primary);
    text-decoration: none;
    margin-top: auto;
    padding-top: 0.25rem;
    transition: color var(--akk-duration) var(--akk-ease);
}

.akk-product-card__install::before {
    content: "+";
    font-weight: 700;
    font-size: 0.85rem;
}

.akk-product-card__install:hover {
    color: var(--akk-orange);
}

.akk-product-card__footer {
    padding: 0.9rem 1.1rem;
    border-top: 1px solid #F1F5F9;
}

.akk-product-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: linear-gradient(135deg, var(--akk-primary) 0%, var(--akk-primary-dark) 100%);
    color: #FFFFFF !important;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: var(--akk-radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.28);
    transition: background var(--akk-duration) var(--akk-ease),
                transform 120ms var(--akk-ease),
                box-shadow var(--akk-duration) var(--akk-ease);
    letter-spacing: 0.02em;
}

.akk-product-card__cta::before {
    content: "🛒";
    font-size: 0.85rem;
}

.akk-product-card__cta:hover {
    background: linear-gradient(135deg, var(--akk-primary-dark) 0%, #10214D 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.38);
}

.akk-product-card__cta:active {
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(30, 58, 138, 0.28);
}

/* Responsive: 4 → 2 → 1 column */
@media (max-width: 1024px) {
    .akk-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .akk-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .akk-product-card__image {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .akk-products-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Category Tiles ───────────────────────────────────────────── */

.akk-category-tiles {
    gap: 1.25rem !important;
}

.akk-category-tile {
    border-radius: var(--akk-radius-lg) !important;
    overflow: hidden;
    transition: transform 220ms var(--akk-ease),
                box-shadow 220ms var(--akk-ease);
    cursor: pointer;
}

.akk-category-tile:hover {
    transform: scale(1.025);
    box-shadow: var(--akk-shadow-lg);
}

/* Category tile Shop buttons inherit orange but add subtle border on hover */
.akk-category-tile .wp-block-button__link {
    backdrop-filter: none;
}

.akk-category-tile .wp-block-button__link:hover {
    background: var(--akk-orange-dark) !important;
}

@media (max-width: 781px) {
    .akk-category-tiles {
        flex-wrap: wrap !important;
    }
    .akk-category-tiles .wp-block-column {
        flex-basis: calc(50% - 0.625rem) !important;
    }
    .akk-category-tile {
        min-height: 260px !important;
    }
}

@media (max-width: 480px) {
    .akk-category-tiles .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ── Section separators — alternating white/muted bg rhythm ─────── */

#site-main > div.wp-block-group.alignfull:first-child {
    margin-top: 0;
}

/* Four doorways — same lift hover as review/project cards */
.akk-category-tiles .wp-block-column > .wp-block-cover {
    transition: transform 220ms var(--akk-ease), box-shadow 220ms var(--akk-ease);
}

/* Footer list items reset for homepage-footer.php pattern */
.akk-footer-section ul {
    list-style: none;
    padding-left: 0;
}

/* ── Brands Grid ──────────────────────────────────────────────── */

.akk-brands-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.akk-brand-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--akk-ink);
    letter-spacing: 0.01em;
    transition: border-color var(--akk-duration) var(--akk-ease),
                box-shadow var(--akk-duration) var(--akk-ease);
}

.akk-brand-chip:hover {
    border-color: color-mix(in srgb, var(--akk-primary) 30%, var(--akk-line));
    box-shadow: var(--akk-shadow-sm);
}

.akk-brand-chip--premium {
    border-color: color-mix(in srgb, var(--akk-primary) 25%, var(--akk-line));
    background: color-mix(in srgb, var(--akk-primary) 4%, #FFFFFF);
    color: var(--akk-primary);
}

.akk-brand-chip--more {
    background: var(--akk-primary);
    border-color: var(--akk-primary);
    color: #FFFFFF;
}

.akk-brand-chip--more:hover {
    background: var(--akk-primary-dark);
    border-color: var(--akk-primary-dark);
    box-shadow: var(--akk-shadow);
}

/* ── Installation Info section — 4 cards responsive ──────────── */

@media (max-width: 781px) {
    .wp-block-group[style*="background-color:#0F172A"] .wp-block-columns {
        flex-wrap: wrap !important;
    }
    .wp-block-group[style*="background-color:#0F172A"] .wp-block-columns .wp-block-column {
        flex-basis: calc(50% - 0.75rem) !important;
    }
}

@media (max-width: 480px) {
    .wp-block-group[style*="background-color:#0F172A"] .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   AKK CUSTOM E-COMMERCE HEADER
   Three rows: Promo bar · Main (logo/search/cart) · Category nav
   ══════════════════════════════════════════════════════════════ */

/* ── Shared container ────────────────────────────────────────── */
.akk-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}

/* ── Sticky header shell ─────────────────────────────────────── */
.akk-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #FFFFFF;
    box-shadow: 0 1px 0 #E5E7EB;
    transition: box-shadow 200ms var(--akk-ease);
}

/* Drop below WP admin bar when logged in */
.admin-bar .akk-site-header {
    top: 32px;
}

.akk-site-header.akk-header--scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ── Row 1: Promo bar ────────────────────────────────────────── */
.akk-promo-bar {
    background: var(--akk-primary);   /* AKK navy */
    color: #FFFFFF;
    font-size: 0.78rem;
    line-height: 1;
}

.akk-promo-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    gap: 1rem;
}

.akk-promo-bar__msg {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: opacity 350ms ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.akk-promo-bar__links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.akk-promo-bar__links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 150ms ease;
}

.akk-promo-bar__links a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

.akk-promo-bar__links span {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
}

/* ── Row 2: Main header ──────────────────────────────────────── */
.akk-header-main {
    background: #FFFFFF;
    border-bottom: 1px solid #F1F5F9;
}

.akk-header-main__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 76px;
}

/* Logo */
.akk-header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none !important;
}

.akk-logo-img {
    height: 54px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}

.akk-logo-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--akk-primary);
    letter-spacing: -0.02em;
}

/* Search bar */
.akk-header-search {
    flex: 1;
    min-width: 0;
}

.akk-search-form {
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.akk-search-form:focus-within {
    border-color: var(--akk-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}

.akk-search-cat {
    flex-shrink: 0;
    width: 150px;
    padding: 0 0.75rem;
    background: #F8FAFC;
    border: none;
    border-right: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--akk-ink);
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.akk-search-divider {
    width: 1px;
    background: #E5E7EB;
    flex-shrink: 0;
    align-self: stretch;
    margin: 8px 0;
}

.akk-search-input {
    flex: 1;
    min-width: 0;
    padding: 0 1rem;
    border: none;
    font-size: 0.95rem;
    color: var(--akk-ink);
    background: #FFFFFF;
    outline: none;
}

.akk-search-input::placeholder {
    color: #94A3B8;
}

.akk-search-btn {
    flex-shrink: 0;
    width: 52px;
    background: var(--akk-accent);   /* AKK red */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background 150ms ease;
}

.akk-search-btn:hover {
    background: var(--akk-accent-dark);
}

/* Live search suggestions dropdown. Reparented to <body> by JS (same
   "portal to body to escape overflow clip" fix as the nav dropdown above) —
   position/left/width are set inline per search box at show time, this is
   just the visual shell. Deliberately plain (no accent border) so it reads
   as an extension of the search box rather than competing with it visually;
   easy to adjust after seeing it live. */
.akk-search-suggest {
    position: fixed;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 99999;
    padding: 6px 0;
    max-height: 420px;
    overflow-y: auto;
}
.akk-search-suggest[hidden] {
    display: none;
}

.akk-search-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--akk-ink);
}
.akk-search-suggest__item:hover,
.akk-search-suggest__item.is-active {
    background: #F8FAFC;
}

.akk-search-suggest__img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #FFFFFF;
    flex-shrink: 0;
}

.akk-search-suggest__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recent-searches view (shown on focus when the box is empty) — reuses
   .akk-search-suggest__item for row layout, adds a heading + clear-all
   footer that aren't selectable options. */
.akk-search-suggest__heading {
    padding: 6px 14px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9CA3AF;
}

.akk-search-suggest__item--history .akk-search-suggest__history-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #9CA3AF;
}

.akk-search-suggest__clear {
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--akk-accent);
    cursor: pointer;
    border-top: 1px solid #E5E7EB;
    margin-top: 4px;
}
.akk-search-suggest__clear:hover {
    background: #F8FAFC;
}

/* Right actions */
.akk-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Location chip */
.akk-header-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 150ms ease;
    text-align: left;
    line-height: 1.2;
    color: var(--akk-ink);
}

.akk-header-location:hover {
    background: #F1F5F9;
}

.akk-location-text {
    display: flex;
    flex-direction: column;
}

.akk-location-label {
    font-size: 0.68rem;
    color: #64748B;
    white-space: nowrap;
}

.akk-location-city {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--akk-ink);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Account + Cart actions */
.akk-header-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none !important;
    color: var(--akk-ink) !important;
    border-radius: 6px;
    transition: background 150ms ease, color 150ms ease;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.akk-header-action:hover {
    background: #F1F5F9;
    color: var(--akk-primary) !important;
}

.akk-action-label {
    font-size: 0.72rem;
    font-weight: 600;
}

/* Cart badge */
.akk-cart-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.akk-cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--akk-accent);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid #FFFFFF;
}

.akk-cart-count:empty,
.akk-cart-count[data-count="0"] {
    display: none;
}

/* ── Labor Day Spotlight banners (hero section, between Deals and
   Building & Home Essentials rows) — bold marketing tiles: full-bleed
   photo, brand-color scrim, logo mark, big offer callout ────────── */
.akk-labor-banners-grid {
    display: flex;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.akk-labor-banner {
    position: relative;
    flex: 1 1 0;
    min-height: 280px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.akk-labor-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.akk-labor-banner__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.akk-labor-banner__scrim {
    position: absolute;
    inset: 0;
}
.akk-labor-banner__scrim--navy {
    background: linear-gradient(120deg, rgba(13,26,78,0.96) 0%, rgba(13,26,78,0.88) 42%, rgba(13,26,78,0.28) 100%);
}
.akk-labor-banner__scrim--red {
    background: linear-gradient(120deg, rgba(214,40,40,0.92) 0%, rgba(13,26,78,0.9) 50%, rgba(13,26,78,0.3) 100%);
}
.akk-labor-banner__badge {
    position: absolute;
    top: 1.1rem;
    left: 1.25rem;
    height: 26px;
    width: auto;
    opacity: 0.95;
}
.akk-labor-banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    max-width: 82%;
}
.akk-labor-banner__pct {
    color: #FFFFFF;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}
.akk-labor-banner__pct span {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 0.25rem;
}
.akk-labor-banner__eyebrow {
    color: #FBBF24;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
}
.akk-labor-banner__title {
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 0.35rem;
}
.akk-labor-banner__sub {
    color: #CBD5E1;
    font-size: 0.85rem;
    margin: 0 0 0.9rem;
}
.akk-labor-banner__cta {
    display: inline-block;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #D62828;
    padding-bottom: 2px;
    width: fit-content;
}
@media (max-width: 900px) {
    .akk-labor-banners-grid {
        flex-direction: column;
    }
    .akk-labor-banner {
        min-height: 220px;
    }
}
@media (max-width: 580px) {
    .akk-labor-banners-grid {
        padding: 0 0.75rem;
        gap: 0.75rem;
    }
    .akk-labor-banner__content {
        padding: 1.1rem;
        max-width: 90%;
    }
    .akk-labor-banner__pct {
        font-size: 2.1rem;
    }
    .akk-labor-banner__title {
        font-size: 1.1rem;
    }
}

/* ── Wide banners (full-width strips, placed next to each category's
   tile row) — two layouts: "split" (color panel + product row or photo
   bleed) and "bookend" (photo fades in from both edges into a center
   panel). Typography follows one clean hierarchy: eyebrow → big value →
   title → sub → CTA — no stacked font sizes crammed into one line. ── */
.akk-wide-banner-stack {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.akk-wide-banner {
    position: relative;
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    min-height: 220px;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.akk-wide-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

/* Shared type hierarchy */
.akk-wide-banner__eyebrow {
    color: #FBBF24;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
.akk-wide-banner__value {
    color: #FFFFFF;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 0.45rem;
}
.akk-wide-banner__title {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.akk-wide-banner__title--center {
    font-size: 1.25rem;
    max-width: 30ch;
}
.akk-wide-banner__sub {
    color: #CBD5E1;
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0 0 1.1rem;
}
.akk-wide-banner__cta {
    display: inline-block;
    background: #D62828;
    color: #FFFFFF;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    width: fit-content;
}
.akk-wide-banner__cta--navy {
    background: #0D1A4E;
}

/* Split layout: solid panel (35%) + product row or photo bleed (65%) */
.akk-wide-banner--split {
    background: #FFFFFF;
}
.akk-wide-banner__panel {
    flex: 0 0 38%;
    background: #0D1A4E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.25rem;
}
.akk-wide-banner__panel--red {
    background: #D62828;
}
.akk-wide-banner__products {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    background: #FFFFFF;
    flex-wrap: wrap;
}
.akk-wide-banner__products img {
    height: 170px;
    width: auto;
    object-fit: contain;
}

/* "Scene" variant — products presented as floating spotlight cards over a
   real kitchen photo, instead of sitting bare on white. The product photos
   themselves stay untouched (still on their own white studio background);
   the white card simply matches that background so there's no visible seam,
   while the shadow grounds each card into the scene behind it. */
.akk-wide-banner__products--scene {
    position: relative;
    padding: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}
.akk-wide-banner__products-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.akk-wide-banner__products-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.7) 100%);
}
.akk-wide-banner__products-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 0 1.75rem;
    width: 100%;
}
.akk-wide-banner__product-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 175px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0.85rem;
    box-shadow: 0 12px 26px rgba(15,23,42,0.2), 0 2px 6px rgba(15,23,42,0.1);
}
.akk-wide-banner__product-card img {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: contain;
}
.akk-wide-banner__photobleed {
    flex: 1;
    position: relative;
}
.akk-wide-banner__photobleed img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Soften the hard seam where the color panel meets the photo — a short
   fade from the panel's own color into the image, instead of a flat cut. */
.akk-wide-banner__photobleed::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 60px;
    z-index: 2;
    background: linear-gradient(90deg, rgba(13,26,78,0.55) 0%, rgba(13,26,78,0) 100%);
}
.akk-wide-banner__panel--red + .akk-wide-banner__photobleed::before {
    background: linear-gradient(90deg, rgba(214,40,40,0.5) 0%, rgba(214,40,40,0) 100%);
}

/* Bookend layout: photo fades in from both edges into a center panel */
.akk-wide-banner--bookend {
    background: #0D1A4E;
}
.akk-wide-banner__side {
    flex: 0 0 22%;
    position: relative;
    overflow: hidden;
}
.akk-wide-banner__side img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.akk-wide-banner__side--left::after,
.akk-wide-banner__side--right::after {
    content: "";
    position: absolute;
    inset: 0;
}
.akk-wide-banner__side--left::after {
    background: linear-gradient(90deg, rgba(13,26,78,0) 0%, #0D1A4E 100%);
}
.akk-wide-banner__side--right::after {
    background: linear-gradient(270deg, rgba(13,26,78,0) 0%, #0D1A4E 100%);
}
.akk-wide-banner__center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.75rem;
}
.akk-wide-banner__badge {
    height: 24px;
    width: auto;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}
.akk-wide-banner__center .akk-wide-banner__sub {
    max-width: 40ch;
}

@media (max-width: 900px) {
    .akk-wide-banner--split {
        flex-direction: column;
    }
    .akk-wide-banner__panel {
        flex: none;
        padding: 1.5rem;
    }
    .akk-wide-banner__products {
        min-height: 160px;
    }
    .akk-wide-banner__products img {
        height: 110px;
    }
    .akk-wide-banner__products--scene {
        min-height: 220px;
        flex-wrap: wrap;
    }
    .akk-wide-banner__products-row {
        flex-wrap: wrap;
        padding: 1.25rem;
        gap: 0.9rem;
    }
    .akk-wide-banner__product-card {
        max-width: 130px;
    }
    .akk-wide-banner__product-card img {
        height: 95px;
    }
    .akk-wide-banner__photobleed {
        min-height: 180px;
    }
    .akk-wide-banner--bookend {
        flex-direction: column;
    }
    .akk-wide-banner__side {
        display: none;
    }
    .akk-wide-banner__center {
        padding: 1.75rem 1.25rem;
    }
}
@media (max-width: 580px) {
    .akk-wide-banner-stack {
        padding: 0 0.75rem;
    }
    .akk-wide-banner__value {
        font-size: 2.1rem;
    }
    .akk-wide-banner__title--center {
        font-size: 1.1rem;
    }
}

/* ── Shop By Category Grid ───────────────────────────────────── */
.akk-cat-grid-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.akk-cat-grid-eyebrow {
    color: #D62828;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}
.akk-cat-grid-title {
    color: #0A0A0F;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
}
.akk-cat-grid-view-all {
    color: #D62828;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.akk-cat-grid-view-all:hover { text-decoration: underline; }

/* Featured row (Deals tiles) */
.akk-cat-featured-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.akk-cat-featured-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #1E3A8A;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.akk-cat-featured-tile:hover {
    background: #152A66;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30,58,138,0.25);
    color: #FFFFFF;
}
.akk-cat-featured-tile:last-child {
    background: #D62828;
}
.akk-cat-featured-tile:last-child:hover {
    background: #A11D1D;
    box-shadow: 0 6px 20px rgba(214,40,40,0.25);
}

/* Icon grid — landscape tiles */
.akk-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.6rem;
}
.akk-cat-tile {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: #FFFFFF;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    min-height: 76px;
    text-decoration: none;
    transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.akk-cat-tile:hover {
    border-color: #1E3A8A;
    background: #F0F4FF;
    box-shadow: 0 4px 18px rgba(30,58,138,0.11);
    transform: translateY(-2px);
}
.akk-cat-tile:hover .akk-cat-tile__icon svg {
    stroke: #D62828;
}
.akk-cat-tile__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.akk-cat-tile__icon svg {
    width: 32px;
    height: 32px;
    stroke: #0A0A0F;
    transition: stroke 200ms ease;
}
.akk-cat-tile__name {
    color: #1E3A8A;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

@media (max-width: 900px) {
    .akk-cat-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 600px) {
    .akk-cat-featured-row { grid-template-columns: 1fr; }
    .akk-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .akk-cat-tile { min-height: 60px; padding: 0.75rem 1rem; gap: 0.75rem; }
    .akk-cat-tile__name { font-size: 0.82rem; }
}

/* ── Featured Guides section ─────────────────────────────────── */
.akk-guides-section {
    background-color: #0F172A;
}
.akk-guide-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.akk-guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.13);
}
.akk-guide-card__img-wrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0;
}
.akk-guide-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.akk-guide-card__tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #1E3A8A;
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}
.akk-guide-card__body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.akk-guide-card__meta {
    font-size: 0.72rem;
    color: #6B7280;
    margin: 0 0 0.6rem;
    font-weight: 500;
}
.akk-guide-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #0A0A0F;
    line-height: 1.35;
    margin: 0 0 0.75rem;
}
.akk-guide-card__excerpt {
    font-size: 0.85rem;
    color: #4B5563;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex: 1;
}
.akk-guide-card__link {
    color: #D62828;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start;
}
.akk-guide-card__link:hover {
    text-decoration: underline;
}
@media (max-width: 768px) {
    .akk-guide-card__img-wrap {
        height: 160px;
    }
}

/* ── Row 3: Category nav ─────────────────────────────────────── */
.akk-header-nav {
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

.akk-header-nav__inner {
    height: 42px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    white-space: nowrap;
}

.akk-nav-links {
    display: inline-flex;
    align-items: stretch;
    height: 100%;
    vertical-align: top;
}

.akk-header-nav__inner::-webkit-scrollbar {
    display: none;
}


.akk-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.5rem;
    height: 100%;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--akk-ink) !important;
    text-decoration: none !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.akk-nav-link:hover {
    color: var(--akk-primary) !important;
    border-bottom-color: var(--akk-primary);
}

.akk-nav-link--all {
    font-weight: 700;
    padding-left: 0;
}

.akk-nav-link--deals {
    color: var(--akk-accent) !important;
    font-weight: 700;
}

.akk-nav-link--deals:hover {
    color: var(--akk-accent-dark) !important;
    border-bottom-color: var(--akk-accent);
}
.akk-nav-link--active {
    color: var(--akk-accent) !important;
    border-bottom-color: var(--akk-accent) !important;
    font-weight: 700;
}
.akk-nav-link--divider {
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid #E5E7EB;
}

/* ── Nav dropdowns ───────────────────────────────────────────── */
.akk-nav-item {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: 100%;
    vertical-align: top;
}
.akk-nav-item > .akk-nav-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.akk-nav-dropdown {
    display: none;
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-top: 3px solid var(--akk-accent);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 99999;
    padding: 6px 0;
}
.akk-nav-item:hover .akk-nav-dropdown,
.akk-nav-item:focus-within .akk-nav-dropdown {
    display: block;
}
.akk-nav-dropdown a {
    display: block;
    padding: 9px 18px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.akk-nav-dropdown a:hover {
    background: #F1F5F9;
    color: #0F172A !important;
}
.akk-nav-dropdown a.is-subcat-active {
    color: var(--akk-accent) !important;
    font-weight: 600;
}
.akk-nav-dropdown__divider {
    height: 1px;
    background: #F1F5F9;
    margin: 4px 0;
}

/* 3rd-level type flyout — a normal nested DOM child (not reparented), so
   keyboard Tab order threads through it without any extra bridging JS. */
.akk-nav-dropdown__row {
    position: relative;
}
.akk-nav-dropdown__row--has-flyout > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.akk-nav-flyout-caret {
    flex-shrink: 0;
    opacity: 0.5;
}
.akk-nav-flyout {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-top: 3px solid var(--akk-accent);
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100000;
    padding: 6px 0;
}
.akk-nav-flyout--flip {
    left: auto;
    right: 100%;
    border-radius: 8px 0 8px 8px;
}

/* ── Mobile: collapse gracefully ─────────────────────────────── */
@media (max-width: 900px) {
    .akk-header-main__inner {
        gap: 0.75rem;
        height: 64px;
    }
    .akk-logo-img {
        height: 42px;
    }
    .akk-search-cat {
        display: none; /* hide category dropdown on tablet */
    }
    .akk-search-divider {
        display: none;
    }
    .akk-header-location {
        display: none; /* hide on tablet, save space */
    }
    .akk-action-label {
        display: none; /* icons only on tablet */
    }
    .akk-header-action {
        padding: 0.5rem;
    }
}

@media (max-width: 600px) {
    .akk-promo-bar__links {
        display: none;
    }
    .akk-header-main__inner {
        height: 58px;
        gap: 0.5rem;
    }
    .akk-logo-img {
        height: 36px;
    }
    .akk-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ── Showroom — responsive 2-column to stacked ────────────────── */

@media (max-width: 781px) {
    .wp-block-group[style*="background-color:#1E3A8A"] > .wp-block-group > .wp-block-columns {
        flex-direction: column !important;
    }
    .wp-block-group[style*="background-color:#1E3A8A"] > .wp-block-group > .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — Hamburger button + Slide-in Drawer
   ══════════════════════════════════════════════════════════════ */

/* ── Hamburger button (desktop: hidden, mobile: visible) ─────── */
.akk-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 40px;
    padding: 10px 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 150ms ease;
    gap: 5px;
}
.akk-hamburger:hover { background: #F1F5F9; }

.akk-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--akk-ink);
    border-radius: 2px;
    transition: transform 260ms ease, opacity 200ms ease, width 200ms ease;
    transform-origin: center;
    flex-shrink: 0;
}

.akk-hamburger.is-open .akk-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.akk-hamburger.is-open .akk-hamburger__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}
.akk-hamburger.is-open .akk-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer shell ─────────────────────────────────────── */
.akk-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998;
}
.akk-mobile-nav.is-open { display: block; }

.akk-mobile-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: akkOverlayIn 220ms ease forwards;
}
@keyframes akkOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.akk-mobile-nav__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
    animation: akkPanelIn 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes akkPanelIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* ── Drawer header row ───────────────────────────────────────── */
.akk-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    background: var(--akk-ink);
    flex-shrink: 0;
}
.akk-mobile-nav__header-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.akk-mobile-nav__close {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: background 150ms ease;
}
.akk-mobile-nav__close:hover { background: rgba(255, 255, 255, 0.22); }

/* ── Drawer search ───────────────────────────────────────────── */
.akk-mobile-nav__search {
    padding: 12px 14px;
    background: #F8FAFC;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}
.akk-mobile-nav__search-form {
    display: flex;
    height: 42px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    transition: border-color 150ms ease;
}
.akk-mobile-nav__search-form:focus-within { border-color: var(--akk-primary); }
.akk-mobile-nav__search-input {
    flex: 1;
    border: none;
    padding: 0 12px;
    font-size: 0.9rem;
    color: var(--akk-ink);
    background: transparent;
    outline: none;
}
.akk-mobile-nav__search-input::placeholder { color: #94A3B8; }
.akk-mobile-nav__search-btn {
    width: 44px;
    background: var(--akk-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    transition: background 150ms ease;
}
.akk-mobile-nav__search-btn:hover { background: var(--akk-accent-dark); }

/* ── Drawer nav body (scrollable) ────────────────────────────── */
.akk-mobile-nav__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Top-level link rows */
.akk-mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--akk-ink);
    text-decoration: none;
    border-bottom: 1px solid #F1F5F9;
    transition: background 120ms ease, color 120ms ease;
}
.akk-mobile-nav__link:hover { background: #F8FAFC; color: var(--akk-primary); }
.akk-mobile-nav__link--all  { color: var(--akk-primary); font-weight: 700; }
.akk-mobile-nav__link--deals { color: var(--akk-accent); font-weight: 700; }
.akk-mobile-nav__link--secondary { font-size: 0.88rem; font-weight: 500; color: #475569; }
.akk-mobile-nav__link--secondary:hover { color: var(--akk-primary); }

/* Category items with expand button */
.akk-mobile-nav__cat-item { border-bottom: 1px solid #F1F5F9; }
.akk-mobile-nav__cat-header { display: flex; align-items: stretch; }

.akk-mobile-nav__cat-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 14px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--akk-ink);
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease;
}
.akk-mobile-nav__cat-link:hover { color: var(--akk-primary); background: #F8FAFC; }

.akk-mobile-nav__expand {
    width: 48px;
    background: none;
    border: none;
    border-left: 1px solid #F1F5F9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    transition: color 150ms ease, background 150ms ease;
    flex-shrink: 0;
}
.akk-mobile-nav__expand:hover { background: #F8FAFC; color: var(--akk-primary); }
.akk-mobile-nav__expand svg { transition: transform 250ms ease; }
.akk-mobile-nav__expand.is-open svg { transform: rotate(180deg); }

/* Subcategory list */
.akk-mobile-nav__sub {
    display: none;
    background: #F8FAFC;
    border-top: 1px solid #F1F5F9;
}
.akk-mobile-nav__sub.is-open { display: block; }
.akk-mobile-nav__sub a {
    display: block;
    padding: 11px 20px 11px 36px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    border-bottom: 1px solid #F1F5F9;
    transition: color 120ms ease, background 120ms ease;
}
.akk-mobile-nav__sub a:last-child { border-bottom: none; }
.akk-mobile-nav__sub a:hover { color: var(--akk-primary); background: #EFF6FF; }

/* 3rd-level type accordion nested inside a 2nd-level subcategory list */
.akk-mobile-nav__cat-item--nested { border-bottom: 1px solid #E2E8F0; }
.akk-mobile-nav__cat-item--nested .akk-mobile-nav__cat-link {
    padding-left: 36px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
}
.akk-mobile-nav__cat-item--nested .akk-mobile-nav__cat-link:hover { color: var(--akk-primary); }
.akk-mobile-nav__sub--nested { background: #EFF2F7; }
.akk-mobile-nav__sub--nested a { padding-left: 52px; }

/* Section labels (More, Account) */
.akk-mobile-nav__section-label {
    padding: 10px 20px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94A3B8;
    background: #F8FAFC;
    border-bottom: 1px solid #E5E7EB;
    border-top: 4px solid #E5E7EB;
}

/* Mobile search row — hidden on desktop, shown on mobile */
.akk-mobile-search-row {
    display: none;
    background: #fff;
    padding: 0 1rem 10px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-mobile-search-row .akk-search-form {
    width: 100%;
}

/* ── Mobile header overrides (≤ 768px) ───────────────────────── */
@media (max-width: 768px) {
    /* Show hamburger */
    .akk-hamburger { display: flex; }

    /* Hide desktop search bar from logo row — it moves to its own row below */
    .akk-header-search { display: none; }

    /* Spread hamburger ←→ logo ←→ account+cart across the full row */
    .akk-header-main__inner { justify-content: space-between; }

    /* Show mobile search row */
    .akk-mobile-search-row { display: block; }

    /* Show account icon next to cart on mobile (label already hidden at 900px) */
    .akk-header-action { display: flex; }

    /* Hide Row 3 category nav — all links now in drawer */
    .akk-header-nav { display: none; }

    /* Search button — larger tap target, bigger icon on mobile */
    .akk-search-btn { width: 54px; }
    .akk-search-btn svg { width: 26px; height: 26px; }

    /* Fix logo height override — ID selector beats inline !important */
    #akk-header .akk-logo-img { height: 36px !important; }

    /* Reduce promo bar height */
    .akk-promo-bar__inner { height: 30px; }

    /* Search suggestions — bigger touch targets on mobile */
    .akk-search-suggest__item { padding: 10px 14px; }
}

/* On checkout: hide hamburger (distraction-free) */
body.woocommerce-checkout .akk-hamburger { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   CART PAGE — Mobile stacking (S25 Ultra 412px target)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    /* Stack the 2-column layout */
    body.woocommerce-cart .woocommerce-cart-form    { padding: 20px 20px 32px !important; }
    body.woocommerce-cart .cart-collaterals         { width: 100% !important; padding: 0 20px 32px !important; }
    body.woocommerce-cart .cart_totals              { position: static !important; transform: none !important; }
    body.woocommerce-cart .woocommerce-notices-wrapper { padding: 12px 20px 0 !important; }
    .akk-cart-hero__inner  { padding: 0 20px; }
    .akk-cart-hero__title  { font-size: 1.25rem; }
    .akk-cart-hero__badges { display: none; }
}

@media (max-width: 580px) {
    body.woocommerce-cart .woocommerce-cart-form    { padding: 14px 12px 24px !important; }
    body.woocommerce-cart .cart-collaterals         { padding: 0 12px 24px !important; }
    body.woocommerce-cart .cart_totals h2           { padding: 16px 16px 12px !important; }
    body.woocommerce-cart .cart_totals table th,
    body.woocommerce-cart .cart_totals table td     { padding: 10px 16px !important; }
    body.woocommerce-cart .cart_totals .order-total th,
    body.woocommerce-cart .cart_totals .order-total td { padding: 12px 16px !important; }
    /* Cart table product thumbnail column */
    body.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-thumbnail,
    body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 60px !important; padding: 12px 6px !important; }
    body.woocommerce-cart .woocommerce-cart-form table.shop_table .product-remove { padding: 12px 6px !important; }
    body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-name  { padding: 12px 8px !important; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE MOBILE — Session 24
   Promo strip · Deal tiles · Stats bar · Category grid · Guides
   Target: Samsung Galaxy S25 Ultra (412px viewport)
   ══════════════════════════════════════════════════════════════ */

/* ── Promo strip — tighter on mobile ─────────────────────────── */
@media (max-width: 580px) {
    .akk-promo-strip {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .akk-promo-strip p {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 580px) {
    /* Section outer padding */
    .akk-deal-tiles-section {
        padding-top: 1rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 1.25rem !important;
    }
    /* Row label headings (Labor Day Spotlight — the only row label left) */
    .akk-deal-tiles-section h2.wp-block-heading {
        font-size: 0.95rem !important;
    }
    /* Spotlight label margin */
    .akk-deal-tiles-section .wp-block-group[style*="margin-top:1.75rem"] {
        margin-top: 1.1rem !important;
        margin-bottom: 0.625rem !important;
    }
}

/* ── Stats bar — 2×2 on mobile (not 4 stacked) ───────────────── */
@media (max-width: 580px) {
    .akk-hero-stats-bar {
        padding-top: 1.1rem !important;
        padding-bottom: 1.1rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .akk-hero-stats-bar .wp-block-columns {
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }
    .akk-hero-stats-bar .wp-block-columns > .wp-block-column {
        flex-basis: 50% !important;
        max-width: 50% !important;
        border-left: none !important;
        padding-left: 0 !important;
        padding-bottom: 0.75rem !important;
    }
    /* Right column in each row gets a left divider */
    .akk-hero-stats-bar .wp-block-columns > .wp-block-column:nth-child(even) {
        border-left: 1px solid rgba(255,255,255,0.1) !important;
    }
    /* Bottom row: no bottom padding needed */
    .akk-hero-stats-bar .wp-block-columns > .wp-block-column:nth-last-child(-n+2) {
        padding-bottom: 0 !important;
    }
    /* Big stat number — slightly smaller */
    .akk-hero-stats-bar .wp-block-columns > .wp-block-column p:first-child {
        font-size: 1.6rem !important;
    }
}

/* ── Category grid section — tighter on mobile ────────────────── */
@media (max-width: 580px) {
    .akk-cat-grid-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .akk-cat-grid-title { font-size: 1.35rem; }
    .akk-cat-grid-view-all { font-size: 0.82rem; }
    .akk-cat-grid-header { margin-bottom: 1rem; }
    /* Featured tiles (Deals) — more compact */
    .akk-cat-featured-tile {
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
        gap: 0.5rem;
    }
    .akk-cat-featured-tile svg {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0;
    }
}

/* ── Featured Guides — horizontal scroll carousel on mobile ───── */
@media (max-width: 580px) {
    .akk-guides-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    /* Stack header row: title block on top, "Browse All" below */
    .akk-guides-section .wp-block-group[style*="margin-bottom:2rem"],
    .akk-guides-section .wp-block-group[style*="margin-bottom: 2rem"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }
    .akk-guides-section h2.wp-block-heading {
        font-size: 1.35rem !important;
    }
    /* Horizontal scroll: show 1.15 cards at a time — hints at more */
    .akk-guides-section .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0.875rem !important;
        padding-bottom: 4px !important;
    }
    .akk-guides-section .wp-block-columns::-webkit-scrollbar { display: none; }
    .akk-guides-section .wp-block-columns > .wp-block-column {
        flex: 0 0 272px !important;
        min-width: 0 !important;
        max-width: 272px !important;
    }
    /* Card internals — tighten for smaller card */
    .akk-guide-card__img-wrap { height: 140px !important; }
    .akk-guide-card__body     { padding: 1rem 1rem 1.25rem; }
    .akk-guide-card__title    { font-size: 0.92rem; }
    .akk-guide-card__excerpt  { font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════════
   SINGLE PRODUCT — Express checkout suppression
   Google Pay / Amazon Pay / Pay with Link bypass the cart and
   skip the required purchasing flow. Hidden everywhere on the
   single product page so customers go through cart → checkout.
   ══════════════════════════════════════════════════════════════ */
body.single-product #wc-stripe-express-checkout-element,
body.single-product #wc-stripe-express-checkout-button-separator,
body.single-product .wc-stripe-payment-request-wrapper,
body.single-product .wc-stripe-payment-request-button-separator,
body.single-product #wcpay-payment-request-wrapper,
body.single-product .wcpay-payment-request-button-container,
body.single-product .wp-block-woocommerce-checkout-express-payment-block { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   ACCOUNT SIGN-IN DRAWER (right slide-out)
   Header trigger → drawer flow. Matches Lowe's/HD pattern.
   Two-step: identifier check → password / set-password / new-visitor.
   ══════════════════════════════════════════════════════════════ */
.akk-account-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.akk-account-drawer.is-open { display: block; }

.akk-account-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    transition: opacity 200ms ease;
    will-change: opacity;
    cursor: pointer;
}
.akk-account-drawer.is-open .akk-account-drawer__overlay {
    opacity: 1;
}

.akk-account-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 92vw;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    animation: akkDrawerSlideIn 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes akkDrawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header ─────────────────────────────────────────────────── */
.akk-account-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}
.akk-account-drawer__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--akk-ink);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.akk-account-drawer__close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--akk-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease, color 150ms ease;
    flex-shrink: 0;
}
.akk-account-drawer__close:hover {
    background: #F1F5F9;
    color: #000;
}
.akk-account-drawer__close:focus-visible {
    outline: 2px solid var(--akk-primary);
    outline-offset: 2px;
}
/* Force the SVG to hold its own size — Kadence/Woo have rules that squish
   SVGs inside <button>, which was rendering the X as an invisible 0-width. */
.akk-account-drawer__close svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}
.akk-account-drawer__close svg line {
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* ── Body (scrollable) ──────────────────────────────────────── */
.akk-account-drawer__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px;
}

/* ── Reset-bounce banner (Option A: password reset → back to drawer) ─ */
.akk-drawer-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px 0;
    padding: 12px 14px;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 500;
}
.akk-drawer-notice--success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.akk-drawer-notice__icon {
    flex-shrink: 0;
    stroke: #059669;
    margin-top: 1px;
}
.akk-drawer-notice__text {
    flex: 1;
}

/* ── Forms & shared bits ────────────────────────────────────── */
.akk-drawer-form + .akk-drawer-quicklinks,
.akk-drawer-form + .akk-drawer-pros {
    margin-top: 24px;
}
.akk-drawer-copy {
    font-size: 0.95rem;
    color: var(--akk-ink);
    line-height: 1.55;
    margin: 0 0 18px;
}
.akk-drawer-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--akk-ink-soft);
    margin-bottom: 6px;
}
.akk-drawer-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--akk-ink);
    background: #FFFFFF;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.akk-drawer-input:focus {
    outline: none;
    border-color: var(--akk-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}
.akk-drawer-error {
    font-size: 0.85rem;
    color: var(--akk-accent);
    margin: 8px 0 0;
    min-height: 1.2em;
    line-height: 1.35;
}
.akk-drawer-error:empty { display: none; }

/* Account-type picker — Step 3 of the create-account drawer flow. Two
   selectable cards ("Personal" = AKK VIP Rewards vs. "Business/Trade" =
   AKK Pro Elite), matching the fork familiar from Home Depot's own
   personal-vs-Pro-Xtra signup step. Radio-based so it degrades to plain
   accessible form controls with no JS; the label wrap makes the whole
   card clickable, and akkDrawerAccountType* JS below just toggles the
   is-selected class for the visual state (:has() would do this alone in
   modern browsers, but the JS keeps it working everywhere). */
.akk-drawer-account-type {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.akk-drawer-account-type__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
}
.akk-drawer-account-type__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.akk-drawer-account-type__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: #F1F5F9;
    color: var(--akk-ink-soft);
}
.akk-drawer-account-type__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--akk-ink);
}
.akk-drawer-account-type__sub {
    display: block;
    font-size: 0.78rem;
    color: var(--akk-ink-soft);
    margin-top: 2px;
    line-height: 1.4;
}
.akk-drawer-account-type__option--vip.is-selected {
    border-color: var(--akk-primary);
    background: rgba(30, 58, 138, 0.05);
}
.akk-drawer-account-type__option--vip.is-selected .akk-drawer-account-type__icon {
    background: var(--akk-primary);
    color: #FBBF24;
}
.akk-drawer-account-type__option--pro.is-selected {
    border-color: var(--akk-pro-gold, #C9A961);
    background: rgba(201, 169, 97, 0.06);
}
.akk-drawer-account-type__option--pro.is-selected .akk-drawer-account-type__icon {
    background: var(--akk-pro-navy, #060D1F);
    color: var(--akk-pro-gold, #C9A961);
}

.akk-drawer-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 13px 18px;
    background: var(--akk-primary);
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--akk-primary-dark);
    transition: background 150ms ease, transform 100ms ease;
    text-align: center;
}
.akk-drawer-primary:hover {
    background: var(--akk-primary-dark);
    color: #FFFFFF !important;
    text-decoration: none;
}
.akk-drawer-primary:active { transform: translateY(1px); }
.akk-drawer-primary[disabled] { opacity: 0.7; cursor: wait; }
.akk-drawer-primary__spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: akkDrawerSpin 700ms linear infinite;
}
.akk-drawer-primary.is-loading .akk-drawer-primary__spinner { display: inline-block; }
.akk-drawer-primary.is-loading .akk-drawer-primary__label    { opacity: 0.8; }
@keyframes akkDrawerSpin {
    to { transform: rotate(360deg); }
}

.akk-drawer-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 12px 18px;
    background: #FFFFFF;
    color: var(--akk-primary) !important;
    border: 1.5px solid var(--akk-primary);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease;
    text-align: center;
}
.akk-drawer-secondary:hover {
    background: rgba(30, 58, 138, 0.05);
    text-decoration: none;
}

.akk-drawer-legal {
    font-size: 0.78rem;
    color: var(--akk-ink-soft);
    margin: 14px 0 0;
    line-height: 1.5;
}
.akk-drawer-legal a {
    color: var(--akk-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.akk-drawer-linkbtn {
    background: none;
    border: none;
    padding: 0;
    color: var(--akk-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.akk-drawer-lostpw {
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.9rem;
}
.akk-drawer-lostpw a {
    color: var(--akk-primary);
    text-decoration: none;
    font-weight: 600;
}
.akk-drawer-lostpw a:hover { text-decoration: underline; }

.akk-drawer-back {
    background: none;
    border: none;
    padding: 0;
    color: var(--akk-ink-soft);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    transition: color 150ms ease;
}
.akk-drawer-back:hover { color: var(--akk-primary); }

/* ── Logged-in greeting block ────────────────────────────────── */
.akk-drawer-greeting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border-radius: 12px;
    margin-bottom: 18px;
}
.akk-drawer-greeting__avatar {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--akk-accent);
    color: #FFFFFF;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    overflow: hidden;
}
.akk-drawer-greeting__avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.akk-drawer-greeting__avatar.has-photo {
    background: transparent;
}
.akk-drawer-greeting__lead {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 3px;
}
.akk-drawer-greeting__sub {
    margin: 0;
    font-size: 0.8rem;
}
.akk-drawer-vip {
    display: inline-block;
    background: var(--akk-primary);
    color: #FBBF24;   /* Warm gold — matches identity-card VIP badge */
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}

/* Pro Elite variant of the drawer greeting card — a distinct, more premium
   treatment than the shared VIP/generic dark card above, using the same
   aerospace-luxury navy/gold tokens as the rest of the Pro Elite surfaces
   (inc/pro-elite/badges.php's akk_pro_elite_global_styles()) instead of the
   generic dark navy every logged-in customer otherwise gets. A thin gold
   edge + soft glow reads as "premium tier" without a loud full reskin —
   restraint over marketing-speak, per BRAND-VOICE-GUIDE.md. */
.akk-drawer-greeting--pro {
    background: linear-gradient(160deg, var(--akk-pro-navy-deep, #060D1F) 0%, var(--akk-pro-navy, #060D1F) 100%);
    border: 1px solid var(--akk-pro-gold, #C9A961);
    box-shadow: 0 0 0 1px rgba(201,169,97,.15), 0 8px 24px rgba(6,13,31,.35);
}
.akk-drawer-pro-label {
    margin: 0 0 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--akk-pro-gold, #C9A961);
}

/* ── Quick-link tiles ───────────────────────────────────────── */
.akk-drawer-quicklinks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #E5E7EB;
}
.akk-drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--akk-ink);
    transition: background 150ms ease;
}
.akk-drawer-link:hover {
    background: #F8FAFC;
    text-decoration: none;
    color: var(--akk-ink);
}
.akk-drawer-link__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(30, 58, 138, 0.08);
    color: var(--akk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.akk-drawer-link__icon svg {
    width: 20px;
    height: 20px;
}
.akk-drawer-link__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.akk-drawer-link__label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--akk-ink);
    line-height: 1.25;
}
.akk-drawer-link__sub {
    font-size: 0.78rem;
    color: var(--akk-ink-soft);
    line-height: 1.35;
}
.akk-drawer-link__chev {
    color: #94A3B8;
    font-size: 1.15rem;
    line-height: 1;
    padding-left: 4px;
}

/* ── For-Pros callout (Pro Elite palette: blue + gray) ─────── */
.akk-drawer-pros {
    margin-top: 22px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: linear-gradient(160deg, #1E3A8A 0%, #0F172A 100%);
    box-shadow:
        0 10px 28px rgba(15, 23, 42, 0.28),
        0 2px 6px rgba(15, 23, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.akk-drawer-pros__eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FF4444;
    margin: 0 0 7px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.akk-drawer-pros__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}
.akk-drawer-pros__copy {
    font-size: 0.85rem;
    color: #CBD5E1;
    line-height: 1.55;
    margin: 0 0 14px;
}
/* Scoped button — Pro Elite treatment (gray fill, navy text).
   Only overrides the "Learn about Pro Elite" CTA — the "Log out"
   button (also .akk-drawer-secondary) is unaffected. */
.akk-drawer-pros .akk-drawer-secondary {
    margin-top: 0;
    background: #E2E8F0;
    color: var(--akk-primary) !important;
    border: none;
    font-weight: 700;
    box-shadow:
        0 2px 0 rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: background 150ms ease, transform 100ms ease;
}
.akk-drawer-pros .akk-drawer-secondary:hover {
    background: #F1F5F9;
    color: var(--akk-ink) !important;
}
.akk-drawer-pros .akk-drawer-secondary:active {
    transform: translateY(1px);
}

/* ── "or" divider between Continue and Create Account ──────── */
.akk-drawer-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.akk-drawer-or::before,
.akk-drawer-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}
.akk-drawer-secondary--create {
    margin-top: 0;
}

/* ── Create-account form ────────────────────────────────────── */
.akk-drawer-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 0;
}
.akk-drawer-field {
    display: flex;
    flex-direction: column;
}
.akk-drawer-hint {
    font-size: 0.78rem;
    color: var(--akk-ink-soft);
    margin: 5px 0 0;
}
.akk-drawer-match {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 6px 0 0;
    min-height: 1.1em;
    line-height: 1.35;
}
.akk-drawer-match:empty { display: none; }
.akk-drawer-match--ok { color: #059669; }
.akk-drawer-match--no { color: #DC2626; }

.akk-drawer-form .akk-drawer-label + .akk-drawer-input {
    margin-bottom: 0;
}
.akk-drawer-form .akk-drawer-input + .akk-drawer-label {
    margin-top: 16px;
}
.akk-drawer-form .akk-drawer-hint + .akk-drawer-label,
.akk-drawer-form .akk-drawer-match + .akk-drawer-label {
    margin-top: 16px;
}

.akk-drawer-step-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--akk-ink);
    margin: 8px 0 8px;
    letter-spacing: -0.01em;
}

/* ── 6-digit code entry ─────────────────────────────────────── */
.akk-drawer-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 22px 0 6px;
}
.akk-drawer-code__box {
    width: 42px;
    height: 54px;
    padding: 0;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--akk-ink);
    text-align: center;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none;
    appearance: none;
    caret-color: var(--akk-primary);
}
.akk-drawer-code__box:focus {
    outline: none;
    border-color: var(--akk-primary);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}
.akk-drawer-code__sep {
    color: #94A3B8;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 4px;
}

.akk-drawer-resend {
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: var(--akk-ink-soft);
}
.akk-drawer-resend .akk-drawer-linkbtn {
    font-weight: 700;
}
.akk-drawer-resend__cd {
    color: #94A3B8;
    font-size: 0.82rem;
    margin-left: 4px;
}

/* ── Success state ──────────────────────────────────────────── */
.akk-drawer-success {
    text-align: center;
    padding: 24px 0 8px;
}
.akk-drawer-success__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: #ECFDF5;
    color: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: akkSuccessPop 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.akk-drawer-success__icon svg {
    width: 40px;
    height: 40px;
}
@keyframes akkSuccessPop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.akk-drawer-success .akk-drawer-step-title { text-align: center; }
.akk-drawer-success .akk-drawer-copy { text-align: center; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .akk-account-drawer__panel {
        width: 100%;
        max-width: 100%;
    }
    .akk-account-drawer__body {
        padding: 18px;
    }
    .akk-drawer-code__box {
        width: 38px;
        height: 50px;
        font-size: 1.35rem;
    }
    .akk-drawer-code {
        gap: 4px;
    }
    .akk-drawer-code__sep {
        padding: 0 2px;
    }
}

/* ============================================================================
 * AKK REWARDS — VIP My Account dashboard (Q6a / Q6b / Q6c)
 * Shared chassis with Pro Elite; VIP is the quiet baseline.
 * Palette: navy #1E3A8A + red #D62828 + neutrals. Never orange.
 * ============================================================================ */

/* ── Page chrome — 2-col grid, mobile stacks ────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
    font-family: Arial, Helvetica, sans-serif;
}
.woocommerce-account .woocommerce-MyAccount-content {
    font-family: Arial, Helvetica, sans-serif;
}

/* Identity card CSS lives in page-my-account.php inline <style> block (S33 hero rebuild). */

/* ── AKK badges (VIP + Military + inline hub variant) ────────────────────── */
.akk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.akk-badge--vip {
    background: #1E3A8A;
    color: #FBBF24;   /* Warm gold — classic VIP feel, pops on navy */
}
.akk-badge--vip .akk-badge__star {
    color: #FBBF24;   /* Star matches the text */
    font-size: 0.85rem;
    line-height: 1;
}
.akk-badge--military {
    background: #ECFDF5;
    color: #15803D;
    border: 1px solid #A7F3D0;
}
.akk-badge--military .akk-badge__ribbon {
    font-size: 0.9rem;
    line-height: 1;
}

/* VIP avatar ring — the non-Pro counterpart to inc/pro-elite/badges.php's
   .akk-pro-avatar-ring, so the compact header trigger next to the cart
   always shows *something* for a logged-in customer, not just Pro Elite
   members. Same warm-gold tone as .akk-badge--vip above, applied as a ring
   instead of a background so it reads correctly on the header's own bg. */
.akk-vip-avatar-ring { position: relative; display: inline-flex; border-radius: 50%; }
.akk-vip-avatar-ring .akk-header-avatar {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #FBBF24;
}
.akk-vip-avatar-ring__corner {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBBF24;
    border: 2px solid #FFFFFF;
    color: #1E3A8A;
    font-size: 10px;
    line-height: 1;
}
.akk-badge--inline {
    /* Used in the dashboard welcome row, sits alongside the greeting */
    flex-shrink: 0;
}

/* Sidebar nav list — styling lives in page-my-account.php inline <style>
   (S33 dark-theme rebuild). The old light-theme block that was here has
   been removed to stop cascade fights (was winning on higher specificity
   via .woocommerce-MyAccount-navigation-link--dashboard.is-active). */

/* ── Support card ────────────────────────────────────────────────────────── */
.akk-support-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.akk-support-card__status {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-support-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    grid-row: span 2;
}
.akk-support-card__dot--open {
    background: #15803D;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}
.akk-support-card__dot--closed {
    background: #6B7280;
}
.akk-support-card__status-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.akk-support-card__status-sub {
    font-size: 0.78rem;
    color: #6B7280;
    line-height: 1.2;
}
.akk-support-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}
.akk-support-card__phone {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
}
.akk-support-card__phone a {
    color: #1E3A8A;
    text-decoration: none;
}
.akk-support-card__email {
    margin: 0 0 8px;
    font-size: 0.85rem;
}
.akk-support-card__email a {
    color: #374151;
    text-decoration: none;
    word-break: break-all;
}
.akk-support-card__hours {
    margin: 0 0 12px;
    font-size: 0.8rem;
    color: #6B7280;
}
.akk-support-card__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
}
.akk-support-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #F1F5F9;
    border-radius: 8px;
    color: #1E3A8A;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.akk-support-card__link:hover,
.akk-support-card__link:focus {
    background: #E5E7EB;
    color: #152A66;
}
.akk-support-card__link svg {
    flex-shrink: 0;
}

/* ── Dashboard right column ──────────────────────────────────────────────── */
.akk-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Welcome strip */
.akk-dashboard__welcome {
    padding: 4px 0 0;
}
.akk-dashboard__eyebrow {
    margin: 0 0 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B7280;
}
.akk-dashboard__welcome-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.akk-dashboard__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
}
.akk-dashboard__sub {
    margin: 0;
    color: #6B7280;
    font-size: 0.95rem;
}

/* ── Recognition / relationship card ─────────────────────────────────────── */
.akk-recognition {
    background: linear-gradient(135deg, #1E3A8A 0%, #152A66 100%);
    color: #FFFFFF;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    box-shadow: 0 8px 28px rgba(30, 58, 138, 0.18);
}
.akk-recognition__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
}
.akk-recognition__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
}
/* Star icon (VIP Recognized stat) — gold to match VIP badge treatment.
   Only the 3rd recognition stat has an SVG; numeric stats stay white. */
.akk-recognition__value svg {
    color: #FBBF24;
    fill: currentColor;
}
.akk-recognition__label {
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}
.akk-recognition__welcome {
    text-align: left;
    width: 100%;
}
.akk-recognition__welcome-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
}
.akk-recognition__welcome-sub {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.akk-recognition__cta {
    display: inline-block;
    padding: 8px 14px;
    background: #FFFFFF;
    color: #1E3A8A;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease, transform 150ms ease;
}
.akk-recognition__cta:hover,
.akk-recognition__cta:focus {
    background: #F5F6F8;
    transform: translateY(-1px);
}

/* ── Inbox module ────────────────────────────────────────────────────────── */
.akk-inbox {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 6px 0 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.akk-inbox__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-inbox__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
.akk-inbox__meta {
    font-size: 0.78rem;
    color: #6B7280;
    font-weight: 600;
}
.akk-inbox__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #F1F5F9;
    text-decoration: none;
    color: inherit;
    transition: background-color 150ms ease;
}
.akk-inbox__item:last-child {
    border-bottom: 0;
}
.akk-inbox__item:hover,
.akk-inbox__item:focus {
    background: #F5F6F8;
}
.akk-inbox__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #6B7280;
}
.akk-inbox__dot--completed { background: #15803D; box-shadow: 0 0 0 3px #ECFDF5; }
.akk-inbox__dot--processing { background: #1E3A8A; box-shadow: 0 0 0 3px #EDF0F5; }
.akk-inbox__dot--on-hold    { background: #B45309; box-shadow: 0 0 0 3px #FEF9E7; }
.akk-inbox__dot--pending    { background: #6B7280; box-shadow: 0 0 0 3px #F1F5F9; }
.akk-inbox__dot--cancelled,
.akk-inbox__dot--failed,
.akk-inbox__dot--refunded   { background: #D62828; box-shadow: 0 0 0 3px #FEF2F2; }
.akk-inbox__dot--security   { background: #D62828; box-shadow: 0 0 0 3px #FEF2F2; }
.akk-inbox__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.akk-inbox__lead {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.akk-inbox__note {
    font-size: 0.82rem;
    color: #6B7280;
    line-height: 1.4;
}
.akk-inbox__chev {
    color: #9CA3AF;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 400;
    flex-shrink: 0;
}
.akk-inbox__empty {
    padding: 24px 20px 26px;
    text-align: center;
}
.akk-inbox__empty-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}
.akk-inbox__empty-sub {
    margin: 0;
    font-size: 0.85rem;
    color: #6B7280;
    line-height: 1.5;
}

/* ── 6-tile hub ──────────────────────────────────────────────────────────── */
.akk-hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.akk-hub__tile {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px 16px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 128px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.akk-hub__tile:hover,
.akk-hub__tile:focus {
    transform: translateY(-2px);
    border-color: #1E3A8A;
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12);
}
.akk-hub__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #EDF0F5;
    color: #1E3A8A;
    border-radius: 10px;
    flex-shrink: 0;
}
.akk-hub__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.akk-hub__label {
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-top: auto;
}
.akk-hub__meta {
    font-size: 0.8rem;
    color: #6B7280;
    line-height: 1.3;
}

/* ── Recent Orders preview ───────────────────────────────────────────────── */
.akk-recent {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 6px 0 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.akk-recent__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-recent__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
.akk-recent__viewall {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E3A8A;
    text-decoration: none;
}
.akk-recent__viewall:hover,
.akk-recent__viewall:focus {
    text-decoration: underline;
}
.akk-recent__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.akk-recent__item {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-recent__item:last-child {
    border-bottom: 0;
}
.akk-recent__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #F1F5F9 center / cover no-repeat;
    border: 1px solid #E5E7EB;
    flex-shrink: 0;
}
.akk-recent__body {
    min-width: 0;
}
.akk-recent__lead {
    margin: 0 0 3px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.akk-recent__date {
    font-weight: 500;
    color: #6B7280;
}
.akk-recent__meta-sep {
    margin: 0 4px;
    color: #9CA3AF;
    font-weight: 400;
}
.akk-recent__sub {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.3;
}
.akk-recent__sub .amount,
.akk-recent__sub bdi {
    font-weight: 700;
    color: #111827;
}
.akk-recent__view {
    padding: 7px 14px;
    background: #F1F5F9;
    color: #1E3A8A;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease;
    white-space: nowrap;
}
.akk-recent__view:hover,
.akk-recent__view:focus {
    background: #1E3A8A;
    color: #FFFFFF;
}
.akk-recent__empty {
    padding: 26px 20px 28px;
    text-align: center;
}
.akk-recent__empty-title {
    margin: 0 0 4px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #111827;
}
.akk-recent__empty-sub {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: #6B7280;
    line-height: 1.5;
}
.akk-recent__empty-cta {
    display: inline-block;
    padding: 9px 16px;
    background: #1E3A8A;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.akk-recent__empty-cta:hover,
.akk-recent__empty-cta:focus {
    background: #152A66;
    color: #FFFFFF;
}

/* ── Status badges (used inside Recent Orders + reusable elsewhere) ──────── */
.akk-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.akk-status-badge--success  { background: #ECFDF5; color: #15803D; border: 1px solid #A7F3D0; }
.akk-status-badge--info     { background: #EDF0F5; color: #1E3A8A; border: 1px solid #C7D2FE; }
.akk-status-badge--warning  { background: #FEF9E7; color: #B45309; border: 1px solid #FDE68A; }
.akk-status-badge--danger   { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.akk-status-badge--neutral  { background: #F1F5F9; color: #374151; border: 1px solid #E5E7EB; }

/* ── Military verification CTA (unverified users only) ───────────────────── */
.akk-military-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.08);
    transition: background-color 150ms ease, transform 150ms ease;
}
.akk-military-cta:hover,
.akk-military-cta:focus {
    background: #D1FAE5;
    transform: translateY(-1px);
}
.akk-military-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #15803D;
    color: #FFFFFF;
    flex-shrink: 0;
}
.akk-military-cta__body {
    flex: 1;
    min-width: 0;
}
.akk-military-cta__lead {
    margin: 0 0 3px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}
.akk-military-cta__sub {
    margin: 0;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.4;
}
.akk-military-cta__chev {
    color: #15803D;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Responsive: tablet (≤980px) ─────────────────────────────────────────── */
@media (max-width: 980px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }
}

/* ── Responsive: mobile (≤580px, target Galaxy S25 412px) ────────────────── */
@media (max-width: 580px) {
    .akk-dashboard {
        gap: 16px;
    }
    .akk-dashboard__title {
        font-size: 1.4rem;
    }
    .akk-dashboard__welcome-row {
        gap: 8px;
    }
    .akk-badge {
        font-size: 0.68rem;
        padding: 4px 10px;
    }
    .akk-recognition {
        padding: 16px 18px;
        gap: 12px;
    }
    .akk-recognition__value {
        font-size: 1.4rem;
    }
    .akk-recognition__label {
        font-size: 0.7rem;
    }
    .akk-hub {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .akk-hub__tile {
        padding: 14px 12px;
        min-height: 116px;
    }
    .akk-hub__icon {
        width: 36px;
        height: 36px;
    }
    .akk-hub__label {
        font-size: 0.92rem;
    }
    .akk-hub__meta {
        font-size: 0.76rem;
    }
    .akk-recent__item {
        grid-template-columns: 48px 1fr auto;
        grid-template-areas:
            "thumb body badge"
            "thumb sub  view";
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .akk-recent__thumb {
        grid-area: thumb;
        width: 48px;
        height: 48px;
    }
    .akk-recent__body {
        grid-area: body;
    }
    .akk-recent__sub {
        grid-column: 2 / 3;
    }
    .akk-recent__view {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        padding: 6px 12px;
        font-size: 0.78rem;
    }
    .akk-status-badge {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        font-size: 0.66rem;
        padding: 3px 8px;
    }
    .akk-inbox__item {
        padding: 12px 14px;
        gap: 10px;
    }
    .akk-inbox__lead {
        font-size: 0.88rem;
    }
    .akk-inbox__note {
        font-size: 0.78rem;
    }
    .akk-military-cta {
        padding: 14px;
        gap: 12px;
    }
    .akk-military-cta__icon {
        width: 40px;
        height: 40px;
    }
    .akk-military-cta__lead {
        font-size: 0.9rem;
    }
    .akk-military-cta__sub {
        font-size: 0.78rem;
    }
}

/* ── Extra-narrow (≤380px) — collapse hub to single column ──────────────── */
@media (max-width: 380px) {
    .akk-hub {
        grid-template-columns: 1fr;
    }
    .akk-hub__tile {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
    }
    .akk-hub__icon {
        margin-top: 0;
    }
    .akk-hub__label {
        margin-top: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT DETAILS — Phone field help text on /my-account/edit-account/
   ═══════════════════════════════════════════════════════════════════ */

.akk-account-phone-row .optional {
    color: #6B7280;
    font-weight: 400;
    font-size: 0.9em;
}

.akk-account-phone-row .akk-field-help {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #6B7280;
}

/* ═══════════════════════════════════════════════════════════════════
   AKK REWARDS — Spend bar + Pro Elite tier progress (dashboard)
   Row 1: stats (total spent + orders). Row 2: aspirational
   progress bar toward Pro Elite tiers — informational, no retail perk.
   ═══════════════════════════════════════════════════════════════════ */

.akk-spendbar {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    padding: 20px 24px;
    margin: 0 0 20px 0;
}

/* Row 1: stats */
.akk-spendbar__stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    position: relative;
    padding-bottom: 18px;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 18px;
}

.akk-spendbar__stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    text-align: center;
}

.akk-spendbar__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1E3A8A;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.akk-spendbar__value bdi,
.akk-spendbar__value .woocommerce-Price-amount,
.akk-spendbar__value .woocommerce-Price-currencySymbol {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.akk-spendbar__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B7280;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.2;
}

.akk-spendbar__divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: #E5E7EB;
    margin: 4px 0;
}

.akk-spendbar__cta {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #D62828;
    color: #FFFFFF !important;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 0 #A31D1D;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.akk-spendbar__cta:hover,
.akk-spendbar__cta:focus {
    transform: translateY(calc(-50% - 1px));
    box-shadow: 0 3px 0 #A31D1D;
    color: #FFFFFF !important;
}
.akk-spendbar--empty .akk-spendbar__stat:last-of-type {
    padding-right: 120px; /* clearance for the CTA */
}

/* Row 2: Pro Elite tier progress */
.akk-spendbar__progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.akk-spendbar__progress-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.akk-spendbar__progress-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: 0.01em;
}

.akk-spendbar__progress-remain {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
}

.akk-spendbar__progress-apply {
    font-size: 0.85rem;
    font-weight: 700;
    color: #D62828 !important;
    text-decoration: none;
    white-space: nowrap;
}
.akk-spendbar__progress-apply:hover,
.akk-spendbar__progress-apply:focus {
    text-decoration: underline;
}

.akk-spendbar__track {
    position: relative;
    height: 10px;
    background: #EEF2F7;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.akk-spendbar__fill {
    height: 100%;
    background: linear-gradient(90deg, #1E3A8A 0%, #3B4FC9 100%);
    border-radius: 999px;
    transition: width 0.5s ease;
    min-width: 0;
}

/* Ticks positioned at their real ladder percentages
   ($0 = 0%, $10k = 10%, $20k = 20%, $50k = 50%, $100k = 100%) */
.akk-spendbar__ticks {
    position: relative;
    height: 16px;
    margin-top: 4px;
}

.akk-spendbar__tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: #6B7280;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.akk-spendbar__tick:nth-child(1) { left: 0%;   transform: translateX(0); }
.akk-spendbar__tick:nth-child(2) { left: 50%; }
.akk-spendbar__tick:nth-child(3) { left: 100%; transform: translateX(-100%); color: #1E3A8A; }

@media (max-width: 640px) {
    .akk-spendbar {
        padding: 16px 18px;
    }
    .akk-spendbar__value {
        font-size: 1.4rem;
    }
    .akk-spendbar__label {
        font-size: 0.65rem;
    }
    .akk-spendbar--empty .akk-spendbar__stats {
        padding-bottom: 52px; /* room for CTA below stats */
    }
    .akk-spendbar--empty .akk-spendbar__stat:last-of-type {
        padding-right: 12px;
    }
    .akk-spendbar__cta {
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 12px;
        transform: translateX(-50%);
    }
    .akk-spendbar__cta:hover,
    .akk-spendbar__cta:focus {
        transform: translateX(-50%) translateY(-1px);
    }
    .akk-spendbar__progress-row {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .akk-spendbar__tick {
        font-size: 0.62rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT DETAILS — Profile Photo row
   Layout: circular photo preview (L) + "Upload your photo here" link (R).
   Server-updates identity card avatar via user_meta + JS sync.
   ═══════════════════════════════════════════════════════════════════ */

.akk-photo-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 22px;
    margin: 0 0 24px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.akk-photo-row__preview {
    position: relative;
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #D62828;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 0 #A31D1D, 0 0 0 3px rgba(30, 58, 138, 0.08);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.akk-photo-row__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.akk-photo-row__initial {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.akk-photo-row__preview.has-image .akk-photo-row__initial {
    display: none;
}

.akk-photo-row__spinner {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    border-radius: 50%;
    display: none;
    z-index: 2;
}
.akk-photo-row__spinner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #FFFFFF;
    animation: akk-photo-spin .7s linear infinite;
}
.akk-photo-row__preview.is-loading .akk-photo-row__spinner {
    display: block;
}
@keyframes akk-photo-spin {
    to { transform: rotate(360deg); }
}

.akk-photo-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.akk-photo-row__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1E3A8A;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.akk-photo-row__links {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.akk-photo-row__link {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #D62828;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: pointer;
    line-height: 1.3;
    letter-spacing: .01em;
}
.akk-photo-row__link:hover,
.akk-photo-row__link:focus-visible {
    color: #A31D1D;
    outline: none;
}
.akk-photo-row__link:disabled {
    opacity: 0.5;
    cursor: default;
}

.akk-photo-row__link--remove {
    color: #6B7280;
    font-weight: 600;
}
.akk-photo-row__link--remove:hover,
.akk-photo-row__link--remove:focus-visible {
    color: #111827;
}

.akk-photo-row__hint {
    font-size: 0.8rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
}

.akk-photo-row__msg {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 2px 0 0;
    min-height: 1em;
}
.akk-photo-row__msg.is-error { color: #B91C1C; }
.akk-photo-row__msg.is-ok    { color: #15803D; }

@media (max-width: 560px) {
    .akk-photo-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 20px 18px;
    }
    .akk-photo-row__links {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — signed-in state (mini avatar + "Hi, [Name]" / Account)
   Amazon "Hello, X / Account & Lists" pattern. Persistent proof the
   customer is signed in as themselves, without adding a new UI row.
   ═══════════════════════════════════════════════════════════════════════ */

.akk-header-action--account.is-signed-in {
    flex-direction: row;
    gap: 0.55rem;
    padding: 0.35rem 0.65rem;
}

/* Mini avatar circle — custom photo when uploaded, initial letter fallback */
.akk-header-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--akk-primary, #1E3A8A);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
    border: 2px solid rgba(30, 58, 138, 0.15);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.akk-header-avatar__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* When a photo is present, the initial sits behind it and stays hidden. */
.akk-header-avatar__initial {
    position: relative;
    z-index: 0;
    user-select: none;
}

/* Hover — subtle brand emphasis, hints that the tile is interactive */
.akk-header-action--account.is-signed-in:hover .akk-header-avatar {
    border-color: var(--akk-accent, #D62828);
    box-shadow: 0 2px 6px rgba(214, 40, 40, 0.20);
}

/* Two-line label — small greeting on top, bold "Account" below */
.akk-action-label--signed-in {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

.akk-action-label__greet {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--akk-muted, #6B7280);
    letter-spacing: 0.02em;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.akk-action-label__main {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--akk-ink, #0F172A);
    letter-spacing: 0;
    white-space: nowrap;
}

/* Portal-name color coding, replacing the old static "Account" label —
   VIP (retail) reads in brand red, Pro Elite reads in Pro Elite's own navy.
   No hover color override anymore: the whole point is that this color is a
   constant identity signal, not a generic header-link hover state. */
.akk-action-label__main--vip {
    color: var(--akk-accent, #D62828);
}
.akk-action-label__main--pro {
    color: var(--akk-pro-navy, #060D1F);
}

/* Tablet — label hides, avatar (with its ring + corner badge) stays visible
   as the sole signed-in signal. .akk-action-label--signed-in needs its own
   override here — it shares specificity with the generic .akk-action-label
   hide-on-mobile rule above but comes later in the file, so without this it
   wins and the "Hi, {name} / Account" text renders anyway at gap:0, colliding
   with the ring/badge on the avatar right next to it. Shrink padding a touch
   so the avatar sits cleanly. */
@media (max-width: 900px) {
    .akk-header-action--account.is-signed-in {
        padding: 0.35rem 0.4rem;
        gap: 0;
    }
    .akk-action-label--signed-in {
        display: none;
    }
}

/* Mobile hamburger nav — personalize the "My Account" row when signed in */
.akk-mobile-nav__greet {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--akk-muted, #6B7280);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.akk-mobile-nav__main {
    display: block;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE HERO STATS GRID — 4-tile trust bar (replaces wp:columns which
   auto-stacked on narrow viewports). Flex layout with responsive breakpoints:
     Desktop  ≥900px  → 4 tiles in one row, thin vertical dividers between
     Tablet   ≥520px  → 2×2 grid with cross-dividers
     Mobile   <520px  → single column with horizontal dividers
   ═══════════════════════════════════════════════════════════════════════ */
.akk-hero-stats-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
}
.akk-hero-stat-tile {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 12px 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.akk-hero-stat-tile:first-child {
    border-left: none;
}
.akk-hero-stat-tile__value {
    font-size: 2.25rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.akk-hero-stat-tile__star {
    color: #FBBF24;   /* Gold star — matches VIP badge, warm accent on navy */
    font-size: 0.85em;
    vertical-align: 0.02em;
}
.akk-hero-stat-tile__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94A3B8;   /* Slate 400 — readable on navy without being too bright */
    margin: 0;
    line-height: 1.2;
}

/* Tablet — 2×2 grid */
@media (max-width: 900px) {
    .akk-hero-stats-grid {
        flex-wrap: wrap;
    }
    .akk-hero-stat-tile {
        flex: 0 0 50%;
        padding: 20px 16px;
    }
    /* Reset all borders, apply cross-dividers for 2×2 layout */
    .akk-hero-stat-tile:nth-child(1),
    .akk-hero-stat-tile:nth-child(3) {
        border-left: none;
    }
    .akk-hero-stat-tile:nth-child(2),
    .akk-hero-stat-tile:nth-child(4) {
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }
    .akk-hero-stat-tile:nth-child(3),
    .akk-hero-stat-tile:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* Small phones — KEEP 2×2 layout (per Sir's ask), just scale type down so
   nothing overflows on narrow viewports. Layout inherits from the 900px block. */
@media (max-width: 520px) {
    .akk-hero-stat-tile {
        padding: 16px 10px;
    }
    .akk-hero-stat-tile__value {
        font-size: 1.75rem;
    }
    .akk-hero-stat-tile__label {
        font-size: 0.62rem;
        letter-spacing: 0.10em;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED — 4-tile product grid on the dashboard, between the
   6-tile hub and Recent Orders. Aesthetic mirrors Recent Orders (white
   card, same shadow + radius) so they read as a "commerce cluster".
   ═══════════════════════════════════════════════════════════════════════ */
.akk-recently-viewed {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    /* No margin — parent .akk-dashboard flex gap:24px handles the spacing so
       all right-column modules sit on the same 24px rhythm. */
}
.akk-recently-viewed__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #F1F5F9;
}
.akk-recently-viewed__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}
.akk-recently-viewed__viewall {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E3A8A;
    text-decoration: none;
}
.akk-recently-viewed__viewall:hover,
.akk-recently-viewed__viewall:focus {
    text-decoration: underline;
}

/* 4-column grid on desktop → 3 on medium → 2 on small. */
.akk-recently-viewed__list {
    list-style: none;
    margin: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.akk-recently-viewed__item {
    margin: 0;
    padding: 0;
    min-width: 0;
}
.akk-recently-viewed__link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    height: 100%;
}
.akk-recently-viewed__link:hover,
.akk-recently-viewed__link:focus {
    border-color: #1E3A8A;
    box-shadow: 0 6px 18px rgba(30, 58, 138, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}
.akk-recently-viewed__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #F8FAFC center / cover no-repeat;
    border-radius: 8px;
    border: 1px solid #F1F5F9;
}
.akk-recently-viewed__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.35;
    min-height: 2.7em;
}
.akk-recently-viewed__price {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1E3A8A;
    line-height: 1;
    margin-top: auto;
}
.akk-recently-viewed__price .woocommerce-Price-amount,
.akk-recently-viewed__price bdi {
    color: inherit;
    font: inherit;
}
.akk-recently-viewed__price del {
    color: #94A3B8;
    font-weight: 500;
    margin-right: 6px;
}
.akk-recently-viewed__price ins {
    text-decoration: none;
}

/* Empty state — no viewing history yet */
.akk-recently-viewed__empty {
    padding: 28px 24px;
    text-align: center;
}
.akk-recently-viewed__empty-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
}
.akk-recently-viewed__empty-sub {
    margin: 0 0 16px;
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.5;
}
.akk-recently-viewed__empty-cta {
    display: inline-block;
    background: #D62828;
    color: #FFFFFF !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    transition: background .18s ease;
}
.akk-recently-viewed__empty-cta:hover {
    background: #B91C1C;
}

/* Responsive — drop columns as viewport narrows */
@media (max-width: 1100px) {
    .akk-recently-viewed__list {
        grid-template-columns: repeat(3, 1fr);
    }
    .akk-recently-viewed__list > .akk-recently-viewed__item:nth-child(4) {
        display: none; /* Hide 4th tile when 3 columns — avoids lonely wrap */
    }
}
@media (max-width: 640px) {
    .akk-recently-viewed__list {
        grid-template-columns: repeat(2, 1fr);
    }
    .akk-recently-viewed__list > .akk-recently-viewed__item:nth-child(4) {
        display: block; /* Restore 4th tile — fits 2×2 nicely */
    }
}

/* ═══════════════════════════════════════════════════════════════
   Account drawer — S34 friction-fix pass
   ─────────────────────────────────────────────────────────────
   • Password field show/hide toggle (eye icon inside input)
   • .is-in-flow hides quick-links + Pro tile during interstitial
     steps (2/3/4/5) so the code entry / password steps read as
     focused single-purpose screens.
   ═══════════════════════════════════════════════════════════════ */
.akk-drawer-pw-wrap {
    position: relative;
    display: block; /* Fill parent so absolute-positioned toggle anchors correctly */
}
/* Reserve room for the eye button on ANY password input inside the wrapper —
   works for the drawer's .akk-drawer-input AND WC's password_1/_2/_current
   inputs which don't carry that class. */
.akk-drawer-pw-wrap input {
    padding-right: 46px;
    width: 100%;
    box-sizing: border-box;
}
.akk-drawer-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #64748B;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    transition: color 150ms ease, background 150ms ease;
}
.akk-drawer-pw-toggle:hover {
    color: var(--akk-primary);
    background: rgba(30, 58, 138, 0.06);
}
.akk-drawer-pw-toggle:focus-visible {
    outline: 2px solid var(--akk-primary);
    outline-offset: 2px;
}
.akk-drawer-pw-toggle[aria-pressed="true"] {
    color: var(--akk-primary);
}
.akk-drawer-pw-toggle svg[hidden] {
    display: none; /* Enforce the [hidden] attr on the inactive icon */
}

/* Hide entry-state extras (Track Order + Pro Elite tile) once the
   user is mid-flow. Applied by JS via `body.is-in-flow` on any step
   other than step 1. */
.akk-account-drawer__body.is-in-flow .akk-drawer-outer {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Password 5-rule checklist — rendered under new-password fields
   on drawer signup, /edit-account/, and the WC set-password form.
   Same visual language everywhere: gray dot → green filled circle
   with a white check as each rule is met.
   ═══════════════════════════════════════════════════════════════ */
.akk-drawer-pw-checklist-mount {
    margin: 8px 0 0;
}
.akk-pw-checklist {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}
.akk-pw-checklist__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #64748B; /* Slate 500 — muted until met */
    line-height: 1.35;
    transition: color 200ms ease;
}
.akk-pw-checklist__mark {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #CBD5E1; /* Slate 300 */
    background: transparent;
    flex-shrink: 0;
    position: relative;
    transition: background 200ms ease, border-color 200ms ease;
}
.akk-pw-checklist__item.is-met {
    color: #047857; /* Emerald 700 — met */
}
.akk-pw-checklist__item.is-met .akk-pw-checklist__mark {
    background: #10B981; /* Emerald 500 */
    border-color: #10B981;
}
.akk-pw-checklist__item.is-met .akk-pw-checklist__mark::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 3px;
    width: 5px;
    height: 2px;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(-45deg);
    transform-origin: center;
}

/* When the checklist appears on other surfaces (edit-account, reset
   password form), it inherits the same styles by class name. */

@media (max-width: 520px) {
    .akk-pw-checklist {
        grid-template-columns: 1fr; /* Single column on narrow phones */
    }
}

/* Reset-password ("Enter a new password below") form — WC core floats New
   password / Re-enter new password side-by-side (form-row-first / -last),
   which collides with the 5-rule checklist we inject between them via JS
   (see akk_password_match_indicator()). Force single-column stacking so it
   reads: New password → requirements → Confirm password → Save, matching
   edit-account and the signup drawer. */
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
}

/* Hide WooCommerce's default password-strength meter + hint on the account
   surfaces where our own 5-rule checklist is authoritative. Prevents the
   contradictory "Weak - Please enter a stronger password" bar from appearing
   while every rule in our checklist is already green. Our server-side
   `woocommerce_min_password_strength → 0` filter drops the enforcement; this
   just hides the visual noise. */
.woocommerce-password-strength,
.woocommerce-password-hint {
    display: none !important;
}