/* =============================================================================
   Freeman 1989 storefront theme
   -----------------------------------------------------------------------------
   Design tokens
   ink        #0f172a   headings, primary text
   ink-soft   #1e293b   secondary headings
   slate      #64748b   body / muted copy
   brand      #0284c7   sky blue accent (CTAs, active states, links)
   brand-dark #0369a1   ocean blue accent (hover)
   canvas     #f8fafc   page background
   ============================================================================= */

:root {
    --fm-ink: #0f172a;
    --fm-ink-soft: #1e293b;
    --fm-slate: #64748b;
    --fm-brand: #0284c7;
    --fm-brand-dark: #0369a1;
    --fm-brand-50: #f0f9ff;
    --fm-brand-100: #e0f2fe;
    --fm-canvas: #f8fafc;
    --fm-line: #e2e8f0;
    --fm-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --fm-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.14);
    --fm-radius: 12px;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    background-color: var(--fm-canvas);
    color: var(--fm-slate);
    font-family: "Inter", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Outfit", "Inter", sans-serif;
    color: var(--fm-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

a {
    color: inherit;
    transition: color 0.18s ease;
}

a:hover {
    color: var(--fm-brand-dark);
}

/* -----------------------------------------------------------------------------
   Page headings (category + search listings)
   -------------------------------------------------------------------------- */

.fm-page-heading {
    font-family: "Outfit", "Inter", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--fm-ink);
    margin: 0;
}

.fm-page-lede {
    max-width: 780px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fm-slate);
}

.fm-page-lede p {
    margin: 0 0 8px;
}

/* Long-form CMS content (size chart, policies, track order) */
.fm-cms-body {
    max-width: 900px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fm-slate);
}

.fm-cms-body h1,
.fm-cms-body h2,
.fm-cms-body h3,
.fm-cms-body h4 {
    margin: 26px 0 12px;
    color: var(--fm-ink);
}

.fm-cms-body h2 {
    font-size: 22px;
}

.fm-cms-body h3,
.fm-cms-body h4 {
    font-size: 18px;
}

.fm-cms-body h2:first-child,
.fm-cms-body h3:first-child,
.fm-cms-body h4:first-child {
    margin-top: 0;
}

.fm-cms-body p {
    margin: 0 0 14px;
}

.fm-cms-body ul,
.fm-cms-body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.fm-cms-body li {
    margin-bottom: 6px;
}

.fm-cms-body a {
    color: var(--fm-brand-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fm-cms-body table {
    width: 100%;
    margin: 8px 0 22px;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid var(--fm-line);
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}

.fm-cms-body th,
.fm-cms-body td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--fm-line);
}

.fm-cms-body th {
    background: var(--fm-brand-50);
    color: var(--fm-ink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.fm-cms-body tr:last-child td {
    border-bottom: 0;
}

.fm-cms-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

main#main {
    background-color: var(--fm-canvas);
}

/* -----------------------------------------------------------------------------
   Trust ticker
   -------------------------------------------------------------------------- */

.fm-ticker {
    background: linear-gradient(90deg, #0f172a 0%, #0f172a 55%, #0c4a6e 100%);
    color: #e2e8f0;
    overflow: hidden;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fm-ticker__track {
    display: flex;
    width: max-content;
    animation: fm-ticker-scroll 42s linear infinite;
}

.fm-ticker:hover .fm-ticker__track {
    animation-play-state: paused;
}

.fm-ticker__group {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 9px 14px;
    flex-shrink: 0;
}

.fm-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #e2e8f0;
}

.fm-ticker__item [class^="icon-"],
.fm-ticker__item [class*=" icon-"] {
    color: #38bdf8;
    font-size: 14px;
}

.fm-ticker__item a {
    color: #7dd3fc;
    font-weight: 600;
    text-decoration: none;
}

.fm-ticker__item a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.fm-ticker__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(125, 211, 252, 0.55);
    flex-shrink: 0;
}

@keyframes fm-ticker-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-ticker__track {
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   Top bar: support phone (left) | logo (centre) | search + icons (right)
   -------------------------------------------------------------------------- */

.fm-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    gap: 24px;
    padding: 12px 40px;
    background: #ffffff;
    border-bottom: 1px solid var(--fm-line);
}

.fm-topbar__zone {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.fm-topbar__zone--start {
    justify-content: flex-start;
}

.fm-topbar__zone--center {
    justify-content: center;
}

.fm-topbar__zone--end {
    justify-content: flex-end;
    gap: 14px;
}

.fm-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fm-ink);
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.fm-topbar__phone [class^="icon-"] {
    color: var(--fm-brand);
    font-size: 16px;
}

.fm-topbar__phone:hover {
    color: var(--fm-brand-dark);
}

.fm-topbar__divider {
    width: 1px;
    height: 18px;
    background: var(--fm-line);
    flex-shrink: 0;
}

.fm-topbar__switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--fm-slate);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.fm-topbar__switcher:hover {
    color: var(--fm-brand-dark);
}

.fm-topbar__switcher [class^="icon-"] {
    font-size: 11px;
}

.fm-topbar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-height: 42px;
}

.fm-topbar__logo img {
    display: block;
    height: auto;
    max-height: 42px;
    width: auto;
    object-fit: contain;
}

/* Search field ------------------------------------------------------------- */

.fm-topbar__search {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(200px, 24vw, 320px);
}

.fm-topbar__search-icon {
    position: absolute;
    left: 14px;
    font-size: 17px;
    color: var(--fm-slate);
    pointer-events: none;
}

.fm-topbar__search-input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    background: var(--fm-canvas);
    font-size: 14px;
    color: var(--fm-ink);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.fm-topbar__search-input::placeholder {
    color: #94a3b8;
}

.fm-topbar__search-input:focus {
    background: #ffffff;
    border-color: var(--fm-brand);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Round icon buttons ------------------------------------------------------- */

.fm-topbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    font-size: 20px;
    color: var(--fm-ink);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.fm-topbar__icon:hover {
    background: var(--fm-brand-50);
    border-color: var(--fm-brand-100);
    color: var(--fm-brand-dark);
}

.fm-topbar__icon > span[class^="icon-"] {
    font-size: 20px;
    line-height: 1;
}

.fm-topbar--shimmer {
    min-height: 66px;
}

/* -----------------------------------------------------------------------------
   Navigation row: Store Collection mega menu | utility links
   -------------------------------------------------------------------------- */

.fm-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    /* The row is a flex item of the header's wrapper, so without an explicit
       width it shrinks to its content and the bottom rule stops mid-header. */
    box-sizing: border-box;
    width: 100%;
    min-height: 58px;
    padding: 0 40px;
    background: #ffffff;
    border-bottom: 1px solid var(--fm-line);
}

.fm-nav--shimmer {
    min-height: 58px;
}

.fm-utility {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fm-utility__link {
    font-size: 13px;
    font-weight: 500;
    color: var(--fm-slate);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.fm-utility__link:hover {
    color: var(--fm-brand-dark);
    border-bottom-color: var(--fm-brand);
}

/* -----------------------------------------------------------------------------
   Mega menu
   -------------------------------------------------------------------------- */

.fm-trigger {
    position: relative;
    display: flex;
    align-items: center;
}

.fm-trigger__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 18px 16px;
    font-family: "Outfit", "Inter", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fm-ink);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.fm-trigger__link:hover,
.fm-trigger:focus-within .fm-trigger__link {
    color: var(--fm-brand);
    border-bottom-color: var(--fm-brand);
}

.fm-trigger__link--all {
    gap: 9px;
    letter-spacing: 0.06em;
}

.fm-trigger__caret {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.18s ease;
}

/* `:hover` alone is not enough: the panel is offset from the trigger, so a fast
   diagonal move can slip through the gap between them (or through the nav row to
   the right of the trigger on wide screens, where the centred panel does not
   overlap it at all). The instant `:hover` drops, the panel gets
   `pointer-events: none`, so hovering it again can never re-open it — the menu
   closes and stays closed. `.is-open` is set by JS in the header component and
   survives those gaps; see `initMegaMenuHover()`. */
.fm-trigger.is-open .fm-trigger__link {
    color: var(--fm-brand);
    border-bottom-color: var(--fm-brand);
}

.fm-trigger.is-open .fm-trigger__caret {
    transform: translateY(1px) rotate(225deg);
}

/* Dropdown panel ----------------------------------------------------------- */

.fm-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    /* Right padding mirrors the 16px every column reserves for its divider,
       so the panel's optical inset matches on both sides. */
    padding: 24px 8px 24px 24px;
    background: #ffffff;
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    box-shadow: var(--fm-shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Keyboard users get here through JS (`focusin`/`focusout` on `.fm-nav` mark the
   trigger `.is-open`), not through `:focus-within`: with focus-within the panel
   would reopen the moment Escape tried to close it while focus sat on the
   trigger link. */
.fm-trigger:hover .fm-mega,
.fm-trigger.is-open .fm-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.fm-mega__grid {
    display: grid;
    grid-template-columns: repeat(var(--fm-mega-cols, 6), minmax(0, 1fr));
    gap: 20px;
}

.fm-mega__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 16px;
    border-right: 1px solid var(--fm-line);
}

.fm-mega__col:last-child {
    border-right: 0;
}

.fm-mega__card {
    display: block;
    /* Fixed height keeps every column's card identical regardless of the
       sub-pixel width the grid rounds each track to. */
    height: 118px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--fm-brand-50);
    border: 1px solid var(--fm-brand-100);
    text-decoration: none;
}

.fm-mega__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.fm-mega__card:hover img {
    transform: scale(1.05);
}

.fm-mega__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* Keeps every column's link list on the same baseline, even when a
       heading wraps onto two lines. */
    min-height: calc(2 * 1.3em);
    margin: 14px 0 8px;
    font-family: "Outfit", "Inter", sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fm-ink);
}

.fm-mega__heading a {
    color: inherit;
    text-decoration: none;
}

.fm-mega__col:hover .fm-mega__heading {
    color: var(--fm-brand);
}

.fm-mega__heading-arrow {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.fm-mega__col:hover .fm-mega__heading-arrow {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

.fm-mega__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-mega__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--fm-slate);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.fm-mega__link:hover {
    background: var(--fm-brand-50);
    color: var(--fm-brand-dark);
    transform: translateX(4px);
}

.fm-mega__chevron {
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.fm-mega__link:hover .fm-mega__chevron {
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */

.fm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--fm-line);
    border-radius: var(--fm-radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.fm-card:hover {
    box-shadow: var(--fm-shadow);
    border-color: #cbd5e1;
    transform: translateY(-3px);
}

.fm-card__media {
    position: relative;
    overflow: hidden;
    background: #eef2f6;
    aspect-ratio: 3 / 4;
}

.fm-card__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fm-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.5s ease;
}

.fm-card__img--alt {
    opacity: 0;
}

.fm-card:hover .fm-card__img:not(.fm-card__img--alt) {
    transform: scale(1.06);
}

.fm-card:hover .fm-card__img--alt {
    opacity: 1;
    transform: scale(1.06);
}

/* The shimmer placeholder inside the media box should fill it */
.fm-card__media .shimmer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

/* Status pills ------------------------------------------------------------- */

.fm-card__flags {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    pointer-events: none;
}

.fm-card__pill {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

.fm-card__pill--save {
    background: var(--fm-brand);
    color: #ffffff;
}

.fm-card__pill--sale {
    background: #e11d48;
    color: #ffffff;
}

.fm-card__pill--new {
    background: var(--fm-ink);
    color: #ffffff;
}

/* Ratings ------------------------------------------------------------------ */

.fm-card__ratings {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fm-ink);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Wishlist / compare corner ------------------------------------------------ */

.fm-card__corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fm-card:hover .fm-card__corner,
.fm-card:focus-within .fm-card__corner {
    opacity: 1;
    transform: translateY(0);
}

.fm-card__corner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--fm-line);
    border-radius: 999px;
    font-size: 16px;
    color: var(--fm-ink);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.fm-card__corner-btn:hover {
    color: var(--fm-brand-dark);
    background: var(--fm-brand-50);
    transform: scale(1.07);
}

/* Floating quick actions --------------------------------------------------- */

.fm-card__actions {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.fm-card:hover .fm-card__actions,
.fm-card:focus-within .fm-card__actions {
    opacity: 1;
    transform: translateY(0);
}

.fm-card__action {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.fm-card__action--view {
    background: rgba(255, 255, 255, 0.97);
    border-color: var(--fm-line);
    color: var(--fm-ink);
}

.fm-card__action--view:hover {
    background: var(--fm-ink);
    border-color: var(--fm-ink);
    color: #ffffff;
}

.fm-card__action--bag {
    background: var(--fm-brand);
    border-color: var(--fm-brand);
    color: #ffffff;
}

.fm-card__action--bag:hover:not(:disabled) {
    background: var(--fm-brand-dark);
    border-color: var(--fm-brand-dark);
}

.fm-card__action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Body --------------------------------------------------------------------- */

.fm-card__body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 15px 16px;
}

.fm-card__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fm-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    min-height: 2.9em;
}

.fm-card:hover .fm-card__title {
    color: var(--fm-brand-dark);
}

.fm-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: "Outfit", "Inter", sans-serif;
}

.fm-card__price p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--fm-ink);
    line-height: 1.3;
}

.fm-card__price p.line-through,
.fm-card__price p.final-price.line-through {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

/**
 * The "As low as" caption is a peer <p> of the amount, so the blanket
 * rule above would otherwise render it at full price weight. Give it its
 * own line as a muted caption instead.
 */
.fm-card__price p.price-label,
.fm-qv__price p.price-label {
    width: 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
}

.fm-qv__price p.price-label {
    font-size: 12px;
}

/* -----------------------------------------------------------------------------
   Quick view modal
   -------------------------------------------------------------------------- */

html.fm-qv-open {
    overflow: hidden;
}

.fm-qv {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    animation: fm-qv-fade 0.18s ease;
}

.fm-qv__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 28px;
    width: min(860px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--fm-shadow-lg);
    animation: fm-qv-pop 0.22s ease;
}

.fm-qv__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--fm-canvas);
    border: 1px solid var(--fm-line);
    color: var(--fm-ink);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.fm-qv__close:hover {
    background: var(--fm-ink);
    color: #ffffff;
}

.fm-qv__media {
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
    aspect-ratio: 3 / 4;
}

.fm-qv__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fm-qv__info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    min-width: 0;
    padding-right: 20px;
}

.fm-qv__eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fm-brand);
    margin: 0;
}

.fm-qv__name {
    font-family: "Outfit", "Inter", sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fm-ink);
    line-height: 1.2;
    margin: 0;
}

.fm-qv__price {
    font-size: 22px;
}

.fm-qv__price p {
    font-size: 22px;
}

.fm-qv__price p.line-through {
    font-size: 16px;
}

.fm-qv__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.fm-qv__assurance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fm-slate);
    margin: 4px 0 0;
}

.fm-qv__assurance [class^="icon-"] {
    color: var(--fm-brand);
    font-size: 15px;
}

@keyframes fm-qv-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fm-qv-pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

@media (max-width: 1279px) {
    .fm-topbar,
    .fm-nav {
        padding-left: 24px;
        padding-right: 24px;
    }

    .fm-utility {
        gap: 18px;
    }
}

@media (max-width: 1023px) {
    .fm-utility {
        display: none;
    }

    .fm-nav {
        min-height: 52px;
    }

    .fm-topbar__search {
        width: clamp(160px, 30vw, 260px);
    }
}

@media (max-width: 767px) {
    .fm-topbar {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding: 10px 16px;
    }

    .fm-topbar__zone--start .fm-topbar__divider,
    .fm-topbar__zone--start .fm-topbar__switcher {
        display: none;
    }

    .fm-topbar__zone--end {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .fm-topbar__search {
        width: 100%;
    }

    .fm-qv__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 22px;
    }

    .fm-qv__media {
        max-height: 44vh;
        aspect-ratio: auto;
        height: 44vh;
    }

    .fm-qv__name {
        font-size: 21px;
    }

    /* Touch devices have no hover: keep actions reachable */
    .fm-card__corner,
    .fm-card__actions {
        opacity: 1;
        transform: none;
    }

    .fm-card__actions {
        position: static;
        padding: 0 12px 12px;
    }
}

@media (max-width: 525px) {
    .fm-card__title {
        font-size: 13px;
    }
}

/* Out-of-stock pill on the product page, so a sold-out item says why the
   buy button is dead instead of looking broken. */
.fm-oos-badge {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 16px;
    border-radius: 9999px;
    background-color: #dc2626;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .fm-oos-badge {
        margin-top: 8px;
        padding: 4px 12px;
        font-size: 11px;
    }
}

/* Out-of-stock pill on grid/list cards. Slate rather than the Sale red, so the
   two can never be mistaken for one another. */
.fm-card__pill--oos {
    background: #334155;
    color: #ffffff;
}

/* The header is position:sticky so it stays put while scrolling. Print and
   PDF exporters lay the whole document out at once, and a sticky element gets
   repainted part-way down the sheet, which reads as a rogue second navbar
   dropped into the middle of the homepage. Pinning it to normal flow for print
   keeps it at the top of the first page only. */
@media print {
    header {
        position: static !important;
    }

    /* Ticker is a JS-driven marquee; it has no motion on paper. */
    .fm-ticker__track {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Sub-collection links at the top of the filter panel.

   These mirror the mega menu's nesting. They are links rather than checkboxes
   because each child is a real collection with its own canonical URL, its own
   scoped filters and its own counts - navigating there beats stacking a facet
   on the parent.
   --------------------------------------------------------------------------- */
.fm-subcats {
    border-bottom: 1px solid #e4e4e7;
    padding: 0.75rem 0 1rem;
}

.fm-subcats__title {
    color: #18181b;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.375rem;
}

.fm-subcats__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-subcats__link {
    align-items: center;
    border-radius: 0.375rem;
    color: #3f3f46;
    display: flex;
    font-size: 0.9375rem;
    justify-content: space-between;
    padding: 0.5rem 0.625rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fm-subcats__link:hover {
    background: #f4f4f5;
    color: #18181b;
}

.fm-subcats__chevron {
    color: #a1a1aa;
    font-size: 0.8125rem;
    line-height: 1;
}

.fm-subcats__link:hover .fm-subcats__chevron {
    color: #52525b;
}

@media (max-width: 767.98px) {
    .fm-subcats__title {
        font-size: 1rem;
    }
}

/* ------------------------------------------------------------------
   Colour filter as a swatch grid.

   A row per shade was the tallest block in the filter panel - Store
   Collection offers 268 of them and each cost ~44px of vertical space.
   The dots carry no text; the shade name survives on the native
   tooltip, the accessible name, and the line under the grid naming
   what is actually ticked (needed on touch, where hover never fires).
   ------------------------------------------------------------------ */

.fm-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 10px;
    padding: 4px 2px 8px;
    margin: 0;
    list-style: none;
}

.fm-swatch-grid__cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fm-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgb(0 0 0 / 0.14);
    border-radius: 9999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fm-swatch:hover {
    transform: scale(1.08);
}

.fm-swatch:focus-visible {
    outline: 2px solid #0f172a;
    outline-offset: 3px;
}

/* The white inner ring is what keeps the outline readable on dark shades. */
.fm-swatch--on {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0f172a;
}

/* Drawn from borders rather than an icon glyph, so it cannot depend
   on the theme's icon font being loaded. */
.fm-swatch__tick {
    display: block;
    width: 5px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-1px, -2px) rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.fm-swatch--on .fm-swatch__tick {
    opacity: 1;
}

.fm-swatch-picked {
    margin: 0 0 12px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #52525b;
    overflow-wrap: anywhere;
}

/* Variant picker ------------------------------------------------------------
   Colour and size chips shown under every listing card and inside Quick View,
   so a shopper can pick a variant and add it to the bag without opening the
   product page. Ships under its own fm- prefix like the rest of this file, so
   no Tailwind rebuild is needed. */

.fm-picker {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 3px;
}

.fm-picker__group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fm-picker__label {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fm-slate);
}

/* The chosen value is the part that matters, so it drops the caption styling. */
.fm-picker__label span {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--fm-ink);
}

.fm-picker__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-picker__cell {
    display: block;
    margin: 0;
    padding: 0;
}

/* Colour ------------------------------------------------------------------ */

.fm-dot {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.22);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.fm-dot:hover:not(:disabled) {
    transform: scale(1.12);
}

/* Double ring reads on pale swatches (white/cream) as well as navy ones. */
.fm-dot--on {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 0 2px #ffffff,
        0 0 0 4px var(--fm-ink);
}

.fm-dot--off {
    opacity: 0.3;
    cursor: not-allowed;
}

.fm-dot--locked {
    cursor: default;
}

.fm-dot--locked:hover:not(:disabled) {
    transform: none;
}

/* Size -------------------------------------------------------------------- */

.fm-size {
    min-width: 34px;
    padding: 4px 7px;
    border: 1px solid var(--fm-line);
    border-radius: 7px;
    background: #ffffff;
    color: var(--fm-ink);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.fm-size:hover:not(:disabled) {
    border-color: var(--fm-ink);
}

.fm-size--on {
    background: var(--fm-ink);
    border-color: var(--fm-ink);
    color: #ffffff;
}

.fm-size--off {
    opacity: 0.32;
    text-decoration: line-through;
    cursor: not-allowed;
}

.fm-size--locked {
    cursor: default;
}

/* Hint + CTA -------------------------------------------------------------- */

.fm-picker__hint {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fm-slate);
}

.fm-picker__add {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--fm-ink);
    border-radius: 9px;
    background: var(--fm-ink);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.fm-picker__add:hover:not(:disabled) {
    background: var(--fm-brand-dark);
    border-color: var(--fm-brand-dark);
}

.fm-picker__add:disabled {
    background: var(--fm-line);
    border-color: var(--fm-line);
    color: #94a3b8;
    cursor: not-allowed;
}

/* Quick View gives the picker more room than a grid card has. */
.fm-qv__info .fm-picker {
    gap: 12px;
}

.fm-qv__info .fm-picker__label {
    font-size: 11px;
}

.fm-qv__info .fm-picker__opts {
    gap: 7px;
}

.fm-qv__info .fm-dot {
    width: 28px;
    height: 28px;
}

.fm-qv__info .fm-size {
    min-width: 46px;
    padding: 7px 11px;
    font-size: 13px;
}

/* Description + Additional Information ------------------------------------ */

.fm-qv__details {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--fm-line);
}

.fm-qv__details-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fm-slate);
}

.fm-qv__details-text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--fm-slate);
    overflow-wrap: anywhere;
}

.fm-qv__specs {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    gap: 7px 16px;
    margin: 0;
    font-size: 13px;
}

.fm-qv__specs dt {
    margin: 0;
    font-weight: 600;
    color: var(--fm-ink);
}

.fm-qv__specs dd {
    margin: 0;
    color: var(--fm-slate);
    overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Footer — four-column layout
   -----------------------------------------------------------------------------
   Brand | operator-managed link columns | newsletter. The grid reads its column
   count from --fm-footer-cols (written inline by the blade from the data), so
   adding a column of links in the theme editor widens the grid instead of
   overflowing it. The link block is dropped from the grid below 1060px, where
   the accordion takes over — a `display: none` item does not occupy a cell, so
   the same markup reflows to brand / accordion / newsletter on one column.
   -------------------------------------------------------------------------- */

/* Clearance for the fixed WhatsApp button, which rests 80px above the viewport
   bottom (24px offset + 56px button) and would otherwise sit on the copyright.
   The padding lives on the legal bar rather than on <footer>: the footer is
   #F6F2EB and the legal bar #F1EADF, so padding on the footer leaves an 80px
   strip of the lighter tone below the darker bar. On the legal bar the whole
   band is one colour. 6rem rather than 5rem because 5rem is exactly the
   widget's own footprint, which leaves the copyright flush against it. */
.fm-footer__legal {
    padding-bottom: 6rem;
}

.fm-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (min-width: 1060px) {
    .fm-footer__grid {
        grid-template-columns: repeat(var(--fm-footer-cols, 4), minmax(0, 1fr));
        gap: 32px;
    }
}

/* Desktop-only link columns; the accordion covers the same links below. */
.fm-footer__links {
    display: none;
}

@media (min-width: 1060px) {
    .fm-footer__links {
        display: grid;
        grid-template-columns: repeat(var(--fm-footer-link-cols, 2), minmax(0, 1fr));
        gap: 32px;
    }
}

.fm-footer__logo-link {
    display: inline-block;
    line-height: 0;
}

.fm-footer__logo {
    display: block;
    width: 160px;
    height: auto;
}

.fm-footer__blurb {
    margin: 14px 0 0;
    max-width: 36ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fm-slate);
}

.fm-footer__phone {
    display: inline-block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fm-ink);
    text-decoration: none;
    transition: color 0.15s ease;
}

.fm-footer__phone:hover {
    color: var(--fm-brand-dark);
}

/* Replaces the inline `grid gap-5 break-words text-sm` the list used to carry. */
.fm-footer__list {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.fm-footer__list a {
    color: var(--fm-slate);
    text-decoration: none;
    transition: color 0.15s ease;
}

.fm-footer__list a:hover {
    color: var(--fm-ink);
}

/* -----------------------------------------------------------------------------
   Newsletter column
   -------------------------------------------------------------------------- */

.fm-footer__news {
    display: grid;
    align-content: start;
    gap: 10px;
}

.fm-news__title {
    margin: 0;
    /* Matches .fm-page-heading: the site's headings are Outfit, tight and
       heavy rather than the old italic serif. */
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.fm-news__sub {
    margin: 0;
    color: var(--fm-slate);
}

.fm-news__form {
    margin-top: 4px;
}

.fm-news__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* min-width:0 lets the input actually shrink inside a flex row; without it the
   420px-ish intrinsic width blows the column open. The bottom margin is the
   control component's default `mb-1.5`, which would centre the input 3px above
   the button in an align-items:center row. */
.fm-news__row input {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.fm-news__submit {
    flex: 0 0 auto;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Trust strip separator

   The strip sits outside <main> on the body canvas (#f8fafc) and is followed
   by the warm footer, so without a rule the two backgrounds just abut.
   -------------------------------------------------------------------------- */

.fm-services {
    border-bottom: 1px solid var(--fm-line);
}

/* =============================================================================
   Tailwind utilities the compiled sheet never emitted
   -----------------------------------------------------------------------------
   The shop sheet (themes/shop/default/build/assets/app-*.css) was built before
   the slate palette was used anywhere, so every slate utility, `not-italic` and
   two `!` variants are absent - adding the class name alone styles nothing.
   These are stock Tailwind 3.4.19 rules regenerated with the project's own
   tailwind.config.js (see /tmp/fix/tw/), appended here rather than by
   rebuilding the sheet, so nothing else in the storefront changes. If the sheet
   is ever rebuilt these become duplicates with byte-identical values.
   ============================================================================= */
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1))
}

.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1))
}

.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1))
}

.\!py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important
}

.\!text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important
}

.not-italic {
  font-style: normal
}

.\!text-slate-800 {
  --tw-text-opacity: 1 !important;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1)) !important
}

.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1))
}

.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1))
}

.placeholder-slate-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1))
}

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1))
}


/* =============================================================================
   Newsletter form overrides (footer round)
   -----------------------------------------------------------------------------
   x-shop::form.control-group.control merges its own defaults onto every input
   via $attributes->merge(): 'mb-1.5 w-full rounded-lg border px-5 py-3
   text-base font-normal text-gray-600 ...'. Tailwind sorts those bare
   utilities BEFORE the ones passed in, so at equal specificity the component
   wins and px-4 py-2 text-sm are silently ignored.
   These ! variants force the intended sizing. border/border-slate-300 are
   left non-important so focus:border-gray-400 and the error state still work.
   ============================================================================= */
.\!px-4{padding-left:1rem!important;padding-right:1rem!important}.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.\!text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem;line-height:1.5rem}.\!text-slate-800{--tw-text-opacity:1!important;color:rgb(30 41 59/var(--tw-text-opacity,1))!important}

/* =============================================================================
   Sticky filter sidebar (collection + search pages, desktop)
   -----------------------------------------------------------------------------
   Every facet expanded makes the panel 3596px tall, so it can never sit above
   the fold. Pinned, it stays beside the products while shopping. It still
   scrolls, but inside a viewport-height box that is always on screen, instead
   of the old fixed 1320px box which on a 900px laptop was itself taller than
   the viewport — the double scroll that started this.

   `.fm-filters-col` is required, not decorative: the parent flex row is
   `items-start`, so without `align-self: stretch` this column is exactly as
   tall as the panel and a sticky child has zero distance to travel. That is
   why the first attempt at this moved nothing.

   Utilities are not used because the compiled stylesheet is not rebuilt for
   this project: `md:sticky`, `top-[130px]` and friends compiled to nothing.

   Scoped to min-width 768px, and the mobile drawer that reuses this panel
   carries neither class, so the pinning cannot leak into it.
   ============================================================================= */

@media (min-width: 768px) {
    .fm-filters-col {
        align-self: stretch;
    }

    .fm-filters-panel {
        position: -webkit-sticky;
        position: sticky;

        /* Clears the site header, measured at 130px. */
        top: 130px;

        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overflow-x: hidden;

        padding-bottom: 1.5rem;
    }
}

/* ---------------------------------------------------------------------- *
 * PDP fabric / fit / pattern / style callouts
 * (components/menswear/fabric-callouts.blade.php)
 *
 * Written as plain CSS on purpose. The compiled Tailwind stylesheet is never
 * rebuilt by this deployment, so utilities that were never emitted do not
 * exist — a previous round lost a whole sticky-sidebar change that way.
 * ---------------------------------------------------------------------- */
.fm-fabric {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
}

.fm-fabric__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    font-family: "Inter", system-ui, sans-serif;
}

.fm-fabric__k {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
}

.fm-fabric__v {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
}

@media (max-width: 640px) {
    .fm-fabric { gap: 6px; }
    .fm-fabric__chip { padding: 6px 10px; }
}

/* ============================================================
   Free-delivery progress bar (AOV nudge)

   Rendered by checkout/cart/free-shipping-bar.blade.php. The threshold it
   counts down to is core()->getConfigData('sales.carriers.free.threshold'),
   the same key Free::isAvailable() / FlatRate::isAvailable() gate on, so the
   bar and the rate the checkout actually charges cannot disagree.
   ============================================================ */
.fm-ship-bar {
    display: block;
    margin: 0 0 4px;
    padding: 14px 18px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
}

.fm-ship-bar__row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
}

.fm-ship-bar__row--done {
    margin: 0;
}

.fm-ship-bar__icon {
    font-size: 17px;
    color: #059669;
}

.fm-ship-bar__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}

.fm-ship-bar__text {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: #065f46;
    flex: 1;
    line-height: 1.4;
}

.fm-ship-bar__text strong {
    font-weight: 700;
    color: #047857;
}

.fm-ship-bar__pct {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    font-variant-numeric: tabular-nums;
}

.fm-ship-bar__track {
    height: 7px;
    border-radius: 999px;
    background: #d1fae5;
    overflow: hidden;
}

.fm-ship-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    transition: width .45s ease;
}

@media (max-width: 640px) {
    .fm-ship-bar {
        padding: 12px 14px;
    }

    .fm-ship-bar__text {
        font-size: 12.5px;
    }

    .fm-ship-bar__pct {
        display: none;
    }
}

/* ---- Available offers panel (mini-cart footer + checkout summary) ----------
   Rendered by checkout/cart/available-coupons.blade.php from live cart rules.
   Inert while every rule sits at status = 0, so this block is dormant today and
   lights up by itself the moment a rule is armed. */
.fm-offers {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    background: #fafafa;
}

.fm-offers__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #71717a;
}

.fm-offers__group + .fm-offers__group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e4e4e7;
}

.fm-offers__code {
    display: inline-block;
    margin: 0 0 9px;
    padding: 4px 11px;
    border: 1px dashed #a1a1aa;
    border-radius: 999px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #18181b;
}

.fm-offers__auto {
    display: inline-block;
    margin: 0 0 9px;
    padding: 4px 11px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #ecfdf5;
    font-size: 12px;
    font-weight: 600;
    color: #047857;
}

.fm-offers__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fm-offers__item {
    display: flex;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.5;
    color: #3f3f46;
}

.fm-offers__item:last-child {
    margin-bottom: 0;
}

.fm-offers__item::before {
    content: "\2713";
    flex: none;
    font-weight: 700;
    color: #059669;
}