/* =============================================================
   FM ELEVATOR — DESIGN SYSTEM
============================================================= */
:root {
    --fm-dark: #14110F;
    --fm-dark-2: #1C1815;
    --fm-white: #FFFFFF;
    --fm-offwhite: #F7F5F1;
    --fm-offwhite-2: #F1EFE9;
    --fm-grey: #6B6A64;
    --fm-grey-light: #9B9A93;
    --fm-border: #E4E1D9;
    --fm-border-dark: #33302B;
    --fm-red: #C0102A;
    --fm-red-dark: #96081E;
    --fm-gold: #A98A54;

    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Manrope', sans-serif;

    --container: 1200px;
    --pad: clamp(16px, 4vw, 64px);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--fm-dark);
    background: var(--fm-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input {
    font-family: inherit;
}

.section-inner,
.header-inner,
.utility-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fm-red);
    margin-bottom: 16px;
    display: block;
}

.eyebrow-light {
    color: var(--fm-gold);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    min-height: 44px;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all .3s var(--ease);
    white-space: nowrap;
}

.btn-primary {
    background: var(--fm-red);
    color: var(--fm-white);
}

.btn-primary:hover {
    background: var(--fm-red-dark);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--fm-dark);
    border: 1px solid var(--fm-border);
}

.btn-ghost:hover {
    border-color: var(--fm-dark);
}

.btn-ghost-light {
    background: transparent;
    color: var(--fm-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost-light:hover {
    border-color: var(--fm-white);
}

.btn-outline {
    background: transparent;
    color: var(--fm-dark);
    border: 1px solid var(--fm-dark);
}

.btn-outline:hover {
    background: var(--fm-dark);
    color: var(--fm-white);
}

/* Reveal on scroll */
.reveal,
.reveal-scale,
.reveal-late {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal-scale {
    transform: scale(.97);
}

.reveal.in-view,
.reveal-scale.in-view,
.reveal-late.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-scale,
    .reveal-late {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================================
   UTILITY BAR
============================================================= */
.utility-bar {
    background: var(--fm-dark);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
}

.utility-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.utility-right {
    display: flex;
    gap: 20px;
}

.utility-right a:hover {
    color: var(--fm-white);
}

/* =============================================================
   HEADER
============================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.0);
    border-bottom: 1px solid transparent;
    transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--fm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 3px;
    transition: padding .35s var(--ease);
}

.site-header.scrolled .header-inner {
    padding-top: 12px;
    padding-bottom: 12px;
}

.logo-link {
    flex-shrink: 0;
}

.logo {
    height: 42px;
    width: auto;
    transition: height .35s var(--ease);
}

.site-header.scrolled .logo {
    height: 36px;
}

.main-nav ul {
    display: flex;
    gap: 34px;
    align-items: center;
}

.main-nav a {
    font-size: 0.92rem;
    font-weight: 600;
    padding: 6px 0;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--fm-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--ease);
}

.main-nav a:hover::after {
    transform: scaleX(1);
}

.has-mega {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(880px, 90vw);
    background: var(--fm-white);
    border: 1px solid var(--fm-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.2fr;
    gap: 28px;
    padding: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-col h4 {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fm-grey);
    margin-bottom: 14px;
    font-weight: 700;
}

.mega-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-col a {
    font-size: 0.88rem;
    font-weight: 500;
}

.mega-col a:hover {
    color: var(--fm-red);
}

.mega-visual {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    min-height: 160px;
}

.mega-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mega-visual span {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(20, 17, 15, 0.8);
    color: #fff;
    font-size: 0.68rem;
    padding: 5px 10px;
    border-radius: 6px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--fm-dark);
    position: relative;
    transition: background .2s;
}

.icon-btn:hover {
    background: var(--fm-offwhite);
}

/* .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--fm-red);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.quote-btn {
    margin-left: 10px;
    padding: 11px 22px;
}

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.mobile-menu-btn span {
    width: 22px;
    height: 2px;
    background: var(--fm-dark);
    transition: all .3s var(--ease);
}

/* Mobile drawer */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 15, 0.5);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(360px, 88vw);
    background: var(--fm-white);
    z-index: 301;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 22px;
    overflow-y: auto;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.drawer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
}

.drawer-nav>li>a,
.drawer-acc-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 4px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fm-border);
    width: 100%;
    text-align: left;
}

.drawer-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
    padding-left: 12px;
}

.drawer-accordion.open .drawer-acc-panel {
    max-height: 300px;
}

.drawer-acc-panel li a {
    display: block;
    padding: 10px 0;
    font-size: 0.92rem;
    color: var(--fm-grey);
}

.drawer-quote {
    margin-top: 24px;
    width: 100%;
}

/* =============================================================
   HERO
============================================================= */
.hero {
    background: linear-gradient(180deg, var(--fm-offwhite) 0%, var(--fm-white) 100%);
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(50px, 7vw, 100px);
}

.hero-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.hero-heading {
    font-size: clamp(3rem, 6vw, 6.8rem);
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 24px;
}

.hero-desc {
    font-size: clamp(0.98rem, 1.1vw, 1.1rem);
    color: var(--fm-grey);
    max-width: 440px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
}

.hero-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--fm-offwhite-2);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.measure-line {
    position: absolute;
    top: 10%;
    right: -1px;
    bottom: 10%;
    width: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-spec {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.hero-spec-label {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--fm-red);
    font-weight: 700;
    text-transform: uppercase;
}

.hero-spec-main {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}

.hero-spec-sub {
    font-size: 0.72rem;
    color: var(--fm-grey);
}

.hero-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--fm-dark);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 20px;
}

.hero-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fm-red);
}

/* =============================================================
   TRUST BAR
============================================================= */
.trust-bar {
    background: var(--fm-dark);
    color: var(--fm-white);
}

.trust-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 28px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.trust-item strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
}

.trust-item span {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.trust-sep {
    width: 1px;
    height: 34px;
    background: rgba(255, 255, 255, 0.15);
}

/* =============================================================
   CATEGORIES
============================================================= */
.categories {
    padding: clamp(60px, 8vw, 120px) 0;
}

.section-head {
    max-width: 640px;
    margin-bottom: 48px;
}

.section-head h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 14px;
}

.section-head p {
    color: var(--fm-grey);
    font-size: 1.02rem;
    line-height: 1.6;
}

.section-head.split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    max-width: none;
}

.section-head.split h2 {
    max-width: 460px;
}

.category-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.cat-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4/3;
    background: var(--fm-offwhite-2);
}

.cat-large {
    grid-row: 1 / 2;
}

.cat-tall {
    grid-row: 1 / 3;
    aspect-ratio: auto;
}

.category-grid>.cat-tile:nth-child(3),
.category-grid>.cat-tile:nth-child(4) {
    grid-column: 1;
}

.category-grid {
    grid-template-areas: "a b" "c d";
}

.category-grid .cat-tile:nth-child(1) {
    grid-area: a;
}

.category-grid .cat-tile:nth-child(2) {
    grid-area: b;
}

.category-grid .cat-tile:nth-child(3) {
    grid-area: c;
}

.category-grid .cat-tile:nth-child(4) {
    grid-area: d;
}

.cat-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.cat-tile:hover img {
    transform: scale(1.03);
}

.cat-content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

.cat-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.cat-arrow {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1.2rem;
    transition: transform .3s var(--ease), color .3s;
}

.cat-tile:hover .cat-arrow {
    transform: translateX(6px);
    color: var(--fm-red);
}

/* =============================================================
   PRODUCTS
============================================================= */
.products {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--fm-offwhite);
}

.product-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tab {
    padding: 9px 16px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--fm-border);
    color: var(--fm-grey);
    transition: all .2s;
}

.tab.active,
.tab:hover {
    background: var(--fm-dark);
    color: #fff;
    border-color: var(--fm-dark);
}

.product-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.product-card {
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fm-white);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.product-image-wrap {
    position: relative;
    aspect-ratio: 1/1;
    background: var(--fm-offwhite-2);
    overflow: hidden;
}

.product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.product-card:hover .product-image-wrap img {
    transform: scale(1.05);
}

.pc-wishlist {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-wishlist svg {
    transition: transform .2s;
}

.pc-wishlist.active svg path {
    fill: var(--fm-red);
    stroke: var(--fm-red);
}

.pc-wishlist.active svg {
    transform: scale(1.15);
}

.pc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--fm-red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-quickview {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 17, 15, 0.88);
    color: #fff;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 10px;
    transform: translateY(100%);
    transition: transform .28s var(--ease);
}

.product-card:hover .pc-quickview {
    transform: translateY(0);
}

.product-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.pc-category {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fm-grey);
}

.pc-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
}

.pc-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--fm-grey);
}

.pc-stars {
    color: var(--fm-gold);
    letter-spacing: 1px;
}

.pc-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
}

.pc-price {
    font-weight: 700;
    font-size: 1.05rem;
}

.pc-oldprice {
    font-size: 0.82rem;
    color: var(--fm-grey-light);
    text-decoration: line-through;
}

.pc-note {
    font-size: 0.7rem;
    color: var(--fm-grey);
    margin-top: 2px;
}

.add-cart-btn {
    margin-top: 10px;
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    background: var(--fm-dark);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background .2s;
}

.add-cart-btn:hover {
    background: var(--fm-red);
}

.add-cart-btn.added {
    background: #2f7d4f;
}

/* =============================================================
   WHY FM
============================================================= */
.why {
    padding: clamp(60px, 8vw, 120px) 0;
}

.why-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.why-image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
}

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

.why-content h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    margin-bottom: 18px;
}

.why-desc {
    color: var(--fm-grey);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
}

.why-rows {
    display: flex;
    flex-direction: column;
}

.why-row {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--fm-border);
    transition: padding-left .25s var(--ease);
}

.why-rows .why-row:last-child {
    border-bottom: 1px solid var(--fm-border);
}

.why-row:hover {
    padding-left: 8px;
    border-color: var(--fm-red);
}

.why-num {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--fm-grey-light);
    font-size: 1rem;
    flex-shrink: 0;
}

.why-row h3 {
    font-size: 1.02rem;
    margin-bottom: 4px;
}

.why-row p {
    font-size: 0.88rem;
    color: var(--fm-grey);
}

/* =============================================================
   CUSTOMIZE
============================================================= */
.customize {
    background: var(--fm-dark);
    color: var(--fm-white);
    padding: clamp(60px, 8vw, 120px) 0;
}

.customize-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.customize-image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--fm-dark-2);
}

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

.customize-content h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    margin-bottom: 14px;
}

.customize-content>p.reveal {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 30px;
    max-width: 460px;
    line-height: 1.6;
}

.config-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.config-tab {
    padding: 9px 16px;
    border: 1px solid var(--fm-border-dark);
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    transition: all .2s;
}

.config-tab.active,
.config-tab:hover {
    background: var(--fm-red);
    border-color: var(--fm-red);
    color: #fff;
}

.config-panel {
    border: 1px solid var(--fm-border-dark);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 24px;
    min-height: 70px;
    display: flex;
    align-items: center;
}

.config-panel p {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.55;
}

.config-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.config-tags span {
    font-size: 0.72rem;
    padding: 7px 13px;
    border: 1px solid var(--fm-border-dark);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
}

/* =============================================================
   COLLECTION SHOWCASE
============================================================= */
.collection {
    padding: clamp(60px, 8vw, 120px) 0;
}

.collection-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(30px, 6vw, 90px);
    align-items: center;
}

.collection-image {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 5/4;
}

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

.collection-content h2 {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    margin-bottom: 20px;
}

.collection-list {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* =============================================================
   APPLICATIONS
============================================================= */
.applications {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--fm-offwhite);
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.app-tile {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 10px;
    overflow: hidden;
}

.app-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease), filter .3s;
}

.app-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%);
}

.app-tile:hover img {
    transform: scale(1.06);
    filter: brightness(0.85);
}

.app-tile span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    transition: transform .3s var(--ease);
}

.app-tile:hover span {
    transform: translateY(-4px);
}

/* =============================================================
   PROJECTS / MASONRY
============================================================= */
.projects {
    padding: clamp(60px, 8vw, 120px) 0;
}

.masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
    gap: 18px;
}

.masonry-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    grid-row: span 2;
}

.masonry-item.m-large {
    grid-row: span 3;
    grid-column: span 2;
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.masonry-item:hover img {
    transform: scale(1.04);
}

.masonry-overlay {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.65) 100%);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.masonry-item:hover .masonry-overlay {
    opacity: 1;
}

.m-label {
    color: var(--fm-gold);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.m-title {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: 2px;
}

.m-sub {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    margin-top: 2px;
}

/* =============================================================
   NUMBERS
============================================================= */
.numbers {
    background: var(--fm-dark);
    color: #fff;
    padding: clamp(50px, 7vw, 90px) 0;
}

.numbers-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.number-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
}

.number-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.03em;
}

/* =============================================================
   PROCESS
============================================================= */
.process {
    padding: clamp(60px, 8vw, 120px) 0;
}

.process-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    margin-top: 30px;
}

.process-track::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: var(--fm-border);
}

.process-step {
    position: relative;
}

.process-num {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--fm-red);
    background: var(--fm-white);
    padding-right: 10px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.process-step h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.process-step p {
    font-size: 0.88rem;
    color: var(--fm-grey);
    line-height: 1.55;
}

/* =============================================================
   TESTIMONIALS
============================================================= */
.testimonials {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--fm-offwhite);
}

.testimonial-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: center;
}

.testimonial-content {
    max-width: 720px;
    text-align: center;
}

.testimonial-content blockquote {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin-bottom: 24px;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-meta span:first-child {
    font-weight: 700;
    font-size: 0.95rem;
}

.testimonial-meta span:last-child {
    font-size: 0.82rem;
    color: var(--fm-grey);
}

.test-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--fm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
}

.test-arrow:hover {
    background: var(--fm-dark);
    color: #fff;
    border-color: var(--fm-dark);
}

/* =============================================================
   FAQ
============================================================= */
.faq {
    padding: clamp(60px, 8vw, 120px) 0;
}

.faq-inner {
    max-width: 900px;
}

.accordion {
    border-top: 1px solid var(--fm-border);
}

.acc-item {
    border-bottom: 1px solid var(--fm-border);
}

.acc-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 4px;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.02rem;
}

.acc-btn span {
    font-size: 1.3rem;
    font-weight: 400;
    transition: transform .3s var(--ease);
    color: var(--fm-red);
}

.acc-item.open .acc-btn span {
    transform: rotate(45deg);
}

.acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
}

.acc-panel p {
    padding: 0 4px 22px;
    color: var(--fm-grey);
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 640px;
}

/* =============================================================
   FINAL CTA
============================================================= */
.final-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 150px) var(--pad);
    text-align: center;
    color: #fff;
    background: var(--fm-dark);
}

.final-cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(10, 8, 7, 0.82), rgba(10, 8, 7, 0.9)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=1800&auto=format&fit=crop') center/cover;
}

.final-cta-inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.final-cta h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 20px;
}

.final-cta p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 34px;
    font-size: 1.02rem;
}

.final-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =============================================================
   FOOTER
============================================================= */
.site-footer {
    background: var(--fm-dark-2);
    color: rgba(255, 255, 255, 0.8);
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 70px var(--pad) 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 30px;
}

.footer-brand p {
    font-size: 0.85rem;
    margin-top: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    max-width: 280px;
}

.footer-col h4,
.footer-contact h4 {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 18px;
    font-weight: 700;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col a {
    font-size: 0.88rem;
}

.footer-col a:hover {
    color: var(--fm-red);
}

.footer-contact p {
    font-size: 0.88rem;
    line-height: 1.8;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.social-icons a {
    width: 34px;
    height: 34px;
    border: 1px solid var(--fm-border-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
}

.social-icons a:hover {
    border-color: var(--fm-red);
    color: var(--fm-red);
}

.footer-bottom {
    border-top: 1px solid var(--fm-border-dark);
    max-width: var(--container);
    margin: 0 auto;
    padding: 20px var(--pad);
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.4);
}

/* =============================================================
   SEARCH OVERLAY
============================================================= */
.search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(247, 245, 241, 0.98);
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 20px;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

.overlay-close {
    position: fixed;
    top: 24px;
    right: 24px;
    font-size: 1.8rem;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.overlay-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.search-panel {
    width: 100%;
    max-width: 700px;
}

.search-panel h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    margin-bottom: 24px;
}

.search-field-wrap {
    border-bottom: 2px solid var(--fm-dark);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

#searchInput {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    outline: none;
    font-family: var(--font-display);
    font-weight: 600;
}

.search-suggested {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 30px;
}

.search-suggested span {
    font-size: 0.8rem;
    color: var(--fm-grey);
    margin-right: 6px;
}

.search-suggested button {
    font-size: 0.8rem;
    padding: 8px 14px;
    border: 1px solid var(--fm-border);
    border-radius: 20px;
}

.search-suggested button:hover {
    background: var(--fm-dark);
    color: #fff;
    border-color: var(--fm-dark);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 10px;
}

.search-result-item:hover {
    background: rgba(0, 0, 0, 0.03);
}

.search-result-item img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
}

.search-result-item .sr-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.search-result-item .sr-price {
    font-size: 0.8rem;
    color: var(--fm-grey);
}

/* =============================================================
   CART DRAWER
============================================================= */
.cart-overlay,
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 15, 0.5);
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
}

.cart-overlay.active,
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 92vw);
    background: #fff;
    z-index: 401;
    transform: translateX(100%);
    transition: transform .38s var(--ease);
    display: flex;
    flex-direction: column;
}

.cart-drawer.active {
    transform: translateX(0);
}

.cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid var(--fm-border);
}

.cart-head h3 {
    font-size: 1.1rem;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 10px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cart-item {
    display: flex;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--fm-border);
}

.cart-item img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--fm-offwhite-2);
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.cart-item-price {
    font-size: 0.85rem;
    color: var(--fm-grey);
    margin-bottom: 8px;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-controls button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--fm-border);
    border-radius: 6px;
}

.cart-item-remove {
    font-size: 0.75rem;
    color: var(--fm-red);
    margin-top: 8px;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--fm-grey);
}

.cart-footer {
    padding: 20px 22px;
    border-top: 1px solid var(--fm-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.05rem;
}

.cart-continue,
.cart-checkout {
    width: 100%;
}

/* =============================================================
   QUICK VIEW MODAL
============================================================= */
.quick-view-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    width: min(880px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    z-index: 401;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.quick-view-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.quick-view-modal .overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.qv-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.qv-image {
    aspect-ratio: 1/1;
    background: var(--fm-offwhite-2);
}

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

.qv-details {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qv-category {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fm-grey);
}

.qv-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.qv-price {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 6px 0;
}

.qv-desc {
    color: var(--fm-grey);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.qv-qty {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.qv-qty button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--fm-border);
    border-radius: 8px;
}

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {

    .main-nav,
    .header-actions .account-btn,
    .utility-bar {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .header-actions {
        gap: 4px;
    }

    .quote-btn {
        display: none;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        order: -1;
    }

    .why-inner,
    .customize-inner,
    .collection-inner {
        grid-template-columns: 1fr;
    }

    .why-image,
    .customize-image,
    .collection-image {
        order: -1;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / 4;
    }

    .process-track {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .process-track::before {
        display: none;
    }
}

@media (max-width: 860px) {
    .category-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b" "c" "d";
    }

    .cat-tile,
    .cat-tall,
    .cat-large {
        aspect-ratio: 4/3;
        grid-row: auto;
    }

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

    .app-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .masonry {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .masonry-item.m-large {
        grid-column: span 2;
    }

    .numbers-inner {
        grid-template-columns: 1fr 1fr;
        row-gap: 30px;
    }

    .trust-inner {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .trust-sep {
        display: none;
    }

    .qv-content {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / 3;
    }
}

@media (max-width: 560px) {
    .hero-heading {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
    }

    .section-head.split {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .testimonial-inner {
        gap: 12px;
    }

    .test-arrow {
        width: 36px;
        height: 36px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: 1;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .cart-drawer {
        width: 100%;
    }
}

/* =========================================
   PREMIUM TESTIMONIALS
========================================= */

.premium-testimonials {
    position: relative;
    padding: 110px 0 90px;
    background: #11100f;
    color: #fff;
    overflow: hidden;
}

.premium-testimonials::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

.premium-testimonials::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -220px;
    bottom: -240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}


/* TOP */

.testimonial-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonial-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow-line {
    width: 28px;
    height: 1px;
    background: rgba(255, 255, 255, 0.65);
}

.testimonial-count {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    letter-spacing: 0.08em;
}


/* MAIN LAYOUT */

.testimonial-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.65fr);
    gap: 90px;
    padding: 70px 0 75px;
}


/* MAIN CONTENT */

.testimonial-main {
    max-width: 900px;
}

.testimonial-rating {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.testimonial-rating span {
    color: #d2aa67;
    font-size: 13px;
    letter-spacing: 3px;
}

.testimonial-rating small {
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
}


.testimonial-main blockquote {
    margin: 0;
    max-width: 880px;
    font-size: clamp(30px, 4vw, 55px);
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.035em;
    color: #f5f3ef;
}


/* AUTHOR */

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 45px;
}

.author-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.testimonial-author div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-author strong {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.testimonial-author span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 11px;
}


/* SIDE */

.testimonial-side {
    align-self: end;
    padding-left: 35px;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.testimonial-quote-mark {
    margin-bottom: 15px;
    color: #d2aa67;
    font-family: Georgia, serif;
    font-size: 65px;
    line-height: .7;
}

.testimonial-side p {
    margin: 0;
    max-width: 300px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.8;
}

.testimonial-location {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    color: rgba(255, 255, 255, 0.38);
    font-size: 11px;
}

.location-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d2aa67;
}


/* BOTTOM */

.testimonial-bottom {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 35px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trust-item strong {
    color: #f5f3ef;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.trust-item span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trust-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.13);
}


/* TABLET */

@media (max-width: 900px) {

    .premium-testimonials {
        padding: 80px 0 70px;
    }

    .testimonial-layout {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 55px 0 60px;
    }

    .testimonial-side {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.13);
    }

    .testimonial-side p {
        max-width: 600px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .premium-testimonials {
        padding: 65px 0 55px;
    }

    .testimonial-top {
        padding-bottom: 20px;
    }

    .testimonial-eyebrow {
        font-size: 9px;
    }

    .testimonial-count {
        font-size: 9px;
    }

    .testimonial-layout {
        gap: 38px;
        padding: 45px 0 45px;
    }

    .testimonial-rating {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 22px;
    }

    .testimonial-main blockquote {
        font-size: 29px;
        line-height: 1.16;
    }

    .testimonial-author {
        margin-top: 30px;
    }

    .testimonial-side {
        padding-top: 25px;
    }

    .testimonial-bottom {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .trust-divider {
        display: none;
    }

}

/* =========================================================
   PRODUCT SECTION
========================================================= */

.products {
    padding: 100px 0;
    background: #f5f4f0;
}

.products .section-inner {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.products .section-head {
    margin-bottom: 42px;
}

.products .section-head.split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
}

.products .section-head h2 {
    margin: 0;
    color: #111;
    font-size: clamp(42px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -0.055em;
    font-weight: 500;
}


/* =========================================================
   PRODUCT TABS
========================================================= */

.product-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.product-tabs .tab {
    appearance: none;
    border: 1px solid #d9d6cf;
    background: transparent;
    color: #55514b;
    padding: 10px 17px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.product-tabs .tab:hover {
    border-color: #171614;
    color: #171614;
}

.product-tabs .tab.active {
    background: #171614;
    border-color: #171614;
    color: #fff;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

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


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid #e1ded7;
    border-radius: 12px;
    overflow: hidden;

    transition:
        transform .35s cubic-bezier(.2, .7, .2, 1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #d3cfc7;
    box-shadow: 0 18px 45px rgba(20, 18, 15, .09);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #e9e7e2;
}

.product-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2, .7, .2, 1);
}

.product-card:hover .product-image img {
    transform: scale(1.045);
}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;

    display: inline-flex;
    align-items: center;

    padding: 7px 10px;

    border-radius: 4px;

    background: #151412;
    color: #fff;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.product-badge.new {
    background: #151412;
}


/* =========================================================
   WISHLIST
========================================================= */

.product-wishlist {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50%;

    background: rgba(255, 255, 255, .94);
    color: #171614;

    font-family: inherit;
    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.product-wishlist:hover {
    background: #171614;
    color: #fff;
    transform: scale(1.06);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.product-info {
    padding: 18px 17px 17px;
}

.product-category {
    display: block;

    margin-bottom: 8px;

    color: #8a867f;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.product-info h3 {
    margin: 0 0 9px;

    color: #151412;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
}


/* =========================================================
   RATING
========================================================= */

.product-rating {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 11px;

    color: #a47a3d;

    font-size: 11px;
    line-height: 1;
}

.product-rating span {
    color: #88847d;
    font-size: 10px;
}


/* =========================================================
   PRICE
========================================================= */

.product-price {
    display: flex;
    align-items: baseline;
    gap: 7px;

    margin-bottom: 7px;

    color: #151412;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.product-price del {
    color: #aaa69f;

    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   PRODUCT NOTE
========================================================= */

.product-info p {
    margin: 0 0 15px;

    color: #1d1c1c;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   ADD TO CART / PRODUCT BUTTON
========================================================= */

.product-cart {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 38px;

    border: 1px solid #171614;
    border-radius: 6px;

    background: #171614;
    color: #fff;

    text-decoration: none;

    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.product-cart:hover {
    background: transparent;
    color: #171614;
}

.product-cart:active {
    transform: scale(.98);
}


/* =========================================================
   REVEAL
========================================================= */

.product-card.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2, .7, .2, 1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.product-card.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .products {
        padding: 85px 0;
    }

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

    .product-image {
        height: 300px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .products {
        padding: 65px 0;
    }

    .products .section-inner {
        width: min(100% - 30px, 1400px);
    }

    .products .section-head.split {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .products .section-head h2 {
        font-size: 42px;
    }

    .product-tabs {
        width: 100%;
        justify-content: flex-start;

        flex-wrap: nowrap;
        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }

    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tabs .tab {
        flex: 0 0 auto;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .product-image {
        height: 300px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .products .section-head h2 {
        font-size: 37px;
    }

    .product-image {
        height: 250px;
    }

    .product-info {
        padding: 16px 14px 14px;
    }

}

/* =========================================================
   PREMIUM ECOMMERCE FOOTER
========================================================= */

.site-footer {
    position: relative;
    background: #171513;
    color: #fff;
    overflow: hidden;
}


/* subtle background detail */

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: -180px;
    width: 520px;
    height: 520px;

    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 50%;

    pointer-events: none;
}

.site-footer::after {
    content: "";
    position: absolute;
    bottom: -260px;
    left: 35%;
    width: 520px;
    height: 520px;

    border: 1px solid rgba(255, 255, 255, .025);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.footer-main {
    position: relative;
    z-index: 2;

    width: min(1400px, calc(100% - 100px));
    margin: 0 auto;

    padding: 90px 0 75px;

    display: grid;
    grid-template-columns:
        1.5fr .8fr .9fr .9fr 1.25fr;

    gap: 55px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 155px;
    height: 100px;
    border-radius: 10px;
    margin-bottom: 25px;

    background: #fff;

    overflow: hidden;
}

.footer-logo img {
    display: block;

    width: 145px;
    height: 40px;

    object-fit: contain;
}


.footer-description {
    max-width: 285px;

    margin: 0 0 23px;

    color: #918d88;

    font-size: 12px;
    line-height: 1.75;
    font-weight: 400;
}


.footer-email {
    display: inline-block;

    color: #ddd9d3;

    font-size: 12px;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, .25);

    padding-bottom: 4px;

    transition:
        color .25s ease,
        border-color .25s ease;
}

.footer-email:hover {
    color: #fff;
    border-color: #fff;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h4,
.footer-contact .footer-eyebrow {
    margin: 2px 0 25px;

    color: #817d77;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.footer-column li {
    margin: 0 0 14px;
}

.footer-column a {
    position: relative;

    display: inline-block;

    color: #d6d2cd;

    font-size: 12px;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-column a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -3px;

    width: 0;
    height: 1px;

    background: #fff;

    transition: width .3s ease;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(3px);
}

.footer-column a:hover::after {
    width: 100%;
}


/* =========================================================
   CONTACT / CTA
========================================================= */

.footer-contact {
    padding-left: 12px;
}

.footer-contact .footer-eyebrow {
    display: block;
    margin-bottom: 17px;
}


.footer-contact h3 {
    margin: 0 0 25px;

    color: #f3f1ee;

    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 400;
    line-height: 1.05;

    letter-spacing: -.045em;
}


.footer-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding-bottom: 9px;

    border-bottom: 1px solid rgba(255, 255, 255, .45);

    color: #fff;

    font-size: 12px;
    font-weight: 500;

    text-decoration: none;

    transition:
        gap .3s ease,
        border-color .3s ease;
}

.footer-contact-link span {
    font-size: 15px;
    line-height: 1;
}

.footer-contact-link:hover {
    gap: 20px;
    border-color: #fff;
}


.footer-location {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 32px;

    color: #817d77;

    font-size: 10px;
    letter-spacing: .03em;
}


.location-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #a7a29c;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 2;

    width: min(1400px, calc(100% - 100px));
    margin: 0 auto;

    min-height: 76px;

    border-top: 1px solid rgba(255, 255, 255, .09);

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 30px;
}


.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #77736e;

    font-size: 10px;
}


.footer-separator {
    color: #484541;
}


.footer-bottom-center {
    color: #66625d;

    font-size: 9px;
    letter-spacing: .09em;
    text-transform: uppercase;

    text-align: center;
}


.footer-socials {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;

    color: #aaa6a0;

    font-size: 9px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.footer-socials a:hover {
    color: #171513;
    background: #fff;
    border-color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .footer-main {
        width: min(100% - 60px, 900px);

        grid-template-columns:
            1.4fr 1fr 1fr;

        gap: 50px 35px;

        padding: 75px 0 60px;
    }

    .footer-contact {
        padding-left: 0;
    }

    .footer-brand {
        grid-row: span 2;
    }

    .footer-bottom {
        width: min(100% - 60px, 900px);
    }

    .footer-bottom-center {
        display: none;
    }

    .footer-bottom {
        grid-template-columns: 1fr auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .footer-main {
        width: calc(100% - 40px);

        padding: 60px 0 45px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 42px 25px;
    }


    .footer-brand {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    .footer-description {
        max-width: 420px;
    }


    .footer-contact {
        grid-column: 1 / -1;

        padding-top: 12px;

        border-top: 1px solid rgba(255, 255, 255, .08);
    }


    .footer-contact h3 {
        font-size: 30px;
    }


    .footer-bottom {
        width: calc(100% - 40px);

        padding: 20px 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        gap: 18px;
    }


    .footer-socials {
        justify-content: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .footer-main {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .footer-column {
        border-top: 1px solid rgba(255, 255, 255, .07);
        padding-top: 25px;
    }

    .footer-column h4 {
        margin-bottom: 18px;
    }

    .footer-contact {
        grid-column: auto;
    }

}

/* =========================================================
   PREMIUM FULL-WIDTH HERO
========================================================= */

.hero-slider {
    position: relative;

    width: 100%;
    height: min(820px, 92vh);
    min-height: 650px;

    overflow: hidden;

    background: #111;
}


/* =========================================================
   SLIDES
========================================================= */

.hero-slide {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1s ease,
        visibility 1s ease;

    overflow: hidden;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.hero-bg {
    position: absolute;
    inset: 0;

    overflow: hidden;
}

.hero-bg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.04);

    transition:
        transform 7s cubic-bezier(.2, .7, .2, 1);
}

.hero-slide.active .hero-bg img {
    transform: scale(1);
}


/* =========================================================
   CINEMATIC OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .42) 0%,
            rgba(0, 0, 0, .30) 35%,
            rgba(0, 0, 0, .48) 100%);

    z-index: 1;
}


/* Extra dark center */

.hero-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(ellipse at center,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, .28) 100%);
}


/* =========================================================
   CONTENT
========================================================= */

.hero-content {
    position: relative;
    z-index: 3;

    width: min(850px, calc(100% - 40px));

    margin: 0 auto;

    text-align: center;

    color: #fff;

    transform: translateY(18px);

    opacity: 0;

    transition:
        opacity .8s ease .25s,
        transform .8s cubic-bezier(.2, .7, .2, 1) .25s;
}

.hero-slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   KICKER
========================================================= */

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, .78);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .2em;

    text-transform: uppercase;
}

.hero-kicker::before,
.hero-kicker::after {
    content: "";

    width: 28px;
    height: 1px;

    background: rgba(255, 255, 255, .5);
}


/* =========================================================
   HEADING
========================================================= */

.hero-content h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(58px, 8vw, 112px);

    line-height: .88;

    font-weight: 500;

    letter-spacing: -.065em;

    text-wrap: balance;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-content p {
    width: min(560px, 100%);

    margin: 28px auto 0;

    color: rgba(255, 255, 255, .78);

    font-size: 14px;

    line-height: 1.7;

    font-weight: 400;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-actions {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 32px;
}


.hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 600;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.hero-btn-primary {
    background: #c8102e;

    border: 1px solid #c8102e;

    color: #fff;
}

.hero-btn-primary:hover {
    background: #a90d27;

    border-color: #a90d27;

    transform: translateY(-2px);
}

.hero-btn-primary span {
    font-size: 15px;
}


.hero-btn-light {
    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .42);

    color: #fff;

    backdrop-filter: blur(10px);
}

.hero-btn-light:hover {
    background: #fff;

    border-color: #fff;

    color: #111;

    transform: translateY(-2px);
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.hero-bottom {
    position: absolute;

    z-index: 4;

    left: 40px;
    right: 40px;
    bottom: 32px;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: end;

    gap: 30px;

    color: #fff;
}


.hero-meta {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.hero-meta-label {
    color: rgba(255, 255, 255, .48);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.hero-meta-value {
    color: rgba(255, 255, 255, .88);

    font-size: 10px;

    letter-spacing: .02em;
}


.hero-status {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    color: rgba(255, 255, 255, .72);

    font-size: 10px;
}


.status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d7193f;

    box-shadow:
        0 0 0 4px rgba(215, 25, 63, .12);
}


/* =========================================================
   NAVIGATION
========================================================= */

.hero-navigation {
    position: absolute;

    z-index: 5;

    right: 40px;
    bottom: 115px;

    display: flex;

    align-items: center;

    gap: 14px;
}


.hero-arrow {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background: rgba(0, 0, 0, .15);

    color: #fff;

    font-family: inherit;

    font-size: 15px;

    cursor: pointer;

    backdrop-filter: blur(8px);

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.hero-arrow:hover {
    background: #fff;

    border-color: #fff;

    color: #111;

    transform: scale(1.05);
}


.hero-counter {
    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, .7);

    font-size: 9px;

    letter-spacing: .08em;
}


.hero-current {
    color: #fff;

    font-weight: 600;
}


.hero-line {
    width: 30px;

    height: 1px;

    background: rgba(255, 255, 255, .35);
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-slider {
        height: 760px;
        min-height: 620px;
    }

    .hero-content h1 {
        font-size: clamp(52px, 9vw, 82px);
    }

    .hero-bottom {
        left: 25px;
        right: 25px;
    }

    .hero-navigation {
        right: 25px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .hero-slider {
        height: 760px;
        min-height: 680px;
    }


    .hero-bg img {
        object-position: center center;
    }


    .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, .48) 0%,
                rgba(0, 0, 0, .35) 35%,
                rgba(0, 0, 0, .70) 100%);
    }


    .hero-content {
        width: calc(100% - 32px);
    }


    .hero-kicker {
        font-size: 8px;

        letter-spacing: .15em;
    }

    .hero-kicker::before,
    .hero-kicker::after {
        width: 18px;
    }


    .hero-content h1 {
        font-size: clamp(48px, 14vw, 68px);

        line-height: .9;

        letter-spacing: -.06em;
    }


    .hero-content p {
        margin-top: 22px;

        font-size: 12px;

        line-height: 1.65;
    }


    .hero-actions {
        flex-direction: column;

        width: 100%;

        margin-top: 27px;
    }


    .hero-btn {
        width: 100%;

        max-width: 280px;
    }


    .hero-bottom {
        left: 18px;
        right: 18px;
        bottom: 22px;

        grid-template-columns: 1fr 1fr;

        gap: 15px;
    }


    .hero-meta:nth-child(2) {
        display: none;
    }


    .hero-status {
        justify-content: flex-end;

        font-size: 8px;

        text-align: right;
    }


    .hero-navigation {
        left: 18px;
        right: auto;
        bottom: 82px;
    }


    .hero-arrow {
        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .hero-slider {
        min-height: 650px;
        height: 700px;
    }

    .hero-content h1 {
        font-size: 45px;
    }

    .hero-content p {
        font-size: 11px;
    }

}

.fam_logo img {
    width: 141px;
}

@media (max-width: 580px) {

    .fam_logo img {
        width: 120px;
        height: auto;
    }

    .header-inner {

        padding-top: 3px;
        padding-bottom: 6px;
    }

    .hero-slider {
        height: 569px;
        min-height: 581px;
    }
}
















/* =============================================================
   FM ELEVATOR — PRODUCTS PAGE
   Premium E-Commerce / Product Category Layout
   ============================================================= */


/* =============================================================
   PAGE ROOT
   ============================================================= */

.products-page {
    --products-radius: 16px;
    --products-radius-sm: 10px;
    --products-gap: 22px;
    background: var(--fm-white);
    overflow: hidden;
}


/* =============================================================
   PAGE HERO
   ============================================================= */

.products-page-hero {
    position: relative;
    background:
        radial-gradient(circle at 82% 20%,
            rgba(192, 16, 42, 0.045),
            transparent 32%),
        linear-gradient(180deg,
            var(--fm-offwhite) 0%,
            var(--fm-white) 100%);

    padding: 28px 0 78px;
    border-bottom: 1px solid var(--fm-border);
}

.products-page-hero::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    bottom: -130px;
    border: 1px solid rgba(169, 138, 84, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.products-page-hero-inner {
    position: relative;
    z-index: 1;
}


/* =============================================================
   BREADCRUMB
   ============================================================= */

.products-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 62px;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--fm-grey);
}

.products-breadcrumb a {
    transition:
        color 0.25s var(--ease);
}

.products-breadcrumb a:hover {
    color: var(--fm-red);
}

.products-breadcrumb .separator {
    color: var(--fm-grey-light);
}

.products-breadcrumb .current {
    color: var(--fm-dark);
}


/* =============================================================
   HERO HEADING
   ============================================================= */

.products-page-heading {
    max-width: 780px;
}

.products-page-heading .eyebrow {
    margin-bottom: 14px;
}

.products-page-heading h1 {
    margin: 0;
    font-family: var(--font-display);
     font-size: 34px;
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: var(--fm-dark);
}

.products-page-heading h1 span {
    color: var(--fm-red);
}

.products-page-intro {
    max-width: 650px;
    margin-top: 26px;

    color: var(--fm-grey);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.75;
}


/* =============================================================
   HERO META
   ============================================================= */

.products-page-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 38px;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: var(--fm-grey);
}

.products-page-meta-line {
    width: 34px;
    height: 1px;
    background: var(--fm-red);
}

.products-page-meta-dot {
    color: var(--fm-gold);
}


/* =============================================================
   PRODUCT CATEGORY SECTION
   ============================================================= */

.products-category-sec {
    padding: clamp(70px, 9vw, 125px) 0;
    background: var(--fm-white);
}


/* =============================================================
   SECTION HEADER
   ============================================================= */

.products-category-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
    align-items: end;
    gap: 60px;

    margin-bottom: 54px;
}

.products-category-heading {
    max-width: 620px;
}

.products-category-heading .eyebrow {
    margin-bottom: 13px;
}

.products-category-heading h2 {
    margin: 0;
    font-family: var(--font-display);
     font-size: 34px;
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.products-category-heading h2 span {
    color: var(--fm-red);
}

.products-category-head .desc {
    max-width: 470px;
    margin: 0;
    color: var(--fm-grey);
    font-size: 0.96rem;
    line-height: 1.75;
}


/* =============================================================
   CATEGORY GRID
   ============================================================= */

.products-category-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: var(--products-gap);
}


/* =============================================================
   CATEGORY CARD
   ============================================================= */

.product-category-card {
    position: relative;

    grid-column: span 6;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--fm-border);
    border-radius: var(--products-radius);

    background: var(--fm-white);

    color: var(--fm-dark);

    box-shadow:
        0 3px 0 rgba(20, 17, 15, 0.01);

    transition:
        transform 0.45s var(--ease),
        box-shadow 0.45s var(--ease),
        border-color 0.3s var(--ease);
}

.product-category-card:hover {
    transform: translateY(-6px);

    border-color: rgba(20, 17, 15, 0.16);

    box-shadow:
        0 20px 50px rgba(20, 17, 15, 0.10);
}


/* =============================================================
   CATEGORY IMAGE
   ============================================================= */

.product-category-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: var(--fm-offwhite-2);
}

.product-category-image::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(20, 17, 15, 0.02) 25%,
            rgba(20, 17, 15, 0.68) 100%);

    opacity: 0.72;

    pointer-events: none;

    transition:
        opacity 0.4s var(--ease);
}

.product-category-card:hover .product-category-image::after {
    opacity: 0.9;
}


.product-category-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s var(--ease),
        filter 0.5s var(--ease);
}

.product-category-card:hover .product-category-image img {
    transform: scale(1.055);
    filter: brightness(0.92);
}


/* =============================================================
   IMAGE OVERLAY
   ============================================================= */

.product-category-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 18px;
}

.product-category-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 28px;

    padding: 0 9px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 30px;

    background: rgba(20, 17, 15, 0.58);

    color: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(8px);

    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.product-category-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: var(--fm-dark);

    transform: translateY(0);

    transition:
        transform 0.35s var(--ease),
        background 0.3s,
        color 0.3s;
}

.product-category-card:hover .product-category-arrow {
    transform: translate(2px, -2px);

    background: var(--fm-red);
    color: var(--fm-white);
}


/* =============================================================
   CATEGORY BODY
   ============================================================= */

.product-category-body {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 25px 25px 24px;

    background: var(--fm-white);
}


/* =============================================================
   CATEGORY TOP META
   ============================================================= */

.product-category-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}

.product-category-index {
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 800;

    color: var(--fm-red);
}

.product-category-label {
    font-size: 0.63rem;
    font-weight: 700;

    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--fm-grey-light);
}


/* =============================================================
   CATEGORY TITLE
   ============================================================= */

.product-category-title {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;

    color: var(--fm-dark);

    transition:
        color 0.25s var(--ease);
}

.product-category-card:hover .product-category-title {
    color: var(--fm-red);
}


/* =============================================================
   CATEGORY DESCRIPTION
   ============================================================= */

.product-category-description {
    margin-top: 11px;

    max-width: 560px;

    color: var(--fm-grey);

    font-size: 0.86rem;
    line-height: 1.65;
}


/* =============================================================
   CATEGORY LINK
   ============================================================= */

.product-category-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: fit-content;

    margin-top: auto;
    padding-top: 24px;

    color: var(--fm-dark);

    font-size: 0.76rem;
    font-weight: 700;

    letter-spacing: 0.03em;

    transition:
        color 0.25s var(--ease),
        gap 0.3s var(--ease);
}

.product-category-link svg {
    flex-shrink: 0;

    transition:
        transform 0.3s var(--ease);
}

.product-category-card:hover .product-category-link {
    color: var(--fm-red);
    gap: 12px;
}

.product-category-card:hover .product-category-link svg {
    transform: translateX(3px);
}


/* =============================================================
   TRUST STRIP
   ============================================================= */

.products-trust-strip {
    position: relative;

    background: var(--fm-dark);

    color: var(--fm-white);

    border-top: 1px solid var(--fm-border-dark);
}

.products-trust-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;
}


/* =============================================================
   TRUST ITEM
   ============================================================= */

.products-trust-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 34px 28px;

    min-width: 0;
}

.products-trust-item:not(:last-child)::after {
    content: '';

    position: absolute;

    top: 30px;
    right: 0;

    width: 1px;
    height: calc(100% - 60px);

    background: rgba(255, 255, 255, 0.12);
}

.products-trust-number {
    flex-shrink: 0;

    font-family: var(--font-display);

    font-size: 0.68rem;
    font-weight: 800;

    color: var(--fm-gold);
}

.products-trust-item div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.products-trust-item strong {
    font-family: var(--font-display);

    font-size: 0.86rem;
    font-weight: 700;

    color: var(--fm-white);
}

.products-trust-item div span {
    color: rgba(255, 255, 255, 0.52);

    font-size: 0.68rem;
    line-height: 1.5;
}


/* =============================================================
   EMPTY STATE
   ============================================================= */

.products-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 300px;

    padding: 50px 25px;

    text-align: center;

    border: 1px dashed var(--fm-border);
    border-radius: var(--products-radius);

    background:
        linear-gradient(180deg,
            var(--fm-offwhite),
            var(--fm-white));
}

.products-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--fm-offwhite-2);

    color: var(--fm-red);
}

.products-empty-state h4 {
    margin-bottom: 7px;

    font-size: 1.15rem;
}

.products-empty-state p {
    color: var(--fm-grey);

    font-size: 0.88rem;
}


/* =============================================================
   REVEAL ANIMATION SUPPORT
   ============================================================= */

.products-page [data-reveal="up"] {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}

.products-page [data-reveal="up"].in-view,
.products-page [data-reveal="up"].revealed,
.products-page [data-reveal="up"].active {
    opacity: 1;
    transform: translateY(0);
}


/* =============================================================
   FOCUS STATES
   ============================================================= */

.products-page a:focus-visible {
    outline: 2px solid var(--fm-red);
    outline-offset: 4px;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

    .products-page-hero {
        padding-top: 34px;
        padding-bottom: 95px;
    }

    .products-breadcrumb {
        margin-bottom: 78px;
    }

    .products-category-grid {
        gap: 26px;
    }

    .product-category-body {
        padding: 28px 28px 27px;
    }

}


/* =============================================================
   TABLET / SMALL DESKTOP
   ============================================================= */

@media (max-width: 1000px) {

    .products-page-hero {
        padding-bottom: 68px;
    }

    .products-breadcrumb {
        margin-bottom: 52px;
    }

    .products-page-heading h1 {
        font-size: clamp(3rem, 8vw, 5.2rem);
    }

    .products-category-head {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 42px;
    }

    .products-category-head .desc {
        max-width: 650px;
    }

    .products-category-grid {
        gap: 18px;
    }

    .product-category-card {
        grid-column: span 6;
    }

    .products-trust-item {
        padding: 30px 18px;
        gap: 11px;
    }

    .products-trust-item strong {
        font-size: 0.78rem;
    }

    .products-trust-item div span {
        font-size: 0.64rem;
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 768px) {

    .products-page-hero {
        padding: 22px 0 60px;
    }

    .products-breadcrumb {
        margin-bottom: 42px;
    }

    .products-page-heading h1 {
        font-size: clamp(2.8rem, 12vw, 4.5rem);
        letter-spacing: -0.06em;
    }

    .products-page-intro {
        margin-top: 20px;
        line-height: 1.65;
    }

    .products-page-meta {
        margin-top: 30px;
    }

    .products-category-sec {
        padding: 65px 0;
    }

    .products-category-heading h2 {
        font-size: clamp(2.1rem, 8vw, 3.2rem);
    }

    .products-category-grid {
        grid-template-columns: 1fr;
    }

    .product-category-card {
        grid-column: auto;
    }

    .product-category-image {
        aspect-ratio: 16 / 9;
    }

    .products-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products-trust-item {
        padding: 28px 20px;
    }

    .products-trust-item:nth-child(2)::after {
        display: none;
    }

    .products-trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .products-page-hero {
        padding: 18px 0 52px;
    }

    .products-page-hero::after {
        width: 180px;
        height: 180px;
        right: -90px;
        bottom: -90px;
    }

    .products-breadcrumb {
        margin-bottom: 36px;

        font-size: 0.68rem;
    }

    .products-page-heading .eyebrow {
        font-size: 0.68rem;
        margin-bottom: 12px;
    }

    .products-page-heading h1 {
        font-size: clamp(2.6rem, 14vw, 4rem);
        line-height: 0.98;
    }

    .products-page-intro {
        font-size: 0.9rem;
        margin-top: 18px;
    }

    .products-page-meta {
        gap: 8px;

        font-size: 0.58rem;
        letter-spacing: 0.07em;

        line-height: 1.6;
    }

    .products-page-meta-line {
        width: 25px;
    }

    .products-category-sec {
        padding: 55px 0;
    }

    .products-category-head {
        margin-bottom: 34px;
    }

    .products-category-heading h2 {
        font-size: 2.15rem;
    }

    .products-category-head .desc {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .products-category-grid {
        gap: 16px;
    }

    .product-category-card {
        border-radius: 13px;
    }

    .product-category-image {
        aspect-ratio: 1 / 0.72;
    }

    .product-category-overlay {
        padding: 13px;
    }

    .product-category-arrow {
        width: 36px;
        height: 36px;
    }

    .product-category-number {
        min-width: 34px;
        height: 25px;
        font-size: 0.59rem;
    }

    .product-category-body {
        padding: 20px 19px 20px;
    }

    .product-category-top {
        margin-bottom: 10px;
    }

    .product-category-label {
        font-size: 0.57rem;
    }

    .product-category-title {
        font-size: 1.2rem;
    }

    .product-category-description {
        font-size: 0.82rem;
        line-height: 1.6;
        margin-top: 9px;
    }

    .product-category-link {
        padding-top: 19px;
        font-size: 0.71rem;
    }

    .products-trust-grid {
        grid-template-columns: 1fr;
    }

    .products-trust-item {
        padding: 23px 0;
    }

    .products-trust-item:not(:last-child)::after {
        display: none;
    }

    .products-trust-item:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .products-trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 420px) {

    .products-page-heading h1 {
        font-size: 2.45rem;
    }

    .products-page-intro {
        font-size: 0.86rem;
    }

    .products-category-heading h2 {
        font-size: 2rem;
    }

    .product-category-image {
        aspect-ratio: 1 / 0.70;
    }

    .product-category-body {
        padding: 18px 17px;
    }

    .product-category-title {
        font-size: 1.1rem;
    }

    .product-category-description {
        font-size: 0.79rem;
    }

}


/* =============================================================
   VERY SMALL DEVICES
   ============================================================= */

@media (max-width: 360px) {

    .products-page-heading h1 {
        font-size: 2.25rem;
    }

    .products-page-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .products-page-meta-dot {
        display: none;
    }

    .products-category-heading h2 {
        font-size: 1.85rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .products-page *,
    .products-page *::before,
    .products-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .products-page [data-reveal="up"] {
        opacity: 1 !important;
        transform: none !important;
    }

}








/* =============================================================
   FM ELEVATOR
   PRODUCT CATEGORY / COLLECTION PAGE
   Premium E-Commerce Design
   ============================================================= */


/* =============================================================
   PAGE ROOT
   ============================================================= */

.product-category-page {
    --pcp-radius: 16px;
    --pcp-radius-sm: 10px;

    background: var(--fm-white);
    color: var(--fm-dark);

    overflow: hidden;
}


/* =============================================================
   CATEGORY HERO
   ============================================================= */

.product-category-hero {
    position: relative;

    padding: 28px 0 82px;

    background:
        radial-gradient(circle at 84% 22%,
            rgba(192, 16, 42, 0.055),
            transparent 30%),
        radial-gradient(circle at 15% 85%,
            rgba(169, 138, 84, 0.035),
            transparent 25%),
        linear-gradient(180deg,
            var(--fm-offwhite) 0%,
            var(--fm-white) 100%);

    border-bottom: 1px solid var(--fm-border);
}

.product-category-hero::before {
    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    right: -190px;
    top: -210px;

    border: 1px solid rgba(169, 138, 84, 0.10);

    border-radius: 50%;

    pointer-events: none;
}

.product-category-hero::after {
    content: '';

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    top: -130px;

    border: 1px solid rgba(192, 16, 42, 0.07);

    border-radius: 50%;

    pointer-events: none;
}

.product-category-hero-inner {
    position: relative;
    z-index: 2;
}


/* =============================================================
   BREADCRUMB
   ============================================================= */

.product-category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 64px;

    font-size: 0.72rem;
    font-weight: 600;

    color: var(--fm-grey);

    letter-spacing: 0.025em;
}

.product-category-breadcrumb a {
    transition: color 0.25s var(--ease);
}

.product-category-breadcrumb a:hover {
    color: var(--fm-red);
}

.product-category-breadcrumb .separator {
    color: var(--fm-grey-light);
}

.product-category-breadcrumb .current {
    color: var(--fm-dark);
    font-weight: 700;
}


/* =============================================================
   HERO CONTENT
   ============================================================= */

.product-category-hero-content {
    max-width: 850px;
}

.product-category-hero-content .eyebrow {
    margin-bottom: 14px;
}

.product-category-hero-content h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(3.2rem,
            7vw,
            6.5rem);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.055em;

    color: var(--fm-dark);

    max-width: 900px;

    word-break: break-word;
}


/* =============================================================
   HERO DESCRIPTION
   ============================================================= */

.product-category-hero-description {
    max-width: 690px;

    margin-top: 28px;

    color: var(--fm-grey);

    font-size: clamp(0.95rem,
            1.15vw,
            1.08rem);

    line-height: 1.75;
}


/* =============================================================
   HERO META
   ============================================================= */

.product-category-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 38px;

    font-size: 0.66rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.095em;

    color: var(--fm-grey);
}

.hero-meta-line {
    width: 34px;
    height: 1px;

    background: var(--fm-red);
}

.hero-meta-dot {
    color: var(--fm-gold);
}


/* =============================================================
   PRODUCTS SECTION
   ============================================================= */

.product-category-page .products-grid-sec {
    padding: clamp(70px, 9vw, 125px) 0;

    background: var(--fm-white);
}


/* =============================================================
   COLLECTION HEADER
   ============================================================= */

.product-collection-header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items: end;

    gap: 50px;

    margin-bottom: 52px;
}

.product-collection-heading {
    max-width: 700px;
}

.product-collection-heading .eyebrow {
    margin-bottom: 13px;
}

.product-collection-heading h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(2.25rem,
            4vw,
            3.65rem);

    font-weight: 800;

    line-height: 1.03;

    letter-spacing: -0.045em;
}

.product-collection-heading h2 span {
    color: var(--fm-red);
}

.product-collection-description {
    max-width: 620px;

    margin-top: 16px;

    color: var(--fm-grey);

    font-size: 0.92rem;

    line-height: 1.7;
}


/* =============================================================
   PRODUCT COUNT
   ============================================================= */

.category-product-count {
    display: flex;
    align-items: baseline;

    gap: 8px;

    padding: 12px 17px;

    border: 1px solid var(--fm-border);

    border-radius: 30px;

    background: var(--fm-offwhite);

    white-space: nowrap;
}

.category-product-count strong {
    font-family: var(--font-display);

    font-size: 1.15rem;
    font-weight: 800;

    color: var(--fm-dark);
}

.category-product-count span {
    font-size: 0.67rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--fm-grey);
}


/* =============================================================
   PRODUCT GRID
   ============================================================= */

.product-category-page .products-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    margin-top: 0;
}


/* =============================================================
   PRODUCT CARD
   ============================================================= */

.product-category-page .product-card {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    padding: 0;

    border: 1px solid var(--fm-border);

    border-radius: var(--pcp-radius);

    background: var(--fm-white);

    box-shadow:
        0 2px 0 rgba(20, 17, 15, 0.015);

    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.3s var(--ease);
}

.product-category-page .product-card:hover {
    transform: translateY(-6px);

    border-color: rgba(20, 17, 15, 0.15);

    box-shadow:
        0 20px 50px rgba(20, 17, 15, 0.10);
}


/* =============================================================
   PRODUCT IMAGE
   ============================================================= */

.product-category-page .product-card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1.03;

    overflow: hidden;

    background: var(--fm-offwhite-2);
}

.product-category-page .product-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s var(--ease),
        filter 0.5s var(--ease);
}

.product-category-page .product-card:hover .product-card-image img {
    transform: scale(1.055);

    filter: brightness(0.94);
}


/* =============================================================
   IMAGE GRADIENT
   ============================================================= */

.product-image-gradient {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(180deg,
            rgba(20, 17, 15, 0.02) 30%,
            rgba(20, 17, 15, 0.62) 100%);

    opacity: 0.7;

    transition: opacity 0.4s var(--ease);
}

.product-category-page .product-card:hover .product-image-gradient {
    opacity: 0.9;
}


/* =============================================================
   PRODUCT BADGE
   ============================================================= */

.product-category-page .product-badge {
    position: absolute;

    top: 13px;
    left: 13px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 10px;

    border-radius: 6px;

    background: var(--fm-red);

    color: var(--fm-white);

    font-size: 0.59rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.075em;

    box-shadow:
        0 5px 15px rgba(192, 16, 42, 0.20);
}


/* =============================================================
   IMAGE NUMBER
   ============================================================= */

.product-image-number {
    position: absolute;

    top: 13px;
    right: 13px;

    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;
    height: 27px;

    padding: 0 8px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: 20px;

    background: rgba(20, 17, 15, 0.55);

    backdrop-filter: blur(7px);

    color: rgba(255, 255, 255, 0.9);

    font-family: var(--font-display);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.06em;
}


/* =============================================================
   PRODUCT OVERLAY
   ============================================================= */

.product-card-overlay {
    position: absolute;

    inset: 0;

    z-index: 4;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding: 18px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s var(--ease);
}

.product-category-page .product-card:hover .product-card-overlay {
    opacity: 1;

    pointer-events: auto;
}


/* =============================================================
   PRODUCT QUICK VIEW
   ============================================================= */

.product-quick-view {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 43px;

    width: 100%;

    padding: 11px 18px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 9px;

    background: rgba(20, 17, 15, 0.88);

    backdrop-filter: blur(8px);

    color: var(--fm-white);

    font-size: 0.74rem;

    font-weight: 700;

    transition:
        background 0.25s,
        color 0.25s,
        transform 0.25s var(--ease);
}

.product-quick-view:hover {
    background: var(--fm-red);

    color: var(--fm-white);

    transform: translateY(-2px);
}

.product-quick-view svg {
    flex-shrink: 0;

    transition:
        transform 0.3s var(--ease);
}

.product-quick-view:hover svg {
    transform: translateX(3px);
}


/* =============================================================
   PRODUCT BODY
   ============================================================= */

.product-category-page .product-card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 20px 19px 19px;

    background: var(--fm-white);
}


/* =============================================================
   PRODUCT META
   ============================================================= */

.product-card-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}

.product-card-meta span {
    min-width: 0;

    font-size: 0.59rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.075em;

    color: var(--fm-grey-light);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.product-card-meta span:first-child {
    color: var(--fm-red);
}


/* =============================================================
   PRODUCT TITLE
   ============================================================= */

.product-category-page .product-card-title {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1.08rem;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.025em;

    color: var(--fm-dark);
}

.product-category-page .product-card-title a {
    transition:
        color 0.25s var(--ease);
}

.product-category-page .product-card-title a:hover {
    color: var(--fm-red);
}


/* =============================================================
   PRODUCT DESCRIPTION
   ============================================================= */

.product-category-page .product-card-description {
    margin: 10px 0 0;

    color: var(--fm-grey);

    font-size: 0.78rem;

    line-height: 1.62;

    display: -webkit-box;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =============================================================
   PRODUCT FOOTER
   ============================================================= */

.product-card-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: auto;

    padding-top: 20px;
}

.product-category-page .product-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--fm-dark);

    font-size: 0.71rem;

    font-weight: 800;

    letter-spacing: 0.025em;

    transition:
        color 0.25s var(--ease),
        gap 0.3s var(--ease);
}

.product-category-page .product-link svg {
    flex-shrink: 0;

    transition:
        transform 0.3s var(--ease);
}

.product-category-page .product-link:hover {
    gap: 11px;

    color: var(--fm-red);
}

.product-category-page .product-link:hover svg {
    transform: translateX(2px);
}


/* =============================================================
   CARD INDICATOR
   ============================================================= */

.product-card-indicator {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border: 1px solid var(--fm-border);

    border-radius: 50%;

    color: var(--fm-grey);

    font-size: 0.85rem;

    transition:
        background 0.25s,
        border-color 0.25s,
        color 0.25s,
        transform 0.3s var(--ease);
}

.product-category-page .product-card:hover .product-card-indicator {
    background: var(--fm-dark);

    border-color: var(--fm-dark);

    color: var(--fm-white);

    transform: rotate(-8deg);
}


/* =============================================================
   PAGINATION
   ============================================================= */

.product-category-page .products-pagination {
    display: flex;

    justify-content: center;

    margin-top: 55px;
}

.product-category-page .products-pagination nav {
    width: 100%;
}

.product-category-page .products-pagination>*,
.product-category-page .products-pagination nav>* {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}

.product-category-page .products-pagination a,
.product-category-page .products-pagination span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding: 0 12px;

    border: 1px solid var(--fm-border);

    border-radius: 8px;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-size: 0.78rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s,
        transform 0.2s var(--ease);
}

.product-category-page .products-pagination a:hover {
    background: var(--fm-dark);

    border-color: var(--fm-dark);

    color: var(--fm-white);

    transform: translateY(-2px);
}

.product-category-page .products-pagination span[aria-current="page"] {
    background: var(--fm-red);

    border-color: var(--fm-red);

    color: var(--fm-white);
}


/* =============================================================
   EMPTY STATE
   ============================================================= */

.product-category-page .products-empty-state {
    min-height: 370px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 55px 25px;

    text-align: center;

    border: 1px dashed var(--fm-border);

    border-radius: var(--pcp-radius);

    background:
        linear-gradient(180deg,
            var(--fm-offwhite) 0%,
            var(--fm-white) 100%);
}

.products-empty-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--fm-offwhite-2);

    color: var(--fm-red);
}

.products-empty-eyebrow {
    margin-bottom: 9px;

    font-size: 0.64rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.13em;

    color: var(--fm-red);
}

.product-category-page .products-empty-state h3 {
    margin: 0 0 8px;

    font-size: 1.4rem;
}

.product-category-page .products-empty-state p {
    max-width: 400px;

    margin: 0;

    color: var(--fm-grey);

    font-size: 0.86rem;

    line-height: 1.6;
}

.products-empty-button {
    margin-top: 25px;

    gap: 9px;
}


/* =============================================================
   CATEGORY TRUST STRIP
   ============================================================= */

.category-trust-strip {
    background: var(--fm-dark);

    color: var(--fm-white);

    border-top: 1px solid var(--fm-border-dark);
}

.category-trust-grid {
    display: grid;

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

.category-trust-item {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 34px 25px;
}

.category-trust-item:not(:last-child)::after {
    content: '';

    position: absolute;

    top: 28px;
    right: 0;

    width: 1px;

    height: calc(100% - 56px);

    background: rgba(255, 255, 255, 0.12);
}

.category-trust-number {
    flex-shrink: 0;

    font-family: var(--font-display);

    font-size: 0.66rem;

    font-weight: 800;

    color: var(--fm-gold);
}

.category-trust-item>div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.category-trust-item strong {
    font-family: var(--font-display);

    font-size: 0.82rem;

    font-weight: 700;

    color: var(--fm-white);
}

.category-trust-item div span {
    color: rgba(255, 255, 255, 0.52);

    font-size: 0.65rem;

    line-height: 1.5;
}


/* =============================================================
   REVEAL ANIMATION
   ============================================================= */

.product-category-page [data-reveal="up"] {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}

.product-category-page [data-reveal="up"].in-view,
.product-category-page [data-reveal="up"].revealed,
.product-category-page [data-reveal="up"].active {
    opacity: 1;

    transform: translateY(0);
}


/* =============================================================
   STAGGER DELAYS
   ============================================================= */

.product-category-page [data-delay="1"] {
    transition-delay: 0.05s;
}

.product-category-page [data-delay="2"] {
    transition-delay: 0.10s;
}

.product-category-page [data-delay="3"] {
    transition-delay: 0.15s;
}

.product-category-page [data-delay="4"] {
    transition-delay: 0.20s;
}

.product-category-page [data-delay="5"] {
    transition-delay: 0.25s;
}

.product-category-page [data-delay="6"] {
    transition-delay: 0.30s;
}

.product-category-page [data-delay="7"] {
    transition-delay: 0.35s;
}

.product-category-page [data-delay="8"] {
    transition-delay: 0.40s;
}


/* =============================================================
   FOCUS ACCESSIBILITY
   ============================================================= */

.product-category-page a:focus-visible {
    outline: 2px solid var(--fm-red);

    outline-offset: 4px;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

    .product-category-hero {
        padding-top: 34px;
        padding-bottom: 100px;
    }

    .product-category-breadcrumb {
        margin-bottom: 76px;
    }

    .product-category-page .products-grid {
        gap: 25px;
    }

    .product-category-page .product-card-body {
        padding: 22px 21px 21px;
    }

}


/* =============================================================
   1100px
   ============================================================= */

@media (max-width: 1100px) {

    .product-category-page .products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .category-trust-item {
        padding-left: 18px;
        padding-right: 18px;
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 900px) {

    .product-category-hero {
        padding-bottom: 68px;
    }

    .product-category-breadcrumb {
        margin-bottom: 50px;
    }

    .product-category-hero-content h1 {
        font-size: clamp(3rem,
                9vw,
                5rem);
    }

    .product-collection-header {
        grid-template-columns: 1fr;

        gap: 22px;

        align-items: start;

        margin-bottom: 42px;
    }

    .category-product-count {
        width: fit-content;
    }

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

    .category-trust-item:nth-child(2)::after {
        display: none;
    }

    .category-trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

}


/* =============================================================
   SMALL TABLET
   ============================================================= */

@media (max-width: 760px) {

    .product-category-page .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 17px;
    }

    .product-category-page .product-card-image {
        aspect-ratio: 1 / 1;
    }

    .product-category-page .product-card-overlay {
        display: none;
    }

    .product-category-page .product-card:hover .product-card-image img {
        transform: scale(1.035);
    }

    .product-category-page .product-card-body {
        padding: 18px 17px 18px;
    }

    .product-category-page .product-card-title {
        font-size: 1rem;
    }

    .product-category-page .product-card-description {
        font-size: 0.76rem;

        -webkit-line-clamp: 3;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .product-category-hero {
        padding: 18px 0 55px;
    }

    .product-category-hero::before {
        width: 280px;
        height: 280px;

        right: -150px;
        top: -140px;
    }

    .product-category-hero::after {
        width: 190px;
        height: 190px;

        right: -100px;
        top: -95px;
    }

    .product-category-breadcrumb {
        margin-bottom: 38px;

        gap: 7px;

        font-size: 0.66rem;
    }

    .product-category-hero-content .eyebrow {
        font-size: 0.66rem;
    }

    .product-category-hero-content h1 {
        font-size: clamp(2.55rem,
                13vw,
                4rem);

        line-height: 0.99;
    }

    .product-category-hero-description {
        margin-top: 20px;

        font-size: 0.88rem;

        line-height: 1.68;
    }

    .product-category-hero-meta {
        margin-top: 28px;

        font-size: 0.57rem;

        gap: 8px;
    }

    .hero-meta-line {
        width: 25px;
    }


    /* Collection */

    .product-category-page .products-grid-sec {
        padding: 58px 0;
    }

    .product-collection-header {
        margin-bottom: 34px;

        gap: 17px;
    }

    .product-collection-heading h2 {
        font-size: 2.15rem;
    }

    .product-collection-description {
        margin-top: 13px;

        font-size: 0.84rem;

        line-height: 1.65;
    }

    .category-product-count {
        padding: 10px 14px;
    }

    .category-product-count strong {
        font-size: 1rem;
    }

    .category-product-count span {
        font-size: 0.59rem;
    }


    /* Grid */

    .product-category-page .products-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .product-category-page .product-card {
        border-radius: 13px;
    }

    .product-category-page .product-card-image {
        aspect-ratio: 1 / 0.78;
    }

    .product-category-page .product-card-body {
        padding: 19px 18px 18px;
    }

    .product-category-page .product-card-title {
        font-size: 1.08rem;
    }

    .product-category-page .product-card-description {
        font-size: 0.79rem;
    }


    /* Trust */

    .category-trust-grid {
        grid-template-columns: 1fr;
    }

    .category-trust-item {
        padding: 23px 0;
    }

    .category-trust-item:not(:last-child)::after {
        display: none;
    }

    .category-trust-item:not(:last-child) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 420px) {

    .product-category-hero-content h1 {
        font-size: 2.45rem;
    }

    .product-category-hero-description {
        font-size: 0.84rem;
    }

    .product-collection-heading h2 {
        font-size: 1.95rem;
    }

    .product-category-page .product-card-image {
        aspect-ratio: 1 / 0.74;
    }

    .product-category-page .product-card-body {
        padding: 17px 16px;
    }

    .product-category-page .product-card-title {
        font-size: 1.02rem;
    }

    .product-card-meta span {
        font-size: 0.55rem;
    }

    .product-category-page .product-card-description {
        font-size: 0.76rem;
    }

    .product-card-indicator {
        width: 28px;
        height: 28px;
    }

    .product-category-page .products-pagination {
        margin-top: 38px;
    }

    .product-category-page .products-pagination a,
    .product-category-page .products-pagination span {
        min-width: 36px;
        height: 36px;

        font-size: 0.72rem;
    }

}


/* =============================================================
   VERY SMALL MOBILE
   ============================================================= */

@media (max-width: 360px) {

    .product-category-hero-content h1 {
        font-size: 2.25rem;
    }

    .product-category-hero-meta {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero-meta-dot {
        display: none;
    }

    .product-collection-heading h2 {
        font-size: 1.82rem;
    }

    .product-category-page .product-card-image {
        aspect-ratio: 1 / 0.70;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-category-page *,
    .product-category-page *::before,
    .product-category-page *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

    .product-category-page [data-reveal="up"] {
        opacity: 1 !important;

        transform: none !important;
    }

}






/* =============================================================
   FM ELEVATOR
   PREMIUM PRODUCT DETAIL PAGE
   ============================================================= */


/* =============================================================
   PAGE ROOT
   ============================================================= */

.product-detail-page {
    --pdp-dark: var(--fm-dark);
    --pdp-red: var(--fm-red);
    --pdp-gold: var(--fm-gold);
    --pdp-grey: var(--fm-grey);
    --pdp-border: var(--fm-border);
    --pdp-light: var(--fm-offwhite);
    --pdp-white: var(--fm-white);

    background: var(--pdp-white);
    color: var(--pdp-dark);

    overflow: hidden;
}


/* =============================================================
   BREADCRUMB
   ============================================================= */

.product-detail-breadcrumb-section {
    padding: 25px 0 0;
    background: var(--pdp-white);
}

.product-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin: 0;

    font-size: 0.7rem;
    font-weight: 600;

    color: var(--pdp-grey);
}

.product-detail-breadcrumb a {
    color: var(--pdp-grey);

    transition:
        color 0.25s var(--ease);
}

.product-detail-breadcrumb a:hover {
    color: var(--pdp-red);
}

.product-detail-breadcrumb .separator {
    color: var(--fm-grey-light);
}

.product-detail-breadcrumb .current {
    color: var(--pdp-dark);
    font-weight: 700;
}


/* =============================================================
   PRODUCT DETAIL SECTION
   ============================================================= */

.product-detail-sec {
    padding: 42px 0 105px;

    background:
        linear-gradient(180deg,
            var(--pdp-white) 0%,
            var(--pdp-light) 100%);
}


/* =============================================================
   MAIN PRODUCT LAYOUT
   ============================================================= */

.product-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr) minmax(400px, 0.92fr);

    gap: clamp(45px, 6vw, 90px);

    align-items: start;
}


/* =============================================================
   LEFT MEDIA
   ============================================================= */

.product-detail-media {
    min-width: 0;
}

.product-media-wrapper {
    position: relative;
}


/* =============================================================
   MAIN PRODUCT IMAGE
   ============================================================= */

.product-detail-main-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 0.88;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            #f5f3ef,
            #ebe8e1);

    border: 1px solid var(--pdp-border);

    box-shadow:
        0 18px 55px rgba(20, 17, 15, 0.08);
}

.product-detail-main-image::before {
    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(circle at 50% 42%,
            rgba(255, 255, 255, 0.5),
            transparent 48%);
}

.product-detail-main-image img {
    position: relative;

    z-index: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s var(--ease);
}

.product-detail-main-image:hover img {
    transform: scale(1.025);
}


/* =============================================================
   FEATURED BADGE
   ============================================================= */

.product-detail-main-image .product-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 5;

    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 0 12px;

    border-radius: 6px;

    background: var(--pdp-red);

    color: var(--pdp-white);

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    box-shadow:
        0 7px 20px rgba(192, 16, 42, 0.2);
}


/* =============================================================
   MEDIA LABEL
   ============================================================= */

.product-media-label {
    position: absolute;

    right: 17px;
    bottom: 17px;

    z-index: 5;

    display: inline-flex;
    align-items: center;

    min-height: 29px;

    padding: 0 11px;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 30px;

    background:
        rgba(20, 17, 15, 0.55);

    backdrop-filter: blur(9px);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.58rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


/* =============================================================
   GALLERY
   ============================================================= */

.product-detail-gallery {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 13px;

    overflow-x: auto;

    padding: 2px;

    scrollbar-width: none;
}

.product-detail-gallery::-webkit-scrollbar {
    display: none;
}


/* =============================================================
   GALLERY THUMB
   ============================================================= */

.product-gallery-thumb {
    position: relative;

    flex: 0 0 76px;

    width: 76px;
    height: 68px;

    padding: 0;

    overflow: hidden;

    border: 1px solid var(--pdp-border);

    border-radius: 9px;

    background: var(--pdp-white);

    cursor: pointer;

    transition:
        border-color 0.25s,
        box-shadow 0.25s,
        transform 0.25s var(--ease);
}

.product-gallery-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0.68;

    transition:
        opacity 0.25s,
        transform 0.35s var(--ease);
}

.product-gallery-thumb:hover {
    border-color: rgba(20, 17, 15, 0.3);

    transform: translateY(-2px);
}

.product-gallery-thumb:hover img {
    opacity: 1;

    transform: scale(1.04);
}

.product-gallery-thumb.active {
    border: 2px solid var(--pdp-red);

    box-shadow:
        0 4px 15px rgba(192, 16, 42, 0.12);
}

.product-gallery-thumb.active img {
    opacity: 1;
}


/* =============================================================
   MEDIA TRUST
   ============================================================= */

.product-media-trust {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 1px;

    margin-top: 15px;

    border: 1px solid var(--pdp-border);

    border-radius: 11px;

    overflow: hidden;

    background: var(--pdp-border);
}

.product-media-trust-item {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;

    padding: 12px 8px;

    background: var(--pdp-white);

    color: var(--pdp-grey);

    font-size: 0.61rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    text-align: center;
}

.trust-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(192, 16, 42, 0.08);

    color: var(--pdp-red);

    font-size: 0.65rem;
    font-weight: 900;
}


/* =============================================================
   RIGHT PRODUCT INFO
   ============================================================= */

.product-detail-info {
    position: sticky;

    top: 105px;

    min-width: 0;

    padding-top: 5px;
}


/* =============================================================
   CATEGORY
   ============================================================= */

.product-detail-category {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 13px;

    font-size: 0.66rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.11em;

    color: var(--pdp-red);
}

.product-detail-category a {
    transition: opacity 0.2s;
}

.product-detail-category a:hover {
    opacity: 0.7;
}

.product-detail-category span {
    color: var(--fm-grey-light);
}


/* =============================================================
   PRODUCT TITLE
   ============================================================= */

.product-detail-title {
    margin: 0;

    max-width: 680px;

    font-family: var(--font-display);

    font-size: 34px;

    font-weight: 800;

    line-height: 1.02;

    letter-spacing: -0.05em;

    color: var(--pdp-dark);
}


/* =============================================================
   SKU
   ============================================================= */

.product-detail-sku {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 15px;

    padding: 6px 10px;

    border: 1px solid var(--pdp-border);

    border-radius: 5px;

    background: var(--pdp-light);

    font-size: 0.61rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.product-detail-sku span {
    color: var(--pdp-grey-light);

    font-weight: 700;
}

.product-detail-sku strong {
    color: var(--pdp-dark);

    font-weight: 800;
}


/* =============================================================
   SHORT DESCRIPTION
   ============================================================= */

.product-detail-short-description {
    max-width: 650px;

    margin-top: 22px;

    color: var(--pdp-grey);

    font-size: 0.92rem;

    line-height: 1.75;
}


/* =============================================================
   PRICE
   ============================================================= */

.product-detail-price {
    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;

    padding-top: 23px;

    border-top: 1px solid var(--pdp-border);
}

.product-current-price {
    font-family: var(--font-display);

    font-size: clamp(1.75rem,
            3vw,
            2.55rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;

    color: var(--pdp-dark);
}

.product-old-price {
    font-size: 0.9rem;

    color: var(--fm-grey-light);

    text-decoration: line-through;
}

.product-discount {
    display: inline-flex;

    align-items: center;

    min-height: 25px;

    padding: 0 9px;

    border-radius: 5px;

    background: rgba(192, 16, 42, 0.09);

    color: var(--pdp-red);

    font-size: 0.62rem;

    font-weight: 800;

    letter-spacing: 0.05em;
}


/* =============================================================
   PRICE NOTE
   ============================================================= */

.product-price-note {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 10px;

    color: var(--pdp-grey-light);

    font-size: 0.65rem;
}

.product-price-note span:first-child {
    color: var(--pdp-red);

    font-weight: 900;
}


/* =============================================================
   VARIANTS
   ============================================================= */

.product-variants {
    margin-top: 28px;

    padding: 21px;

    border: 1px solid var(--pdp-border);

    border-radius: 13px;

    background: var(--pdp-white);

    box-shadow:
        0 8px 30px rgba(20, 17, 15, 0.035);
}


/* =============================================================
   VARIANT HEADER
   ============================================================= */

.product-variants-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.product-option-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--pdp-red);

    font-size: 0.59rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.11em;
}

.product-variants-heading h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: -0.02em;
}

.product-option-required {
    padding: 5px 8px;

    border-radius: 4px;

    background: var(--pdp-light);

    color: var(--pdp-grey);

    font-size: 0.55rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.product-variants-description {
    margin: 8px 0 17px;

    color: var(--pdp-grey);

    font-size: 0.74rem;

    line-height: 1.55;
}


/* =============================================================
   VARIANT LIST
   ============================================================= */

.product-variant-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


/* =============================================================
   VARIANT OPTION
   ============================================================= */

.product-variant-option {
    position: relative;

    display: grid;

    grid-template-columns:
        20px minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 12px 13px;

    border: 1px solid var(--pdp-border);

    border-radius: 9px;

    background: var(--pdp-white);

    cursor: pointer;

    transition:
        border-color 0.25s,
        background 0.25s,
        box-shadow 0.25s,
        transform 0.25s var(--ease);
}

.product-variant-option:hover {
    border-color: rgba(192, 16, 42, 0.35);

    background: #fffdfc;

    transform: translateY(-1px);
}

.product-variant-option.selected {
    border-color: var(--pdp-red);

    background: rgba(192, 16, 42, 0.025);

    box-shadow:
        0 5px 18px rgba(192, 16, 42, 0.08);
}

.product-variant-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


/* =============================================================
   CUSTOM RADIO
   ============================================================= */

.product-variant-radio {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    border: 1.5px solid var(--fm-grey-light);

    border-radius: 50%;

    transition:
        border-color 0.2s,
        background 0.2s;
}

.product-variant-option.selected .product-variant-radio {
    border-color: var(--pdp-red);
}

.product-variant-option.selected .product-variant-radio::after {
    content: '';

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--pdp-red);
}


/* =============================================================
   VARIANT CONTENT
   ============================================================= */

.product-variant-content {
    display: flex;

    flex-direction: column;

    min-width: 0;

    gap: 3px;
}

.product-variant-title {
    color: var(--pdp-dark);

    font-size: 0.78rem;

    font-weight: 800;
}

.product-variant-overview {
    color: var(--pdp-grey);

    font-size: 0.65rem;

    line-height: 1.45;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.product-variant-price {
    color: var(--pdp-dark);

    font-family: var(--font-display);

    font-size: 0.78rem;

    font-weight: 800;

    white-space: nowrap;
}


/* =============================================================
   SELECTED VARIANT OVERVIEW
   ============================================================= */

.product-selected-variant-overview {
    margin-top: 11px;

    padding: 12px 13px;

    border-left: 2px solid var(--pdp-red);

    background: var(--pdp-light);

    color: var(--pdp-grey);

    font-size: 0.7rem;

    line-height: 1.55;
}


/* =============================================================
   STOCK STATUS
   ============================================================= */

.product-stock-status {
    margin-top: 18px;
}

.product-stock-status>span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 0.69rem;

    font-weight: 800;
}

.product-stock-status i {
    font-size: 0.72rem;
}

.stock-available {
    color: #2d7046;
}

.stock-low {
    color: #a56815;
}

.stock-out {
    color: var(--pdp-red);
}

.stock-unavailable {
    color: var(--pdp-grey);
}


/* =============================================================
   PURCHASE AREA
   ============================================================= */

.product-purchase-area {
    display: grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items: end;

    gap: 12px;

    margin-top: 18px;
}


/* =============================================================
   QUANTITY
   ============================================================= */

.product-quantity-wrapper {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.purchase-label {
    color: var(--pdp-grey-light);

    font-size: 0.59rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.product-quantity {
    display: grid;

    grid-template-columns:
        38px 48px 38px;

    height: 50px;

    border: 1px solid var(--pdp-border);

    border-radius: 9px;

    overflow: hidden;

    background: var(--pdp-white);
}

.product-quantity button {
    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    background: var(--pdp-white);

    color: var(--pdp-dark);

    font-size: 1.1rem;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s;
}

.product-quantity button:hover {
    background: var(--pdp-dark);

    color: var(--pdp-white);
}

.product-quantity input {
    width: 100%;

    border: 0;

    border-left: 1px solid var(--pdp-border);
    border-right: 1px solid var(--pdp-border);

    background: var(--pdp-white);

    color: var(--pdp-dark);

    text-align: center;

    font-family: var(--font-display);

    font-size: 0.82rem;

    font-weight: 800;

    outline: none;
}

.product-quantity input::-webkit-inner-spin-button,
.product-quantity input::-webkit-outer-spin-button {
    appearance: none;

    margin: 0;
}


/* =============================================================
   ADD TO CART
   ============================================================= */

.product-category-page .btn,
.product-detail-page .btn {
    text-decoration: none;
}

.product-detail-page .product-add-cart {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 50px;

    padding: 0 22px;

    border: 1px solid var(--pdp-red);

    border-radius: 9px;

    background: var(--pdp-red);

    color: var(--pdp-white);

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.025em;

    cursor: pointer;

    box-shadow:
        0 9px 25px rgba(192, 16, 42, 0.17);

    transition:
        background 0.25s,
        border-color 0.25s,
        transform 0.25s var(--ease),
        box-shadow 0.25s;
}

.product-detail-page .product-add-cart:hover:not(:disabled) {
    background: var(--fm-red-dark);

    border-color: var(--fm-red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 13px 30px rgba(192, 16, 42, 0.23);
}

.product-detail-page .product-add-cart:disabled {
    cursor: wait;

    opacity: 0.72;

    transform: none;
}

.product-add-cart i {
    font-size: 1rem;
}


/* =============================================================
   CUSTOM QUOTE
   ============================================================= */

.product-quote-link {
    display: grid;

    grid-template-columns:
        31px minmax(0, 1fr) auto auto;

    align-items: center;

    gap: 9px;

    margin-top: 13px;

    padding: 12px 13px;

    border: 1px solid var(--pdp-border);

    border-radius: 9px;

    background: var(--pdp-light);

    color: var(--pdp-grey);

    font-size: 0.68rem;

    text-decoration: none;

    transition:
        border-color 0.25s,
        background 0.25s,
        color 0.25s,
        transform 0.25s var(--ease);
}

.product-quote-link:hover {
    border-color: rgba(169, 138, 84, 0.45);

    background: #fbfaf7;

    color: var(--pdp-dark);

    transform: translateY(-1px);
}

.quote-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: var(--pdp-white);

    color: var(--pdp-gold);

    font-family: var(--font-display);

    font-weight: 800;
}

.product-quote-link strong {
    color: var(--pdp-red);

    font-weight: 800;

    white-space: nowrap;
}

.quote-arrow {
    color: var(--pdp-dark);

    font-size: 0.9rem;

    transition:
        transform 0.25s var(--ease);
}

.product-quote-link:hover .quote-arrow {
    transform: translateX(3px);
}


/* =============================================================
   PRODUCT META
   ============================================================= */

.product-meta {
    margin-top: 18px;

    border-top: 1px solid var(--pdp-border);
}

.product-meta-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 40px;

    border-bottom: 1px solid var(--pdp-border);

    font-size: 0.66rem;
}

.product-meta-row span {
    color: var(--pdp-grey);

    font-weight: 600;
}

.product-meta-row strong {
    color: var(--pdp-dark);

    font-weight: 800;

    text-align: right;
}


/* =============================================================
   INFORMATION SECTION
   ============================================================= */

.product-information-sec {
    padding: 100px 0;

    background: var(--pdp-light);

    border-top: 1px solid var(--pdp-border);
}

.product-information-wrapper {
    overflow: hidden;

    border: 1px solid var(--pdp-border);

    border-radius: 17px;

    background: var(--pdp-white);

    box-shadow:
        0 15px 45px rgba(20, 17, 15, 0.045);
}


/* =============================================================
   TABS HEADER
   ============================================================= */

.product-tabs-header {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.72fr) minmax(0, 1fr);

    align-items: end;

    gap: 50px;

    padding: 38px 42px 0;

    border-bottom: 1px solid var(--pdp-border);
}

.product-tabs-intro {
    padding-bottom: 31px;
}

.product-tabs-intro .eyebrow {
    margin-bottom: 10px;
}

.product-tabs-intro h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(1.7rem,
            3vw,
            2.65rem);

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -0.04em;
}

.product-tabs-intro h2 span {
    color: var(--pdp-red);
}


/* =============================================================
   TAB NAV
   ============================================================= */

.product-tabs {
    display: flex;

    align-items: flex-end;

    gap: 3px;

    min-width: 0;
}

.product-tab {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    min-height: 55px;

    padding: 0 18px;

    border: 0;

    border-bottom: 2px solid transparent;

    background: transparent;

    color: var(--pdp-grey);

    font-family: var(--font-body);

    font-size: 0.74rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        color 0.25s,
        border-color 0.25s,
        background 0.25s;
}

.product-tab span {
    color: var(--fm-grey-light);

    font-family: var(--font-display);

    font-size: 0.6rem;
}

.product-tab:hover {
    color: var(--pdp-dark);

    background: var(--pdp-light);
}

.product-tab.active {
    border-bottom-color: var(--pdp-red);

    color: var(--pdp-dark);
}

.product-tab.active span {
    color: var(--pdp-red);
}


/* =============================================================
   TAB CONTENT
   ============================================================= */

.product-tabs-content {
    padding: 45px 42px 50px;
}

.product-tab-panel {
    display: none;

    animation:
        productTabFade 0.35s var(--ease);
}

.product-tab-panel.active {
    display: block;
}

@keyframes productTabFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


/* =============================================================
   DESCRIPTION CONTENT
   ============================================================= */

.product-description-content,
.product-features-content {
    max-width: 900px;

    color: var(--pdp-grey);

    font-size: 0.9rem;

    line-height: 1.85;
}

.product-description-content>*:first-child,
.product-features-content>*:first-child {
    margin-top: 0;
}

.product-description-content h1,
.product-description-content h2,
.product-description-content h3,
.product-description-content h4,
.product-features-content h1,
.product-features-content h2,
.product-features-content h3,
.product-features-content h4 {
    margin-top: 30px;
    margin-bottom: 11px;

    color: var(--pdp-dark);

    font-family: var(--font-display);

    line-height: 1.25;
}

.product-description-content h3,
.product-features-content h3 {
    font-size: 1.1rem;
}

.product-description-content p,
.product-features-content p {
    margin-bottom: 16px;
}

.product-description-content strong,
.product-features-content strong {
    color: var(--pdp-dark);
}

.product-description-content a,
.product-features-content a {
    color: var(--pdp-red);

    text-decoration: underline;

    text-underline-offset: 3px;
}

.product-description-content ul,
.product-description-content ol,
.product-features-content ul,
.product-features-content ol {
    margin: 18px 0;

    padding-left: 22px;
}

.product-description-content li,
.product-features-content li {
    margin-bottom: 8px;

    padding-left: 4px;
}

.product-description-content li::marker,
.product-features-content li::marker {
    color: var(--pdp-red);
}


/* =============================================================
   RELATED PRODUCTS
   ============================================================= */

.related-products-sec {
    padding: 100px 0 115px;

    background: var(--pdp-white);
}

.related-products-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 42px;
}

.related-products-header .eyebrow {
    margin-bottom: 10px;
}

.related-products-header h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(2rem,
            4vw,
            3.4rem);

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;
}

.related-products-header h2 span {
    color: var(--pdp-red);
}

.related-view-all {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding-bottom: 5px;

    border-bottom: 1px solid var(--pdp-dark);

    color: var(--pdp-dark);

    font-size: 0.7rem;

    font-weight: 800;

    white-space: nowrap;

    transition:
        color 0.25s,
        gap 0.25s var(--ease),
        border-color 0.25s;
}

.related-view-all:hover {
    gap: 12px;

    border-color: var(--pdp-red);

    color: var(--pdp-red);
}


/* =============================================================
   RELATED GRID
   ============================================================= */

.related-products-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 21px;
}


/* =============================================================
   RELATED CARD
   ============================================================= */

.related-product-card {
    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--pdp-border);

    border-radius: 14px;

    background: var(--pdp-white);

    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.25s;
}

.related-product-card:hover {
    transform: translateY(-5px);

    border-color: rgba(20, 17, 15, 0.15);

    box-shadow:
        0 18px 40px rgba(20, 17, 15, 0.09);
}


/* =============================================================
   RELATED IMAGE
   ============================================================= */

.related-product-image {
    position: relative;

    aspect-ratio: 1 / 0.94;

    overflow: hidden;

    background: var(--pdp-light);
}

.related-product-image::after {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            transparent 45%,
            rgba(20, 17, 15, 0.5));

    opacity: 0.55;

    pointer-events: none;

    transition: opacity 0.35s;
}

.related-product-card:hover .related-product-image::after {
    opacity: 0.8;
}

.related-product-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s var(--ease);
}

.related-product-card:hover .related-product-image img {
    transform: scale(1.055);
}


/* =============================================================
   RELATED BADGE
   ============================================================= */

.related-product-image .product-badge {
    position: absolute;

    top: 12px;
    left: 12px;

    z-index: 3;

    padding: 6px 9px;

    border-radius: 5px;

    background: var(--pdp-red);

    color: var(--pdp-white);

    font-size: 0.55rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}


/* =============================================================
   RELATED VIEW BUTTON
   ============================================================= */

.related-product-view {
    position: absolute;

    right: 13px;
    bottom: 13px;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: var(--pdp-dark);

    opacity: 0;

    transform: translateY(7px);

    transition:
        opacity 0.3s,
        transform 0.3s var(--ease),
        background 0.25s,
        color 0.25s;
}

.related-product-card:hover .related-product-view {
    opacity: 1;

    transform: translateY(0);
}

.related-product-view:hover {
    background: var(--pdp-red);

    color: var(--pdp-white);
}


/* =============================================================
   RELATED BODY
   ============================================================= */

.related-product-body {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 19px 18px 18px;
}

.related-product-number {
    margin-bottom: 8px;

    color: var(--pdp-red);

    font-family: var(--font-display);

    font-size: 0.62rem;

    font-weight: 800;
}

.related-product-body h3 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1rem;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing: -0.02em;
}

.related-product-body h3 a {
    transition: color 0.25s;
}

.related-product-body h3 a:hover {
    color: var(--pdp-red);
}

.related-product-body p {
    margin: 9px 0 0;

    color: var(--pdp-grey);

    font-size: 0.74rem;

    line-height: 1.6;

    display: -webkit-box;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.related-product-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    margin-top: auto;
    padding-top: 18px;

    color: var(--pdp-dark);

    font-size: 0.68rem;

    font-weight: 800;

    transition:
        color 0.25s,
        gap 0.25s var(--ease);
}

.related-product-link:hover {
    gap: 11px;

    color: var(--pdp-red);
}


/* =============================================================
   REVEAL
   ============================================================= */

.product-detail-page [data-reveal="up"] {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}

.product-detail-page [data-reveal="up"].in-view,
.product-detail-page [data-reveal="up"].revealed,
.product-detail-page [data-reveal="up"].active {
    opacity: 1;

    transform: translateY(0);
}


/* =============================================================
   FOCUS
   ============================================================= */

.product-detail-page a:focus-visible,
.product-detail-page button:focus-visible {
    outline: 2px solid var(--pdp-red);

    outline-offset: 3px;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

    .product-detail-sec {
        padding-top: 48px;
    }

    .product-detail-layout {
        gap: 95px;
    }

    .product-detail-main-image {
        border-radius: 20px;
    }

    .product-information-sec,
    .related-products-sec {
        padding-top: 120px;
        padding-bottom: 120px;
    }

}


/* =============================================================
   1150px
   ============================================================= */

@media (max-width: 1150px) {

    .product-detail-layout {
        grid-template-columns:
            minmax(0, 1fr) minmax(370px, 0.85fr);

        gap: 45px;
    }

    .product-detail-title {
        font-size: clamp(2rem,
                4vw,
                3.3rem);
    }

    .related-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 900px) {

    .product-detail-sec {
        padding: 35px 0 75px;
    }

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

        gap: 45px;
    }

    .product-detail-info {
        position: static;

        padding-top: 0;
    }

    .product-detail-title {
        max-width: 800px;

        font-size: clamp(2.4rem,
                7vw,
                4.2rem);
    }

    .product-detail-short-description {
        max-width: 760px;
    }

    .product-tabs-header {
        grid-template-columns: 1fr;

        gap: 0;

        padding: 32px 32px 0;
    }

    .product-tabs-intro {
        padding-bottom: 25px;
    }

    .product-tabs-content {
        padding: 38px 32px 42px;
    }

    .related-products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =============================================================
   SMALL TABLET
   ============================================================= */

@media (max-width: 760px) {

    .product-detail-breadcrumb-section {
        padding-top: 18px;
    }

    .product-detail-breadcrumb {
        font-size: 0.65rem;
    }

    .product-detail-main-image {
        aspect-ratio: 1 / 0.92;

        border-radius: 14px;
    }

    .product-media-trust-item {
        font-size: 0.57rem;
    }

    .product-purchase-area {
        grid-template-columns:
            1fr;

        align-items: stretch;
    }

    .product-quantity-wrapper {
        width: fit-content;
    }

    .product-variants {
        padding: 18px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .product-detail-sec {
        padding: 27px 0 58px;
    }

    .product-detail-layout {
        gap: 35px;
    }


    /* Main image */

    .product-detail-main-image {
        aspect-ratio: 1 / 0.9;

        border-radius: 12px;
    }

    .product-detail-main-image .product-badge {
        top: 12px;
        left: 12px;

        min-height: 26px;

        padding: 0 9px;

        font-size: 0.55rem;
    }

    .product-media-label {
        right: 12px;
        bottom: 12px;

        min-height: 26px;

        font-size: 0.53rem;
    }


    /* Gallery */

    .product-detail-gallery {
        gap: 8px;

        margin-top: 10px;
    }

    .product-gallery-thumb {
        flex-basis: 65px;

        width: 65px;
        height: 58px;

        border-radius: 7px;
    }


    /* Trust */

    .product-media-trust {
        grid-template-columns: 1fr;

        margin-top: 10px;
    }

    .product-media-trust-item {
        justify-content: flex-start;

        padding: 10px 12px;

        text-align: left;
    }


    /* Product info */

    .product-detail-category {
        margin-bottom: 10px;

        font-size: 0.58rem;
    }

    .product-detail-title {
        font-size: clamp(2.15rem,
                11vw,
                3.4rem);

        line-height: 1;

        letter-spacing: -0.055em;
    }

    .product-detail-sku {
        margin-top: 12px;

        font-size: 0.57rem;
    }

    .product-detail-short-description {
        margin-top: 18px;

        font-size: 0.84rem;

        line-height: 1.68;
    }


    /* Price */

    .product-detail-price {
        margin-top: 21px;

        padding-top: 19px;

        gap: 9px;
    }

    .product-current-price {
        font-size: 1.9rem;
    }

    .product-old-price {
        font-size: 0.8rem;
    }

    .product-discount {
        font-size: 0.56rem;
    }

    .product-price-note {
        font-size: 0.58rem;
    }


    /* Variants */

    .product-variants {
        margin-top: 22px;

        padding: 15px;

        border-radius: 11px;
    }

    .product-variants-heading h3 {
        font-size: 0.95rem;
    }

    .product-variants-description {
        font-size: 0.68rem;
    }

    .product-variant-option {
        grid-template-columns:
            18px minmax(0, 1fr) auto;

        gap: 9px;

        min-height: 62px;

        padding: 10px;
    }

    .product-variant-title {
        font-size: 0.72rem;
    }

    .product-variant-overview {
        font-size: 0.59rem;
    }

    .product-variant-price {
        font-size: 0.69rem;
    }


    /* Purchase */

    .product-stock-status {
        margin-top: 15px;
    }

    .product-purchase-area {
        margin-top: 15px;

        gap: 10px;
    }

    .product-quantity {
        height: 47px;
    }

    .product-detail-page .product-add-cart {
        min-height: 50px;
    }


    /* Quote */

    .product-quote-link {
        grid-template-columns:
            30px minmax(0, 1fr) auto;

        gap: 8px;

        font-size: 0.62rem;
    }

    .quote-arrow {
        display: none;
    }


    /* Meta */

    .product-meta {
        margin-top: 15px;
    }

    .product-meta-row {
        min-height: 38px;

        font-size: 0.61rem;
    }


    /* Information */

    .product-information-sec {
        padding: 58px 0;
    }

    .product-information-wrapper {
        border-radius: 12px;
    }

    .product-tabs-header {
        padding: 25px 19px 0;
    }

    .product-tabs-intro {
        padding-bottom: 21px;
    }

    .product-tabs-intro h2 {
        font-size: 1.7rem;
    }

    .product-tabs {
        width: 100%;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tab {
        flex: 0 0 auto;

        min-height: 49px;

        padding: 0 13px;

        font-size: 0.66rem;
    }

    .product-tabs-content {
        padding: 28px 19px 32px;
    }

    .product-description-content,
    .product-features-content {
        font-size: 0.81rem;

        line-height: 1.75;
    }


    /* Related */

    .related-products-sec {
        padding: 60px 0 70px;
    }

    .related-products-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        margin-bottom: 30px;
    }

    .related-products-header h2 {
        font-size: 2rem;
    }

    .related-view-all {
        font-size: 0.65rem;
    }

    .related-products-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .related-product-image {
        aspect-ratio: 1 / 0.78;
    }

    .related-product-body {
        padding: 17px 16px;
    }

    .related-product-body h3 {
        font-size: 0.98rem;
    }

    .related-product-body p {
        font-size: 0.72rem;
    }

    .related-product-view {
        opacity: 1;

        transform: none;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 420px) {

    .product-detail-title {
        font-size: 2.25rem;
    }

    .product-detail-main-image {
        aspect-ratio: 1 / 0.86;
    }

    .product-gallery-thumb {
        flex-basis: 59px;

        width: 59px;
        height: 53px;
    }

    .product-current-price {
        font-size: 1.75rem;
    }

    .product-variants {
        padding: 13px;
    }

    .product-variant-option {
        grid-template-columns:
            17px minmax(0, 1fr);

        position: relative;
    }

    .product-variant-price {
        grid-column: 2;

        justify-self: start;

        margin-top: -2px;
    }

    .product-variant-overview {
        white-space: normal;
    }

    .product-tabs-intro h2 {
        font-size: 1.55rem;
    }

}


/* =============================================================
   VERY SMALL
   ============================================================= */

@media (max-width: 360px) {

    .product-detail-title {
        font-size: 2.05rem;
    }

    .product-detail-category {
        font-size: 0.54rem;
    }

    .product-detail-short-description {
        font-size: 0.8rem;
    }

    .product-quote-link {
        grid-template-columns:
            28px minmax(0, 1fr);

        align-items: center;
    }

    .product-quote-link strong {
        grid-column: 2;
    }

    .product-tabs {
        gap: 0;
    }

    .product-tab {
        padding: 0 11px;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-detail-page *,
    .product-detail-page *::before,
    .product-detail-page *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .product-detail-page [data-reveal="up"] {
        opacity: 1 !important;

        transform: none !important;
    }

}




/* =============================================================
   FM ELEVATOR
   PREMIUM SHOPPING CART
   ============================================================= */

.shopping-cart-page {
    --cart-dark: var(--fm-dark);
    --cart-red: var(--fm-red);
    --cart-gold: var(--fm-gold);
    --cart-grey: var(--fm-grey);
    --cart-light: var(--fm-offwhite);
    --cart-white: var(--fm-white);
    --cart-border: var(--fm-border);

    background: var(--cart-white);
    color: var(--cart-dark);

    overflow: hidden;
}


/* =============================================================
   HERO
   ============================================================= */

.shopping-cart-page .cart-page-hero {
    position: relative;

    padding: 26px 0 72px;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(192, 16, 42, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--fm-offwhite) 0%,
            var(--fm-white) 100%
        );

    border-bottom: 1px solid var(--cart-border);
}

.shopping-cart-page .cart-page-hero::before {
    content: '';

    position: absolute;

    width: 420px;
    height: 420px;

    right: -210px;
    top: -225px;

    border: 1px solid rgba(169, 138, 84, 0.1);

    border-radius: 50%;

    pointer-events: none;
}

.shopping-cart-page .cart-page-hero::after {
    content: '';

    position: absolute;

    width: 270px;
    height: 270px;

    right: -135px;
    top: -145px;

    border: 1px solid rgba(192, 16, 42, 0.07);

    border-radius: 50%;

    pointer-events: none;
}

.shopping-cart-page .cart-breadcrumb {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0 0 55px;

    color: var(--cart-grey);

    font-size: 0.69rem;
    font-weight: 600;
}

.shopping-cart-page .cart-breadcrumb a {
    color: var(--cart-grey);

    transition: color 0.25s var(--ease);
}

.shopping-cart-page .cart-breadcrumb a:hover {
    color: var(--cart-red);
}

.shopping-cart-page .cart-breadcrumb .separator {
    color: var(--fm-grey-light);
}

.shopping-cart-page .cart-breadcrumb .current {
    color: var(--cart-dark);

    font-weight: 700;
}

.cart-hero-content {
    position: relative;

    z-index: 2;

    max-width: 760px;
}

.cart-hero-content .eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--cart-red);

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.cart-hero-content h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(
        3rem,
        6vw,
        5.7rem
    );

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.055em;
}

.cart-hero-content h1 span {
    color: var(--cart-red);
}

.cart-hero-content p {
    max-width: 600px;

    margin: 21px 0 0;

    color: var(--cart-grey);

    font-size: 0.95rem;

    line-height: 1.7;
}


/* =============================================================
   CART SECTION
   ============================================================= */

.shopping-cart-page .cart-sec {
    padding: clamp(60px, 8vw, 105px) 0 115px;

    background: var(--cart-white);
}


/* =============================================================
   TOP BAR
   ============================================================= */

.cart-topbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 25px;

    padding-bottom: 17px;

    border-bottom: 1px solid var(--cart-border);
}

.cart-topbar-left {
    display: flex;

    align-items: baseline;

    gap: 11px;
}

.cart-topbar-label {
    color: var(--cart-grey-light);

    font-size: 0.61rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}

.cart-topbar-left strong {
    color: var(--cart-dark);

    font-family: var(--font-display);

    font-size: 0.85rem;

    font-weight: 800;
}

.cart-add-more {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--cart-dark);

    font-size: 0.69rem;

    font-weight: 800;

    transition:
        color 0.25s,
        gap 0.25s var(--ease);
}

.cart-add-more i {
    font-size: 0.65rem;
}

.cart-add-more:hover {
    gap: 10px;

    color: var(--cart-red);
}


/* =============================================================
   MAIN CART LAYOUT
   ============================================================= */

.cart-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 390px);

    align-items: start;

    gap: clamp(30px, 5vw, 70px);
}


/* =============================================================
   ITEMS COLUMN
   ============================================================= */

.cart-items-column {
    min-width: 0;
}

.cart-items-wrap {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


/* =============================================================
   CART ITEM
   ============================================================= */

.shopping-cart-page .cart-item {
    position: relative;

    display: grid;

    grid-template-columns:
        145px
        minmax(0, 1fr)
        auto;

    gap: 22px;

    min-width: 0;

    padding: 18px;

    border: 1px solid var(--cart-border);

    border-radius: 14px;

    background: var(--cart-white);

    transition:
        border-color 0.3s,
        box-shadow 0.35s var(--ease),
        transform 0.35s var(--ease);
}

.shopping-cart-page .cart-item:hover {
    border-color: rgba(20, 17, 15, 0.14);

    box-shadow:
        0 14px 38px rgba(20, 17, 15, 0.065);

    transform: translateY(-2px);
}


/* =============================================================
   ITEM IMAGE
   ============================================================= */

.cart-item-image {
    width: 145px;
    height: 145px;

    overflow: hidden;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #f4f2ed,
            #e9e6df
        );

    border: 1px solid var(--cart-border);
}

.cart-item-image-link {
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.6s var(--ease);
}

.shopping-cart-page .cart-item:hover
.cart-item-image img {
    transform: scale(1.055);
}


/* =============================================================
   ITEM CONTENT
   ============================================================= */

.cart-item-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.cart-item-category {
    display: block;

    margin: 2px 0 8px;

    color: var(--cart-red);

    font-size: 0.57rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}

.cart-item-title {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.025em;
}

.cart-item-title a {
    color: var(--cart-dark);

    transition: color 0.25s;
}

.cart-item-title a:hover {
    color: var(--cart-red);
}


/* =============================================================
   VARIANT
   ============================================================= */

.cart-item-variant {
    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    padding: 5px 8px;

    border-radius: 5px;

    background: var(--cart-light);

    color: var(--cart-grey);

    font-size: 0.62rem;
}

.cart-item-variant span {
    color: var(--fm-grey-light);

    font-weight: 600;
}

.cart-item-variant strong {
    color: var(--cart-dark);

    font-weight: 800;
}


/* =============================================================
   UNIT PRICE
   ============================================================= */

.cart-item-unit-price {
    display: flex;

    align-items: baseline;

    gap: 7px;

    margin-top: 12px;
}

.cart-item-unit-price span {
    color: var(--cart-grey-light);

    font-size: 0.59rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}

.cart-item-unit-price strong {
    color: var(--cart-dark);

    font-family: var(--font-display);

    font-size: 0.92rem;

    font-weight: 800;
}


/* =============================================================
   ITEM ACTIONS
   ============================================================= */

.cart-item-actions {
    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 17px;

    margin-top: auto;
    padding-top: 16px;
}

.cart-quantity-wrap {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.cart-action-label {
    color: var(--fm-grey-light);

    font-size: 0.55rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


/* =============================================================
   QUANTITY
   ============================================================= */

.shopping-cart-page .cart-quantity {
    display: grid;

    grid-template-columns:
        32px
        42px
        32px;

    height: 38px;

    overflow: hidden;

    border: 1px solid var(--cart-border);

    border-radius: 7px;

    background: var(--cart-white);
}

.shopping-cart-page .cart-quantity button {
    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: var(--cart-white);

    color: var(--cart-dark);

    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s,
        color 0.2s;
}

.shopping-cart-page .cart-quantity button:hover {
    background: var(--cart-dark);

    color: var(--cart-white);
}

.shopping-cart-page .cart-quantity span {
    display: flex;

    align-items: center;
    justify-content: center;

    border-left: 1px solid var(--cart-border);
    border-right: 1px solid var(--cart-border);

    color: var(--cart-dark);

    font-size: 0.7rem;

    font-weight: 800;
}


/* =============================================================
   REMOVE
   ============================================================= */

.shopping-cart-page .cart-remove-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--cart-grey-light);

    font-size: 0.61rem;

    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.2s;
}

.shopping-cart-page .cart-remove-btn:hover {
    color: var(--cart-red);
}

.cart-remove-btn i {
    font-size: 0.7rem;
}


/* =============================================================
   ITEM TOTAL
   ============================================================= */

.cart-item-total {
    min-width: 115px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: flex-start;

    padding-top: 5px;
}

.cart-item-total span {
    margin-bottom: 6px;

    color: var(--cart-grey-light);

    font-size: 0.55rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.cart-item-total strong {
    color: var(--cart-dark);

    font-family: var(--font-display);

    font-size: 1.12rem;

    font-weight: 800;

    letter-spacing: -0.025em;
}


/* =============================================================
   ITEMS FOOTER
   ============================================================= */

.cart-items-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 19px;

    padding-top: 17px;

    border-top: 1px solid var(--cart-border);
}

.cart-continue-shopping {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--cart-dark);

    font-size: 0.68rem;

    font-weight: 800;

    transition:
        gap 0.25s var(--ease),
        color 0.25s;
}

.cart-continue-shopping:hover {
    gap: 11px;

    color: var(--cart-red);
}

.cart-continue-shopping i {
    font-size: 0.72rem;
}

.shopping-cart-page .cart-clear-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--cart-grey-light);

    font-size: 0.62rem;

    font-weight: 700;

    cursor: pointer;

    transition: color 0.25s;
}

.shopping-cart-page .cart-clear-btn:hover {
    color: var(--cart-red);
}


/* =============================================================
   SUMMARY COLUMN
   ============================================================= */

.cart-summary-column {
    min-width: 0;

    position: sticky;

    top: 105px;
}


/* =============================================================
   SUMMARY
   ============================================================= */

.shopping-cart-page .cart-summary {
    position: relative;

    overflow: hidden;

    padding: 30px;

    border-radius: 16px;

    background: var(--cart-dark);

    color: var(--cart-white);

    box-shadow:
        0 20px 55px rgba(20, 17, 15, 0.16);
}

.shopping-cart-page .cart-summary::before {
    content: '';

    position: absolute;

    width: 270px;
    height: 270px;

    right: -135px;
    top: -135px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.shopping-cart-page .cart-summary::after {
    content: '';

    position: absolute;

    width: 170px;
    height: 170px;

    right: -85px;
    top: -85px;

    border: 1px solid rgba(192, 16, 42, 0.28);

    border-radius: 50%;

    pointer-events: none;
}


/* =============================================================
   SUMMARY HEADER
   ============================================================= */

.cart-summary-header {
    position: relative;

    z-index: 2;

    padding-bottom: 23px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cart-summary-header .eyebrow {
    display: block;

    margin-bottom: 9px;

    color: var(--cart-gold);

    font-size: 0.59rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.13em;
}

.shopping-cart-page .cart-summary h2 {
    margin: 0;

    color: var(--cart-white);

    font-family: var(--font-display);

    font-size: 1.75rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;
}

.shopping-cart-page .cart-summary h2 span {
    color: var(--cart-red);
}


/* =============================================================
   SUMMARY DETAILS
   ============================================================= */

.cart-summary-details {
    position: relative;

    z-index: 2;

    padding: 19px 0 3px;
}

.shopping-cart-page .cart-summary-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    min-height: 38px;
}

.shopping-cart-page .cart-summary-row span {
    color: rgba(255, 255, 255, 0.55);

    font-size: 0.67rem;

    font-weight: 600;
}

.shopping-cart-page .cart-summary-row strong {
    color: var(--cart-white);

    font-family: var(--font-display);

    font-size: 0.75rem;

    font-weight: 800;

    text-align: right;
}

.shopping-cart-page .cart-summary-shipping {
    align-items: flex-start;
}

.shopping-cart-page .cart-summary-shipping strong {
    max-width: 150px;

    color: rgba(255, 255, 255, 0.46);

    font-family: var(--font-body);

    font-size: 0.59rem;

    line-height: 1.45;
}


/* =============================================================
   DIVIDER
   ============================================================= */

.shopping-cart-page .cart-summary-divider {
    height: 1px;

    margin: 18px 0;

    background:
        rgba(255, 255, 255, 0.12);
}


/* =============================================================
   TOTAL
   ============================================================= */

.shopping-cart-page .cart-summary-total {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.cart-summary-total > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.shopping-cart-page .cart-summary-total span {
    color: rgba(255, 255, 255, 0.58);

    font-size: 0.67rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.shopping-cart-page .cart-summary-total small {
    color: rgba(255, 255, 255, 0.35);

    font-size: 0.55rem;
}

.shopping-cart-page .cart-summary-total strong {
    color: var(--cart-white);

    font-family: var(--font-display);

    font-size: 1.65rem;

    font-weight: 800;

    letter-spacing: -0.04em;

    white-space: nowrap;
}


/* =============================================================
   CHECKOUT BUTTON
   ============================================================= */

.shopping-cart-page .cart-checkout-btn {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    min-height: 53px;

    margin-top: 24px;

    padding: 0 17px 0 20px;

    border: 1px solid var(--cart-red);

    border-radius: 8px;

    background: var(--cart-red);

    color: var(--cart-white);

    font-size: 0.72rem;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 9px 25px rgba(192, 16, 42, 0.25);

    transition:
        background 0.25s,
        border-color 0.25s,
        transform 0.25s var(--ease),
        box-shadow 0.25s;
}

.shopping-cart-page .cart-checkout-btn:hover {
    background: var(--fm-red-dark);

    border-color: var(--fm-red-dark);

    color: var(--cart-white);

    transform: translateY(-2px);

    box-shadow:
        0 13px 32px rgba(192, 16, 42, 0.34);
}

.shopping-cart-page .cart-checkout-btn i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.14);

    transition:
        transform 0.3s var(--ease);
}

.shopping-cart-page .cart-checkout-btn:hover i {
    transform: translateX(3px);
}


/* =============================================================
   SUMMARY CONTINUE
   ============================================================= */

.cart-summary-continue {
    position: relative;

    z-index: 2;

    display: block;

    margin-top: 14px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.61rem;

    font-weight: 700;

    text-align: center;

    transition: color 0.25s;
}

.cart-summary-continue:hover {
    color: var(--cart-white);
}


/* =============================================================
   SUMMARY TRUST
   ============================================================= */

.cart-summary-trust {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1px;

    margin-top: 25px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.07);
}

.cart-trust-item {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    padding: 12px 10px;

    background: rgba(255, 255, 255, 0.025);
}

.cart-trust-item > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    color: var(--cart-gold);

    font-size: 0.7rem;
}

.cart-trust-item > div {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.cart-trust-item strong {
    color: rgba(255, 255, 255, 0.8);

    font-size: 0.56rem;

    font-weight: 800;
}

.cart-trust-item small {
    color: rgba(255, 255, 255, 0.36);

    font-size: 0.5rem;

    line-height: 1.35;
}


/* =============================================================
   EMPTY CART
   ============================================================= */

.shopping-cart-page .cart-empty {
    position: relative;

    min-height: 480px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 65px 25px;

    overflow: hidden;

    border: 1px dashed var(--cart-border);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(192, 16, 42, 0.04),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            var(--cart-light),
            var(--cart-white)
        );

    text-align: center;
}

.shopping-cart-page .cart-empty::before {
    content: '';

    position: absolute;

    width: 360px;
    height: 360px;

    top: -180px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid rgba(169, 138, 84, 0.08);

    border-radius: 50%;

    pointer-events: none;
}

.cart-empty-icon {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    margin-bottom: 22px;

    border-radius: 50%;

    background: var(--cart-white);

    border: 1px solid var(--cart-border);

    color: var(--cart-red);

    box-shadow:
        0 10px 30px rgba(20, 17, 15, 0.06);
}

.cart-empty-icon i {
    font-size: 2rem;
}

.shopping-cart-page .cart-empty .eyebrow {
    position: relative;

    z-index: 2;

    margin-bottom: 10px;

    color: var(--cart-red);

    font-size: 0.61rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.13em;
}

.shopping-cart-page .cart-empty h2 {
    position: relative;

    z-index: 2;

    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.045em;
}

.shopping-cart-page .cart-empty h2 span {
    color: var(--cart-red);
}

.shopping-cart-page .cart-empty p {
    position: relative;

    z-index: 2;

    max-width: 510px;

    margin: 15px 0 0;

    color: var(--cart-grey);

    font-size: 0.84rem;

    line-height: 1.7;
}


/* =============================================================
   EMPTY BUTTON
   ============================================================= */

.shopping-cart-page .cart-empty-btn {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-height: 48px;

    margin-top: 27px;

    padding: 0 19px;

    border-radius: 8px;

    background: var(--cart-red);

    color: var(--cart-white);

    font-size: 0.7rem;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 8px 23px rgba(192, 16, 42, 0.18);

    transition:
        transform 0.25s var(--ease),
        background 0.25s,
        box-shadow 0.25s;
}

.shopping-cart-page .cart-empty-btn:hover {
    background: var(--fm-red-dark);

    color: var(--cart-white);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(192, 16, 42, 0.25);
}

.shopping-cart-page .cart-empty-btn i {
    transition:
        transform 0.25s var(--ease);
}

.shopping-cart-page .cart-empty-btn:hover i {
    transform: translateX(3px);
}


/* =============================================================
   FOCUS
   ============================================================= */

.shopping-cart-page a:focus-visible,
.shopping-cart-page button:focus-visible {
    outline: 2px solid var(--cart-red);

    outline-offset: 3px;
}


/* =============================================================
   1200px
   ============================================================= */

@media (max-width: 1200px) {

    .cart-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 350px);

        gap: 35px;
    }

    .shopping-cart-page .cart-item {
        grid-template-columns:
            125px
            minmax(0, 1fr)
            auto;

        gap: 18px;
    }

    .cart-item-image {
        width: 125px;
        height: 125px;
    }

}


/* =============================================================
   1000px
   ============================================================= */

@media (max-width: 1000px) {

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary-column {
        position: static;
    }

    .shopping-cart-page .cart-summary {
        max-width: 650px;
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 760px) {

    .shopping-cart-page .cart-page-hero {
        padding: 19px 0 58px;
    }

    .shopping-cart-page .cart-breadcrumb {
        margin-bottom: 40px;

        font-size: 0.63rem;
    }

    .cart-hero-content h1 {
        font-size: clamp(
            2.65rem,
            12vw,
            4rem
        );
    }

    .cart-hero-content p {
        margin-top: 17px;

        font-size: 0.86rem;
    }

    .shopping-cart-page .cart-sec {
        padding: 55px 0 75px;
    }

    .cart-topbar {
        margin-bottom: 19px;
    }

    .cart-layout {
        gap: 30px;
    }

    .shopping-cart-page .cart-item {
        grid-template-columns:
            110px
            minmax(0, 1fr);

        gap: 16px;

        padding: 14px;
    }

    .cart-item-image {
        width: 110px;
        height: 110px;
    }

    .cart-item-total {
        grid-column: 2;

        min-width: 0;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        padding-top: 13px;

        margin-top: 2px;

        border-top: 1px solid var(--cart-border);
    }

    .cart-item-total span {
        margin: 0;
    }

    .cart-item-total strong {
        font-size: 1rem;
    }

    .cart-item-title {
        font-size: 1.05rem;
    }

    .cart-summary {
        padding: 25px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .shopping-cart-page .cart-page-hero::before {
        width: 290px;
        height: 290px;

        right: -145px;
        top: -150px;
    }

    .shopping-cart-page .cart-page-hero::after {
        width: 190px;
        height: 190px;

        right: -95px;
        top: -100px;
    }

    .cart-topbar {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .cart-add-more {
        font-size: 0.64rem;
    }


    /* Cart item */

    .shopping-cart-page .cart-item {
        grid-template-columns:
            92px
            minmax(0, 1fr);

        gap: 13px;

        border-radius: 11px;

        padding: 11px;
    }

    .cart-item-image {
        width: 92px;
        height: 92px;

        border-radius: 8px;
    }

    .cart-item-category {
        margin-top: 0;

        margin-bottom: 6px;

        font-size: 0.51rem;
    }

    .cart-item-title {
        font-size: 0.94rem;

        line-height: 1.22;
    }

    .cart-item-variant {
        margin-top: 7px;

        padding: 4px 6px;

        font-size: 0.56rem;
    }

    .cart-item-unit-price {
        margin-top: 8px;

        gap: 5px;
    }

    .cart-item-unit-price span {
        font-size: 0.51rem;
    }

    .cart-item-unit-price strong {
        font-size: 0.78rem;
    }

    .cart-item-actions {
        align-items: center;

        gap: 13px;

        padding-top: 12px;
    }

    .cart-action-label {
        font-size: 0.49rem;
    }

    .shopping-cart-page .cart-quantity {
        grid-template-columns:
            29px
            37px
            29px;

        height: 35px;
    }

    .shopping-cart-page .cart-quantity span {
        font-size: 0.65rem;
    }

    .shopping-cart-page .cart-remove-btn {
        font-size: 0.57rem;
    }

    .cart-item-total {
        grid-column: 1 / -1;

        padding-top: 12px;

        margin-top: 0;
    }

    .cart-item-total span {
        font-size: 0.51rem;
    }

    .cart-item-total strong {
        font-size: 0.94rem;
    }


    /* Footer */

    .cart-items-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding-top: 15px;
    }


    /* Summary */

    .shopping-cart-page .cart-summary {
        padding: 22px 18px;

        border-radius: 12px;
    }

    .shopping-cart-page .cart-summary h2 {
        font-size: 1.5rem;
    }

    .shopping-cart-page .cart-summary-total strong {
        font-size: 1.4rem;
    }

    .cart-summary-trust {
        grid-template-columns: 1fr;
    }

    .cart-trust-item {
        padding: 10px;
    }


    /* Empty */

    .shopping-cart-page .cart-empty {
        min-height: 420px;

        padding: 50px 18px;

        border-radius: 12px;
    }

    .cart-empty-icon {
        width: 72px;
        height: 72px;
    }

    .cart-empty-icon i {
        font-size: 1.75rem;
    }

    .shopping-cart-page .cart-empty h2 {
        font-size: 2rem;
    }

    .shopping-cart-page .cart-empty p {
        font-size: 0.78rem;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 420px) {

    .cart-hero-content h1 {
        font-size: 2.5rem;
    }

    .cart-hero-content p {
        font-size: 0.81rem;
    }

    .shopping-cart-page .cart-item {
        grid-template-columns:
            82px
            minmax(0, 1fr);

        padding: 9px;

        gap: 11px;
    }

    .cart-item-image {
        width: 82px;
        height: 82px;
    }

    .cart-item-title {
        font-size: 0.87rem;
    }

    .cart-item-variant {
        max-width: 100%;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;
    }

    .cart-item-actions {
        flex-direction: column;

        align-items: flex-start;

        gap: 9px;
    }

    .cart-item-total {
        margin-top: 2px;
    }

    .cart-topbar-left {
        gap: 8px;
    }

    .cart-topbar-label {
        font-size: 0.56rem;
    }

    .cart-topbar-left strong {
        font-size: 0.76rem;
    }

    .shopping-cart-page .cart-summary {
        padding: 20px 16px;
    }

    .shopping-cart-page .cart-summary h2 {
        font-size: 1.4rem;
    }

}


/* =============================================================
   VERY SMALL MOBILE
   ============================================================= */

@media (max-width: 360px) {

    .cart-hero-content h1 {
        font-size: 2.3rem;
    }

    .shopping-cart-page .cart-item {
        grid-template-columns:
            75px
            minmax(0, 1fr);
    }

    .cart-item-image {
        width: 75px;
        height: 75px;
    }

    .cart-item-title {
        font-size: 0.82rem;
    }

    .cart-item-unit-price strong {
        font-size: 0.73rem;
    }

    .shopping-cart-page .cart-checkout-btn {
        min-height: 50px;

        padding-left: 15px;
        padding-right: 12px;

        font-size: 0.66rem;
    }

    .shopping-cart-page .cart-summary-total strong {
        font-size: 1.25rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .shopping-cart-page *,
    .shopping-cart-page *::before,
    .shopping-cart-page *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}

/* =============================================================
   FM ELEVATOR
   PREMIUM CHECKOUT PAGE
   ============================================================= */

.checkout-sec {
    padding: 70px 0 110px;
    background: var(--fm-offwhite);
}


/* =============================================================
   CHECKOUT FORM
   ============================================================= */

#checkoutForm {
    width: 100%;
}


/* =============================================================
   CHECKOUT CARD
   ============================================================= */

.checkout-card {
    overflow: hidden;

    border: 1px solid var(--fm-border);
    border-radius: 14px;

    background: var(--fm-white);

    box-shadow:
        0 8px 28px rgba(20, 17, 15, 0.035);

    transition:
        border-color 0.25s,
        box-shadow 0.3s var(--ease);
}

.checkout-card:hover {
    border-color: rgba(20, 17, 15, 0.12);

    box-shadow:
        0 12px 35px rgba(20, 17, 15, 0.05);
}


/* =============================================================
   CARD HEADER
   ============================================================= */

.checkout-card-header {
    position: relative;

    padding: 22px 25px;

    border-bottom: 1px solid var(--fm-border);

    background:
        linear-gradient(
            135deg,
            var(--fm-white),
            var(--fm-offwhite)
        );
}

.checkout-card-header::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: var(--fm-red);
}

.checkout-card-header h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1.22rem;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.025em;

    color: var(--fm-dark);
}

.checkout-card-header h2 span {
    color: var(--fm-red);
}


/* =============================================================
   CARD BODY
   ============================================================= */

.checkout-card-body {
    padding: 26px 25px;
}


/* =============================================================
   FORM LABELS
   ============================================================= */

.checkout-card .form-label {
    display: block;

    margin-bottom: 8px;

    color: var(--fm-dark);

    font-size: 0.67rem;

    font-weight: 800;

    letter-spacing: 0.025em;
}

.checkout-card .form-label .text-danger {
    color: var(--fm-red) !important;
}


/* =============================================================
   INPUTS
   ============================================================= */

.checkout-card .form-control {
    min-height: 48px;

    padding: 0 13px;

    border: 1px solid var(--fm-border);

    border-radius: 7px;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-family: var(--font-body);

    font-size: 0.75rem;

    box-shadow: none;

    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        background 0.2s;
}

.checkout-card textarea.form-control {
    min-height: 112px;

    padding: 12px 13px;

    line-height: 1.6;

    resize: vertical;
}

.checkout-card .form-control::placeholder {
    color: var(--fm-grey-light);

    opacity: 0.8;
}

.checkout-card .form-control:hover {
    border-color: rgba(20, 17, 15, 0.22);
}

.checkout-card .form-control:focus {
    border-color: var(--fm-red);

    background: var(--fm-white);

    box-shadow:
        0 0 0 3px rgba(192, 16, 42, 0.07);

    outline: none;
}


/* =============================================================
   SAME AS BILLING
   ============================================================= */

.checkout-card .form-check {
    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 22px;

    padding-left: 0;
}

.checkout-card .form-check-input {
    position: relative;

    float: none;

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin: 0;

    border: 1px solid var(--fm-grey-light);

    border-radius: 4px;

    box-shadow: none;

    cursor: pointer;

    transition:
        background 0.2s,
        border-color 0.2s;
}

.checkout-card .form-check-input:checked {
    border-color: var(--fm-red);

    background-color: var(--fm-red);
}

.checkout-card .form-check-input:focus {
    border-color: var(--fm-red);

    box-shadow:
        0 0 0 3px rgba(192, 16, 42, 0.08);
}

.checkout-card .form-check-label {
    color: var(--fm-grey);

    font-size: 0.67rem;

    font-weight: 600;

    cursor: pointer;
}


/* =============================================================
   PAYMENT METHODS
   ============================================================= */

.payment-method-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.payment-method-option {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 75px;

    padding: 14px 16px;

    border: 1px solid var(--fm-border);

    border-radius: 9px;

    background: var(--fm-white);

    cursor: pointer;

    transition:
        border-color 0.25s,
        background 0.25s,
        box-shadow 0.25s,
        transform 0.25s var(--ease);
}

.payment-method-option:hover {
    border-color: rgba(192, 16, 42, 0.28);

    background: #fffdfc;

    transform: translateY(-1px);
}

.payment-method-option:has(input:checked) {
    border-color: var(--fm-red);

    background:
        rgba(192, 16, 42, 0.025);

    box-shadow:
        0 5px 18px rgba(192, 16, 42, 0.07);
}

.payment-method-option input {
    appearance: none;

    position: relative;

    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    margin: 0;

    border: 1.5px solid var(--fm-grey-light);

    border-radius: 50%;

    background: var(--fm-white);

    cursor: pointer;

    transition:
        border-color 0.2s;
}

.payment-method-option input:checked {
    border-color: var(--fm-red);
}

.payment-method-option input:checked::after {
    content: '';

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--fm-red);

    transform: translate(-50%, -50%);
}

.payment-method-content {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.payment-method-content strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.78rem;

    font-weight: 800;
}

.payment-method-content small {
    color: var(--fm-grey);

    font-size: 0.63rem;

    line-height: 1.5;
}


/* =============================================================
   ORDER SUMMARY
   ============================================================= */

.checkout-summary {
    position: sticky;

    top: 105px;

    overflow: hidden;

    padding: 27px;

    border-radius: 15px;

    background: var(--fm-dark);

    color: var(--fm-white);

    box-shadow:
        0 20px 50px rgba(20, 17, 15, 0.15);
}

.checkout-summary::before {
    content: '';

    position: absolute;

    width: 300px;
    height: 300px;

    right: -155px;
    top: -160px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    pointer-events: none;
}

.checkout-summary::after {
    content: '';

    position: absolute;

    width: 190px;
    height: 190px;

    right: -95px;
    top: -95px;

    border: 1px solid rgba(192, 16, 42, 0.2);

    border-radius: 50%;

    pointer-events: none;
}

.checkout-summary > h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 21px;

    padding-bottom: 19px;

    border-bottom: 1px solid rgba(255,255,255,0.12);

    font-family: var(--font-display);

    font-size: 1.65rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;
}

.checkout-summary > h2 span {
    color: var(--fm-red);
}


/* =============================================================
   SUMMARY ITEMS
   ============================================================= */

.checkout-summary-items {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 11px;

    max-height: 300px;

    overflow-y: auto;

    padding-right: 4px;
}

.checkout-summary-items::-webkit-scrollbar {
    width: 3px;
}

.checkout-summary-items::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.checkout-summary-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);

    border-radius: 20px;
}


/* =============================================================
   SUMMARY ITEM
   ============================================================= */

.checkout-summary-item {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 10px;

    padding: 9px 0;
}

.checkout-summary-image {
    width: 52px;
    height: 52px;

    overflow: hidden;

    border-radius: 7px;

    background: var(--fm-offwhite);

    border: 1px solid rgba(255,255,255,0.1);
}

.checkout-summary-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.checkout-summary-item-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.checkout-summary-item-info h4 {
    margin: 0;

    overflow: hidden;

    color: var(--fm-white);

    font-family: var(--font-display);

    font-size: 0.7rem;

    font-weight: 800;

    line-height: 1.25;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.checkout-summary-item-info small {
    overflow: hidden;

    color: rgba(255,255,255,0.42);

    font-size: 0.55rem;

    white-space: nowrap;

    text-overflow: ellipsis;
}

.checkout-summary-item-info div {
    color: rgba(255,255,255,0.5);

    font-size: 0.55rem;
}

.checkout-summary-item > strong {
    color: var(--fm-white);

    font-family: var(--font-display);

    font-size: 0.69rem;

    font-weight: 800;

    white-space: nowrap;
}


/* =============================================================
   SUMMARY HR
   ============================================================= */

.checkout-summary hr {
    position: relative;

    z-index: 2;

    height: 1px;

    margin: 17px 0;

    border: 0;

    background: rgba(255,255,255,0.11);

    opacity: 1;
}


/* =============================================================
   SUMMARY ROW
   ============================================================= */

.checkout-summary-row {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 34px;
}

.checkout-summary-row span {
    color: rgba(255,255,255,0.52);

    font-size: 0.65rem;

    font-weight: 600;
}

.checkout-summary-row strong {
    color: var(--fm-white);

    font-family: var(--font-display);

    font-size: 0.7rem;

    font-weight: 800;

    white-space: nowrap;
}

.checkout-summary-row .text-success {
    color: #71b786 !important;
}


/* =============================================================
   SUMMARY TOTAL
   ============================================================= */

.checkout-summary-total {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.checkout-summary-total span {
    color: rgba(255,255,255,0.65);

    font-size: 0.69rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.checkout-summary-total strong {
    color: var(--fm-white);

    font-family: var(--font-display);

    font-size: 1.7rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;

    white-space: nowrap;
}


/* =============================================================
   PLACE ORDER
   ============================================================= */

.checkout-summary .btn-primary {
    position: relative;

    z-index: 2;

    min-height: 52px;

    border: 1px solid var(--fm-red);

    border-radius: 8px;

    background: var(--fm-red);

    color: var(--fm-white);

    font-size: 0.72rem;

    font-weight: 800;

    box-shadow:
        0 9px 25px rgba(192, 16, 42, 0.24);

    transition:
        transform 0.25s var(--ease),
        background 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;
}

.checkout-summary .btn-primary:hover {
    background: var(--fm-red-dark);

    border-color: var(--fm-red-dark);

    color: var(--fm-white);

    transform: translateY(-2px);

    box-shadow:
        0 13px 32px rgba(192, 16, 42, 0.32);
}

.checkout-summary .btn-primary:disabled {
    opacity: 0.75;

    cursor: wait;

    transform: none;
}


/* =============================================================
   BACK TO CART
   ============================================================= */

.checkout-back-cart {
    position: relative;

    z-index: 2;

    display: block;

    margin-top: 13px;

    color: rgba(255,255,255,0.46);

    font-size: 0.61rem;

    font-weight: 700;

    text-align: center;

    transition: color 0.25s;
}

.checkout-back-cart:hover {
    color: var(--fm-white);
}


/* =============================================================
   SECURITY
   ============================================================= */

.checkout-security {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin-top: 22px;

    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,0.1);

    color: rgba(255,255,255,0.38);

    font-size: 0.56rem;

    line-height: 1.55;
}

.checkout-security i {
    flex: 0 0 auto;

    color: var(--fm-gold);

    font-size: 0.85rem;
}


/* =============================================================
   ERROR ALERTS
   ============================================================= */

.checkout-sec .alert {
    border-radius: 9px;

    font-size: 0.72rem;
}

.checkout-sec .alert-danger {
    border-color: rgba(192,16,42,0.18);

    background: rgba(192,16,42,0.055);

    color: var(--fm-dark);
}

.checkout-sec .alert-danger strong {
    font-weight: 800;
}

.checkout-sec .alert-danger ul {
    padding-left: 18px;
}


/* =============================================================
   SPINNER
   ============================================================= */

.checkout-summary .spinner-border {
    width: 14px;
    height: 14px;

    border-width: 2px;
}


/* =============================================================
   FOCUS
   ============================================================= */

.checkout-sec a:focus-visible,
.checkout-sec button:focus-visible,
.checkout-sec input:focus-visible,
.checkout-sec textarea:focus-visible {
    outline: 2px solid var(--fm-red);

    outline-offset: 3px;
}


/* =============================================================
   1200px
   ============================================================= */

@media (max-width: 1200px) {

    .checkout-summary {
        padding: 24px;
    }

    .checkout-card-body {
        padding: 23px;
    }

}


/* =============================================================
   991px
   ============================================================= */

@media (max-width: 991px) {

    .checkout-sec {
        padding: 55px 0 80px;
    }

    .checkout-summary {
        position: static;

        max-width: 700px;

        margin-top: 5px;
    }

}


/* =============================================================
   768px
   ============================================================= */

@media (max-width: 768px) {

    .checkout-card-header {
        padding: 19px 20px;
    }

    .checkout-card-header h2 {
        font-size: 1.08rem;
    }

    .checkout-card-body {
        padding: 21px 20px;
    }

    .checkout-card .form-control {
        min-height: 46px;
    }

    .checkout-card textarea.form-control {
        min-height: 100px;
    }

    .payment-method-option {
        min-height: 69px;

        padding: 12px 13px;
    }

    .checkout-summary {
        padding: 23px 20px;

        border-radius: 12px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .checkout-sec {
        padding: 40px 0 65px;
    }

    .checkout-card {
        border-radius: 11px;
    }

    .checkout-card-header {
        padding: 17px 17px;
    }

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

    .checkout-card .form-label {
        margin-bottom: 6px;

        font-size: 0.62rem;
    }

    .checkout-card .form-control {
        min-height: 45px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 0.7rem;
    }

    .checkout-card textarea.form-control {
        min-height: 95px;
    }

    .checkout-card .form-check-label {
        font-size: 0.61rem;

        line-height: 1.45;
    }


    /* Payment */

    .payment-method-list {
        gap: 8px;
    }

    .payment-method-option {
        align-items: flex-start;

        padding: 13px;

        gap: 11px;
    }

    .payment-method-option input {
        margin-top: 2px;
    }

    .payment-method-content strong {
        font-size: 0.72rem;
    }

    .payment-method-content small {
        font-size: 0.57rem;
    }


    /* Summary */

    .checkout-summary {
        padding: 20px 16px;
    }

    .checkout-summary > h2 {
        margin-bottom: 17px;

        padding-bottom: 16px;

        font-size: 1.45rem;
    }

    .checkout-summary-items {
        max-height: 260px;
    }

    .checkout-summary-item {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            auto;

        gap: 9px;
    }

    .checkout-summary-image {
        width: 48px;
        height: 48px;
    }

    .checkout-summary-item-info h4 {
        font-size: 0.65rem;
    }

    .checkout-summary-item > strong {
        font-size: 0.64rem;
    }

    .checkout-summary-row span {
        font-size: 0.61rem;
    }

    .checkout-summary-row strong {
        font-size: 0.66rem;
    }

    .checkout-summary-total strong {
        font-size: 1.45rem;
    }

    .checkout-summary .btn-primary {
        min-height: 50px;

        font-size: 0.68rem;
    }

}


/* =============================================================
   420px
   ============================================================= */

@media (max-width: 420px) {

    .checkout-card-header {
        padding: 16px 15px;
    }

    .checkout-card-body {
        padding: 16px 15px;
    }

    .checkout-card-header h2 {
        font-size: 1rem;
    }

    .checkout-card .form-control {
        font-size: 0.67rem;
    }

    .payment-method-option {
        padding: 11px;
    }

    .payment-method-content strong {
        font-size: 0.68rem;
    }

    .payment-method-content small {
        font-size: 0.54rem;
    }

    .checkout-summary {
        padding: 18px 14px;
    }

    .checkout-summary-total strong {
        font-size: 1.32rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .checkout-sec *,
    .checkout-sec *::before,
    .checkout-sec *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}







/* =============================================================
   FM ELEVATOR
   PREMIUM ORDER SUCCESS / CONFIRMATION PAGE
   ============================================================= */

.checkout-success-sec {
    position: relative;

    padding: 80px 0 115px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(192, 16, 42, 0.045),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            var(--fm-offwhite) 0%,
            var(--fm-white) 100%
        );
}


/* =============================================================
   BACKGROUND DECORATION
   ============================================================= */

.checkout-success-sec::before {
    content: '';

    position: absolute;

    width: 520px;
    height: 520px;

    top: -270px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid rgba(169, 138, 84, 0.09);

    border-radius: 50%;

    pointer-events: none;
}

.checkout-success-sec::after {
    content: '';

    position: absolute;

    width: 350px;
    height: 350px;

    top: -175px;
    left: 50%;

    transform: translateX(-50%);

    border: 1px solid rgba(192, 16, 42, 0.055);

    border-radius: 50%;

    pointer-events: none;
}


/* =============================================================
   SUCCESS CARD
   ============================================================= */

.checkout-success-card {
    position: relative;

    z-index: 2;

    max-width: 920px;

    margin: 0 auto;

    padding: clamp(35px, 5vw, 60px);

    border: 1px solid var(--fm-border);

    border-radius: 18px;

    background: var(--fm-white);

    box-shadow:
        0 25px 70px rgba(20, 17, 15, 0.075);

    text-align: center;
}


/* =============================================================
   TOP SUCCESS AREA
   ============================================================= */

.checkout-success-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 86px;
    height: 86px;

    margin: 0 auto 24px;

    border: 1px solid rgba(192, 16, 42, 0.18);

    border-radius: 50%;

    background:
        rgba(192, 16, 42, 0.055);

    color: var(--fm-red);

    box-shadow:
        0 12px 35px rgba(192, 16, 42, 0.08);
}

.checkout-success-icon i {
    font-size: 2.35rem;

    line-height: 1;
}


/* =============================================================
   HEADING
   ============================================================= */

.checkout-success-card > h1 {
    margin: 0;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 34px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.055em;
}

.checkout-success-card > h1 span {
    color: var(--fm-red);
}


/* =============================================================
   MESSAGE
   ============================================================= */

.checkout-success-message {
    max-width: 560px;

    margin: 17px auto 0;

    color: var(--fm-grey);

    font-size: 0.86rem;

    line-height: 1.7;
}


/* =============================================================
   ORDER NUMBER
   ============================================================= */

.checkout-success-order-number {
    display: inline-flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    min-width: 245px;

    margin-top: 28px;

    padding: 13px 25px;

    border: 1px solid var(--fm-border);

    border-radius: 8px;

    background: var(--fm-offwhite);
}

.checkout-success-order-number span {
    color: var(--fm-grey-light);

    font-size: 0.57rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.11em;
}

.checkout-success-order-number strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: 0.02em;
}


/* =============================================================
   SUMMARY
   ============================================================= */

.checkout-success-summary {
    max-width: 690px;

    margin: 38px auto 0;

    padding: 24px 27px;

    border: 1px solid var(--fm-border);

    border-radius: 12px;

    background: var(--fm-white);

    text-align: left;
}


/* =============================================================
   SUMMARY ROW
   ============================================================= */

.checkout-success-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 42px;

    border-bottom: 1px solid rgba(20, 17, 15, 0.055);
}

.checkout-success-row:last-child {
    border-bottom: 0;
}

.checkout-success-row span {
    color: var(--fm-grey);

    font-size: 0.67rem;

    font-weight: 600;
}

.checkout-success-row strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.71rem;

    font-weight: 800;

    text-align: right;
}

.checkout-success-row .text-success {
    color: #3d9560 !important;
}


/* =============================================================
   TOTAL
   ============================================================= */

.checkout-success-total {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 10px;

    padding-top: 19px;

    border-top: 1px solid var(--fm-border);
}

.checkout-success-total span {
    color: var(--fm-dark);

    font-size: 0.72rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.checkout-success-total strong {
    color: var(--fm-red);

    font-family: var(--font-display);

    font-size: 1.55rem;

    font-weight: 800;

    letter-spacing: -0.035em;
}


/* =============================================================
   ORDER ITEMS
   ============================================================= */

.checkout-success-items {
    max-width: 690px;

    margin: 25px auto 0;

    padding: 25px 27px;

    border: 1px solid var(--fm-border);

    border-radius: 12px;

    background: var(--fm-offwhite);

    text-align: left;
}

.checkout-success-items > h2 {
    margin: 0 0 17px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--fm-border);

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 1.05rem;

    font-weight: 800;

    letter-spacing: -0.025em;
}

.checkout-success-items > h2 span {
    color: var(--fm-red);
}


/* =============================================================
   SUCCESS ITEM
   ============================================================= */

.checkout-success-item {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid rgba(20, 17, 15, 0.055);
}

.checkout-success-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.checkout-success-item-info {
    min-width: 0;
}

.checkout-success-item-info h3 {
    margin: 0 0 5px;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.76rem;

    font-weight: 800;

    line-height: 1.35;
}

.checkout-success-item-info small {
    display: block;

    margin-bottom: 4px;

    color: var(--fm-grey-light);

    font-size: 0.57rem;
}

.checkout-success-item-info div {
    color: var(--fm-grey);

    font-size: 0.59rem;

    font-weight: 600;
}

.checkout-success-item-price {
    flex-shrink: 0;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.8rem;

    font-weight: 800;

    white-space: nowrap;
}


/* =============================================================
   BILLING / SHIPPING
   ============================================================= */

.checkout-success-addresses {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    max-width: 690px;

    margin: 25px auto 0;

    text-align: left;
}

.checkout-success-address {
    padding: 22px;

    border: 1px solid var(--fm-border);

    border-radius: 11px;

    background: var(--fm-white);
}

.checkout-success-address h2 {
    margin: 0 0 15px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--fm-border);

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.92rem;

    font-weight: 800;

    letter-spacing: -0.02em;
}

.checkout-success-address h2 span {
    color: var(--fm-red);
}

.checkout-success-address p {
    margin: 0;

    color: var(--fm-grey);

    font-size: 0.64rem;

    line-height: 1.75;
}

.checkout-success-address p strong {
    color: var(--fm-dark);

    font-size: 0.69rem;

    font-weight: 800;
}


/* =============================================================
   ACTIONS
   ============================================================= */

.checkout-success-actions {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 34px;
}

.checkout-success-actions .btn {
    min-height: 49px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 20px;

    border-radius: 7px;

    font-size: 0.68rem;

    font-weight: 800;
}

.checkout-success-actions .btn-primary {
    border-color: var(--fm-red);

    background: var(--fm-red);

    color: var(--fm-white);

    box-shadow:
        0 8px 22px rgba(192, 16, 42, 0.17);

    transition:
        transform 0.25s var(--ease),
        background 0.25s,
        box-shadow 0.25s;
}

.checkout-success-actions .btn-primary:hover {
    border-color: var(--fm-red-dark);

    background: var(--fm-red-dark);

    color: var(--fm-white);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(192, 16, 42, 0.25);
}

.checkout-success-actions .btn-outline-secondary {
    border: 1px solid var(--fm-border);

    background: var(--fm-white);

    color: var(--fm-dark);

    transition:
        border-color 0.25s,
        background 0.25s,
        color 0.25s;
}

.checkout-success-actions .btn-outline-secondary:hover {
    border-color: var(--fm-dark);

    background: var(--fm-dark);

    color: var(--fm-white);
}


/* =============================================================
   NOTE
   ============================================================= */

.checkout-success-note {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    max-width: 690px;

    margin: 22px auto 0;

    padding-top: 18px;

    border-top: 1px solid var(--fm-border);

    color: var(--fm-grey-light);

    font-size: 0.59rem;

    line-height: 1.5;
}

.checkout-success-note i {
    flex-shrink: 0;

    color: var(--fm-gold);

    font-size: 0.75rem;
}


/* =============================================================
   FOCUS
   ============================================================= */

.checkout-success-card a:focus-visible,
.checkout-success-card button:focus-visible {
    outline: 2px solid var(--fm-red);

    outline-offset: 3px;
}


/* =============================================================
   991px
   ============================================================= */

@media (max-width: 991px) {

    .checkout-success-sec {
        padding: 65px 0 85px;
    }

}


/* =============================================================
   768px
   ============================================================= */

@media (max-width: 768px) {

    .checkout-success-sec {
        padding: 55px 0 75px;
    }

    .checkout-success-card {
        padding: 40px 25px;
    }

    .checkout-success-icon {
        width: 78px;
        height: 78px;

        margin-bottom: 20px;
    }

    .checkout-success-icon i {
        font-size: 2.1rem;
    }

    .checkout-success-summary,
    .checkout-success-items {
        padding: 20px;
    }

    .checkout-success-addresses {
        grid-template-columns: 1fr;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 600px) {

    .checkout-success-sec {
        padding: 40px 0 60px;
    }

    .checkout-success-card {
        padding: 32px 15px;

        border-radius: 13px;
    }

    .checkout-success-card > h1 {
        font-size: 2.35rem;

        letter-spacing: -0.05em;
    }

    .checkout-success-message {
        font-size: 0.77rem;
    }

    .checkout-success-order-number {
        min-width: 210px;

        margin-top: 23px;

        padding: 11px 18px;
    }

    .checkout-success-order-number span {
        font-size: 0.53rem;
    }

    .checkout-success-order-number strong {
        font-size: 0.86rem;
    }


    /* Summary */

    .checkout-success-summary {
        margin-top: 27px;

        padding: 16px;

        border-radius: 10px;
    }

    .checkout-success-row {
        min-height: 40px;

        gap: 12px;
    }

    .checkout-success-row span {
        font-size: 0.6rem;
    }

    .checkout-success-row strong {
        max-width: 52%;

        font-size: 0.62rem;
    }

    .checkout-success-total {
        padding-top: 16px;
    }

    .checkout-success-total span {
        font-size: 0.62rem;
    }

    .checkout-success-total strong {
        font-size: 1.3rem;
    }


    /* Items */

    .checkout-success-items {
        margin-top: 17px;

        padding: 17px;

        border-radius: 10px;
    }

    .checkout-success-items > h2 {
        margin-bottom: 11px;

        padding-bottom: 11px;

        font-size: 0.94rem;
    }

    .checkout-success-item {
        align-items: flex-start;

        gap: 12px;

        padding: 12px 0;
    }

    .checkout-success-item-info h3 {
        font-size: 0.69rem;
    }

    .checkout-success-item-price {
        font-size: 0.7rem;
    }


    /* Addresses */

    .checkout-success-addresses {
        gap: 10px;

        margin-top: 17px;
    }

    .checkout-success-address {
        padding: 17px;

        border-radius: 9px;
    }

    .checkout-success-address h2 {
        margin-bottom: 12px;

        padding-bottom: 10px;

        font-size: 0.84rem;
    }

    .checkout-success-address p {
        font-size: 0.59rem;
    }


    /* Actions */

    .checkout-success-actions {
        flex-direction: column;

        gap: 9px;

        margin-top: 27px;
    }

    .checkout-success-actions .btn {
        width: 100%;

        min-height: 48px;
    }

    .checkout-success-note {
        align-items: flex-start;

        margin-top: 18px;

        padding-top: 15px;

        font-size: 0.55rem;
    }

}


/* =============================================================
   420px
   ============================================================= */

@media (max-width: 420px) {

    .checkout-success-card {
        padding: 28px 12px;
    }

    .checkout-success-icon {
        width: 70px;
        height: 70px;
    }

    .checkout-success-icon i {
        font-size: 1.85rem;
    }

    .checkout-success-card > h1 {
        font-size: 2.05rem;
    }

    .checkout-success-message {
        font-size: 0.73rem;
    }

    .checkout-success-summary {
        padding: 14px;
    }

    .checkout-success-items {
        padding: 14px;
    }

    .checkout-success-address {
        padding: 14px;
    }

    .checkout-success-item-price {
        font-size: 0.65rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .checkout-success-sec *,
    .checkout-success-sec *::before,
    .checkout-success-sec *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}


/* =============================================================
   FM ELEVATOR
   PREMIUM CUSTOMER ORDERS PAGE
   ============================================================= */

.customer-orders-sec {
    padding: 75px 0 110px;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(192, 16, 42, 0.035),
            transparent 30%
        ),
        var(--fm-offwhite);
}


/* =============================================================
   PAGE HEADER
   ============================================================= */

.customer-orders-sec .container > .d-flex {
    position: relative;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--fm-border);
}

.customer-orders-sec .container > .d-flex > div:first-child {
    min-width: 0;
}

.customer-orders-sec .text-muted.small {
    color: var(--fm-red) !important;

    font-size: 0.59rem !important;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.customer-orders-sec h1 {
    margin-top: 7px !important;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: clamp(
        2.5rem,
        5vw,
        4.3rem
    );

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.055em;
}

.customer-orders-sec h1 span {
    color: var(--fm-red);
}

.customer-orders-sec .container > .d-flex p {
    margin-top: 10px;

    color: var(--fm-grey) !important;

    font-size: 0.78rem;
}


/* =============================================================
   BACK DASHBOARD
   ============================================================= */

.customer-orders-sec .btn-outline-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 16px;

    border: 1px solid var(--fm-border);

    border-radius: 7px;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-size: 0.64rem;

    font-weight: 800;

    transition:
        background 0.25s,
        border-color 0.25s,
        color 0.25s,
        transform 0.25s var(--ease);
}

.customer-orders-sec .btn-outline-secondary:hover {
    border-color: var(--fm-dark);

    background: var(--fm-dark);

    color: var(--fm-white);

    transform: translateY(-1px);
}


/* =============================================================
   ALERTS
   ============================================================= */

.customer-orders-sec .alert {
    border-radius: 9px;

    padding: 14px 17px;

    font-size: 0.69rem;
}

.customer-orders-sec .alert-success {
    border: 1px solid rgba(46, 125, 70, 0.15);

    background: rgba(46, 125, 70, 0.055);

    color: var(--fm-dark);
}

.customer-orders-sec .alert-danger {
    border: 1px solid rgba(192, 16, 42, 0.15);

    background: rgba(192, 16, 42, 0.05);

    color: var(--fm-dark);
}


/* =============================================================
   MAIN ORDER CARD
   ============================================================= */

.customer-orders-sec .card {
    overflow: hidden;

    border: 1px solid var(--fm-border) !important;

    border-radius: 15px !important;

    background: var(--fm-white);

    box-shadow:
        0 14px 45px rgba(20, 17, 15, 0.055) !important;
}


/* =============================================================
   ORDER HISTORY HEADER
   ============================================================= */

.customer-orders-sec .card-header {
    position: relative;

    padding: 22px 25px !important;

    border-bottom: 1px solid var(--fm-border) !important;

    background:
        linear-gradient(
            135deg,
            var(--fm-white),
            var(--fm-offwhite)
        ) !important;
}

.customer-orders-sec .card-header::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: var(--fm-red);
}

.customer-orders-sec .card-header h2 {
    margin: 0;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 1rem;

    font-weight: 800;

    letter-spacing: -0.02em;
}

.customer-orders-sec .card-header small {
    color: var(--fm-grey-light) !important;

    font-size: 0.59rem;
}


/* =============================================================
   CUSTOMER EMAIL BADGE
   ============================================================= */

.customer-orders-sec .card-header .badge {
    max-width: 100%;

    overflow: hidden;

    padding: 8px 12px !important;

    border: 1px solid var(--fm-border) !important;

    border-radius: 6px;

    background: var(--fm-white) !important;

    color: var(--fm-grey) !important;

    font-size: 0.58rem;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =============================================================
   TABLE
   ============================================================= */

.customer-orders-sec .table-responsive {
    width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;
}

.customer-orders-sec .table {
    min-width: 920px;

    margin: 0;

    color: var(--fm-dark);

    font-size: 0.68rem;
}


/* =============================================================
   TABLE HEAD
   ============================================================= */

.customer-orders-sec .table thead {
    background: var(--fm-offwhite) !important;
}

.customer-orders-sec .table thead th {
    height: 48px;

    padding: 0 13px;

    border-bottom: 1px solid var(--fm-border);

    background: var(--fm-offwhite) !important;

    color: var(--fm-grey-light);

    font-size: 0.55rem;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    white-space: nowrap;

    vertical-align: middle;
}

.customer-orders-sec .table thead th:first-child {
    padding-left: 25px;
}

.customer-orders-sec .table thead th:last-child {
    padding-right: 25px;
}


/* =============================================================
   TABLE ROW
   ============================================================= */

.customer-orders-sec .table tbody tr {
    background: var(--fm-white);

    transition:
        background 0.22s,
        box-shadow 0.22s;
}

.customer-orders-sec .table tbody tr:hover {
    background:
        rgba(192, 16, 42, 0.018);
}

.customer-orders-sec .table tbody td {
    min-height: 72px;

    padding: 15px 13px;

    border-bottom: 1px solid rgba(20, 17, 15, 0.055);

    color: var(--fm-grey);

    vertical-align: middle;
}

.customer-orders-sec .table tbody tr:last-child td {
    border-bottom: 0;
}

.customer-orders-sec .table tbody td:first-child {
    padding-left: 25px;
}

.customer-orders-sec .table tbody td:last-child {
    padding-right: 25px;
}


/* =============================================================
   ORDER NUMBER
   ============================================================= */

.customer-orders-sec .table tbody td:first-child .fw-semibold {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.75rem;

    font-weight: 800 !important;
}

.customer-orders-sec .table tbody td:first-child small {
    display: block;

    margin-top: 4px;

    color: var(--fm-grey-light) !important;

    font-size: 0.52rem;
}


/* =============================================================
   DATE
   ============================================================= */

.customer-orders-sec .table tbody td:nth-child(2) > div {
    color: var(--fm-dark);

    font-size: 0.65rem;

    font-weight: 700;
}

.customer-orders-sec .table tbody td:nth-child(2) small {
    display: block;

    margin-top: 3px;

    color: var(--fm-grey-light) !important;

    font-size: 0.52rem;
}


/* =============================================================
   ITEM COUNT
   ============================================================= */

.customer-orders-sec .table tbody td:nth-child(3) {
    color: var(--fm-grey);

    font-size: 0.62rem;

    font-weight: 600;

    white-space: nowrap;
}


/* =============================================================
   TOTAL
   ============================================================= */

.customer-orders-sec .table tbody td:nth-child(4) .fw-semibold {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.78rem;

    font-weight: 800 !important;

    white-space: nowrap;
}


/* =============================================================
   STATUS BADGES
   ============================================================= */

.customer-orders-sec .table .badge {
    display: inline-flex;

    align-items: center;

    min-width: 88px;

    justify-content: center;

    padding: 7px 9px !important;

    border: 1px solid transparent;

    border-radius: 5px;

    font-size: 0.51rem;

    font-weight: 800;

    line-height: 1;

    text-transform: capitalize;

    white-space: nowrap;
}

.customer-orders-sec .table .badge i {
    margin-right: 5px !important;

    font-size: 0.58rem;
}


/* =============================================================
   BOOTSTRAP STATUS OVERRIDES
   ============================================================= */

.customer-orders-sec .table .bg-success {
    background: rgba(38, 125, 67, 0.09) !important;

    border-color: rgba(38, 125, 67, 0.15);

    color: #277341 !important;
}

.customer-orders-sec .table .bg-danger {
    background: rgba(192, 16, 42, 0.08) !important;

    border-color: rgba(192, 16, 42, 0.15);

    color: var(--fm-red) !important;
}

.customer-orders-sec .table .bg-warning {
    background: rgba(169, 138, 84, 0.12) !important;

    border-color: rgba(169, 138, 84, 0.18);

    color: #82652f !important;
}

.customer-orders-sec .table .bg-info {
    background: rgba(54, 126, 157, 0.09) !important;

    border-color: rgba(54, 126, 157, 0.14);

    color: #326d87 !important;
}

.customer-orders-sec .table .bg-primary {
    background: rgba(56, 84, 145, 0.09) !important;

    border-color: rgba(56, 84, 145, 0.14);

    color: #3c5790 !important;
}

.customer-orders-sec .table .bg-secondary {
    background: rgba(100, 100, 100, 0.08) !important;

    border-color: rgba(100, 100, 100, 0.13);

    color: #666 !important;
}

.customer-orders-sec .table .bg-dark {
    background: rgba(20, 17, 15, 0.08) !important;

    border-color: rgba(20, 17, 15, 0.12);

    color: var(--fm-dark) !important;
}


/* =============================================================
   VIEW BUTTON
   ============================================================= */

.customer-orders-sec .table .btn-sm {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 68px;

    min-height: 34px;

    padding: 0 11px;

    border: 1px solid var(--fm-border);

    border-radius: 6px;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-size: 0.59rem;

    font-weight: 800;

    transition:
        background 0.22s,
        border-color 0.22s,
        color 0.22s,
        transform 0.22s var(--ease);
}

.customer-orders-sec .table .btn-sm:hover {
    border-color: var(--fm-dark);

    background: var(--fm-dark);

    color: var(--fm-white);

    transform: translateY(-1px);
}

.customer-orders-sec .table .btn-sm i {
    font-size: 0.64rem;
}


/* =============================================================
   PAGINATION
   ============================================================= */

.customer-orders-sec .pagination {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 5px;

    margin: 0;
}

.customer-orders-sec .pagination .page-item {
    margin: 0;
}

.customer-orders-sec .pagination .page-link {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding: 0 9px;

    border: 1px solid var(--fm-border);

    border-radius: 6px !important;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-size: 0.61rem;

    font-weight: 700;

    box-shadow: none;

    transition:
        background 0.2s,
        border-color 0.2s,
        color 0.2s;
}

.customer-orders-sec .pagination .page-link:hover {
    border-color: var(--fm-dark);

    background: var(--fm-dark);

    color: var(--fm-white);
}

.customer-orders-sec .pagination .page-item.active .page-link {
    border-color: var(--fm-red);

    background: var(--fm-red);

    color: var(--fm-white);
}

.customer-orders-sec .pagination .page-item.disabled .page-link {
    opacity: 0.4;

    pointer-events: none;
}


/* =============================================================
   EMPTY STATE
   ============================================================= */

.customer-orders-sec .card .card-body.text-center {
    padding: 75px 25px !important;
}

.customer-orders-sec .card-body.text-center
.rounded-circle {
    width: 86px !important;
    height: 86px !important;

    margin-bottom: 23px !important;

    border: 1px solid var(--fm-border);

    background: var(--fm-offwhite) !important;

    box-shadow:
        0 10px 30px rgba(20, 17, 15, 0.045);
}

.customer-orders-sec .card-body.text-center
.rounded-circle i {
    color: var(--fm-red) !important;

    font-size: 1.9rem !important;
}

.customer-orders-sec .card-body.text-center h4 {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 1.45rem;

    font-weight: 800;

    letter-spacing: -0.025em;
}

.customer-orders-sec .card-body.text-center p {
    max-width: 470px;

    margin-left: auto;
    margin-right: auto;

    color: var(--fm-grey) !important;

    font-size: 0.73rem;

    line-height: 1.65;
}

.customer-orders-sec .card-body.text-center
.btn-primary {
    min-height: 45px;

    padding: 0 17px;

    border: 1px solid var(--fm-red);

    border-radius: 7px;

    background: var(--fm-red);

    color: var(--fm-white);

    font-size: 0.63rem;

    font-weight: 800;

    box-shadow:
        0 7px 20px rgba(192, 16, 42, 0.15);

    transition:
        transform 0.25s var(--ease),
        background 0.25s,
        box-shadow 0.25s;
}

.customer-orders-sec .card-body.text-center
.btn-primary:hover {
    border-color: var(--fm-red-dark);

    background: var(--fm-red-dark);

    color: var(--fm-white);

    transform: translateY(-2px);

    box-shadow:
        0 11px 26px rgba(192, 16, 42, 0.23);
}


/* =============================================================
   FOCUS
   ============================================================= */

.customer-orders-sec a:focus-visible,
.customer-orders-sec button:focus-visible {
    outline: 2px solid var(--fm-red);

    outline-offset: 3px;
}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 991px) {

    .customer-orders-sec {
        padding: 60px 0 85px;
    }

    .customer-orders-sec .table {
        min-width: 850px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 767px) {

    .customer-orders-sec {
        padding: 48px 0 70px;
    }


    /* Header */

    .customer-orders-sec .container > .d-flex {
        align-items: flex-start !important;

        flex-direction: column;

        gap: 20px;

        margin-bottom: 30px !important;

        padding-bottom: 22px;
    }

    .customer-orders-sec h1 {
        font-size: 2.7rem;
    }

    .customer-orders-sec .container > .d-flex p {
        font-size: 0.7rem;
    }

    .customer-orders-sec .container > .d-flex
    > a {
        width: 100%;
    }


    /* Order card */

    .customer-orders-sec .card {
        border-radius: 11px !important;
    }

    .customer-orders-sec .card-header {
        padding: 18px !important;
    }

    .customer-orders-sec .card-header
    .d-flex {
        align-items: flex-start !important;

        flex-direction: column;
    }

    .customer-orders-sec .card-header .badge {
        max-width: 100%;
    }


    /* Table */

    .customer-orders-sec .table {
        min-width: 800px;

        font-size: 0.62rem;
    }

    .customer-orders-sec .table thead th {
        height: 44px;

        font-size: 0.5rem;
    }

    .customer-orders-sec .table tbody td {
        min-height: 65px;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .customer-orders-sec .table tbody td:first-child,
    .customer-orders-sec .table thead th:first-child {
        padding-left: 18px;
    }

    .customer-orders-sec .table tbody td:last-child,
    .customer-orders-sec .table thead th:last-child {
        padding-right: 18px;
    }


    /* Empty */

    .customer-orders-sec .card .card-body.text-center {
        padding: 55px 18px !important;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .customer-orders-sec {
        padding: 40px 0 60px;
    }

    .customer-orders-sec h1 {
        font-size: 2.35rem;
    }

    .customer-orders-sec .container > .d-flex p {
        font-size: 0.67rem;
    }

    .customer-orders-sec .card-header {
        padding: 16px !important;
    }

    .customer-orders-sec .card-header h2 {
        font-size: 0.92rem;
    }

    .customer-orders-sec .card-header small {
        font-size: 0.54rem;
    }

    .customer-orders-sec .card-body.text-center
    h4 {
        font-size: 1.25rem;
    }

    .customer-orders-sec .card-body.text-center
    p {
        font-size: 0.67rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-orders-sec *,
    .customer-orders-sec *::before,
    .customer-orders-sec *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}





/* =============================================================
   FM ELEVATOR
   PREMIUM CUSTOMER ORDER DETAIL
   ============================================================= */

.customer-order-detail-sec {
    padding: 75px 0 110px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(192, 16, 42, 0.035),
            transparent 30%
        ),
        var(--fm-offwhite);
}


/* =============================================================
   PAGE HEADER
   ============================================================= */

.customer-order-detail-sec .container > .d-flex:first-child {
    position: relative;

    padding-bottom: 28px;

    border-bottom: 1px solid var(--fm-border);
}

.customer-order-detail-sec .text-muted.small {
    color: var(--fm-red) !important;

    font-size: 0.58rem !important;

    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.customer-order-detail-sec h1 {
    margin-top: 8px !important;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 34px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.055em;
}

.customer-order-detail-sec h1 span {
    color: var(--fm-red);
}

.customer-order-detail-sec .container > .d-flex:first-child p {
    color: var(--fm-grey) !important;

    font-size: 0.69rem;
}


/* =============================================================
   BACK BUTTON
   ============================================================= */

.customer-order-detail-sec .btn-outline-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 16px;

    border: 1px solid var(--fm-border);

    border-radius: 7px;

    background: var(--fm-white);

    color: var(--fm-dark);

    font-size: 0.62rem;

    font-weight: 800;

    transition:
        background 0.25s,
        border-color 0.25s,
        color 0.25s,
        transform 0.25s var(--ease);
}

.customer-order-detail-sec .btn-outline-secondary:hover {
    border-color: var(--fm-dark);

    background: var(--fm-dark);

    color: var(--fm-white);

    transform: translateY(-1px);
}


/* =============================================================
   ALL CARDS
   ============================================================= */

.customer-order-detail-sec .card {
    overflow: hidden;

    border: 1px solid var(--fm-border) !important;

    border-radius: 13px !important;

    background: var(--fm-white);

    box-shadow:
        0 12px 38px rgba(20, 17, 15, 0.045) !important;
}

.customer-order-detail-sec .card-header {
    position: relative;

    border-bottom: 1px solid var(--fm-border) !important;

    background:
        linear-gradient(
            135deg,
            var(--fm-white),
            var(--fm-offwhite)
        ) !important;
}

.customer-order-detail-sec .card-header::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: var(--fm-red);
}

.customer-order-detail-sec .card-header h2,
.customer-order-detail-sec .card-body h2 {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-weight: 800;

    letter-spacing: -0.025em;
}

.customer-order-detail-sec h2 span {
    color: var(--fm-red);
}


/* =============================================================
   TOP ORDER STATUS CARD
   ============================================================= */

.customer-order-detail-sec
.card-body.p-4 {
    padding: 25px !important;
}

.customer-order-detail-sec
.card-body.p-4 .text-muted.small {
    color: var(--fm-grey-light) !important;

    font-size: 0.55rem !important;

    letter-spacing: 0.07em;
}

.customer-order-detail-sec
.card-body.p-4 strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.73rem;

    font-weight: 800;
}


/* =============================================================
   STATUS BADGES
   ============================================================= */

.customer-order-detail-sec .badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 7px 11px !important;

    border: 1px solid transparent;

    border-radius: 5px;

    font-size: 0.53rem;

    font-weight: 800;

    line-height: 1;

    text-transform: capitalize;
}

.customer-order-detail-sec .bg-success {
    background: rgba(38, 125, 67, 0.09) !important;

    border-color: rgba(38, 125, 67, 0.15);

    color: #277341 !important;
}

.customer-order-detail-sec .bg-danger {
    background: rgba(192, 16, 42, 0.08) !important;

    border-color: rgba(192, 16, 42, 0.15);

    color: var(--fm-red) !important;
}

.customer-order-detail-sec .bg-warning {
    background: rgba(169, 138, 84, 0.12) !important;

    border-color: rgba(169, 138, 84, 0.18);

    color: #80642f !important;
}

.customer-order-detail-sec .bg-info {
    background: rgba(54, 126, 157, 0.09) !important;

    border-color: rgba(54, 126, 157, 0.14);

    color: #326d87 !important;
}

.customer-order-detail-sec .bg-primary {
    background: rgba(56, 84, 145, 0.09) !important;

    border-color: rgba(56, 84, 145, 0.14);

    color: #3c5790 !important;
}

.customer-order-detail-sec .bg-secondary {
    background: rgba(100, 100, 100, 0.08) !important;

    border-color: rgba(100, 100, 100, 0.13);

    color: #666 !important;
}

.customer-order-detail-sec .bg-dark {
    background: rgba(20, 17, 15, 0.08) !important;

    border-color: rgba(20, 17, 15, 0.12);

    color: var(--fm-dark) !important;
}


/* =============================================================
   ORDER TOTAL
   ============================================================= */

.customer-order-detail-sec
.card-body.p-4 .fs-5 {
    color: var(--fm-red) !important;

    font-size: 1.2rem !important;
}


/* =============================================================
   STATUS TRACKER
   ============================================================= */

.customer-order-detail-sec
.card-body.p-4 h2.h5 {
    margin-bottom: 27px !important;

    font-size: 1rem;

    font-weight: 800;
}


/* =============================================================
   TRACKER COLUMNS
   ============================================================= */

.customer-order-detail-sec
.card-body.p-4 .row.g-3 > .col {
    position: relative;
}

.customer-order-detail-sec
.card-body.p-4 .row.g-3 > .col:not(:last-child)::after {
    content: '';

    position: absolute;

    top: 22px;

    left: calc(50% + 24px);

    width: calc(100% - 48px);

    height: 1px;

    background: var(--fm-border);

    pointer-events: none;
}


/* =============================================================
   TRACKER ICONS
   ============================================================= */

.customer-order-detail-sec
.card-body.p-4
.rounded-circle {
    position: relative;

    z-index: 2;

    width: 46px !important;
    height: 46px !important;

    border: 1.5px solid currentColor !important;

    background: var(--fm-white);

    font-family: var(--font-display);

    font-size: 0.7rem;

    font-weight: 800;
}

.customer-order-detail-sec
.card-body.p-4
.rounded-circle i {
    font-size: 0.85rem;
}


/* Completed tracker */

.customer-order-detail-sec
.card-body.p-4
.text-primary {
    color: var(--fm-red) !important;
}


/* Inactive tracker */

.customer-order-detail-sec
.card-body.p-4
.text-muted {
    color: var(--fm-grey-light) !important;
}


/* Current step */

.customer-order-detail-sec
.card-body.p-4
.rounded-circle
+ small.fw-semibold {
    color: var(--fm-red) !important;

    font-weight: 800 !important;
}

.customer-order-detail-sec
.card-body.p-4
small {
    font-size: 0.58rem;
}


/* =============================================================
   CANCELLED / RETURNED
   ============================================================= */

.customer-order-detail-sec
.card-body .rounded-circle.bg-danger {
    width: 46px !important;
    height: 46px !important;

    border: 0 !important;

    background: var(--fm-red) !important;

    color: var(--fm-white) !important;
}

.customer-order-detail-sec
.card-body .rounded-circle.bg-danger + div h2 {
    margin: 0;

    color: var(--fm-dark);

    font-size: 0.95rem;

    font-weight: 800;
}

.customer-order-detail-sec
.card-body .rounded-circle.bg-danger + div p {
    font-size: 0.62rem;

    line-height: 1.5;
}


/* =============================================================
   SECTION HEADINGS
   ============================================================= */

.customer-order-detail-sec .card-header h2,
.customer-order-detail-sec .card-body h2 {
    margin-bottom: 0;

    font-size: 1rem;
}


/* =============================================================
   ORDER ITEMS
   ============================================================= */

.customer-order-detail-sec
.card-body.p-0 > div.p-4 {
    padding: 23px 25px !important;

    border-top: 1px solid var(--fm-border) !important;

    transition:
        background 0.2s;
}

.customer-order-detail-sec
.card-body.p-0 > div.p-4:hover {
    background: rgba(192, 16, 42, 0.012);
}

.customer-order-detail-sec
.card-body.p-0 > div.p-4:first-child {
    border-top: 0 !important;
}


/* Product */

.customer-order-detail-sec
.card-body.p-0 h3 {
    margin-bottom: 6px;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.79rem;

    font-weight: 800;

    line-height: 1.35;
}

.customer-order-detail-sec
.card-body.p-0 .text-muted.small {
    color: var(--fm-grey-light) !important;

    font-size: 0.55rem;
}


/* Variant badge */

.customer-order-detail-sec
.card-body.p-0 .badge.bg-light {
    min-height: 25px;

    padding: 6px 9px !important;

    border: 1px solid var(--fm-border) !important;

    border-radius: 5px;

    background: var(--fm-offwhite) !important;

    color: var(--fm-grey) !important;

    font-size: 0.51rem;
}

.customer-order-detail-sec
.card-body.p-0 p.text-muted.small {
    max-width: 500px;

    margin-top: 8px !important;

    color: var(--fm-grey) !important;

    font-size: 0.59rem;

    line-height: 1.55;
}


/* Item labels */

.customer-order-detail-sec
.card-body.p-0
span.text-muted.small {
    display: block;

    color: var(--fm-grey-light) !important;

    font-size: 0.52rem;

    font-weight: 700;

    letter-spacing: 0.03em;
}


/* Item values */

.customer-order-detail-sec
.card-body.p-0
.row.g-4 strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.72rem;

    font-weight: 800;
}

.customer-order-detail-sec
.card-body.p-0
.row.g-4 .fs-5 {
    color: var(--fm-red) !important;

    font-size: 1rem !important;
}


/* =============================================================
   ADDRESS CARDS
   ============================================================= */

.customer-order-detail-sec
.row.g-4 > .col-lg-4
.card.h-100 {
    height: 100%;
}

.customer-order-detail-sec
.card.h-100 .card-header {
    padding: 19px 22px !important;
}

.customer-order-detail-sec
.card.h-100 .card-body {
    padding: 22px !important;
}

.customer-order-detail-sec
.card.h-100 .card-body > strong {
    display: block;

    margin-bottom: 2px;

    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.77rem;

    font-weight: 800;
}

.customer-order-detail-sec
.card.h-100 .card-body p {
    color: var(--fm-grey) !important;

    font-size: 0.61rem;

    line-height: 1.8;
}

.customer-order-detail-sec
.card.h-100 .card-body p i {
    color: var(--fm-red);
}


/* =============================================================
   ORDER SUMMARY CARD
   ============================================================= */

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card {
    background: var(--fm-dark);

    border-color: var(--fm-dark) !important;

    color: var(--fm-white);
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-header {
    background:
        linear-gradient(
            135deg,
            #211e1b,
            var(--fm-dark)
        ) !important;

    border-color: rgba(255,255,255,0.09) !important;
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-header h2 {
    color: var(--fm-white);
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-body {
    background: var(--fm-dark);
}


/* Summary rows */

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-body
.d-flex {
    min-height: 28px;

    gap: 15px;
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-body
.d-flex span {
    color: rgba(255,255,255,0.48) !important;

    font-size: 0.61rem;
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .card-body
.d-flex strong {
    color: var(--fm-white);

    font-family: var(--font-display);

    font-size: 0.68rem;

    font-weight: 800;
}

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .text-success {
    color: #73b886 !important;
}


/* Summary divider */

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card hr {
    margin: 16px 0;

    border: 0;

    border-top: 1px solid rgba(255,255,255,0.1);

    opacity: 1;
}


/* Grand total */

.customer-order-detail-sec
.row.g-4 > .col-lg-4:last-child
.card .fs-5 {
    color: var(--fm-white) !important;

    font-size: 1.45rem !important;

    letter-spacing: -0.03em;
}


/* =============================================================
   PAYMENT INFORMATION
   ============================================================= */

.customer-order-detail-sec
.container > .card.mt-4 {
    margin-top: 25px !important;
}

.customer-order-detail-sec
.container > .card.mt-4 .card-body {
    padding: 22px 25px !important;
}

.customer-order-detail-sec
.container > .card.mt-4
.text-muted.small {
    color: var(--fm-grey-light) !important;

    font-size: 0.54rem !important;

    letter-spacing: 0.04em;
}

.customer-order-detail-sec
.container > .card.mt-4
strong {
    color: var(--fm-dark);

    font-family: var(--font-display);

    font-size: 0.71rem;

    font-weight: 800;
}


/* =============================================================
   NOTES
   ============================================================= */

.customer-order-detail-sec
.container > .card.mt-4 + .card {
    margin-top: 15px !important;
}

.customer-order-detail-sec
.container > .card.mt-4 + .card .card-body {
    padding: 22px 25px !important;
}

.customer-order-detail-sec
.container > .card.mt-4 + .card p {
    color: var(--fm-grey) !important;

    font-size: 0.66rem;

    line-height: 1.7;
}


/* =============================================================
   BOTTOM ACTIONS
   ============================================================= */

.customer-order-detail-sec
.container > .d-flex.justify-content-between {
    margin-top: 25px !important;
}

.customer-order-detail-sec
.container > .d-flex.justify-content-between
.btn {
    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 17px;

    border-radius: 7px;

    font-size: 0.62rem;

    font-weight: 800;
}

.customer-order-detail-sec
.container > .d-flex.justify-content-between
.btn-primary {
    border-color: var(--fm-red);

    background: var(--fm-red);

    color: var(--fm-white);

    box-shadow:
        0 8px 22px rgba(192,16,42,0.16);

    transition:
        transform 0.25s var(--ease),
        background 0.25s,
        box-shadow 0.25s;
}

.customer-order-detail-sec
.container > .d-flex.justify-content-between
.btn-primary:hover {
    border-color: var(--fm-red-dark);

    background: var(--fm-red-dark);

    color: var(--fm-white);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(192,16,42,0.24);
}


/* =============================================================
   FOCUS
   ============================================================= */

.customer-order-detail-sec a:focus-visible,
.customer-order-detail-sec button:focus-visible {
    outline: 2px solid var(--fm-red);

    outline-offset: 3px;
}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 991px) {

    .customer-order-detail-sec {
        padding: 60px 0 85px;
    }

    .customer-order-detail-sec
    .card-body.p-4 {
        padding: 22px !important;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 767px) {

    .customer-order-detail-sec {
        padding: 48px 0 70px;
    }


    /* Header */

    .customer-order-detail-sec
    .container > .d-flex:first-child {
        align-items: flex-start !important;

        flex-direction: column;

        padding-bottom: 22px;

        margin-bottom: 30px !important;
    }

    .customer-order-detail-sec h1 {
        font-size: 2.7rem;
    }

    .customer-order-detail-sec
    .container > .d-flex:first-child
    > a {
        width: 100%;
    }


    /* Status */

    .customer-order-detail-sec
    .card-body.p-4 {
        padding: 19px !important;
    }


    /* Tracker */

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-3 {
        gap: 0 !important;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-3 > .col {
        padding: 10px 4px;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-3 > .col:not(:last-child)::after {
        left: calc(50% + 20px);

        width: calc(100% - 40px);

        top: 31px;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .customer-order-detail-sec
    .card-body.p-4
    small {
        font-size: 0.51rem;
    }


    /* Items */

    .customer-order-detail-sec
    .card-body.p-0 > div.p-4 {
        padding: 19px !important;
    }

    .customer-order-detail-sec
    .card-body.p-0
    .row.g-4 {
        row-gap: 18px !important;
    }


    /* Address */

    .customer-order-detail-sec
    .card.h-100
    .card-header {
        padding: 17px 19px !important;
    }

    .customer-order-detail-sec
    .card.h-100
    .card-body {
        padding: 19px !important;
    }


    /* Bottom buttons */

    .customer-order-detail-sec
    .container > .d-flex.justify-content-between {
        flex-direction: column;

        align-items: stretch !important;
    }

    .customer-order-detail-sec
    .container > .d-flex.justify-content-between
    .btn {
        width: 100%;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .customer-order-detail-sec {
        padding: 40px 0 60px;
    }

    .customer-order-detail-sec h1 {
        font-size: 2.3rem;
    }

    .customer-order-detail-sec
    .container > .d-flex:first-child p {
        font-size: 0.61rem;
    }


    /* Status */

    .customer-order-detail-sec
    .card-body.p-4 {
        padding: 16px !important;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-4 {
        row-gap: 19px !important;
    }


    /* Tracker */

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-3 > .col {
        padding-left: 1px;
        padding-right: 1px;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .rounded-circle {
        width: 36px !important;
        height: 36px !important;
    }

    .customer-order-detail-sec
    .card-body.p-4
    .row.g-3 > .col:not(:last-child)::after {
        left: calc(50% + 18px);

        width: calc(100% - 36px);

        top: 28px;
    }

    .customer-order-detail-sec
    .card-body.p-4
    small {
        font-size: 0.45rem;
    }


    /* Product */

    .customer-order-detail-sec
    .card-body.p-0 > div.p-4 {
        padding: 16px !important;
    }

    .customer-order-detail-sec
    .card-body.p-0
    .row.g-4 strong {
        font-size: 0.67rem;
    }


    /* Summary */

    .customer-order-detail-sec
    .row.g-4 > .col-lg-4:last-child
    .card .fs-5 {
        font-size: 1.3rem !important;
    }


    /* Payment */

    .customer-order-detail-sec
    .container > .card.mt-4
    .card-body {
        padding: 18px !important;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-order-detail-sec *,
    .customer-order-detail-sec *::before,
    .customer-order-detail-sec *::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}



/* =============================================================
   FM ELEVATOR
   PREMIUM CUSTOMER ACCOUNT DASHBOARD
   ============================================================= */


/* =============================================================
   ROOT / PAGE
   ============================================================= */

.customer-account-page {
    --account-red: var(--fm-red, #c0102a);
    --account-red-dark: var(--fm-red-dark, #980d21);
    --account-dark: var(--fm-dark, #181512);
    --account-white: var(--fm-white, #ffffff);
    --account-offwhite: var(--fm-offwhite, #f7f5f2);
    --account-grey: var(--fm-grey, #77716b);
    --account-muted: var(--fm-grey-light, #aaa39b);
    --account-border: var(--fm-border, #e8e4df);

    position: relative;

    min-height: 100vh;

    padding: 72px 0 110px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 0%,
            rgba(192, 16, 42, 0.055),
            transparent 26%
        ),
        radial-gradient(
            circle at 0% 75%,
            rgba(20, 17, 15, 0.025),
            transparent 25%
        ),
        var(--account-offwhite);
}


/* subtle background detail */

.customer-account-page::before {
    content: "";

    position: absolute;

    top: 0;
    right: -140px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 1px solid rgba(192, 16, 42, 0.045);

    pointer-events: none;
}

.customer-account-page::after {
    content: "";

    position: absolute;

    left: -180px;
    bottom: 140px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border: 1px solid rgba(20, 17, 15, 0.035);

    pointer-events: none;
}


.customer-account-page .container {
    position: relative;

    z-index: 2;
}


/* =============================================================
   ACCOUNT HERO
   ============================================================= */

.account-hero {
    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 34px;

    margin-bottom: 30px;

    border-bottom: 1px solid var(--account-border);
}


/* red line */

.account-hero::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 72px;
    height: 2px;

    background: var(--account-red);
}


/* =============================================================
   HERO CONTENT
   ============================================================= */

.account-hero-content {
    max-width: 760px;
}


.account-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 11px;

    color: var(--account-red);

    font-size: 0.57rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    line-height: 1;

    text-transform: uppercase;
}


.account-eyebrow::before {
    content: "";

    display: block;

    width: 24px;
    height: 1px;

    background: var(--account-red);
}


.account-hero h1 {
    margin: 0;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: clamp(
        2.55rem,
        5vw,
        4.5rem
    );

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.065em;
}


.account-hero h1 span {
    color: var(--account-red);
}


.account-hero-content p {
    max-width: 600px;

    margin: 15px 0 0;

    color: var(--account-grey);

    font-size: 0.7rem;

    line-height: 1.75;
}


/* =============================================================
   LOGOUT BUTTON
   ============================================================= */

.account-logout-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 116px;

    height: 44px;

    padding: 0 17px;

    border: 1px solid rgba(192, 16, 42, 0.2);

    border-radius: 7px;

    background: var(--account-white);

    color: var(--account-red);

    font-size: 0.59rem;

    font-weight: 850;

    letter-spacing: 0.02em;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.account-logout-btn i {
    font-size: 0.78rem;

    transition:
        transform 0.25s ease;
}


.account-logout-btn:hover {
    border-color: var(--account-red);

    background: var(--account-red);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(192, 16, 42, 0.16);
}


.account-logout-btn:hover i {
    transform: translateX(2px);
}


/* =============================================================
   SUCCESS ALERT
   ============================================================= */

.account-alert {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 62px;

    padding: 12px 48px 12px 14px;

    margin-bottom: 28px;

    border-radius: 9px;
}


.account-alert-success {
    border: 1px solid rgba(43, 126, 69, 0.14);

    background:
        linear-gradient(
            135deg,
            rgba(43, 126, 69, 0.065),
            rgba(43, 126, 69, 0.025)
        );
}


.account-alert-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: rgba(43, 126, 69, 0.1);

    color: #287642;

    font-size: 0.78rem;
}


.account-alert strong {
    display: block;

    margin-bottom: 2px;

    color: var(--account-dark);

    font-size: 0.65rem;

    font-weight: 850;
}


.account-alert p {
    margin: 0;

    color: var(--account-grey);

    font-size: 0.6rem;
}


.account-alert-close {
    position: absolute;

    top: 50%;
    right: 13px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--account-muted);

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


.account-alert-close:hover {
    border-radius: 5px;

    background: rgba(0, 0, 0, 0.04);

    color: var(--account-dark);
}


/* =============================================================
   MAIN DASHBOARD GRID
   ============================================================= */

.account-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(245px, 0.72fr)
        minmax(0, 2fr);

    gap: 24px;

    align-items: start;
}


/* =============================================================
   PROFILE PANEL
   ============================================================= */

.account-profile-panel {
    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #211e1b 0%,
            #171411 100%
        );

    color: #fff;

    box-shadow:
        0 22px 55px rgba(20, 17, 15, 0.12);
}


/* decorative red glow */

.account-profile-panel::before {
    content: "";

    position: absolute;

    top: -110px;
    right: -100px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 16, 42, 0.22),
            transparent 68%
        );

    pointer-events: none;
}


.account-profile-panel::after {
    content: "";

    position: absolute;

    left: 25px;
    bottom: 0;

    width: 55px;
    height: 2px;

    background: var(--account-red);
}


/* =============================================================
   PROFILE TOP
   ============================================================= */

.account-profile-top {
    position: relative;

    z-index: 2;

    padding: 30px 27px 27px;

    text-align: center;
}


.account-profile-label {
    display: block;

    margin-bottom: 25px;

    color: rgba(255,255,255,0.42);

    font-size: 0.51rem;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


/* =============================================================
   AVATAR
   ============================================================= */

.account-avatar {
    position: relative;

    width: 105px;
    height: 105px;

    margin: 0 auto 19px;

    border-radius: 50%;

    padding: 4px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.35),
            rgba(255,255,255,0.06)
        );
}


.account-avatar img,
.account-avatar-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 50%;
}


.account-avatar img {
    display: block;

    object-fit: cover;

    border: 2px solid #201d1a;
}


.account-avatar-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #332e2a,
            #24201d
        );

    color: rgba(255,255,255,0.65);

    font-size: 2rem;
}


.account-avatar-status {
    position: absolute;

    right: 5px;
    bottom: 7px;

    width: 15px;
    height: 15px;

    border: 3px solid #1b1815;

    border-radius: 50%;

    background: #49a763;
}


/* =============================================================
   PROFILE NAME
   ============================================================= */

.account-profile-top h2 {
    margin: 0;

    color: #fff;

    font-family: var(--font-display, inherit);

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.025em;
}


.account-profile-email {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 9px 0 17px;

    color: rgba(255,255,255,0.46);

    font-size: 0.56rem;

    line-height: 1.5;

    word-break: break-all;
}


.account-profile-email i {
    color: var(--account-red);

    font-size: 0.65rem;

    flex-shrink: 0;
}


/* =============================================================
   PROFILE STATUS
   ============================================================= */

.account-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 5px;

    font-size: 0.5rem;

    font-weight: 800;

    letter-spacing: 0.02em;
}


.account-status.active {
    border: 1px solid rgba(83, 174, 107, 0.17);

    background: rgba(83, 174, 107, 0.08);

    color: #76bf87;
}


.account-status.inactive {
    border: 1px solid rgba(192, 16, 42, 0.18);

    background: rgba(192, 16, 42, 0.08);

    color: #e07989;
}


.account-status-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;
}


/* =============================================================
   PROFILE META
   ============================================================= */

.account-profile-meta {
    position: relative;

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid rgba(255,255,255,0.07);

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.account-meta-item {
    padding: 17px 19px;
}


.account-meta-item + .account-meta-item {
    border-left: 1px solid rgba(255,255,255,0.07);
}


.account-meta-item span {
    display: block;

    margin-bottom: 6px;

    color: rgba(255,255,255,0.34);

    font-size: 0.47rem;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


.account-meta-item strong {
    display: block;

    color: rgba(255,255,255,0.9);

    font-family: var(--font-display, inherit);

    font-size: 0.61rem;

    font-weight: 800;
}


/* =============================================================
   PROFILE ACTION
   ============================================================= */

.account-profile-action {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 22px;

    color: #fff;

    text-decoration: none;

    font-size: 0.58rem;

    font-weight: 800;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.account-profile-action:hover {
    background: var(--account-red);

    color: #fff;
}


.account-profile-action i {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;
    height: 27px;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 5px;

    font-size: 0.65rem;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.account-profile-action:hover i {
    border-color: transparent;

    background: rgba(255,255,255,0.12);

    transform: translate(2px, -2px);
}


/* =============================================================
   MAIN CONTENT
   ============================================================= */

.account-main-content {
    min-width: 0;
}


/* =============================================================
   SECTION HEADING
   ============================================================= */

.account-section-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 16px;
}


.account-section-heading > div > span {
    display: block;

    margin-bottom: 6px;

    color: var(--account-red);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.account-section-heading h2 {
    margin: 0;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: 1.45rem;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.035em;
}


/* =============================================================
   ACCOUNT INFO GRID
   ============================================================= */

.account-info-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 38px;
}


.account-info-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

    min-height: 87px;

    padding: 17px 18px;

    border: 1px solid var(--account-border);

    border-radius: 10px;

    background: var(--account-white);

    box-shadow:
        0 8px 25px rgba(20, 17, 15, 0.025);

    transition:
        transform 0.3s ease,
        border-color 0.25s ease,
        box-shadow 0.3s ease;
}


.account-info-card:hover {
    border-color: rgba(192, 16, 42, 0.17);

    box-shadow:
        0 14px 32px rgba(20, 17, 15, 0.055);

    transform: translateY(-3px);
}


/* =============================================================
   INFO ICON
   ============================================================= */

.account-info-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    border: 1px solid rgba(192, 16, 42, 0.11);

    border-radius: 8px;

    background: rgba(192, 16, 42, 0.045);

    color: var(--account-red);

    font-size: 0.88rem;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}


.account-info-card:hover .account-info-icon {
    background: var(--account-red);

    color: #fff;
}


.account-info-card > div:last-child {
    min-width: 0;
}


.account-info-card span {
    display: block;

    margin-bottom: 5px;

    color: var(--account-muted);

    font-size: 0.5rem;

    font-weight: 750;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.account-info-card strong {
    display: block;

    overflow: hidden;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: 0.67rem;

    font-weight: 800;

    line-height: 1.4;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.account-info-card strong.status-good {
    color: #32804b;
}


.account-info-card strong.status-bad {
    color: var(--account-red);
}


/* =============================================================
   QUICK ACTION HEADING
   ============================================================= */

.account-actions-heading {
    margin-bottom: 16px;
}


/* =============================================================
   ACTIONS GRID
   ============================================================= */

.account-actions-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 38px;
}


/* =============================================================
   ACTION CARD
   ============================================================= */

.account-action-card {
    position: relative;

    display: block;

    min-height: 205px;

    overflow: hidden;

    padding: 24px;

    border: 1px solid var(--account-border);

    border-radius: 11px;

    background: var(--account-white);

    color: var(--account-dark);

    text-decoration: none;

    box-shadow:
        0 8px 25px rgba(20, 17, 15, 0.025);

    transition:
        transform 0.35s ease,
        border-color 0.25s ease,
        box-shadow 0.35s ease;
}


.account-action-card:hover {
    border-color: rgba(192, 16, 42, 0.2);

    color: var(--account-dark);

    box-shadow:
        0 18px 40px rgba(20, 17, 15, 0.075);

    transform: translateY(-5px);
}


/* =============================================================
   ACTION NUMBER
   ============================================================= */

.account-action-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color: rgba(20,17,15,0.1);

    font-family: var(--font-display, inherit);

    font-size: 1.8rem;

    font-weight: 900;

    line-height: 1;

    transition:
        color 0.3s ease;
}


.account-action-card:hover .account-action-number {
    color: rgba(192, 16, 42, 0.13);
}


/* =============================================================
   ACTION ICON
   ============================================================= */

.account-action-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 22px;

    border: 1px solid rgba(192, 16, 42, 0.12);

    border-radius: 9px;

    background: rgba(192, 16, 42, 0.045);

    color: var(--account-red);

    font-size: 1.15rem;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.account-action-card:hover .account-action-icon {
    background: var(--account-red);

    color: #fff;

    transform: translateY(-2px);
}


/* =============================================================
   ACTION CONTENT
   ============================================================= */

.account-action-content {
    max-width: 80%;
}


.account-action-content h3 {
    margin: 0 0 8px;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: 0.94rem;

    font-weight: 800;

    letter-spacing: -0.02em;
}


.account-action-content p {
    margin: 0;

    color: var(--account-grey);

    font-size: 0.6rem;

    line-height: 1.7;
}


/* =============================================================
   ACTION ARROW
   ============================================================= */

.account-action-arrow {
    position: absolute;

    right: 21px;
    bottom: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 31px;
    height: 31px;

    border: 1px solid var(--account-border);

    border-radius: 6px;

    color: var(--account-grey);

    font-size: 0.68rem;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.3s ease;
}


.account-action-card:hover .account-action-arrow {
    border-color: var(--account-red);

    background: var(--account-red);

    color: #fff;

    transform: translate(2px, -2px);
}


/* =============================================================
   PRIMARY ACTION CARD
   ============================================================= */

.account-action-primary {
    border-color: var(--account-dark);

    background:
        linear-gradient(
            145deg,
            #211e1b,
            #171411
        );

    color: #fff;

    box-shadow:
        0 15px 38px rgba(20, 17, 15, 0.12);
}


.account-action-primary:hover {
    border-color: var(--account-red);

    color: #fff;

    box-shadow:
        0 22px 48px rgba(20, 17, 15, 0.18);
}


.account-action-primary .account-action-number {
    color: rgba(255,255,255,0.08);
}


.account-action-primary:hover .account-action-number {
    color: rgba(192,16,42,0.2);
}


.account-action-primary .account-action-icon {
    border-color: rgba(255,255,255,0.1);

    background: rgba(255,255,255,0.055);

    color: #fff;
}


.account-action-primary:hover .account-action-icon {
    border-color: var(--account-red);

    background: var(--account-red);

    color: #fff;
}


.account-action-primary .account-action-content h3 {
    color: #fff;
}


.account-action-primary .account-action-content p {
    color: rgba(255,255,255,0.48);
}


.account-action-primary .account-action-arrow {
    border-color: rgba(255,255,255,0.12);

    color: rgba(255,255,255,0.6);
}


.account-action-primary:hover .account-action-arrow {
    border-color: var(--account-red);

    background: var(--account-red);

    color: #fff;
}


/* =============================================================
   RECENT ORDERS CARD
   ============================================================= */

.account-orders-card {
    overflow: hidden;

    border: 1px solid var(--account-border);

    border-radius: 12px;

    background: var(--account-white);

    box-shadow:
        0 12px 35px rgba(20, 17, 15, 0.035);
}


/* =============================================================
   ORDERS HEADER
   ============================================================= */

.account-orders-header {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 23px 24px;

    border-bottom: 1px solid var(--account-border);

    background:
        linear-gradient(
            135deg,
            #fff,
            #faf8f5
        );
}


.account-orders-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 3px;

    background: var(--account-red);
}


.account-orders-header > div > span {
    display: block;

    margin-bottom: 6px;

    color: var(--account-red);

    font-size: 0.48rem;

    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.account-orders-header h2 {
    margin: 0;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: 1.15rem;

    font-weight: 800;

    letter-spacing: -0.025em;
}


.account-orders-header h2 strong {
    color: var(--account-red);

    font-weight: 800;
}


.account-orders-header p {
    margin: 6px 0 0;

    color: var(--account-muted);

    font-size: 0.56rem;
}


/* =============================================================
   VIEW ALL
   ============================================================= */

.account-view-orders {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 9px 12px;

    border: 1px solid var(--account-border);

    border-radius: 6px;

    background: #fff;

    color: var(--account-dark);

    font-size: 0.53rem;

    font-weight: 800;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.account-view-orders i {
    color: var(--account-red);

    transition:
        transform 0.25s ease;
}


.account-view-orders:hover {
    border-color: var(--account-red);

    background: var(--account-red);

    color: #fff;

    transform: translateY(-1px);
}


.account-view-orders:hover i {
    color: #fff;

    transform: translateX(3px);
}


/* =============================================================
   EMPTY ORDERS
   ============================================================= */

.account-orders-empty {
    position: relative;

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 19px;

    padding: 28px 24px;
}


/* =============================================================
   EMPTY ICON
   ============================================================= */

.account-empty-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid var(--account-border);

    border-radius: 9px;

    background: var(--account-offwhite);

    color: var(--account-muted);

    font-size: 1.15rem;
}


.account-empty-content {
    min-width: 0;
}


.account-empty-content h3 {
    margin: 0 0 5px;

    color: var(--account-dark);

    font-family: var(--font-display, inherit);

    font-size: 0.8rem;

    font-weight: 800;
}


.account-empty-content p {
    max-width: 520px;

    margin: 0;

    color: var(--account-grey);

    font-size: 0.57rem;

    line-height: 1.65;
}


/* =============================================================
   SHOP BUTTON
   ============================================================= */

.account-shop-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 40px;

    padding: 0 14px;

    border-radius: 6px;

    background: var(--account-red);

    color: #fff;

    font-size: 0.55rem;

    font-weight: 850;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 7px 18px rgba(192,16,42,0.14);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.account-shop-btn i {
    transition:
        transform 0.25s ease;
}


.account-shop-btn:hover {
    background: var(--account-red-dark);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 11px 24px rgba(192,16,42,0.21);
}


.account-shop-btn:hover i {
    transform: translateX(3px);
}


/* =============================================================
   LINKS / ACCESSIBILITY
   ============================================================= */

.customer-account-page a:focus-visible,
.customer-account-page button:focus-visible {
    outline: 2px solid var(--account-red);

    outline-offset: 3px;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

    .customer-account-page .container {
        max-width: 1320px;
    }

    .account-dashboard-grid {
        grid-template-columns:
            285px
            minmax(0, 1fr);

        gap: 28px;
    }

    .account-profile-top {
        padding: 34px 30px 29px;
    }

    .account-action-card {
        min-height: 215px;

        padding: 27px;
    }

}


/* =============================================================
   TABLET / SMALL LAPTOP
   ============================================================= */

@media (max-width: 1100px) {

    .customer-account-page {
        padding-top: 60px;
    }

    .account-dashboard-grid {
        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 18px;
    }

    .account-profile-top {
        padding-left: 20px;
        padding-right: 20px;
    }

    .account-meta-item {
        padding-left: 14px;
        padding-right: 14px;
    }

    .account-orders-empty {
        grid-template-columns:
            auto
            1fr;
    }

    .account-shop-btn {
        grid-column: 2;

        justify-self: start;
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 900px) {

    .customer-account-page {
        padding: 55px 0 85px;
    }

    .account-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .account-profile-panel {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.7fr);

        align-items: stretch;
    }

    .account-profile-top {
        padding: 28px;
    }

    .account-profile-meta {
        border-top: 0;

        border-left: 1px solid rgba(255,255,255,0.07);

        border-bottom: 0;

        align-content: center;
    }

    .account-profile-action {
        grid-column: 1 / -1;

        border-top: 1px solid rgba(255,255,255,0.07);
    }

    .account-avatar {
        margin-bottom: 14px;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 767px) {

    .customer-account-page {
        padding: 42px 0 65px;
    }


    /* HERO */

    .account-hero {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

        padding-bottom: 24px;

        margin-bottom: 22px;
    }

    .account-hero h1 {
        font-size: 2.65rem;

        line-height: 1;
    }

    .account-hero-content p {
        margin-top: 11px;

        font-size: 0.63rem;
    }

    .account-logout-btn {
        width: 100%;
    }


    /* ALERT */

    .account-alert {
        align-items: flex-start;

        padding-right: 42px;
    }


    /* PROFILE */

    .account-profile-panel {
        display: block;
    }

    .account-profile-top {
        padding: 28px 20px 25px;
    }

    .account-profile-meta {
        border-top: 1px solid rgba(255,255,255,0.07);

        border-left: 0;
    }

    .account-meta-item {
        padding: 15px;
    }


    /* SECTION HEADINGS */

    .account-section-heading h2 {
        font-size: 1.25rem;
    }


    /* INFO */

    .account-info-grid {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 34px;
    }

    .account-info-card {
        min-height: 80px;

        padding: 15px;
    }


    /* ACTIONS */

    .account-actions-grid {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 34px;
    }

    .account-action-card {
        min-height: 175px;

        padding: 21px;
    }

    .account-action-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 17px;
    }


    /* ORDERS */

    .account-orders-header {
        align-items: flex-start;

        flex-direction: column;

        padding: 20px;
    }

    .account-view-orders {
        width: 100%;
    }

    .account-orders-empty {
        display: flex;

        align-items: flex-start;

        flex-direction: column;

        padding: 24px 20px;
    }

    .account-empty-content p {
        max-width: none;
    }

    .account-shop-btn {
        width: 100%;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .customer-account-page {
        padding: 35px 0 55px;
    }


    .account-hero h1 {
        font-size: 2.2rem;
    }

    .account-hero-content p {
        font-size: 0.59rem;
    }


    .account-eyebrow {
        font-size: 0.5rem;
    }


    .account-profile-top {
        padding: 25px 17px 22px;
    }

    .account-avatar {
        width: 92px;
        height: 92px;
    }

    .account-profile-top h2 {
        font-size: 1.05rem;
    }

    .account-profile-email {
        font-size: 0.52rem;
    }


    .account-section-heading {
        margin-bottom: 13px;
    }

    .account-section-heading h2 {
        font-size: 1.1rem;
    }


    .account-info-card {
        gap: 11px;

        min-height: 73px;

        padding: 13px;
    }

    .account-info-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 0.78rem;
    }

    .account-info-card span {
        font-size: 0.46rem;
    }

    .account-info-card strong {
        font-size: 0.6rem;
    }


    .account-action-card {
        min-height: 165px;

        padding: 19px;
    }

    .account-action-number {
        top: 16px;
        right: 16px;

        font-size: 1.5rem;
    }

    .account-action-content h3 {
        font-size: 0.86rem;
    }

    .account-action-content p {
        font-size: 0.56rem;
    }


    .account-orders-header {
        padding: 18px;
    }

    .account-orders-header h2 {
        font-size: 1rem;
    }

    .account-orders-empty {
        padding: 22px 18px;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-account-page *,
    .customer-account-page *::before,
    .customer-account-page *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;
    }

}





/* =============================================================
   FM ELEVATOR
   PREMIUM CUSTOMER PROFILE PAGE
   ============================================================= */


/* =============================================================
   PAGE ROOT
   ============================================================= */

.customer-profile-page {
    --profile-red: var(--fm-red, #c0102a);
    --profile-red-dark: var(--fm-red-dark, #980d21);
    --profile-dark: var(--fm-dark, #181512);
    --profile-dark-2: #211e1b;
    --profile-white: #ffffff;
    --profile-bg: var(--fm-offwhite, #f7f5f2);
    --profile-text: #25211e;
    --profile-grey: #77716b;
    --profile-muted: #aaa39b;
    --profile-border: #e7e2dc;

    position: relative;

    min-height: 100vh;

    padding: 70px 0 110px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(192, 16, 42, 0.055),
            transparent 27%
        ),
        radial-gradient(
            circle at 0% 65%,
            rgba(24, 21, 18, 0.025),
            transparent 26%
        ),
        var(--profile-bg);
}


.customer-profile-page::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 470px;
    height: 470px;

    border: 1px solid rgba(192, 16, 42, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


.customer-profile-page::after {
    content: "";

    position: absolute;

    left: -200px;
    bottom: 80px;

    width: 450px;
    height: 450px;

    border: 1px solid rgba(24, 21, 18, 0.035);

    border-radius: 50%;

    pointer-events: none;
}


.customer-profile-page .container {
    position: relative;

    z-index: 2;
}


/* =============================================================
   PAGE HERO
   ============================================================= */

.profile-page-hero {
    position: relative;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 32px;

    margin-bottom: 28px;

    border-bottom: 1px solid var(--profile-border);
}


.profile-page-hero::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 70px;
    height: 2px;

    background: var(--profile-red);
}


.profile-page-hero-content {
    max-width: 760px;
}


.profile-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: var(--profile-red);

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.profile-eyebrow::before {
    content: "";

    width: 24px;
    height: 1px;

    background: var(--profile-red);
}


.profile-page-hero h1 {
    margin: 0;

    color: var(--profile-dark);

    font-family: var(--font-display, inherit);

    font-size: clamp(
        2.7rem,
        5vw,
        4.4rem
    );

    font-weight: 850;

    line-height: 0.96;

    letter-spacing: -0.065em;
}


.profile-page-hero h1 span {
    color: var(--profile-red);
}


.profile-page-hero-content p {
    max-width: 620px;

    margin: 15px 0 0;

    color: var(--profile-grey);

    font-size: 0.68rem;

    line-height: 1.75;
}


/* =============================================================
   BACK BUTTON
   ============================================================= */

.profile-back-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding: 0 16px;

    border: 1px solid var(--profile-border);

    border-radius: 7px;

    background: var(--profile-white);

    color: var(--profile-dark);

    font-size: 0.57rem;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.profile-back-btn i {
    color: var(--profile-red);

    transition:
        transform 0.25s ease;
}


.profile-back-btn:hover {
    border-color: var(--profile-red);

    background: var(--profile-red);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(192, 16, 42, 0.14);
}


.profile-back-btn:hover i {
    color: #fff;

    transform: translateX(-3px);
}


/* =============================================================
   ALERTS
   ============================================================= */

.profile-alert {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 14px 45px 14px 14px;

    margin-bottom: 24px;

    border-radius: 9px;
}


.profile-alert-success {
    border: 1px solid rgba(52, 133, 74, 0.15);

    background:
        linear-gradient(
            135deg,
            rgba(52, 133, 74, 0.065),
            rgba(52, 133, 74, 0.025)
        );
}


.profile-alert-error {
    border: 1px solid rgba(192, 16, 42, 0.14);

    background:
        linear-gradient(
            135deg,
            rgba(192, 16, 42, 0.06),
            rgba(192, 16, 42, 0.025)
        );
}


.profile-alert-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    font-size: 0.75rem;
}


.profile-alert-success .profile-alert-icon {
    background: rgba(52, 133, 74, 0.1);

    color: #34854a;
}


.profile-alert-error .profile-alert-icon {
    background: rgba(192, 16, 42, 0.09);

    color: var(--profile-red);
}


.profile-alert strong {
    display: block;

    margin-bottom: 3px;

    color: var(--profile-dark);

    font-size: 0.62rem;

    font-weight: 850;
}


.profile-alert p {
    margin: 0;

    color: var(--profile-grey);

    font-size: 0.58rem;

    line-height: 1.6;
}


.profile-alert ul {
    margin: 4px 0 0;

    padding-left: 15px;

    color: var(--profile-grey);

    font-size: 0.57rem;

    line-height: 1.65;
}


.profile-alert-close {
    position: absolute;

    top: 50%;
    right: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;

    border-radius: 5px;

    background: transparent;

    color: var(--profile-muted);

    transform: translateY(-50%);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.profile-alert-close:hover {
    background: rgba(0,0,0,0.045);

    color: var(--profile-dark);
}


/* =============================================================
   MAIN PROFILE LAYOUT
   ============================================================= */

.profile-layout {
    display: grid;

    grid-template-columns:
        minmax(250px, 0.7fr)
        minmax(0, 2fr);

    gap: 24px;

    align-items: start;
}


/* =============================================================
   PROFILE SIDEBAR
   ============================================================= */

.profile-sidebar {
    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--profile-dark-2),
            #151210
        );

    box-shadow:
        0 24px 55px rgba(20, 17, 15, 0.13);

    color: #fff;
}


.profile-sidebar::before {
    content: "";

    position: absolute;

    top: -120px;
    right: -100px;

    width: 290px;
    height: 290px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192,16,42,0.23),
            transparent 68%
        );

    pointer-events: none;
}


.profile-sidebar::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 25px;

    width: 55px;
    height: 2px;

    background: var(--profile-red);
}


/* =============================================================
   SIDEBAR INNER
   ============================================================= */

.profile-sidebar-inner {
    position: relative;

    z-index: 2;

    padding: 30px 25px 28px;

    text-align: center;
}


.profile-sidebar-label {
    display: block;

    margin-bottom: 25px;

    color: rgba(255,255,255,0.38);

    font-size: 0.5rem;

    font-weight: 850;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* =============================================================
   PROFILE AVATAR
   ============================================================= */

.profile-avatar {
    position: relative;

    width: 112px;
    height: 112px;

    margin: 0 auto 18px;

    padding: 4px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.38),
            rgba(255,255,255,0.05)
        );
}


.profile-avatar img,
.profile-avatar-placeholder {
    width: 100%;
    height: 100%;

    border-radius: 50%;
}


.profile-avatar img {
    display: block;

    object-fit: cover;

    border: 2px solid #201d1a;
}


.profile-avatar-placeholder {
    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #37312c,
            #24201d
        );

    color: rgba(255,255,255,0.62);

    font-size: 2.2rem;
}


.profile-avatar-status {
    position: absolute;

    right: 5px;
    bottom: 7px;

    width: 16px;
    height: 16px;

    border: 3px solid #1b1815;

    border-radius: 50%;

    background: #4da967;
}


/* =============================================================
   SIDEBAR NAME
   ============================================================= */

.profile-sidebar-inner h2 {
    margin: 0;

    color: #fff;

    font-family: var(--font-display, inherit);

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.025em;
}


.profile-sidebar-email {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin: 9px 0 17px;

    color: rgba(255,255,255,0.44);

    font-size: 0.55rem;

    line-height: 1.5;

    word-break: break-word;
}


.profile-sidebar-email i {
    flex-shrink: 0;

    color: var(--profile-red);

    font-size: 0.65rem;
}


/* =============================================================
   ACCOUNT STATUS
   ============================================================= */

.profile-account-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 5px;

    font-size: 0.49rem;

    font-weight: 800;
}


.profile-account-status > span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: currentColor;
}


.profile-account-status.active {
    border: 1px solid rgba(76,169,103,0.18);

    background: rgba(76,169,103,0.08);

    color: #79c28b;
}


.profile-account-status.inactive {
    border: 1px solid rgba(192,16,42,0.2);

    background: rgba(192,16,42,0.09);

    color: #e47b8b;
}


/* =============================================================
   SIDEBAR DETAILS
   ============================================================= */

.profile-sidebar-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid rgba(255,255,255,0.07);

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.profile-sidebar-detail {
    min-width: 0;

    padding: 17px 16px;
}


.profile-sidebar-detail + .profile-sidebar-detail {
    border-left: 1px solid rgba(255,255,255,0.07);
}


.profile-sidebar-detail span {
    display: block;

    margin-bottom: 6px;

    color: rgba(255,255,255,0.32);

    font-size: 0.46rem;

    font-weight: 750;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.profile-sidebar-detail strong {
    display: block;

    overflow: hidden;

    color: rgba(255,255,255,0.9);

    font-family: var(--font-display, inherit);

    font-size: 0.58rem;

    font-weight: 800;

    line-height: 1.4;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =============================================================
   SECURITY INDICATOR
   ============================================================= */

.profile-security-indicator {
    display: flex;

    align-items: center;

    gap: 11px;

    padding: 17px 20px;
}


.profile-security-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 7px;

    background: rgba(255,255,255,0.035);

    color: #aaa;

    font-size: 0.72rem;
}


.profile-security-indicator strong {
    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,0.8);

    font-size: 0.55rem;

    font-weight: 800;
}


.profile-security-indicator span {
    display: block;

    color: rgba(255,255,255,0.32);

    font-size: 0.48rem;

    line-height: 1.5;
}


/* =============================================================
   MAIN CONTENT
   ============================================================= */

.profile-main {
    min-width: 0;
}


/* =============================================================
   FORM CARD
   ============================================================= */

.profile-form-card {
    overflow: hidden;

    border: 1px solid var(--profile-border);

    border-radius: 13px;

    background: var(--profile-white);

    box-shadow:
        0 12px 35px rgba(20,17,15,0.035);
}


/* =============================================================
   FORM HEADER
   ============================================================= */

.profile-form-header {
    padding: 23px 25px;

    border-bottom: 1px solid var(--profile-border);

    background:
        linear-gradient(
            135deg,
            #fff,
            #faf8f5
        );
}


.profile-form-heading {
    display: flex;

    align-items: center;

    gap: 14px;
}


.profile-heading-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(192,16,42,0.12);

    border-radius: 9px;

    background: rgba(192,16,42,0.05);

    color: var(--profile-red);

    font-size: 1rem;
}


.profile-heading-icon.dark {
    border-color: rgba(24,21,18,0.1);

    background: rgba(24,21,18,0.05);

    color: var(--profile-dark);
}


.profile-form-heading > div:last-child {
    min-width: 0;
}


.profile-form-heading > div:last-child > span {
    display: block;

    margin-bottom: 5px;

    color: var(--profile-red);

    font-size: 0.47rem;

    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.profile-form-heading h2 {
    margin: 0;

    color: var(--profile-dark);

    font-family: var(--font-display, inherit);

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.025em;
}


.profile-form-heading p {
    margin: 5px 0 0;

    color: var(--profile-muted);

    font-size: 0.56rem;

    line-height: 1.5;
}


/* =============================================================
   FORM BODY
   ============================================================= */

.profile-form-body {
    padding: 25px;
}


/* =============================================================
   FORM GRID
   ============================================================= */

.profile-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 15px;
}


.profile-field {
    min-width: 0;
}


.profile-field-full {
    grid-column: 1 / -1;
}


/* =============================================================
   LABELS
   ============================================================= */

.profile-field label {
    display: block;

    margin: 0 0 7px;

    color: var(--profile-text);

    font-size: 0.57rem;

    font-weight: 800;

    line-height: 1.4;
}


.profile-field label span {
    color: var(--profile-red);

    margin-left: 2px;
}


/* =============================================================
   INPUT WRAPPER
   ============================================================= */

.profile-input-wrap {
    position: relative;

    display: flex;

    align-items: center;
}


.profile-input-wrap > i {
    position: absolute;

    left: 14px;

    z-index: 2;

    color: var(--profile-muted);

    font-size: 0.72rem;

    pointer-events: none;

    transition:
        color 0.25s ease;
}


/* =============================================================
   INPUTS
   ============================================================= */

.profile-input-wrap input,
.profile-input-wrap textarea {
    width: 100%;

    border: 1px solid var(--profile-border);

    border-radius: 7px;

    outline: none;

    background: #fbfaf8;

    color: var(--profile-dark);

    font-family: inherit;

    font-size: 0.62rem;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.profile-input-wrap input {
    height: 46px;

    padding: 0 13px 0 38px;
}


.profile-input-wrap textarea {
    min-height: 105px;

    padding: 13px 13px 13px 38px;

    resize: vertical;

    line-height: 1.6;
}


.profile-input-wrap input::placeholder,
.profile-input-wrap textarea::placeholder {
    color: #b5aea7;
}


.profile-input-wrap input:hover,
.profile-input-wrap textarea:hover {
    border-color: #d9d2ca;

    background: #fff;
}


.profile-input-wrap input:focus,
.profile-input-wrap textarea:focus {
    border-color: rgba(192,16,42,0.55);

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(192,16,42,0.065);
}


.profile-input-wrap:focus-within > i {
    color: var(--profile-red);
}


/* =============================================================
   FILE INPUT
   ============================================================= */

.profile-input-wrap input[type="file"] {
    display: flex;

    align-items: center;

    height: 46px;

    padding: 6px 9px 6px 38px;

    cursor: pointer;
}


.profile-input-wrap input[type="file"]::file-selector-button {
    height: 32px;

    margin-right: 9px;

    padding: 0 10px;

    border: 1px solid var(--profile-border);

    border-radius: 5px;

    background: #fff;

    color: var(--profile-dark);

    font-family: inherit;

    font-size: 0.53rem;

    font-weight: 750;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.profile-input-wrap input[type="file"]::file-selector-button:hover {
    border-color: var(--profile-red);

    background: rgba(192,16,42,0.04);

    color: var(--profile-red);
}


/* =============================================================
   ERROR INPUT
   ============================================================= */

.profile-input-wrap input.profile-input-error,
.profile-input-wrap textarea.profile-input-error {
    border-color: rgba(192,16,42,0.65);
}


.profile-error {
    display: block;

    margin-top: 6px;

    color: var(--profile-red);

    font-size: 0.51rem;

    line-height: 1.5;
}


.profile-help {
    display: block;

    margin-top: 6px;

    color: var(--profile-muted);

    font-size: 0.49rem;

    line-height: 1.5;
}


/* =============================================================
   FORM FOOTER
   ============================================================= */

.profile-form-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid var(--profile-border);
}


.profile-required-note {
    color: var(--profile-muted);

    font-size: 0.5rem;
}


.profile-required-note span {
    color: var(--profile-red);

    font-weight: 900;
}


/* =============================================================
   SAVE BUTTON
   ============================================================= */

.profile-save-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 43px;

    padding: 0 17px;

    border: 0;

    border-radius: 6px;

    background: var(--profile-red);

    color: #fff;

    font-family: inherit;

    font-size: 0.56rem;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(192,16,42,0.15);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.profile-save-btn:hover {
    background: var(--profile-red-dark);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 27px rgba(192,16,42,0.22);
}


.profile-save-btn i {
    font-size: 0.72rem;
}


/* =============================================================
   PASSWORD CARD
   ============================================================= */

.profile-password-card {
    margin-top: 22px;
}


.profile-password-card .profile-form-header {
    background:
        linear-gradient(
            135deg,
            #fff,
            #f8f7f4
        );
}


/* =============================================================
   PASSWORD GRID
   ============================================================= */

.profile-password-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;
}


/* =============================================================
   PASSWORD FOOTER
   ============================================================= */

.profile-password-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 23px;

    padding-top: 20px;

    border-top: 1px solid var(--profile-border);
}


.profile-password-tip {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--profile-muted);

    font-size: 0.51rem;

    line-height: 1.5;
}


.profile-password-tip i {
    color: var(--profile-dark);

    font-size: 0.68rem;
}


/* =============================================================
   PASSWORD BUTTON
   ============================================================= */

.profile-password-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 43px;

    padding: 0 17px;

    border: 1px solid var(--profile-dark);

    border-radius: 6px;

    background: var(--profile-dark);

    color: #fff;

    font-family: inherit;

    font-size: 0.55rem;

    font-weight: 850;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.profile-password-btn:hover {
    border-color: var(--profile-red);

    background: var(--profile-red);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 23px rgba(192,16,42,0.16);
}


.profile-password-btn i {
    font-size: 0.68rem;
}


/* =============================================================
   DISABLED / LOADING STATES
   ============================================================= */

.profile-save-btn:disabled,
.profile-password-btn:disabled {
    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =============================================================
   FOCUS ACCESSIBILITY
   ============================================================= */

.customer-profile-page a:focus-visible,
.customer-profile-page button:focus-visible,
.customer-profile-page input:focus-visible,
.customer-profile-page textarea:focus-visible {
    outline: 2px solid var(--profile-red);

    outline-offset: 3px;
}


/* =============================================================
   LARGE DESKTOP
   ============================================================= */

@media (min-width: 1400px) {

    .customer-profile-page .container {
        max-width: 1320px;
    }

    .profile-layout {
        grid-template-columns:
            285px
            minmax(0, 1fr);

        gap: 28px;
    }

    .profile-sidebar-inner {
        padding: 34px 28px 29px;
    }

    .profile-form-header {
        padding: 25px 27px;
    }

    .profile-form-body {
        padding: 28px;
    }

}


/* =============================================================
   LAPTOP
   ============================================================= */

@media (max-width: 1100px) {

    .customer-profile-page {
        padding-top: 58px;
    }

    .profile-layout {
        grid-template-columns:
            250px
            minmax(0, 1fr);

        gap: 18px;
    }

    .profile-sidebar-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .profile-form-header {
        padding: 21px;
    }

    .profile-form-body {
        padding: 21px;
    }

}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 900px) {

    .customer-profile-page {
        padding: 52px 0 80px;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }


    /* SIDEBAR */

    .profile-sidebar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 0.75fr);
    }

    .profile-sidebar-inner {
        padding: 27px;
    }

    .profile-sidebar-details {
        border-top: 0;

        border-left: 1px solid rgba(255,255,255,0.07);

        border-bottom: 0;

        align-content: center;
    }

    .profile-security-indicator {
        grid-column: 1 / -1;

        border-top: 1px solid rgba(255,255,255,0.07);
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 767px) {

    .customer-profile-page {
        padding: 42px 0 65px;
    }


    /* HERO */

    .profile-page-hero {
        align-items: flex-start;

        flex-direction: column;

        gap: 19px;

        padding-bottom: 24px;

        margin-bottom: 22px;
    }

    .profile-page-hero h1 {
        font-size: 2.7rem;
    }

    .profile-page-hero-content p {
        margin-top: 11px;

        font-size: 0.61rem;
    }

    .profile-back-btn {
        width: 100%;
    }


    /* ALERT */

    .profile-alert {
        padding-right: 42px;
    }


    /* SIDEBAR */

    .profile-sidebar {
        display: block;
    }

    .profile-sidebar-inner {
        padding: 27px 20px 24px;
    }

    .profile-sidebar-details {
        border-top: 1px solid rgba(255,255,255,0.07);

        border-left: 0;

        border-bottom: 0;
    }


    /* FORM HEADER */

    .profile-form-header {
        padding: 19px;
    }

    .profile-form-body {
        padding: 19px;
    }


    /* FORM */

    .profile-form-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .profile-field-full {
        grid-column: auto;
    }


    /* PASSWORD */

    .profile-password-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }


    /* FOOTERS */

    .profile-form-footer,
    .profile-password-footer {
        align-items: stretch;

        flex-direction: column;

        gap: 13px;
    }

    .profile-save-btn,
    .profile-password-btn {
        width: 100%;
    }

    .profile-required-note {
        text-align: center;
    }

    .profile-password-tip {
        align-items: flex-start;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .customer-profile-page {
        padding: 34px 0 55px;
    }


    .profile-page-hero h1 {
        font-size: 2.25rem;
    }

    .profile-eyebrow {
        font-size: 0.49rem;
    }


    .profile-sidebar-inner {
        padding: 24px 16px 22px;
    }


    .profile-avatar {
        width: 94px;
        height: 94px;
    }


    .profile-sidebar-inner h2 {
        font-size: 1.05rem;
    }


    .profile-sidebar-email {
        font-size: 0.51rem;
    }


    .profile-sidebar-detail {
        padding: 14px 11px;
    }


    .profile-sidebar-detail span {
        font-size: 0.43rem;
    }


    .profile-sidebar-detail strong {
        font-size: 0.53rem;
    }


    .profile-security-indicator {
        padding: 15px;
    }


    .profile-heading-icon {
        flex-basis: 40px;

        width: 40px;
        height: 40px;

        font-size: 0.85rem;
    }


    .profile-form-heading {
        gap: 11px;
    }


    .profile-form-heading h2 {
        font-size: 1rem;
    }


    .profile-form-heading p {
        font-size: 0.51rem;
    }


    .profile-form-body {
        padding: 16px;
    }


    .profile-input-wrap input {
        height: 44px;
    }


    .profile-input-wrap textarea {
        min-height: 95px;
    }


    .profile-field label {
        font-size: 0.55rem;
    }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .customer-profile-page *,
    .customer-profile-page *::before,
    .customer-profile-page *::after {
        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}








/* =============================================================
   FM ELEVATOR
   PREMIUM CONTACT PAGE
   ============================================================= */

.contact-page {

    --contact-red: var(--fm-red, #c0102a);
    --contact-red-dark: var(--fm-red-dark, #970d20);

    --contact-dark: var(--fm-dark, #181512);
    --contact-dark-2: #211e1b;

    --contact-bg: var(--fm-offwhite, #f7f5f2);
    --contact-white: #ffffff;

    --contact-text: #25211e;
    --contact-grey: #77716b;
    --contact-muted: #aaa39b;

    --contact-border: #e7e2dc;

    background: var(--contact-bg);

    overflow: hidden;
}


/* =============================================================
   HERO
   ============================================================= */

.contact-hero {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(192, 16, 42, 0.07),
            transparent 28%
        ),
        var(--contact-bg);
}


.contact-hero::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -260px;
    top: -260px;

    border: 1px solid rgba(192, 16, 42, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: 100px;
    bottom: -220px;

    border: 1px solid rgba(24, 21, 18, 0.04);

    border-radius: 50%;

    pointer-events: none;
}


.contact-hero .container {

    position: relative;

    z-index: 2;
}


.contact-hero-content {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-top: 15px;
}


.contact-hero-copy {

    max-width: 820px;
}


.contact-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 12px;

    color: var(--contact-red);

    font-size: 0.53rem;

    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


.contact-eyebrow::before {

    content: "";

    width: 26px;
    height: 1px;

    background: var(--contact-red);
}


.contact-hero h1 {

    margin: 0;

    color: var(--contact-dark);

    font-family: var(--font-display, inherit);

    font-size: 34px;

    font-weight: 850;

    line-height: 0.91;

    letter-spacing: -0.07em;
}


.contact-hero h1 span {

    color: var(--contact-red);
}


.contact-hero-copy > p {

    max-width: 650px;

    margin: 20px 0 0;

    color: var(--contact-grey);

    font-size: 0.68rem;

    line-height: 1.8;
}


/* =============================================================
   HERO SIDE
   ============================================================= */

.contact-hero-side {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;

    min-width: 210px;

    padding: 18px 0;
}


.contact-hero-number {

    display: flex;

    flex-direction: column;

    align-items: flex-end;
}


.contact-hero-number span {

    margin-bottom: 3px;

    color: var(--contact-muted);

    font-size: 0.46rem;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.contact-hero-number strong {

    color: var(--contact-red);

    font-family: var(--font-display, inherit);

    font-size: 2rem;

    font-weight: 850;

    line-height: 1;
}


.contact-hero-line {

    width: 1px;
    height: 48px;

    background: var(--contact-border);
}


.contact-hero-side p {

    max-width: 90px;

    margin: 0;

    color: var(--contact-grey);

    font-size: 0.52rem;

    line-height: 1.55;
}


/* =============================================================
   SECTION HEADING
   ============================================================= */

.contact-section-head {

    max-width: 760px;

    margin-bottom: 45px;
}


.section-kicker {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 10px;

    color: var(--contact-red);

    font-size: 0.5rem;

    font-weight: 900;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.section-kicker::before {

    content: "";

    width: 22px;
    height: 1px;

    background: var(--contact-red);
}


.contact-section-head h2 {

    margin: 0;

    color: var(--contact-dark);

    font-family: var(--font-display, inherit);

    font-size: clamp(
        2rem,
        4vw,
        3.4rem
    );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.055em;
}


.contact-section-head h2 span {

    color: var(--contact-red);
}


.contact-section-head .desc {

    max-width: 650px;

    margin-top: 15px;

    color: var(--contact-grey);

    font-size: 0.62rem;

    line-height: 1.8;
}


/* =============================================================
   CONTACT INFORMATION GRID
   ============================================================= */

.contact-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/* =============================================================
   CONTACT INFO CARD
   ============================================================= */

.contact-info-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 425px;

    overflow: hidden;

    padding: 25px;

    border: 1px solid var(--contact-border);

    border-radius: 12px;

    background: var(--contact-white);

    box-shadow:
        0 12px 35px rgba(24, 21, 18, 0.035);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-info-card::before {

    content: "";

    position: absolute;

    right: -75px;
    top: -75px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(192, 16, 42, 0.07),
            transparent 68%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}


.contact-info-card:hover {

    transform: translateY(-7px);

    border-color: rgba(192, 16, 42, 0.22);

    box-shadow:
        0 25px 55px rgba(24, 21, 18, 0.09);
}


.contact-info-card:hover::before {

    opacity: 1;
}


/* =============================================================
   CARD TOP
   ============================================================= */

.contact-info-card-top {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 28px;
}


.contact-card-index {

    color: #c9c3bc;

    font-family: var(--font-display, inherit);

    font-size: 0.58rem;

    font-weight: 850;

    letter-spacing: 0.05em;
}


.contact-info-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid rgba(192, 16, 42, 0.12);

    border-radius: 9px;

    background: rgba(192, 16, 42, 0.045);

    color: var(--contact-red);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.contact-info-card:hover .contact-info-icon {

    background: var(--contact-red);

    color: #fff;

    transform: rotate(-4deg);
}


/* =============================================================
   CARD CONTENT
   ============================================================= */

.contact-info-card-content {

    position: relative;

    z-index: 2;

    flex: 1;
}


.contact-card-label {

    display: block;

    margin-bottom: 8px;

    color: var(--contact-red);

    font-size: 0.47rem;

    font-weight: 900;

    letter-spacing: 0.15em;
}


.contact-info-card h3 {

    margin: 0;

    color: var(--contact-dark);

    font-family: var(--font-display, inherit);

    font-size: 1.45rem;

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.contact-card-intro {

    max-width: 310px;

    margin: 13px 0 22px;

    color: var(--contact-grey);

    font-size: 0.57rem;

    line-height: 1.7;
}


/* =============================================================
   DETAILS
   ============================================================= */

.contact-detail-list {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.contact-detail-list > div {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--contact-grey);

    font-size: 0.55rem;

    line-height: 1.55;
}


.contact-detail-list i {

    flex: 0 0 18px;

    width: 18px;

    margin-top: 1px;

    color: var(--contact-red);

    font-size: 0.7rem;
}


.contact-detail-list strong {

    color: var(--contact-dark);

    font-size: 0.52rem;

    font-weight: 850;

    letter-spacing: 0.08em;
}


.contact-detail-list a {

    color: var(--contact-dark);

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.contact-detail-list a:hover {

    color: var(--contact-red);
}


/* =============================================================
   PHONE LIST
   ============================================================= */

.contact-phone-list {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-phone-list a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 11px 12px;

    border: 1px solid var(--contact-border);

    border-radius: 6px;

    background: #fbfaf8;

    color: var(--contact-dark);

    font-size: 0.6rem;

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.contact-phone-list a i {

    color: var(--contact-red);

    font-size: 0.62rem;

    transition:
        transform 0.25s ease;
}


.contact-phone-list a:hover {

    border-color: var(--contact-red);

    background: rgba(192,16,42,0.035);

    color: var(--contact-red);

    transform: translateX(3px);
}


.contact-phone-list a:hover i {

    transform: translate(2px,-2px);
}


/* =============================================================
   CARD ACTION
   ============================================================= */

.contact-card-action {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    padding-top: 17px;

    border-top: 1px solid var(--contact-border);

    color: var(--contact-dark);

    font-size: 0.52rem;

    font-weight: 850;

    letter-spacing: 0.01em;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.contact-card-action i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 29px;
    height: 29px;

    border: 1px solid var(--contact-border);

    border-radius: 50%;

    color: var(--contact-red);

    font-size: 0.55rem;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.contact-card-action:hover {

    color: var(--contact-red);
}


.contact-card-action:hover i {

    background: var(--contact-red);

    color: #fff;

    border-color: var(--contact-red);

    transform: translate(2px,-2px);
}


/* =============================================================
   ENQUIRY DARK SECTION
   ============================================================= */

.contact-enquiry-sec {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(192,16,42,0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #181512,
            #211d1a
        );
}


.contact-enquiry-sec::before {

    content: "";

    position: absolute;

    left: -250px;
    bottom: -300px;

    width: 650px;
    height: 650px;

    border: 1px solid rgba(255,255,255,0.035);

    border-radius: 50%;

    pointer-events: none;
}


.contact-enquiry-sec .container {

    position: relative;

    z-index: 2;
}


/* =============================================================
   ENQUIRY HEADING
   ============================================================= */

.contact-enquiry-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 48px;
}


.section-kicker-light {

    color: #d96a7a;
}


.section-kicker-light::before {

    background: var(--contact-red);
}


.contact-enquiry-heading h2 {

    max-width: 680px;

    margin: 0;

    color: #fff;

    font-family: var(--font-display, inherit);

    font-size: clamp(
        2.1rem,
        4vw,
        3.6rem
    );

    font-weight: 850;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.contact-enquiry-heading h2 span {

    color: var(--contact-red);
}


.contact-enquiry-heading > p {

    max-width: 350px;

    margin: 0;

    color: rgba(255,255,255,0.42);

    font-size: 0.59rem;

    line-height: 1.8;
}


/* =============================================================
   ENQUIRY GRID
   ============================================================= */

.contact-enquiry-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 22px;

    align-items: stretch;
}


/* =============================================================
   MAP PANEL
   ============================================================= */

.contact-map-panel {

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 13px;

    background: #151311;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.2);
}


.contact-map {

    position: relative;

    min-height: 450px;

    overflow: hidden;
}


.contact-map iframe {

    display: block;

    width: 100%;
    height: 450px;

    filter:
        grayscale(0.25)
        contrast(1.02);

    opacity: 0.9;
}


/* =============================================================
   MAP BADGE
   ============================================================= */

.map-location-badge {

    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 205px;

    padding: 11px 13px;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 7px;

    background: rgba(20,18,16,0.9);

    backdrop-filter: blur(12px);

    color: #fff;
}


.map-location-dot {

    position: relative;

    flex: 0 0 9px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--contact-red);

    box-shadow:
        0 0 0 5px rgba(192,16,42,0.12);
}


.map-location-badge strong {

    display: block;

    margin-bottom: 2px;

    font-size: 0.53rem;

    font-weight: 800;
}


.map-location-badge small {

    display: block;

    color: rgba(255,255,255,0.43);

    font-size: 0.46rem;
}


/* =============================================================
   MAP FOOTER
   ============================================================= */

.contact-map-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 17px;

    border-top: 1px solid rgba(255,255,255,0.07);
}


.contact-map-footer > div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: rgba(255,255,255,0.42);

    font-size: 0.5rem;

    line-height: 1.5;
}


.contact-map-footer > div i {

    color: var(--contact-red);

    font-size: 0.7rem;
}


.contact-map-footer > a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;

    color: #fff;

    font-size: 0.49rem;

    font-weight: 800;

    text-decoration: none;

    transition:
        color 0.25s ease;
}


.contact-map-footer > a i {

    color: var(--contact-red);

    font-size: 0.55rem;
}


.contact-map-footer > a:hover {

    color: var(--contact-red);
}


/* =============================================================
   FORM PANEL
   ============================================================= */

.contact-form-panel {

    padding: 30px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.018)
        );
}


.contact-form-header {

    margin-bottom: 27px;
}


.form-badge {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 0 9px;

    border: 1px solid rgba(192,16,42,0.25);

    border-radius: 4px;

    background: rgba(192,16,42,0.09);

    color: #df7280;

    font-size: 0.45rem;

    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.contact-form-header h2 {

    margin: 13px 0 8px;

    color: #fff;

    font-family: var(--font-display, inherit);

    font-size: 1.9rem;

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.045em;
}


.contact-form-header h2 span {

    color: var(--contact-red);
}


.contact-form-header p {

    max-width: 430px;

    margin: 0;

    color: rgba(255,255,255,0.4);

    font-size: 0.55rem;

    line-height: 1.7;
}


/* =============================================================
   FORM
   ============================================================= */

.contact-form {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* =============================================================
   FORM FIELD
   ============================================================= */

.contact-form-field {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 58px;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 7px;

    background: rgba(255,255,255,0.035);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-form-field:hover {

    border-color: rgba(255,255,255,0.18);

    background: rgba(255,255,255,0.045);
}


.contact-form-field:focus-within {

    border-color: rgba(192,16,42,0.7);

    background: rgba(255,255,255,0.055);

    box-shadow:
        0 0 0 3px rgba(192,16,42,0.08);
}


/* =============================================================
   FIELD ICON
   ============================================================= */

.contact-field-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 48px;

    width: 48px;

    color: rgba(255,255,255,0.25);

    transition:
        color 0.25s ease;
}


.contact-form-field:focus-within .contact-field-icon {

    color: var(--contact-red);
}


.contact-field-icon i {

    font-size: 0.72rem;
}


/* =============================================================
   FIELD INPUT
   ============================================================= */

.contact-field-input {

    position: relative;

    flex: 1;

    align-self: stretch;
}


.contact-field-input input,
.contact-field-input textarea {

    display: block;

    width: 100%;
    height: 100%;

    padding: 20px 32px 7px 0;

    border: 0;

    outline: none;

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size: 0.59rem;

    resize: none;
}


.contact-field-input textarea {

    min-height: 120px;

    padding-top: 24px;

    line-height: 1.6;
}


.contact-field-input input::placeholder,
.contact-field-input textarea::placeholder {

    color: transparent;
}


/* =============================================================
   FLOATING LABEL
   ============================================================= */

.contact-field-input label {

    position: absolute;

    left: 0;
    top: 50%;

    color: rgba(255,255,255,0.38);

    font-size: 0.56rem;

    line-height: 1;

    pointer-events: none;

    transform:
        translateY(-50%);

    transform-origin: left center;

    transition:
        top 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease,
        font-size 0.2s ease;
}


.contact-field-input textarea + label {

    top: 27px;
}


/* Floating state */

.contact-field-input input:focus + label,
.contact-field-input input:not(:placeholder-shown) + label {

    top: 10px;

    color: var(--contact-red);

    font-size: 0.43rem;

    font-weight: 800;

    transform:
        translateY(0);
}


.contact-field-input textarea:focus + label,
.contact-field-input textarea:not(:placeholder-shown) + label {

    top: 9px;

    color: var(--contact-red);

    font-size: 0.43rem;

    font-weight: 800;

    transform:
        translateY(0);
}


.contact-field-input label small {

    font-size: 0.4rem;

    color: rgba(255,255,255,0.25);
}


/* =============================================================
   REQUIRED
   ============================================================= */

.field-required {

    position: absolute;

    right: 14px;
    top: 12px;

    color: var(--contact-red);

    font-size: 0.55rem;

    font-weight: 900;
}


/* =============================================================
   TEXTAREA FIELD
   ============================================================= */

.contact-form-textarea {

    align-items: flex-start;

    min-height: 135px;
}


.contact-form-textarea .contact-field-icon {

    padding-top: 18px;
}


.contact-form-textarea .field-required {

    top: 13px;
}


/* =============================================================
   ERROR
   ============================================================= */

.contact-form-field.has-error {

    border-color: rgba(224,73,93,0.75);
}


.contact-form-field.has-error .contact-field-icon {

    color: #e65f71;
}


.error-text {

    display: block;

    margin: -3px 4px 3px 48px;

    color: #e47784;

    font-size: 0.47rem;

    line-height: 1.4;
}


/* =============================================================
   FORM ALERTS
   ============================================================= */

.contact-form-alert {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    padding: 11px 12px;

    border-radius: 6px;

    font-size: 0.51rem;

    line-height: 1.5;
}


.contact-form-alert.success {

    border: 1px solid rgba(71,168,91,0.2);

    background: rgba(71,168,91,0.08);

    color: #91d49e;
}


.contact-form-alert.error {

    border: 1px solid rgba(192,16,42,0.25);

    background: rgba(192,16,42,0.08);

    color: #e7808c;
}


.contact-form-alert i {

    margin-top: 1px;

    font-size: 0.65rem;
}


/* =============================================================
   SUBMIT BUTTON
   ============================================================= */

.contact-submit-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    width: 100%;

    min-height: 50px;

    margin-top: 7px;

    padding: 0 16px 0 19px;

    border: 0;

    border-radius: 6px;

    background: var(--contact-red);

    color: #fff;

    font-family: inherit;

    font-size: 0.57rem;

    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(192,16,42,0.16);

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.contact-submit-btn i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 50%;

    font-size: 0.7rem;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.contact-submit-btn:hover {

    background: var(--contact-red-dark);

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(192,16,42,0.25);
}


.contact-submit-btn:hover i {

    background: rgba(255,255,255,0.1);

    transform: translateX(3px);
}


.contact-submit-btn:active {

    transform: translateY(0);
}


/* =============================================================
   FORM TRUST
   ============================================================= */

.contact-form-trust {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 2px;

    color: rgba(255,255,255,0.25);

    font-size: 0.46rem;

    line-height: 1.5;
}


.contact-form-trust i {

    flex: 0 0 auto;

    margin-top: 1px;

    color: rgba(255,255,255,0.42);

    font-size: 0.6rem;
}


/* =============================================================
   BOTTOM CTA
   ============================================================= */

.contact-bottom-cta {

    position: relative;

    padding: 65px 0;

    overflow: hidden;

    background: var(--contact-bg);
}


.contact-bottom-cta::before {

    content: "";

    position: absolute;

    right: -120px;
    top: -150px;

    width: 360px;
    height: 360px;

    border: 1px solid rgba(192,16,42,0.055);

    border-radius: 50%;
}


.contact-bottom-cta-inner {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 35px 40px;

    border: 1px solid var(--contact-border);

    border-radius: 13px;

    background: #fff;

    box-shadow:
        0 15px 45px rgba(24,21,18,0.045);
}


.contact-bottom-cta-inner h2 {

    max-width: 700px;

    margin: 0;

    color: var(--contact-dark);

    font-family: var(--font-display, inherit);

    font-size: clamp(
        1.8rem,
        3vw,
        2.7rem
    );

    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.05em;
}


.contact-bottom-cta-inner h2 span {

    color: var(--contact-red);
}


.contact-bottom-actions {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}


.contact-cta-primary,
.contact-cta-secondary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 44px;

    padding: 0 15px;

    border-radius: 6px;

    font-size: 0.53rem;

    font-weight: 850;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.contact-cta-primary {

    border: 1px solid var(--contact-red);

    background: var(--contact-red);

    color: #fff;
}


.contact-cta-primary:hover {

    background: var(--contact-red-dark);

    border-color: var(--contact-red-dark);

    color: #fff;

    transform: translateY(-2px);
}


.contact-cta-secondary {

    border: 1px solid var(--contact-border);

    background: #fff;

    color: var(--contact-dark);
}


.contact-cta-secondary i {

    color: var(--contact-red);

    font-size: 0.6rem;
}


.contact-cta-secondary:hover {

    border-color: var(--contact-dark);

    background: var(--contact-dark);

    color: #fff;

    transform: translateY(-2px);
}


/* =============================================================
   TABLET
   ============================================================= */

@media (max-width: 1000px) {

    .contact-hero-content {

        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .contact-hero-side {

        padding: 0;
    }


    .contact-info-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-enquiry-grid {

        grid-template-columns: 1fr;
    }


    .contact-map-panel {

        order: 2;
    }


    .contact-form-panel {

        order: 1;
    }


    .contact-enquiry-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 17px;
    }


    .contact-enquiry-heading > p {

        max-width: 600px;
    }


    .contact-bottom-cta-inner {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 767px) {

    .contact-hero {

        padding-bottom: 50px;
    }


    .contact-hero h1 {

        font-size: 3.15rem;
    }


    .contact-hero-copy > p {

        font-size: 0.61rem;

        line-height: 1.7;
    }


    .contact-hero-side {

        min-width: 0;
    }


    .contact-info-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .contact-info-card {

        min-height: auto;

        padding: 21px;
    }


    .contact-info-card-top {

        margin-bottom: 22px;
    }


    .contact-info-card h3 {

        font-size: 1.3rem;
    }


    .contact-card-intro {

        margin-bottom: 19px;
    }


    .contact-section-head {

        margin-bottom: 30px;
    }


    .contact-section-head h2 {

        font-size: 2.35rem;
    }


    .contact-enquiry-sec {

        padding-top: 65px;

        padding-bottom: 65px;
    }


    .contact-enquiry-heading h2 {

        font-size: 2.4rem;
    }


    .contact-form-panel {

        padding: 21px;
    }


    .contact-form-header h2 {

        font-size: 1.65rem;
    }


    .contact-map iframe {

        height: 360px;
    }


    .contact-map {

        min-height: 360px;
    }


    .contact-map-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .contact-map-footer > a {

        padding-top: 4px;
    }


    .contact-bottom-cta {

        padding: 45px 0;
    }


    .contact-bottom-cta-inner {

        padding: 25px 21px;

        gap: 25px;
    }


    .contact-bottom-cta-inner h2 {

        font-size: 2rem;
    }


    .contact-bottom-actions {

        width: 100%;
    }


    .contact-cta-primary,
    .contact-cta-secondary {

        flex: 1;

        min-width: 0;
    }

}


/* =============================================================
   SMALL MOBILE
   ============================================================= */

@media (max-width: 480px) {

    .contact-hero h1 {

        font-size: 2.65rem;
    }


    .contact-hero-side {

        gap: 13px;
    }


    .contact-hero-number strong {

        font-size: 1.65rem;
    }


    .contact-hero-side p {

        font-size: 0.49rem;
    }


    .contact-info-card {

        padding: 18px;
    }


    .contact-info-icon {

        width: 45px;
        height: 45px;
    }


    .contact-info-card h3 {

        font-size: 1.18rem;
    }


    .contact-enquiry-heading h2 {

        font-size: 2.05rem;
    }


    .contact-form-panel {

        padding: 17px;
    }


    .contact-field-icon {

        flex-basis: 42px;

        width: 42px;
    }


    .contact-field-input input,
    .contact-field-input textarea {

        font-size: 0.56rem;
    }


    .map-location-badge {

        left: 10px;
        bottom: 10px;

        min-width: 0;

        max-width: calc(100% - 20px);
    }


    .contact-bottom-actions {

        align-items: stretch;

        flex-direction: column;
    }


    .contact-cta-primary,
    .contact-cta-secondary {

        width: 100%;
    }

}


/* =============================================================
   ACCESSIBILITY
   ============================================================= */

.contact-page a:focus-visible,
.contact-page button:focus-visible,
.contact-page input:focus-visible,
.contact-page textarea:focus-visible {

    outline: 2px solid var(--contact-red);

    outline-offset: 3px;
}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-page *,
    .contact-page *::before,
    .contact-page *::after {

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}


/* =========================================================
   FM ELEVATOR — ABOUT PAGE
   PREMIUM RESPONSIVE CSS
========================================================= */

.about-page {
    --about-red: #c20f2f;
    --about-red-dark: #990c25;
    --about-dark: #171513;
    --about-dark-2: #211e1b;
    --about-light: #f7f5f1;
    --about-white: #ffffff;
    --about-text: #24211e;
    --about-muted: #77716b;
    --about-border: #e6e1db;

    overflow: hidden;
    background: var(--about-light);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.about-page .about-breadcrumb {
    position: relative;
    overflow: hidden;
    padding: 105px 0 90px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(194, 15, 47, .08),
            transparent 28%
        ),
        var(--about-light);
}

.about-page .about-breadcrumb::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -220px;
    top: -250px;
    border: 1px solid rgba(194, 15, 47, .08);
    border-radius: 50%;
}

.about-page .about-breadcrumb::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: 70px;
    bottom: -180px;
    border: 1px solid rgba(23, 21, 19, .05);
    border-radius: 50%;
}

.about-page .breadcrumb-wrap {
    position: relative;
    z-index: 2;
    max-width: 950px;
}

.about-page .breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 25px;
    padding: 0;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.about-page .breadcrumb a {
    color: var(--about-muted);
    text-decoration: none;
    transition: color .25s ease;
}

.about-page .breadcrumb a:hover {
    color: var(--about-red);
}

.about-page .breadcrumb .separator {
    color: #bbb4ad;
}

.about-page .breadcrumb .current {
    color: var(--about-red);
}

.about-page .about-breadcrumb h1 {
    margin: 0;
    color: var(--about-dark);
    font-family: var(--font-display, inherit);
    font-size: 34px;
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.075em;
}

.about-page .about-breadcrumb h1 span {
    color: var(--about-red);
}

.about-page .about-breadcrumb p {
    max-width: 700px;
    margin: 25px 0 0;
    color: var(--about-muted);
    font-size: .68rem;
    line-height: 1.85;
}


/* =========================================================
   GLOBAL SECTION HEAD
========================================================= */

.about-page .sec-head {
    position: relative;
    max-width: 800px;
    margin-bottom: 55px;
}

.about-page .sec-head::before {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin-bottom: 17px;
    background: var(--about-red);
}

.about-page .sec-head h2 {
    margin: 0;
    color: var(--about-dark);
    font-family: var(--font-display, inherit);
    font-size: clamp(2.2rem, 4vw, 3.7rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.06em;
}

.about-page .sec-head h2 span {
    color: var(--about-red);
}

.about-page .sec-head .desc {
    max-width: 620px;
    margin: 17px 0 0;
    color: var(--about-muted);
    font-size: .61rem;
    line-height: 1.8;
}


/* =========================================================
   ABOUT HERO
========================================================= */

.about-page .about-hero {
    position: relative;
}

.about-page .about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 75px;
}

.about-page .about-hero-image {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-radius: 16px;
    background: #ddd;
    box-shadow:
        0 30px 70px rgba(20, 17, 15, .12);
}

.about-page .about-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.35)
        );
    pointer-events: none;
}

.about-page .about-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.about-page .about-hero-image:hover img {
    transform: scale(1.04);
}


/* =========================================================
   IMAGE BADGES
========================================================= */

.about-page .about-hero-image-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-width: 105px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(20,18,16,.88);
    backdrop-filter: blur(12px);
    color: #fff;
}

.about-page .about-hero-image-badge.second {
    left: auto;
    right: 25px;
    bottom: 25px;
}

.about-page .about-hero-image-badge .number {
    color: var(--about-red);
    font-family: var(--font-display, inherit);
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.about-page .about-hero-image-badge .label {
    margin-top: 5px;
    color: rgba(255,255,255,.55);
    font-size: .45rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-page .about-hero-content {
    max-width: 650px;
}

.about-page .about-hero-content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--about-red);
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.about-page .about-hero-content .eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--about-red);
}

.about-page .about-hero-content h2 {
    margin: 0 0 25px;
    color: var(--about-dark);
    font-family: var(--font-display, inherit);
    font-size: clamp(2.3rem, 4vw, 4rem);
    font-weight: 850;
    line-height: .97;
    letter-spacing: -.065em;
}

.about-page .about-hero-content h2 span {
    color: var(--about-red);
}

.about-page .about-hero-content p {
    margin: 0 0 16px;
    color: var(--about-muted);
    font-size: .62rem;
    line-height: 1.85;
}

.about-page .about-hero-content p strong {
    color: var(--about-text);
    font-weight: 800;
}


/* =========================================================
   BADGES
========================================================= */

.about-page .about-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 28px;
}

.about-page .about-hero-badges span {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--about-border);
    border-radius: 6px;
    background: #fff;
    color: var(--about-text);
    font-size: .49rem;
    font-weight: 750;
    line-height: 1.4;
    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.about-page .about-hero-badges span:hover {
    border-color: rgba(194,15,47,.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(20,17,15,.06);
}


/* =========================================================
   BUTTONS
========================================================= */

.about-page .about-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.about-page .about-hero-buttons .btn,
.about-page .cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 5px;
    font-size: .52rem;
    font-weight: 850;
    text-decoration: none;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.about-page .btn-solid {
    border: 1px solid var(--about-red);
    background: var(--about-red);
    color: #fff;
}

.about-page .btn-solid:hover {
    border-color: var(--about-red-dark);
    background: var(--about-red-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(194,15,47,.2);
}

.about-page .btn-ghost-dark {
    border: 1px solid #d9d3cd;
    background: transparent;
    color: var(--about-dark);
}

.about-page .btn-ghost-dark:hover {
    border-color: var(--about-dark);
    background: var(--about-dark);
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================================
   MISSION / VISION
========================================================= */

.about-page .about-mission {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(194,15,47,.12),
            transparent 30%
        ),
        var(--about-dark);
}

.about-page .about-mission::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -350px;
    bottom: -400px;
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 50%;
}

.about-page .about-mission .sec-head,
.about-page .about-journey .sec-head {
    position: relative;
    z-index: 2;
}

.about-page .about-mission .sec-head h2,
.about-page .about-journey .sec-head h2 {
    color: #fff;
}

.about-page .about-mission .sec-head .desc,
.about-page .about-journey .sec-head .desc {
    color: rgba(255,255,255,.42);
}

.about-page .mission-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.about-page .mission-card {
    position: relative;
    min-height: 330px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.about-page .mission-card:hover {
    transform: translateY(-7px);
    border-color: rgba(194,15,47,.4);
    background:
        linear-gradient(
            145deg,
            rgba(194,15,47,.08),
            rgba(255,255,255,.025)
        );
}

.about-page .mission-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 28px;
    border: 1px solid rgba(194,15,47,.3);
    border-radius: 9px;
    background: rgba(194,15,47,.08);
    font-size: 1.35rem;
}

.about-page .mission-card h3 {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.about-page .mission-card p {
    margin: 0;
    color: rgba(255,255,255,.42);
    font-size: .57rem;
    line-height: 1.8;
}

.about-page .mission-line {
    position: absolute;
    left: 28px;
    bottom: 24px;
    width: 35px;
    height: 2px;
    background: var(--about-red);
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.about-page .about-why {
    position: relative;
}

.about-page .why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-page .why-card {
    position: relative;
    min-height: 235px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid var(--about-border);
    border-radius: 10px;
    background: #fff;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.about-page .why-card::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(194,15,47,.07);
    border-radius: 50%;
}

.about-page .why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(194,15,47,.25);
    box-shadow: 0 18px 40px rgba(24,21,18,.08);
}

.about-page .why-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    margin-bottom: 22px;
    border-radius: 8px;
    background: rgba(194,15,47,.06);
    font-size: 1.25rem;
}

.about-page .why-card h4 {
    margin: 0 0 10px;
    color: var(--about-dark);
    font-family: var(--font-display, inherit);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.about-page .why-card p {
    max-width: 290px;
    margin: 0;
    color: var(--about-muted);
    font-size: .54rem;
    line-height: 1.75;
}


/* =========================================================
   JOURNEY
========================================================= */

.about-page .about-journey {
    position: relative;
    overflow: hidden;
    background: var(--about-dark);
}

.about-page .timeline {
    position: relative;
    max-width: 1050px;
    margin: 70px auto 0;
}

.about-page .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(255,255,255,.1);
    transform: translateX(-50%);
}

.about-page .timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 170px;
}

.about-page .timeline-item:nth-child(odd) {
    text-align: right;
}

.about-page .timeline-item:nth-child(even) {
    text-align: left;
}

.about-page .timeline-content {
    width: calc(100% - 65px);
    padding: 5px 0 45px;
}

.about-page .timeline-item:nth-child(odd) .timeline-content {
    margin-right: auto;
    padding-right: 30px;
}

.about-page .timeline-item:nth-child(even) .timeline-content {
    margin-left: auto;
    padding-left: 30px;
}

.about-page .timeline-dot {
    position: absolute;
    left: 50%;
    top: 2px;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 3px solid var(--about-dark);
    border-radius: 50%;
    background: var(--about-red);
    box-shadow:
        0 0 0 5px rgba(194,15,47,.12);
    transform: translateX(-50%);
}

.about-page .timeline-content .year {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--about-red);
    font-family: var(--font-display, inherit);
    font-size: 1.35rem;
    font-weight: 900;
}

.about-page .timeline-content h4 {
    margin: 0 0 9px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: 1.05rem;
    font-weight: 800;
}

.about-page .timeline-content p {
    max-width: 370px;
    margin: 0;
    color: rgba(255,255,255,.38);
    font-size: .53rem;
    line-height: 1.75;
}

.about-page .timeline-item:nth-child(odd) .timeline-content p {
    margin-left: auto;
}


/* =========================================================
   CLIENTELE
========================================================= */

.about-page .clientele-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.about-page .clientele-card {
    position: relative;
    min-height: 255px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid var(--about-border);
    border-radius: 10px;
    background: #fff;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.about-page .clientele-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(24,21,18,.08);
}

.about-page .clientele-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--about-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.about-page .clientele-card:hover::before {
    transform: scaleX(1);
}

.about-page .clientele-card .number {
    display: block;
    margin-bottom: 10px;
    color: var(--about-red);
    font-family: var(--font-display, inherit);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.05em;
}

.about-page .clientele-card .label {
    display: block;
    color: var(--about-dark);
    font-size: .58rem;
    font-weight: 850;
    line-height: 1.35;
}

.about-page .clientele-card p {
    margin: 14px 0 0;
    color: var(--about-muted);
    font-size: .51rem;
    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.about-page .about-cta {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background: var(--about-red);
}

.about-page .about-cta::before {
    content: "";
    position: absolute;
    width: 550px;
    height: 550px;
    left: -280px;
    top: -330px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.about-page .about-cta::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -180px;
    bottom: -240px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
}

.about-page .cta-wrap {
    position: relative;
    z-index: 2;
    padding: 55px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 15px;
    background: rgba(0,0,0,.09);
    text-align: center;
}

.about-page .cta-wrap h2 {
    margin: 0;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.065em;
}

.about-page .cta-wrap h2 span {
    color: #171513;
}

.about-page .cta-wrap p {
    max-width: 620px;
    margin: 20px auto 0;
    color: rgba(255,255,255,.7);
    font-size: .61rem;
    line-height: 1.8;
}

.about-page .cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.about-page .cta-buttons .btn-solid {
    border-color: #171513;
    background: #171513;
}

.about-page .cta-buttons .btn-solid:hover {
    border-color: #000;
    background: #000;
}

.about-page .btn-ghost-light {
    border: 1px solid rgba(255,255,255,.4);
    background: transparent;
    color: #fff;
}

.about-page .btn-ghost-light:hover {
    border-color: #fff;
    background: #fff;
    color: var(--about-dark);
}


/* =========================================================
   REVEAL FALLBACK / SMOOTHNESS
========================================================= */

.about-page [data-reveal] {
    will-change: transform, opacity;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .about-page .about-hero-grid {
        gap: 45px;
    }

    .about-page .about-hero-image,
    .about-page .about-hero-image img {
        min-height: 540px;
    }

    .about-page .about-hero-content h2 {
        font-size: 3rem;
    }

    .about-page .mission-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-page .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-page .clientele-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .about-page .about-breadcrumb {
        padding: 80px 0 70px;
    }

    .about-page .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-page .about-hero-image,
    .about-page .about-hero-image img {
        min-height: 500px;
    }

    .about-page .about-hero-content {
        max-width: none;
    }

    .about-page .timeline::before {
        left: 18px;
        transform: none;
    }

    .about-page .timeline-item {
        display: block;
        min-height: auto;
        padding-left: 55px;
    }

    .about-page .timeline-item:nth-child(odd),
    .about-page .timeline-item:nth-child(even) {
        text-align: left;
    }

    .about-page .timeline-content,
    .about-page .timeline-item:nth-child(odd) .timeline-content,
    .about-page .timeline-item:nth-child(even) .timeline-content {
        width: 100%;
        margin: 0;
        padding: 0 0 45px;
    }

    .about-page .timeline-item:nth-child(odd) .timeline-content p {
        margin-left: 0;
    }

    .about-page .timeline-dot {
        left: 18px;
        transform: translateX(-50%);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .about-page .about-breadcrumb {
        padding: 65px 0 55px;
    }

    .about-page .breadcrumb {
        margin-bottom: 18px;
        font-size: .47rem;
    }

    .about-page .about-breadcrumb h1 {
        font-size: 3.2rem;
    }

    .about-page .about-breadcrumb p {
        margin-top: 18px;
        font-size: .59rem;
    }

    .about-page .sec-head {
        margin-bottom: 35px;
    }

    .about-page .sec-head h2 {
        font-size: 2.35rem;
    }

    .about-page .sec-head .desc {
        font-size: .56rem;
    }

    .about-page .about-hero-grid {
        gap: 30px;
    }

    .about-page .about-hero-image,
    .about-page .about-hero-image img {
        min-height: 390px;
    }

    .about-page .about-hero-image-badge {
        left: 15px;
        bottom: 15px;
        min-width: 88px;
        padding: 11px 12px;
    }

    .about-page .about-hero-image-badge.second {
        right: 15px;
        bottom: 15px;
    }

    .about-page .about-hero-image-badge .number {
        font-size: 1.25rem;
    }

    .about-page .about-hero-image-badge .label {
        font-size: .4rem;
    }

    .about-page .about-hero-content h2 {
        font-size: 2.4rem;
    }

    .about-page .about-hero-content p {
        font-size: .57rem;
    }

    .about-page .about-hero-badges {
        grid-template-columns: 1fr;
    }

    .about-page .about-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .about-page .about-hero-buttons .btn {
        width: 100%;
    }

    .about-page .mission-grid,
    .about-page .why-grid,
    .about-page .clientele-grid {
        grid-template-columns: 1fr;
    }

    .about-page .mission-card {
        min-height: 285px;
        padding: 23px;
    }

    .about-page .why-card {
        min-height: 210px;
        padding: 22px;
    }

    .about-page .clientele-card {
        min-height: 215px;
        padding: 23px;
    }

    .about-page .clientele-card .number {
        font-size: 2.15rem;
    }

    .about-page .timeline {
        margin-top: 45px;
    }

    .about-page .timeline-item {
        padding-left: 45px;
    }

    .about-page .timeline::before {
        left: 12px;
    }

    .about-page .timeline-dot {
        left: 12px;
    }

    .about-page .timeline-content .year {
        font-size: 1.15rem;
    }

    .about-page .timeline-content h4 {
        font-size: .98rem;
    }

    .about-page .timeline-content p {
        font-size: .51rem;
    }

    .about-page .about-cta {
        padding: 55px 0;
    }

    .about-page .cta-wrap {
        padding: 35px 20px;
    }

    .about-page .cta-wrap h2 {
        font-size: 2.6rem;
    }

    .about-page .cta-wrap p {
        font-size: .56rem;
    }

    .about-page .cta-buttons {
        flex-direction: column;
    }

    .about-page .cta-buttons .btn {
        width: 100%;
    }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 400px) {

    .about-page .about-breadcrumb h1 {
        font-size: 2.75rem;
    }

    .about-page .about-hero-content h2 {
        font-size: 2.15rem;
    }

    .about-page .sec-head h2 {
        font-size: 2.05rem;
    }

    .about-page .about-hero-image,
    .about-page .about-hero-image img {
        min-height: 340px;
    }

    .about-page .cta-wrap h2 {
        font-size: 2.25rem;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 2px solid var(--about-red);
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

.pad-xl {
    padding: 100px 0px;
}

/* ============================================================
   FM ELEVATOR — PROJECTS PAGE
   Premium Ecommerce / Industrial Gallery Theme
============================================================ */


/* ============================================================
   ROOT VARIABLES
============================================================ */

.projects-page {
    --project-bg: #f5f4f0;
    --project-white: #ffffff;
    --project-dark: #11110f;
    --project-dark-2: #191916;
    --project-text: #252521;
    --project-muted: #77766f;
    --project-border: rgba(17, 17, 15, 0.10);
    --project-brass: #b89658;
    --project-brass-dark: #98763d;
    --project-brass-soft: rgba(184, 150, 88, 0.12);
    --project-radius: 18px;
    --project-transition: 0.35s cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   GLOBAL
============================================================ */

.projects-page {
    background: var(--project-bg);
    color: var(--project-text);
}

.projects-page a {
    text-decoration: none;
}

.projects-page img {
    display: block;
    max-width: 100%;
}


/* ============================================================
   HERO
============================================================ */

.projects-page .projects-hero {
    position: relative;
    overflow: hidden;
}

.projects-page .projects-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -180px;
    top: -200px;
    border: 1px solid rgba(184, 150, 88, 0.18);
    border-radius: 50%;
    pointer-events: none;
}

.projects-page .projects-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -80px;
    bottom: -180px;
    border: 1px solid rgba(184, 150, 88, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.projects-page .projects-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
}

.projects-page .projects-hero-content > div:first-child {
    max-width: 850px;
}

.projects-page .projects-hero h1 {
    margin-bottom: 18px;
}

.projects-page .projects-hero h1 span {
    color: var(--project-brass);
}

.projects-page .projects-hero p {
    max-width: 720px;
}


/* ============================================================
   HERO BRAND MARK
============================================================ */

.projects-page .projects-hero-mark {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(184, 150, 88, 0.35);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-8deg);
    position: relative;
}

.projects-page .projects-hero-mark::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(184, 150, 88, 0.18);
    border-radius: 50%;
}

.projects-page .projects-hero-mark span {
    position: relative;
    z-index: 2;
    color: var(--project-brass);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
}

.projects-page .projects-hero-mark small {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    color: rgba(255,255,255,.65);
    font-size: 7px;
    letter-spacing: 3px;
}


/* ============================================================
   SECTION INTRO
============================================================ */

.projects-page .projects-section-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 48px;
}

.projects-page .projects-section-intro > div {
    max-width: 700px;
}

.projects-page .projects-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--project-brass-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.projects-page .projects-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--project-brass);
}

.projects-page .projects-section-intro h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--project-dark);
}

.projects-page .projects-section-intro h2 span {
    color: var(--project-brass);
}

.projects-page .projects-section-intro > p {
    max-width: 480px;
    margin: 0;
    color: var(--project-muted);
    font-size: 15px;
    line-height: 1.8;
}


/* ============================================================
   FILTER WRAPPER
============================================================ */

.projects-page .projects-filter-wrap {
    margin-bottom: 30px;
}

.projects-page .projects-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--project-white);
    border: 1px solid var(--project-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.035);
}


/* ============================================================
   FILTER BUTTON
============================================================ */

.projects-page .filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #686760;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--project-transition);
}

.projects-page .filter-btn:hover {
    color: var(--project-dark);
    background: #f7f6f2;
}

.projects-page .filter-btn.active {
    background: var(--project-dark);
    color: #fff;
    box-shadow: 0 8px 20px rgba(17,17,15,.14);
}

.projects-page .filter-btn.active:hover {
    background: #22221e;
}

.projects-page .filter-number {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: .55;
}

.projects-page .filter-btn.active .filter-number {
    color: var(--project-brass);
    opacity: 1;
}


/* ============================================================
   GALLERY META
============================================================ */

.projects-page .projects-gallery-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #8a8880;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.projects-page .projects-gallery-line {
    width: 36px;
    height: 1px;
    background: var(--project-brass);
}

.projects-page .projects-gallery-count {
    margin-left: auto;
    color: #99978f;
    letter-spacing: 1px;
}


/* ============================================================
   PROJECT GRID
============================================================ */

.projects-page .projects-grid {
    position: relative;
}


/* ============================================================
   PROJECT ITEM
============================================================ */

.projects-page .project-item {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.projects-page .project-item.is-hidden {
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
    display: none;
}


/* ============================================================
   PROJECT CARD
============================================================ */

.projects-page .project-card {
    display: block;
    height: 100%;
    background: var(--project-white);
    border: 1px solid var(--project-border);
    border-radius: var(--project-radius);
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,.035);
    transition:
        transform var(--project-transition),
        box-shadow var(--project-transition),
        border-color var(--project-transition);
}

.projects-page .project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(184,150,88,.28);
    box-shadow:
        0 20px 55px rgba(0,0,0,.10),
        0 4px 15px rgba(184,150,88,.06);
}


/* ============================================================
   PROJECT IMAGE
============================================================ */

.projects-page .project-image-link {
    display: block;
}

.projects-page .project-image {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #ddd;
}

.projects-page .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.04) 0%,
            transparent 45%,
            rgba(0,0,0,.50) 100%
        );
    pointer-events: none;
    z-index: 2;
}

.projects-page .project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .75s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.projects-page .project-card:hover .project-image img {
    transform: scale(1.07);
    filter: saturate(1.05);
}


/* ============================================================
   PROJECT NUMBER
============================================================ */

.projects-page .project-number {
    position: absolute;
    z-index: 5;
    top: 16px;
    left: 16px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 50%;
    background: rgba(15,15,13,.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* ============================================================
   IMAGE CATEGORY
============================================================ */

.projects-page .project-image-category {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50px;
    background: rgba(15,15,13,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* ============================================================
   PROJECT OVERLAY
============================================================ */

.projects-page .project-overlay {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12,12,10,.48);
    opacity: 0;
    transition: opacity var(--project-transition);
}

.projects-page .project-card:hover .project-overlay {
    opacity: 1;
}

.projects-page .project-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateY(15px);
    transition: transform var(--project-transition);
}

.projects-page .project-card:hover .project-overlay-inner {
    transform: translateY(0);
}

.projects-page .project-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}

.projects-page .project-view {
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* ============================================================
   PROJECT INFO
============================================================ */

.projects-page .project-info {
    min-height: 105px;
    padding: 20px 21px 21px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
}

.projects-page .project-info-main {
    min-width: 0;
}

.projects-page .project-index {
    display: block;
    margin-bottom: 7px;
    color: #a4a29b;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.projects-page .project-info h3 {
    margin: 0;
    color: var(--project-dark);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 650;
    transition: color var(--project-transition);
}

.projects-page .project-card:hover .project-info h3 {
    color: var(--project-brass-dark);
}

.projects-page .project-category {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid rgba(184,150,88,.28);
    border-radius: 4px;
    color: var(--project-brass-dark);
    background: var(--project-brass-soft);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.projects-page .projects-empty {
    max-width: 650px;
    margin: 20px auto 0;
    padding: 75px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--project-border);
    border-radius: 20px;
}

.projects-page .projects-empty-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184,150,88,.30);
    border-radius: 50%;
    color: var(--project-brass);
    font-size: 28px;
}

.projects-page .projects-empty .projects-eyebrow {
    justify-content: center;
}

.projects-page .projects-empty h3 {
    margin: 5px 0 10px;
    color: var(--project-dark);
    font-size: 28px;
}

.projects-page .projects-empty p {
    max-width: 470px;
    margin: 0 auto 25px;
    color: var(--project-muted);
    line-height: 1.7;
}


/* ============================================================
   GALLERY FOOTER
============================================================ */

.projects-page .projects-gallery-footer {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 55px;
}

.projects-page .projects-footer-line {
    flex: 1;
    height: 1px;
    background: var(--project-border);
}

.projects-page .projects-gallery-footer p {
    margin: 0;
    color: #88867f;
    font-size: 12px;
    line-height: 1.6;
}

.projects-page .projects-gallery-footer strong {
    color: var(--project-dark);
}

.projects-page .projects-footer-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--project-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color var(--project-transition);
}

.projects-page .projects-footer-link i {
    color: var(--project-brass);
    font-size: 14px;
    transition: transform var(--project-transition);
}

.projects-page .projects-footer-link:hover {
    color: var(--project-brass-dark);
}

.projects-page .projects-footer-link:hover i {
    transform: translate(3px,-3px);
}


/* ============================================================
   CTA
============================================================ */

.projects-page .projects-cta {
    padding: 0 0 100px;
    background: var(--project-bg);
}

.projects-page .projects-cta-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 65px 70px;
    border-radius: 22px;
    background:
        linear-gradient(
            120deg,
            #141411 0%,
            #1d1d19 100%
        );
    box-shadow: 0 25px 60px rgba(0,0,0,.13);
}

.projects-page .projects-cta-inner::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    right: -170px;
    top: -190px;
    border: 1px solid rgba(184,150,88,.25);
    border-radius: 50%;
}

.projects-page .projects-cta-inner::after {
    content: "";
    position: absolute;
    width: 270px;
    height: 270px;
    right: -80px;
    top: -110px;
    border: 1px solid rgba(184,150,88,.12);
    border-radius: 50%;
}

.projects-page .projects-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
}

.projects-page .projects-cta .projects-eyebrow {
    color: var(--project-brass);
}

.projects-page .projects-cta h2 {
    margin: 0 0 15px;
    color: #fff;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.projects-page .projects-cta h2 span {
    color: var(--project-brass);
}

.projects-page .projects-cta p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.60);
    font-size: 14px;
    line-height: 1.8;
}

.projects-page .projects-cta-action {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
}


/* ============================================================
   CTA BUTTON
============================================================ */

.projects-page .btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 25px;
    border: 1px solid var(--project-brass);
    border-radius: 6px;
    background: var(--project-brass);
    color: #11110f;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition:
        background var(--project-transition),
        color var(--project-transition),
        transform var(--project-transition),
        box-shadow var(--project-transition);
}

.projects-page .btn-solid:hover {
    background: #d0ad6d;
    border-color: #d0ad6d;
    color: #11110f;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(184,150,88,.22);
}


/* ============================================================
   LIGHTBOX
============================================================ */

.projects-page .lightbox {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    background: rgba(7,7,6,.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.projects-page .lightbox.active,
.projects-page .lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.projects-page .lightbox-content {
    position: relative;
    z-index: 3;
    width: min(1100px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-page .lightbox-image-wrap {
    max-width: 100%;
    max-height: 78vh;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.projects-page .lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.projects-page .lightbox-caption {
    width: 100%;
    padding: 18px 5px 0;
    color: rgba(255,255,255,.82);
    font-size: 13px;
    text-align: center;
}


/* ============================================================
   LIGHTBOX CONTROLS
============================================================ */

.projects-page .lightbox-close,
.projects-page .lightbox-prev,
.projects-page .lightbox-next {
    position: fixed;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
    transition: all .25s ease;
}

.projects-page .lightbox-close:hover,
.projects-page .lightbox-prev:hover,
.projects-page .lightbox-next:hover {
    background: var(--project-brass);
    border-color: var(--project-brass);
    color: #111;
}

.projects-page .lightbox-close {
    top: 25px;
    right: 25px;
    font-size: 17px;
}

.projects-page .lightbox-prev {
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
}

.projects-page .lightbox-next {
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
}

.projects-page .lightbox-prev:hover {
    transform: translate(-3px,-50%);
}

.projects-page .lightbox-next:hover {
    transform: translate(3px,-50%);
}


/* ============================================================
   BODY LOCK WHEN LIGHTBOX OPEN
============================================================ */

body.lightbox-open {
    overflow: hidden;
}


/* ============================================================
   REVEAL ANIMATION SUPPORT
============================================================ */

.projects-page [data-reveal] {
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1400px) {

    .projects-page .project-image {
        height: 360px;
    }

    .projects-page .projects-cta-inner {
        padding: 75px 85px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .projects-page .projects-hero-content {
        align-items: flex-start;
    }

    .projects-page .projects-hero-mark {
        width: 95px;
        height: 95px;
    }

    .projects-page .projects-hero-mark span {
        font-size: 21px;
    }

    .projects-page .projects-section-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 35px;
    }

    .projects-page .projects-section-intro > p {
        max-width: 650px;
    }

    .projects-page .projects-filter {
        border-radius: 12px;
    }

    .projects-page .project-image {
        height: 300px;
    }

    .projects-page .projects-cta-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 55px 45px;
    }

    .projects-page .projects-gallery-footer {
        flex-wrap: wrap;
    }

    .projects-page .projects-footer-line {
        display: none;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .projects-page .projects-hero-content {
        display: block;
    }

    .projects-page .projects-hero-mark {
        display: none;
    }

    .projects-page .projects-hero h1 {
        margin-bottom: 13px;
    }

    .projects-page .projects-section-intro h2 {
        font-size: 34px;
    }

    .projects-page .projects-filter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .projects-page .filter-btn {
        width: 100%;
        justify-content: center;
        padding: 0 10px;
        font-size: 11px;
    }

    .projects-page .filter-btn:first-child {
        grid-column: span 2;
    }

    .projects-page .projects-gallery-meta {
        margin-bottom: 18px;
    }

    .projects-page .project-image {
        height: 280px;
    }

    .projects-page .project-info {
        min-height: 100px;
        padding: 17px;
    }

    .projects-page .project-info h3 {
        font-size: 15px;
    }

    .projects-page .project-category {
        font-size: 7px;
        padding: 5px 7px;
    }

    .projects-page .projects-gallery-footer {
        margin-top: 35px;
        display: block;
    }

    .projects-page .projects-gallery-footer p {
        margin-bottom: 15px;
    }

    .projects-page .projects-cta {
        padding-bottom: 60px;
    }

    .projects-page .projects-cta-inner {
        padding: 42px 25px;
        border-radius: 17px;
    }

    .projects-page .projects-cta h2 {
        font-size: 32px;
    }

    .projects-page .projects-cta p {
        font-size: 13px;
    }

    .projects-page .projects-cta-action,
    .projects-page .projects-cta-action .btn-solid {
        width: 100%;
    }

    .projects-page .lightbox {
        padding: 20px;
    }

    .projects-page .lightbox-close {
        top: 15px;
        right: 15px;
        width: 42px;
        height: 42px;
    }

    .projects-page .lightbox-prev,
    .projects-page .lightbox-next {
        width: 40px;
        height: 40px;
    }

    .projects-page .lightbox-prev {
        left: 12px;
    }

    .projects-page .lightbox-next {
        right: 12px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .projects-page .projects-filter {
        grid-template-columns: 1fr 1fr;
    }

    .projects-page .filter-btn {
        min-height: 44px;
        gap: 6px;
        font-size: 10px;
    }

    .projects-page .filter-number {
        display: none;
    }

    .projects-page .project-image {
        height: 245px;
    }

    .projects-page .project-number {
        width: 36px;
        height: 36px;
        top: 12px;
        left: 12px;
        font-size: 9px;
    }

    .projects-page .project-image-category {
        top: 13px;
        right: 13px;
        padding: 6px 8px;
        font-size: 7px;
    }

    .projects-page .project-info {
        min-height: 92px;
        padding: 15px;
        gap: 10px;
    }

    .projects-page .project-index {
        font-size: 7px;
    }

    .projects-page .project-info h3 {
        font-size: 14px;
    }

    .projects-page .project-category {
        display: none;
    }

    .projects-page .projects-empty {
        padding: 55px 20px;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.projects-page .filter-btn:focus-visible,
.projects-page .project-image-link:focus-visible,
.projects-page .projects-footer-link:focus-visible,
.projects-page .btn-solid:focus-visible,
.projects-page .lightbox-close:focus-visible,
.projects-page .lightbox-prev:focus-visible,
.projects-page .lightbox-next:focus-visible {
    outline: 2px solid var(--project-brass);
    outline-offset: 4px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .projects-page *,
    .projects-page *::before,
    .projects-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}

/* ============================================================
   FM ELEVATOR — SERVICES PAGE
   Premium Industrial / Corporate Service Cards
============================================================ */


/* ============================================================
   SERVICES SECTION
============================================================ */

.services-grid-sec {
    position: relative;
    overflow: hidden;
    background: #f5f4f0;
}


/* subtle background decoration */

.services-grid-sec::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: 80px;
    border: 1px solid rgba(184, 150, 88, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.services-grid-sec::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    left: -180px;
    bottom: -150px;
    border: 1px solid rgba(184, 150, 88, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.services-grid-sec > .container {
    position: relative;
    z-index: 2;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.services-grid-sec .sec-head {
    max-width: 850px;
    margin-bottom: 55px;
}

.services-grid-sec .sec-head h2 {
    margin: 0 0 17px;
    color: #141411;
    font-size: clamp(34px, 4.3vw, 58px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -2px;
}

.services-grid-sec .sec-head h2 span {
    color: #b89658;
}

.services-grid-sec .sec-head .desc {
    max-width: 680px;
    margin: 0;
    color: #77766f;
    font-size: 15px;
    line-height: 1.85;
}


/* ============================================================
   SERVICE CARD
============================================================ */

.service-card {
    position: relative;
    height: 100%;
    min-height: 350px;
    padding: 38px 34px 32px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background: #ffffff;
    border: 1px solid rgba(17, 17, 15, 0.09);
    border-radius: 18px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.4s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;
}


/* top brass line */

.service-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #b89658;

    transition: width 0.5s cubic-bezier(.22, .61, .36, 1);
}


/* large decorative circle */

.service-card::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    right: -125px;
    bottom: -125px;

    border: 1px solid rgba(184, 150, 88, 0.08);
    border-radius: 50%;

    transition:
        transform 0.6s ease,
        border-color 0.4s ease;
}


/* hover */

.service-card:hover {
    transform: translateY(-9px);

    border-color: rgba(184, 150, 88, 0.30);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.10),
        0 5px 18px rgba(184, 150, 88, 0.05);
}

.service-card:hover::before {
    width: 100%;
}

.service-card:hover::after {
    transform: scale(1.35);
    border-color: rgba(184, 150, 88, 0.15);
}


/* ============================================================
   SERVICE ICON
============================================================ */

.service-icon {
    position: relative;
    z-index: 3;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border: 1px solid rgba(184, 150, 88, 0.30);
    border-radius: 14px;

    background: rgba(184, 150, 88, 0.07);

    color: #b89658;

    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        transform 0.4s ease;
}


/* icon inner */

.service-icon span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    font-size: 29px;
    line-height: 1;

    transition: transform 0.4s ease;
}


.service-card:hover .service-icon {
    background: #b89658;
    border-color: #b89658;

    transform: translateY(-3px);
}

.service-card:hover .service-icon span {
    transform: scale(1.08);
}


/* ============================================================
   SERVICE NUMBER
============================================================ */

.service-number {
    position: absolute;

    top: 35px;
    right: 31px;

    color: rgba(17, 17, 15, 0.075);

    font-size: 54px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: -3px;

    pointer-events: none;

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}

.service-card:hover .service-number {
    color: rgba(184, 150, 88, 0.14);
    transform: translateY(-4px);
}


/* ============================================================
   SERVICE TITLE
============================================================ */

.service-card h3 {
    position: relative;
    z-index: 3;

    margin: 0 0 14px;

    color: #161612;

    font-size: 22px;
    font-weight: 650;

    line-height: 1.25;
    letter-spacing: -0.4px;

    transition: color 0.35s ease;
}

.service-card:hover h3 {
    color: #a27f43;
}


/* ============================================================
   SERVICE DESCRIPTION
============================================================ */

.service-card p {
    position: relative;
    z-index: 3;

    margin: 0 0 25px;

    color: #77766f;

    font-size: 13px;
    line-height: 1.8;

    max-width: 95%;
}


/* ============================================================
   SERVICE LINK
============================================================ */

.service-link {
    position: relative;
    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    width: fit-content;

    margin-top: auto;

    color: #171713;

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 1.7px;
    text-transform: uppercase;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

.service-link svg {
    width: 15px;
    height: 11px;

    transition:
        transform 0.35s ease;
}

.service-link svg path {
    stroke: currentColor;
}

.service-link:hover {
    color: #b89658;
    gap: 16px;
}

.service-link:hover svg {
    transform: translateX(4px);
}


/* ============================================================
   LINK UNDERLINE
============================================================ */

.service-link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: #b89658;

    transition: width 0.35s ease;
}

.service-link:hover::after {
    width: calc(100% - 25px);
}


/* ============================================================
   CARD GRID SPACING
============================================================ */

.services-grid-sec .row {
    position: relative;
}


/* ============================================================
   CARD REVEAL SUPPORT
============================================================ */

.services-grid-sec [data-reveal="up"] {
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.22, .61, .36, 1);
}


/* ============================================================
   OPTIONAL — DIFFERENT CARD ACCENTS
============================================================ */

.services-grid-sec .col-lg-4:nth-child(2) .service-icon {
    border-radius: 50%;
}

.services-grid-sec .col-lg-4:nth-child(4) .service-icon {
    border-radius: 50%;
}

.services-grid-sec .col-lg-4:nth-child(6) .service-icon {
    border-radius: 50%;
}


/* ============================================================
   HOVER GLOW
============================================================ */

.service-card:hover .service-icon {
    box-shadow:
        0 10px 28px rgba(184, 150, 88, 0.18);
}


/* ============================================================
   DESKTOP LARGE
============================================================ */

@media (min-width: 1400px) {

    .service-card {
        min-height: 370px;
        padding: 42px 38px 35px;
    }

    .service-icon {
        width: 72px;
        height: 72px;
    }

    .service-card h3 {
        font-size: 23px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .services-grid-sec .sec-head {
        margin-bottom: 40px;
    }

    .services-grid-sec .sec-head h2 {
        font-size: 42px;
    }

    .service-card {
        min-height: 330px;
        padding: 32px 28px 28px;
    }

    .service-number {
        top: 29px;
        right: 25px;
        font-size: 48px;
    }

    .service-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 24px;
    }

    .service-icon span {
        font-size: 26px;
    }

    .service-card h3 {
        font-size: 20px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .services-grid-sec {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    .services-grid-sec .sec-head {
        margin-bottom: 35px;
    }

    .services-grid-sec .sec-head h2 {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -1px;
    }

    .services-grid-sec .sec-head .desc {
        font-size: 13px;
        line-height: 1.75;
    }

    .service-card {
        min-height: 310px;
        padding: 29px 25px 26px;
        border-radius: 16px;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 22px;
        border-radius: 12px;
    }

    .service-icon span {
        font-size: 25px;
    }

    .service-number {
        top: 26px;
        right: 22px;
        font-size: 44px;
    }

    .service-card h3 {
        margin-bottom: 11px;
        font-size: 19px;
    }

    .service-card p {
        max-width: 100%;
        margin-bottom: 23px;
        font-size: 12.5px;
        line-height: 1.75;
    }

    .service-link {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .services-grid-sec {
        padding-top: 50px;
        padding-bottom: 55px;
    }

    .services-grid-sec .sec-head h2 {
        font-size: 30px;
    }

    .services-grid-sec .sec-head .desc {
        font-size: 12px;
    }

    .service-card {
        min-height: 295px;
        padding: 26px 22px 24px;
    }

    .service-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .service-icon span {
        font-size: 23px;
    }

    .service-number {
        top: 24px;
        right: 19px;
        font-size: 39px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 12px;
    }

}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media (hover: none) {

    .service-card:hover {
        transform: none;
        box-shadow:
            0 8px 30px rgba(0, 0, 0, 0.035);
    }

    .service-card:hover::before {
        width: 0;
    }

    .service-card:hover .service-icon {
        background: rgba(184, 150, 88, 0.07);
        border-color: rgba(184, 150, 88, 0.30);
        box-shadow: none;
        transform: none;
    }

    .service-card:hover .service-icon span {
        transform: none;
    }

    .service-card:hover h3 {
        color: #161612;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.service-link:focus-visible {
    outline: 2px solid #b89658;
    outline-offset: 5px;
    border-radius: 3px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .service-card,
    .service-card::before,
    .service-card::after,
    .service-icon,
    .service-icon span,
    .service-number,
    .service-link,
    .service-link svg,
    .service-link::after {
        transition: none !important;
    }

}


/* ============================================================
   FM ELEVATOR — SERVICE DETAIL PAGE
   Premium Industrial / Engineering Theme
============================================================ */

:root {
    --service-ink: #171713;
    --service-dark: #11110f;
    --service-paper: #f6f5f1;
    --service-white: #ffffff;
    --service-brass: #b89658;
    --service-brass-dark: #9c793e;
    --service-muted: #74736c;
    --service-line: rgba(20, 20, 16, 0.10);
    --service-line-dark: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   MAIN SECTION
============================================================ */

.service-detail-sec {
    position: relative;
    background: var(--service-paper);
    overflow: hidden;
}

.service-detail-sec::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -300px;
    top: 100px;
    border: 1px solid rgba(184, 150, 88, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.service-detail-sec::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -220px;
    bottom: -180px;
    border: 1px solid rgba(184, 150, 88, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.service-detail-sec > .container {
    position: relative;
    z-index: 2;
}


/* ============================================================
   MAIN TWO COLUMN LAYOUT
============================================================ */

.service-detail-wrap {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}


/* ============================================================
   SIDEBAR
============================================================ */

.service-sidebar {
    position: sticky;
    top: 110px;
}

.sidebar-block {
    position: relative;
    padding: 27px 22px;

    background: var(--service-white);

    border: 1px solid var(--service-line);
    border-radius: 16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.045);

    overflow: hidden;
}

.sidebar-block + .sidebar-block {
    margin-top: 18px;
}


/* sidebar heading */

.sidebar-block > h4 {
    position: relative;

    margin: 0 0 20px;
    padding-bottom: 15px;

    color: var(--service-ink);

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.sidebar-block > h4::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 35px;
    height: 2px;

    background: var(--service-brass);
}


/* ============================================================
   SERVICE SIDEBAR LIST
============================================================ */

.service-sidebar-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.service-sidebar-list li {
    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(20, 20, 16, 0.065);
}

.service-sidebar-list li:last-child {
    border-bottom: 0;
}

.service-sidebar-list li a {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 52px;

    padding: 10px 8px;

    color: #66655f;

    font-size: 12px;
    font-weight: 550;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding 0.3s ease,
        background 0.3s ease;
}

.service-sidebar-list li a .icon {
    width: 27px;
    min-width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(184, 150, 88, 0.07);

    font-size: 14px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.service-sidebar-list li a .arrow {
    margin-left: auto;

    color: #aaa9a1;

    font-size: 17px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        color 0.3s ease;
}


/* hover */

.service-sidebar-list li a:hover {
    color: var(--service-brass);
    padding-left: 13px;
}

.service-sidebar-list li a:hover .icon {
    background: var(--service-brass);
    transform: scale(1.05);
}

.service-sidebar-list li a:hover .arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--service-brass);
}


/* active */

.service-sidebar-list li.active a {
    color: var(--service-brass);

    background: rgba(184, 150, 88, 0.075);

    border-radius: 9px;

    padding-left: 13px;

    font-weight: 700;
}

.service-sidebar-list li.active a::before {
    content: "";

    position: absolute;
    left: 0;

    width: 3px;
    height: 23px;

    background: var(--service-brass);

    border-radius: 0 4px 4px 0;
}

.service-sidebar-list li.active a .icon {
    background: var(--service-brass);
    color: #fff;
}

.service-sidebar-list li.active a .arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--service-brass);
}


/* ============================================================
   QUICK CONTACT SIDEBAR
============================================================ */

.contact-block {
    background: var(--service-dark);
    border-color: var(--service-dark);
}

.contact-block > h4 {
    color: #fff;
}

.contact-block > p {
    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 12px;
    line-height: 1.75;
}

.sidebar-phone,
.sidebar-email {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 11px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;
    font-weight: 550;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.sidebar-phone svg,
.sidebar-email svg {
    flex-shrink: 0;
    color: var(--service-brass);
}

.sidebar-phone:hover,
.sidebar-email:hover {
    color: var(--service-brass);
    transform: translateX(3px);
}


/* sidebar CTA */

.sidebar-cta {
    width: 100%;
    margin-top: 17px;
}


/* ============================================================
   RIGHT CONTENT
============================================================ */

.service-detail-content {
    min-width: 0;
}


/* ============================================================
   HERO IMAGE
============================================================ */

.service-detail-image {
    position: relative;

    width: 100%;
    height: 455px;

    overflow: hidden;

    background: #ddd;

    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.10);
}

.service-detail-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 35%,
            rgba(0, 0, 0, 0.35) 100%
        );

    pointer-events: none;
}

.service-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.22, .61, .36, 1);
}

.service-detail-image:hover img {
    transform: scale(1.035);
}


/* ============================================================
   IMAGE BADGES
============================================================ */

.service-detail-badge {
    position: absolute;
    z-index: 4;

    left: 22px;
    bottom: 22px;

    display: inline-flex;
    align-items: center;

    min-height: 34px;

    padding: 8px 14px;

    background: rgba(17, 17, 15, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;

    backdrop-filter: blur(8px);

    color: #fff;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.service-detail-badge.right {
    left: auto;
    right: 22px;

    background: var(--service-brass);
    border-color: var(--service-brass);

    color: #fff;
}


/* ============================================================
   SERVICE INFO
============================================================ */

.service-detail-info {
    position: relative;

    margin-top: 24px;

    padding: 40px 42px 45px;

    background: var(--service-white);

    border: 1px solid var(--service-line);
    border-radius: 20px;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.045);
}


/* ============================================================
   META TAGS
============================================================ */

.service-detail-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}

.meta-item {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 7px 11px;

    background: #f7f6f2;

    border: 1px solid rgba(20, 20, 16, 0.08);
    border-radius: 6px;

    color: #686760;

    font-size: 9px;
    font-weight: 650;

    letter-spacing: 0.7px;
    text-transform: uppercase;
}


/* ============================================================
   SERVICE TITLE
============================================================ */

.service-detail-info > h2 {
    margin: 0 0 18px;

    color: var(--service-ink);

    font-size: clamp(29px, 3vw, 43px);
    font-weight: 650;

    line-height: 1.12;

    letter-spacing: -1.5px;
}

.service-detail-info > h2 span {
    color: var(--service-brass);
}


/* ============================================================
   INTRO DESCRIPTION
============================================================ */

.service-detail-info > p {
    margin: 0 0 35px;

    max-width: 900px;

    color: var(--service-muted);

    font-size: 14px;
    line-height: 1.9;
}

.service-detail-info > p strong {
    color: var(--service-ink);
    font-weight: 700;
}


/* ============================================================
   INTERNAL HEADINGS
============================================================ */

.service-detail-info > h3 {
    position: relative;

    margin: 42px 0 21px;
    padding-top: 22px;

    color: var(--service-ink);

    font-size: 21px;
    font-weight: 650;

    letter-spacing: -0.4px;
}

.service-detail-info > h3::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 35px;
    height: 2px;

    background: var(--service-brass);
}


/* ============================================================
   FEATURES
============================================================ */

.service-detail-features {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.service-detail-features li {
    position: relative;

    padding: 15px 16px 15px 43px;

    background: #f8f7f3;

    border: 1px solid rgba(20, 20, 16, 0.07);
    border-radius: 10px;

    color: #55544e;

    font-size: 12px;
    line-height: 1.5;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.service-detail-features li::before {
    content: "✓";

    position: absolute;
    left: 15px;
    top: 50%;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);

    border-radius: 50%;

    background: var(--service-brass);

    color: #fff;

    font-size: 10px;
    font-weight: 800;
}

.service-detail-features li:hover {
    transform: translateY(-2px);

    border-color: rgba(184, 150, 88, 0.30);

    background: #fff;
}


/* ============================================================
   SERVICE PROCESS
============================================================ */

.service-process {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 0;

    margin-top: 5px;
}

.service-process::before {
    content: "";

    position: absolute;

    left: 21px;
    top: 23px;
    bottom: 23px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            var(--service-brass),
            rgba(184, 150, 88, 0.12)
        );
}

.process-step {
    position: relative;
    z-index: 2;

    display: flex;

    gap: 20px;

    padding: 15px 0;
}

.step-number {
    position: relative;
    z-index: 3;

    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--service-white);

    border: 1px solid rgba(184, 150, 88, 0.40);
    border-radius: 50%;

    color: var(--service-brass);

    font-size: 11px;
    font-weight: 750;
}

.step-content {
    flex: 1;

    padding: 4px 0 3px;
}

.step-content h4 {
    margin: 0 0 6px;

    color: var(--service-ink);

    font-size: 15px;
    font-weight: 650;
}

.step-content p {
    margin: 0;

    color: var(--service-muted);

    font-size: 12px;
    line-height: 1.7;
}


/* ============================================================
   WHY CHOOSE GRID
============================================================ */

.service-why-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.service-why-item {
    display: flex;

    gap: 14px;

    padding: 18px;

    background: #f8f7f3;

    border: 1px solid rgba(20, 20, 16, 0.07);
    border-radius: 11px;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.service-why-item:hover {
    transform: translateY(-4px);

    border-color: rgba(184, 150, 88, 0.28);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.055);
}

.why-icon {
    flex: 0 0 35px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(184, 150, 88, 0.11);

    border-radius: 8px;

    color: var(--service-brass);

    font-size: 16px;
    font-weight: 700;
}

.service-why-item h4 {
    margin: 2px 0 6px;

    color: var(--service-ink);

    font-size: 13px;
    font-weight: 700;
}

.service-why-item p {
    margin: 0;

    color: var(--service-muted);

    font-size: 11px;
    line-height: 1.65;
}


/* ============================================================
   FAQ
============================================================ */

.service-faqs {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 5px;
}

.faq-item {
    position: relative;

    padding: 18px 21px;

    background: #faf9f6;

    border: 1px solid var(--service-line);
    border-radius: 11px;

    transition:
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.faq-item:hover {
    border-color: rgba(184, 150, 88, 0.45);

    background: #fff;

    box-shadow:
        0 7px 25px rgba(0, 0, 0, 0.045);

    transform: translateX(4px);
}

.faq-item h4 {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 0 8px;

    color: var(--service-ink);

    font-family: 'Inter', sans-serif;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.45;
}

.faq-item h4 .q-mark {
    flex: 0 0 27px;

    width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--service-brass);

    border-radius: 50%;

    color: #fff;

    font-size: 12px;
    font-weight: 750;
}

.faq-item h4 .q-text {
    flex: 1;
}

.faq-item p {
    margin: 0;

    padding-left: 39px;

    color: var(--service-muted);

    font-family: 'Inter', sans-serif;

    font-size: 12px;
    font-weight: 350;

    line-height: 1.75;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.service-detail-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 42px;
    padding-top: 30px;

    border-top: 1px solid var(--service-line);
}

.service-detail-actions .btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    padding: 13px 22px;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 1.3px;
    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


/* solid button */

.service-detail-actions .btn-solid {
    background: var(--service-brass);
    border: 1px solid var(--service-brass);

    color: #fff;
}

.service-detail-actions .btn-solid:hover {
    background: var(--service-brass-dark);
    border-color: var(--service-brass-dark);

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(184, 150, 88, 0.22);
}


/* outline */

.service-detail-actions .btn-outline {
    background: transparent;

    border: 1px solid rgba(20, 20, 16, 0.20);

    color: var(--service-ink);
}

.service-detail-actions .btn-outline:hover {
    background: var(--service-dark);

    border-color: var(--service-dark);

    color: #fff;

    transform: translateY(-2px);
}


/* ============================================================
   GENERIC BUTTON SUPPORT
============================================================ */

.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--service-brass);

    border: 1px solid var(--service-brass);

    color: #fff;

    text-decoration: none;

    transition: all 0.3s ease;
}

.btn-solid:hover {
    background: var(--service-brass-dark);
    border-color: var(--service-brass-dark);
    color: #fff;
}


/* ============================================================
   SIDEBAR CTA
============================================================ */

.sidebar-cta.btn-solid {
    min-height: 43px;

    padding: 11px 15px;

    border-radius: 6px;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 1.2px;
    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1199.98px) {

    .service-detail-wrap {
        grid-template-columns: 245px minmax(0, 1fr);
        gap: 30px;
    }

    .service-detail-image {
        height: 410px;
    }

    .service-detail-info {
        padding: 35px 32px 40px;
    }

    .service-sidebar-list li a {
        font-size: 11px;
    }

}


/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */

@media (max-width: 991.98px) {

    .service-detail-wrap {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .service-sidebar {
        position: static;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 18px;
    }

    .sidebar-block + .sidebar-block {
        margin-top: 0;
    }

    .service-sidebar-list {
        display: grid;

        grid-template-columns: 1fr 1fr;

        column-gap: 12px;
    }

    .service-sidebar-list li:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .service-detail-image {
        height: 400px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .service-detail-sec {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .service-detail-wrap {
        gap: 20px;
    }

    .service-sidebar {
        display: flex;
        flex-direction: column;
    }

    .service-sidebar-list {
        grid-template-columns: 1fr;
    }

    .service-sidebar-list li:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(20, 20, 16, 0.065);
    }

    .service-sidebar-list li:last-child {
        border-bottom: 0;
    }

    .sidebar-block {
        padding: 23px 18px;
        border-radius: 13px;
    }

    .service-detail-image {
        height: 300px;
        border-radius: 15px;
    }

    .service-detail-badge {
        left: 14px;
        bottom: 14px;

        min-height: 30px;

        padding: 7px 10px;

        font-size: 8px;
    }

    .service-detail-badge.right {
        right: 14px;
    }

    .service-detail-info {
        margin-top: 17px;

        padding: 28px 21px 30px;

        border-radius: 15px;
    }

    .service-detail-meta {
        gap: 6px;
        margin-bottom: 23px;
    }

    .meta-item {
        min-height: 28px;

        padding: 6px 8px;

        font-size: 8px;
        letter-spacing: 0.45px;
    }

    .service-detail-info > h2 {
        font-size: 29px;
        letter-spacing: -0.8px;
    }

    .service-detail-info > p {
        font-size: 13px;
        line-height: 1.8;
        margin-bottom: 28px;
    }

    .service-detail-info > h3 {
        margin-top: 34px;

        font-size: 19px;
    }

    .service-detail-features {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-detail-features li {
        padding: 13px 13px 13px 40px;
        font-size: 11px;
    }

    .service-why-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .service-why-item {
        padding: 15px;
    }

    .faq-item {
        padding: 15px 16px;
    }

    .faq-item h4 {
        font-size: 13px;
        gap: 9px;
    }

    .faq-item h4 .q-mark {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 11px;
    }

    .faq-item p {
        padding-left: 33px;
        font-size: 11px;
    }

    .service-detail-actions {
        flex-direction: column;

        margin-top: 32px;
        padding-top: 24px;
    }

    .service-detail-actions .btn {
        width: 100%;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .service-detail-image {
        height: 250px;
    }

    .service-detail-badge {
        font-size: 7px;
        letter-spacing: 0.8px;
    }

    .service-detail-badge.right {
        display: none;
    }

    .service-detail-info {
        padding: 25px 17px 27px;
    }

    .service-detail-info > h2 {
        font-size: 26px;
    }

    .service-detail-info > p {
        font-size: 12px;
    }

    .service-detail-info > h3 {
        font-size: 18px;
    }

    .step-number {
        flex-basis: 38px;

        width: 38px;
        height: 38px;

        font-size: 10px;
    }

    .service-process::before {
        left: 18.5px;
    }

    .process-step {
        gap: 14px;
    }

    .step-content h4 {
        font-size: 13px;
    }

    .step-content p {
        font-size: 11px;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.service-detail-actions a:focus-visible,
.service-sidebar a:focus-visible {
    outline: 2px solid var(--service-brass);
    outline-offset: 4px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .service-detail-image img,
    .service-card,
    .service-sidebar-list li a,
    .service-sidebar-list li a .icon,
    .service-sidebar-list li a .arrow,
    .service-why-item,
    .faq-item,
    .service-detail-actions .btn {
        transition: none !important;
    }

}

/* ============================================================
   FM ELEVATOR — BLOG GRID
   Breadcrumb intentionally excluded
============================================================ */

.blogs-grid-sec {
    position: relative;
    background: #f6f5f1;
    overflow: hidden;
}

.blogs-grid-sec::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -250px;
    top: 80px;
    border: 1px solid rgba(184, 150, 88, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.blogs-grid-sec::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -180px;
    bottom: -150px;
    border: 1px solid rgba(184, 150, 88, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.blogs-grid-sec > .container {
    position: relative;
    z-index: 2;
}


/* ============================================================
   BLOG CARD
============================================================ */

.blog-card {
    position: relative;

    display: block;
    height: 100%;

    background: #fff;

    border: 1px solid rgba(20, 20, 16, 0.08);
    border-radius: 16px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.45s cubic-bezier(.22, .61, .36, 1),
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}

.blog-card:hover {
    transform: translateY(-8px);

    border-color: rgba(184, 150, 88, 0.28);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.09);

    color: inherit;
}


/* ============================================================
   BLOG IMAGE
============================================================ */

.blog-image {
    position: relative;

    height: 255px;

    overflow: hidden;

    background: #e8e6df;
}

.blog-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 35%,
            rgba(0, 0, 0, 0.28) 100%
        );

    pointer-events: none;
}

.blog-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s cubic-bezier(.22, .61, .36, 1);
}

.blog-card:hover .blog-image img {
    transform: scale(1.07);
}


/* ============================================================
   CATEGORY BADGE
============================================================ */

.blog-category {
    position: absolute;

    left: 17px;
    bottom: 17px;

    z-index: 3;

    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 7px 12px;

    background: rgba(17, 17, 15, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;

    color: #fff;

    font-size: 9px;
    font-weight: 750;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    backdrop-filter: blur(8px);

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.blog-card:hover .blog-category {
    background: #b89658;
    border-color: #b89658;
}


/* ============================================================
   BLOG BODY
============================================================ */

.blog-body {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 275px;

    padding: 25px 25px 23px;
}


/* ============================================================
   BLOG META
============================================================ */

.blog-meta {
    display: flex;
    align-items: center;

    margin-bottom: 13px;
}

.blog-meta span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #929089;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.5px;
}

.blog-meta i {
    color: #b89658;

    font-size: 11px;
}


/* ============================================================
   BLOG TITLE
============================================================ */

.blog-body h3 {
    margin: 0 0 12px;

    color: #171713;

    font-size: 20px;
    font-weight: 650;

    line-height: 1.35;

    letter-spacing: -0.4px;

    transition:
        color 0.3s ease;
}

.blog-card:hover .blog-body h3 {
    color: #a07d43;
}


/* ============================================================
   BLOG DESCRIPTION
============================================================ */

.blog-body p {
    margin: 0;

    color: #77766f;

    font-size: 12px;
    font-weight: 350;

    line-height: 1.8;
}


/* ============================================================
   READ MORE
============================================================ */

.blog-link {
    display: inline-flex;
    align-items: center;

    margin-top: auto;
    padding-top: 20px;

    color: #b89658;

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    transition:
        color 0.3s ease,
        gap 0.3s ease,
        transform 0.3s ease;
}

.blog-link::after {
    content: "";

    width: 25px;
    height: 1px;

    margin-left: 9px;

    background: #b89658;

    transition:
        width 0.3s ease;
}

.blog-card:hover .blog-link {
    color: #171713;
}

.blog-card:hover .blog-link::after {
    width: 38px;
    background: #171713;
}


/* ============================================================
   CARD TOP ACCENT
============================================================ */

.blog-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    z-index: 5;

    background: #b89658;

    transition:
        width 0.45s cubic-bezier(.22, .61, .36, 1);
}

.blog-card:hover::before {
    width: 100%;
}


/* ============================================================
   PAGINATION
============================================================ */

.blogs-pagination {
    display: flex;
    justify-content: center;

    position: relative;
    z-index: 3;
}

.blogs-pagination nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.blogs-pagination .pagination {
    display: flex;
    align-items: center;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.blogs-pagination .page-item {
    margin: 0;
}

.blogs-pagination .page-link {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(20, 20, 16, 0.11);
    border-radius: 7px !important;

    background: #fff;

    color: #55544e;

    font-size: 11px;
    font-weight: 650;

    box-shadow: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.blogs-pagination .page-link:hover {
    background: #171713;

    border-color: #171713;

    color: #fff;

    transform: translateY(-2px);
}

.blogs-pagination .page-item.active .page-link {
    background: #b89658;

    border-color: #b89658;

    color: #fff;

    box-shadow:
        0 7px 18px rgba(184, 150, 88, 0.20);
}

.blogs-pagination .page-item.disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.blogs-grid-sec .text-center.py-5 h4 {
    color: #171713;

    font-size: 22px;
    font-weight: 650;
}

.blogs-grid-sec .text-center.py-5 p {
    color: #77766f;

    font-size: 13px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .blog-image {
        height: 235px;
    }

    .blog-body {
        min-height: 255px;
        padding: 22px 21px;
    }

    .blog-body h3 {
        font-size: 18px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .blogs-grid-sec {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .blogs-grid-sec::before {
        width: 350px;
        height: 350px;

        right: -220px;
    }

    .blogs-grid-sec::after {
        width: 230px;
        height: 230px;

        left: -160px;
    }

    .blog-card {
        border-radius: 13px;
    }

    .blog-image {
        height: 230px;
    }

    .blog-category {
        left: 13px;
        bottom: 13px;

        min-height: 29px;

        padding: 6px 10px;

        font-size: 8px;
    }

    .blog-body {
        min-height: 245px;

        padding: 21px 19px 20px;
    }

    .blog-meta {
        margin-bottom: 11px;
    }

    .blog-meta span {
        font-size: 9px;
    }

    .blog-body h3 {
        font-size: 18px;
        line-height: 1.4;
    }

    .blog-body p {
        font-size: 11px;
        line-height: 1.75;
    }

    .blog-link {
        padding-top: 17px;

        font-size: 9px;
    }

    .blogs-pagination {
        margin-top: 35px !important;
    }

    .blogs-pagination .pagination {
        gap: 5px;
    }

    .blogs-pagination .page-link {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .blog-image {
        height: 205px;
    }

    .blog-body {
        min-height: 230px;
        padding: 19px 17px;
    }

    .blog-body h3 {
        font-size: 17px;
    }

    .blog-body p {
        font-size: 11px;
    }

    .blogs-pagination .page-link {
        width: 34px;
        height: 34px;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.blog-card:focus-visible,
.blogs-pagination .page-link:focus-visible {
    outline: 2px solid #b89658;
    outline-offset: 4px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .blog-card,
    .blog-image img,
    .blog-category,
    .blog-body h3,
    .blog-link,
    .blog-link::after,
    .blogs-pagination .page-link {
        transition: none !important;
    }

}

/* ============================================================
   FM ELEVATOR — BLOG DETAIL PAGE
   Breadcrumb intentionally excluded
============================================================ */

.blog-detail-sec {
    position: relative;
    background: #f6f5f1;
    overflow: hidden;
}

.blog-detail-sec > .container {
    position: relative;
    z-index: 2;
}


/* ============================================================
   MAIN BLOG CONTENT
============================================================ */

.blog-detail-content {
    position: relative;

    background: #ffffff;

    border: 1px solid rgba(20, 20, 16, 0.07);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.045);
}


/* ============================================================
   FEATURED IMAGE
============================================================ */

.blog-detail-image {
    position: relative;

    width: 100%;
    height: 470px;

    overflow: hidden;

    background: #e8e6df;
}

.blog-detail-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.01) 45%,
            rgba(0, 0, 0, 0.18) 100%
        );

    pointer-events: none;
}

.blog-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ============================================================
   META BAR
============================================================ */

.blog-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px 24px;

    padding: 20px 32px;

    border-bottom: 1px solid rgba(20, 20, 16, 0.07);

    background: #fff;
}

.blog-detail-meta span {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #77766f;

    font-size: 10px;
    font-weight: 650;

    letter-spacing: 0.65px;
}

.blog-detail-meta span:not(:last-child)::after {
    content: "";

    width: 3px;
    height: 3px;

    position: absolute;

    right: -15px;

    border-radius: 50%;

    background: #c2a46d;
}

.blog-detail-meta i {
    color: #b89658;

    font-size: 11px;
}


/* ============================================================
   ARTICLE BODY
============================================================ */

.blog-detail-body {
    padding: 42px 45px 52px;

    color: #57564f;

    font-size: 14px;

    line-height: 1.95;
}


/* ============================================================
   ARTICLE TITLE
============================================================ */

.blog-detail-body > h2 {
    position: relative;

    margin: 0 0 28px;

    padding-bottom: 23px;

    color: #171713;

    font-size: clamp(28px, 3vw, 40px);
    font-weight: 650;

    line-height: 1.2;

    letter-spacing: -1px;
}

.blog-detail-body > h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 55px;
    height: 2px;

    background: #b89658;
}


/* ============================================================
   ARTICLE TYPOGRAPHY
============================================================ */

.blog-detail-body p {
    margin: 0 0 20px;

    color: #62615a;

    font-size: 14px;

    line-height: 1.95;
}

.blog-detail-body p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   HEADINGS INSIDE CONTENT
============================================================ */

.blog-detail-body h1,
.blog-detail-body h3,
.blog-detail-body h4,
.blog-detail-body h5,
.blog-detail-body h6 {
    color: #171713;

    font-weight: 650;

    line-height: 1.35;

    margin-top: 34px;
    margin-bottom: 15px;
}

.blog-detail-body h1 {
    font-size: 32px;
}

.blog-detail-body h3 {
    font-size: 25px;
}

.blog-detail-body h4 {
    font-size: 20px;
}

.blog-detail-body h5 {
    font-size: 17px;
}

.blog-detail-body h6 {
    font-size: 15px;
}


/* ============================================================
   LINKS
============================================================ */

.blog-detail-body a {
    color: #a17d43;

    font-weight: 600;

    text-decoration: underline;
    text-decoration-color: rgba(161, 125, 67, 0.35);
    text-underline-offset: 3px;

    transition:
        color 0.25s ease,
        text-decoration-color 0.25s ease;
}

.blog-detail-body a:hover {
    color: #171713;

    text-decoration-color: #171713;
}


/* ============================================================
   STRONG / EMPHASIS
============================================================ */

.blog-detail-body strong,
.blog-detail-body b {
    color: #272620;

    font-weight: 700;
}

.blog-detail-body em,
.blog-detail-body i {
    color: #6e5a38;
}


/* ============================================================
   LISTS
============================================================ */

.blog-detail-body ul,
.blog-detail-body ol {
    margin: 22px 0 26px;

    padding-left: 25px;
}

.blog-detail-body li {
    margin-bottom: 9px;

    padding-left: 5px;

    color: #62615a;

    line-height: 1.8;
}

.blog-detail-body ul li::marker {
    color: #b89658;
}

.blog-detail-body ol li::marker {
    color: #b89658;

    font-weight: 700;
}


/* ============================================================
   BLOCKQUOTE
============================================================ */

.blog-detail-body blockquote {
    position: relative;

    margin: 32px 0;

    padding: 25px 28px 25px 32px;

    background: #f7f4ed;

    border-left: 3px solid #b89658;
    border-radius: 0 10px 10px 0;

    color: #4f4d45;

    font-size: 16px;
    font-style: italic;

    line-height: 1.8;
}

.blog-detail-body blockquote p {
    margin: 0;

    color: inherit;

    font-size: inherit;
}


/* ============================================================
   IMAGES INSIDE ARTICLE
============================================================ */

.blog-detail-body img {
    max-width: 100%;
    height: auto;

    display: block;

    margin: 28px auto;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   TABLES
============================================================ */

.blog-detail-body table {
    width: 100%;

    margin: 28px 0;

    border-collapse: collapse;

    overflow: hidden;

    font-size: 13px;
}

.blog-detail-body th {
    padding: 13px 15px;

    background: #171713;

    color: #fff;

    font-weight: 650;

    text-align: left;
}

.blog-detail-body td {
    padding: 12px 15px;

    border: 1px solid #e7e4dc;

    color: #62615a;

    background: #fff;
}

.blog-detail-body tr:nth-child(even) td {
    background: #faf9f6;
}


/* ============================================================
   CODE
============================================================ */

.blog-detail-body pre {
    margin: 25px 0;

    padding: 20px;

    overflow-x: auto;

    background: #171713;

    border-radius: 9px;

    color: #eee;

    font-size: 12px;

    line-height: 1.7;
}

.blog-detail-body code {
    padding: 2px 6px;

    background: #f0ede5;

    border-radius: 4px;

    color: #8b6b39;

    font-size: 0.9em;
}

.blog-detail-body pre code {
    padding: 0;

    background: transparent;

    color: inherit;
}


/* ============================================================
   HORIZONTAL RULE
============================================================ */

.blog-detail-body hr {
    margin: 35px 0;

    border: 0;

    border-top: 1px solid #e5e2da;

    opacity: 1;
}


/* ============================================================
   SIDEBAR
============================================================ */

.blog-sidebar {
    position: sticky;

    top: 110px;
}


/* ============================================================
   SIDEBAR WIDGET
============================================================ */

.sidebar-widget {
    position: relative;

    margin-bottom: 25px;

    padding: 26px;

    background: #fff;

    border: 1px solid rgba(20, 20, 16, 0.07);
    border-radius: 15px;

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.035);

    overflow: hidden;
}

.sidebar-widget::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 3px;

    background: #b89658;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}


/* ============================================================
   SIDEBAR TITLE
============================================================ */

.sidebar-widget > h4 {
    position: relative;

    margin: 0 0 20px;

    padding-bottom: 14px;

    color: #171713;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.2px;
}

.sidebar-widget > h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 1px;

    background: #e9e6de;
}

.sidebar-widget > h4::before {
    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 2px;

    background: #b89658;
}


/* ============================================================
   CATEGORIES
============================================================ */

.sidebar-categories {
    margin: 0;
    padding: 0;

    list-style: none;
}

.sidebar-categories li {
    margin: 0;

    border-bottom: 1px solid #eeeae2;
}

.sidebar-categories li:last-child {
    border-bottom: 0;
}

.sidebar-categories a {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 2px;

    color: #66645d;

    font-size: 12px;
    font-weight: 550;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.sidebar-categories a::after {
    content: "→";

    color: #b89658;

    font-size: 13px;

    opacity: 0;

    transform: translateX(-5px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.sidebar-categories a:hover {
    padding-left: 7px;

    color: #a17d43;
}

.sidebar-categories a:hover::after {
    opacity: 1;

    transform: translateX(0);
}


/* ============================================================
   RECENT POSTS
============================================================ */

.recent-post {
    display: grid;

    grid-template-columns: 78px 1fr;

    gap: 13px;

    padding: 13px 0;

    border-bottom: 1px solid #eeeae2;

    color: inherit;

    text-decoration: none;

    transition:
        transform 0.3s ease;
}

.recent-post:first-of-type {
    padding-top: 0;
}

.recent-post:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}

.recent-post:hover {
    color: inherit;

    transform: translateX(4px);
}


/* ============================================================
   RECENT IMAGE
============================================================ */

.recent-post-image {
    width: 78px;
    height: 65px;

    overflow: hidden;

    border-radius: 7px;

    background: #e9e7e0;
}

.recent-post-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.recent-post:hover .recent-post-image img {
    transform: scale(1.08);
}


/* ============================================================
   RECENT CONTENT
============================================================ */

.recent-post-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.recent-post-content h5 {
    margin: 0 0 7px;

    color: #272620;

    font-size: 12px;
    font-weight: 650;

    line-height: 1.45;

    transition:
        color 0.25s ease;
}

.recent-post:hover .recent-post-content h5 {
    color: #a17d43;
}

.recent-post-content span {
    margin-top: auto;

    color: #9a9890;

    font-size: 9px;
    font-weight: 550;

    letter-spacing: 0.3px;
}


/* ============================================================
   SIDEBAR SCROLL / LONG CATEGORY LIST
============================================================ */

.sidebar-categories {
    max-height: 320px;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #c6a873 transparent;
}

.sidebar-categories::-webkit-scrollbar {
    width: 4px;
}

.sidebar-categories::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-categories::-webkit-scrollbar-thumb {
    background: #c6a873;

    border-radius: 10px;
}


/* ============================================================
   RESPONSIVE — LARGE TABLET
============================================================ */

@media (max-width: 1199.98px) {

    .blog-detail-image {
        height: 420px;
    }

    .blog-detail-body {
        padding: 38px 35px 45px;
    }

    .sidebar-widget {
        padding: 22px;
    }

}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 991.98px) {

    .blog-sidebar {
        position: static;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;

        margin-top: 0;
    }

    .sidebar-widget {
        margin-bottom: 0;
    }

    .blog-detail-image {
        height: 400px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .blog-detail-sec {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .blog-detail-content {
        border-radius: 13px;
    }

    .blog-detail-image {
        height: 280px;
    }

    .blog-detail-meta {
        gap: 10px 16px;

        padding: 16px 19px;
    }

    .blog-detail-meta span {
        font-size: 9px;
    }

    .blog-detail-meta span:not(:last-child)::after {
        right: -10px;
    }

    .blog-detail-body {
        padding: 30px 20px 35px;

        font-size: 13px;
    }

    .blog-detail-body > h2 {
        margin-bottom: 23px;

        padding-bottom: 18px;

        font-size: 27px;

        letter-spacing: -0.6px;
    }

    .blog-detail-body p {
        font-size: 13px;

        line-height: 1.85;
    }

    .blog-detail-body h3 {
        font-size: 21px;
    }

    .blog-detail-body h4 {
        font-size: 18px;
    }

    .blog-detail-body blockquote {
        margin: 25px 0;

        padding: 20px 18px 20px 22px;

        font-size: 14px;
    }

    .blog-sidebar {
        display: block;

        margin-top: 25px;
    }

    .sidebar-widget {
        margin-bottom: 18px;

        padding: 21px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .blog-detail-image {
        height: 230px;
    }

    .blog-detail-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

    .blog-detail-meta span:not(:last-child)::after {
        display: none;
    }

    .blog-detail-body {
        padding: 26px 17px 30px;
    }

    .blog-detail-body > h2 {
        font-size: 24px;
    }

    .blog-detail-body p {
        font-size: 12.5px;
    }

    .recent-post {
        grid-template-columns: 72px 1fr;
    }

    .recent-post-image {
        width: 72px;
        height: 60px;
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.blog-detail-body a:focus-visible,
.recent-post:focus-visible,
.sidebar-categories a:focus-visible {
    outline: 2px solid #b89658;
    outline-offset: 4px;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .blog-detail-body a,
    .recent-post,
    .recent-post-image img,
    .sidebar-categories a,
    .sidebar-categories a::after {
        transition: none !important;
    }

}

/* ============================================================
   BLOG DETAIL — BREADCRUMB / HERO
============================================================ */

.about-breadcrumb {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #171713 0%,
            #20201b 55%,
            #151511 100%
        );

    color: #fff;

    border-bottom: 1px solid rgba(184, 150, 88, 0.16);
}


/* Decorative glow */

.about-breadcrumb::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -230px;
    top: -260px;

    border: 1px solid rgba(184, 150, 88, 0.12);

    border-radius: 50%;

    pointer-events: none;
}

.about-breadcrumb::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -190px;
    bottom: -210px;

    border: 1px solid rgba(255, 255, 255, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


/* Container */

.about-breadcrumb .container {
    position: relative;
    z-index: 2;
}


/* Main wrapper */

.about-breadcrumb .breadcrumb-wrap {
    position: relative;

    max-width: 1050px;

    padding-top: 48px;
    padding-bottom: 58px;
}


/* ============================================================
   BREADCRUMB NAVIGATION
============================================================ */

.about-breadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;

    margin: 0 0 25px;
    padding: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.about-breadcrumb .breadcrumb a {
    color: rgba(255, 255, 255, 0.62);

    text-decoration: none;

    transition:
        color 0.3s ease;
}

.about-breadcrumb .breadcrumb a:hover {
    color: #c5a66c;
}

.about-breadcrumb .breadcrumb .separator {
    color: rgba(184, 150, 88, 0.75);

    font-size: 11px;
}

.about-breadcrumb .breadcrumb .current {
    max-width: 420px;

    overflow: hidden;

    color: #b89658;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ============================================================
   BLOG TITLE
============================================================ */

.about-breadcrumb h1 {
    max-width: 900px;

    margin: 0 0 17px;

    color: #ffffff;

    font-size: clamp(34px, 4.5vw, 62px);
    font-weight: 650;

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.about-breadcrumb h1 span {
    color: #b89658;
}


/* ============================================================
   BLOG EXCERPT
============================================================ */

.about-breadcrumb p {
    max-width: 720px;

    margin: 0;

    color: rgba(255, 255, 255, 0.64);

    font-size: 14px;
    font-weight: 350;

    line-height: 1.8;
}


/* ============================================================
   GOLD ACCENT LINE
============================================================ */

.about-breadcrumb .breadcrumb-wrap::after {
    content: "";

    display: block;

    width: 58px;
    height: 2px;

    margin-top: 28px;

    background: #b89658;
}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 991.98px) {

    .about-breadcrumb .breadcrumb-wrap {
        padding-top: 42px;
        padding-bottom: 48px;
    }

    .about-breadcrumb h1 {
        font-size: clamp(32px, 5vw, 48px);

        letter-spacing: -1px;
    }

    .about-breadcrumb p {
        max-width: 650px;

        font-size: 13px;
    }

}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .about-breadcrumb .breadcrumb-wrap {
        padding-top: 35px;
        padding-bottom: 42px;
    }

    .about-breadcrumb .breadcrumb {
        margin-bottom: 20px;

        gap: 7px;

        font-size: 8px;
    }

    .about-breadcrumb .breadcrumb .current {
        max-width: 180px;
    }

    .about-breadcrumb h1 {
        margin-bottom: 14px;

        font-size: 31px;

        line-height: 1.15;

        letter-spacing: -0.7px;
    }

    .about-breadcrumb p {
        font-size: 11.5px;

        line-height: 1.75;
    }

    .about-breadcrumb .breadcrumb-wrap::after {
        width: 45px;

        margin-top: 23px;
    }

    .about-breadcrumb::before {
        width: 350px;
        height: 350px;

        right: -220px;
        top: -190px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

    .about-breadcrumb .breadcrumb-wrap {
        padding-top: 30px;
        padding-bottom: 36px;
    }

    .about-breadcrumb h1 {
        font-size: 27px;
    }

    .about-breadcrumb p {
        font-size: 11px;
    }

    .about-breadcrumb .breadcrumb .current {
        max-width: 145px;
    }

}