/* ── Global page-title override ───────────────────────────────
   Default theme: padding 60px 0 80px (~140px tall) — too large
   for utility/account/cart pages. Compact version below.
─────────────────────────────────────────────────────────────── */
.page-title {
    padding: 30px 0 36px;
}

.page-title .heading {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .page-title {
        padding: 22px 0 26px;
    }
    .page-title .heading {
        font-size: 1.3rem;
        margin-bottom: 6px;
    }
}

/* ── Account sidebar avatar ────────────────────────────────────
   Theme .image is 140×140 but lacks border-radius / overflow.
   Offcanvas (mobile) also needs explicit sizing.
─────────────────────────────────────────────────────────────── */
.sidebar-account .account-avatar .image {
    border-radius: 50%;
    overflow: hidden;
}

.offcanvas .sidebar-account .account-avatar .image {
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.offcanvas .sidebar-account .account-avatar .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Solid-color page header strip ────────────────────────────
   Replaces the large image banner on utility/account/cart pages.
   Keeps image banner only on product listing pages.
─────────────────────────────────────────────────────────────── */
.page-header-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 18px 0 20px;
}

.page-header-strip .page-header-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--main);
    margin-bottom: 6px;
    text-align: center;
}

.page-header-strip .breadcrumbs {
    justify-content: center;
}

.page-header-strip .breadcrumbs li,
.page-header-strip .breadcrumbs li a {
    color: var(--secondary);
}

.page-header-strip .breadcrumbs li.active {
    color: var(--main);
}

@media (max-width: 767px) {
    .page-header-strip {
        padding: 14px 0 16px;
    }
    .page-header-strip .page-header-title {
        font-size: 1.1rem;
    }
}

/* Reserve a fixed box for product-card images so the grid doesn't reflow as images
   lazy-load (fixes Cumulative Layout Shift) and renders a uniform grid. The theme already
   sets object-fit:cover on these images; this just pins the aspect ratio. List view is
   excluded so its horizontal layout is unaffected. */
.card-product:not(.style-list) .card-product-wrapper {
    aspect-ratio: 1 / 1;
}
.card-product:not(.style-list) .card-product-wrapper .product-img {
    display: block;
    height: 100%;
}

/* Cart free-shipping progress bar */
.free-ship-bar {
    width: 100%;
}
.free-ship-track {
    width: 100%;
    height: 8px;
    background: #eceff1;
    border-radius: 999px;
    overflow: hidden;
}
.free-ship-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--main, #00a6b6);
    transition: width 0.4s ease;
}
.free-ship-fill.is-complete {
    background: #16a34a;
}

/* Accessibility: skip-to-content link — hidden until focused via keyboard (Tab) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--main, #00a6b6);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.skip-to-content:focus {
    left: 0;
}

/* Visible keyboard focus ring for interactive elements (does not affect mouse users) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--main, #00a6b6);
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible {
    outline: none !important;
}