/*
Theme Name:   Fritidsmax (Storefront Child)
Theme URI:    https://fritidsmax.se
Description:  Editorial katalogtema för Fritidsmax — friluftsutrustning. Ljus off-white palett, kondenserad sans-serif, full-bleed hero, tabbade kollektioner. Fyra kategorier: knivar, sovsäckar, campingutrustning, stormkök.
Author:       Petter Berg
Author URI:   https://petterberg.com
Template:     storefront
Version:      3.0.0
License:      GNU General Public License v2 or later
Text Domain:  fritidsmax
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
    --fm-bg:           #faf8f4;
    --fm-bg-alt:       #f0ede5;
    --fm-surface:      #ffffff;
    --fm-ink:          #161614;
    --fm-ink-soft:     #3a3a36;
    --fm-ink-muted:    #8a8780;
    --fm-line:         #e3dfd5;
    --fm-accent:       #c84a1f;

    /* Default: Source Sans 3 (modern version of Source Sans Pro).
       Override in WP under Appearance → Customize → Fritidsmax → Display Font.
       Body font kept as Source Sans for consistency, but you can split them. */
    --fm-font-display: "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
    --fm-font-body:    "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;

    --fm-radius: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* =========================================================================
   2. BASE — force light theme (prevents browser dark-mode override)
   ========================================================================= */
:root {
    color-scheme: light only;
}
html {
    background: var(--fm-bg) !important;
    color: var(--fm-ink) !important;
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    overflow-x: hidden;
    max-width: 100vw;
}
/* Catch common culprits — full-bleed sections that overflow */
.fm-hero,
.fm-cat-banner,
.fm-post-hero,
.fm-story,
.fm-related,
.site-footer {
    max-width: 100vw;
    overflow-x: hidden;
}

/* =========================================================================
   Mobile padding override — håll inre marginaler smala på små skärmar
   ========================================================================= */
@media (max-width: 768px) {
    .fm-section,
    .fm-cat-products,
    .fm-product-page,
    .fm-related,
    .fm-story,
    .fm-post-body,
    .fm-post-footer,
    .single-product .site-main,
    .woocommerce.archive .site-main,
    .woocommerce-shop .site-main,
    .tax-product_cat .site-main,
    .blog .col-full,
    .archive:not(.woocommerce) .col-full,
    .site-footer .col-full,
    .header-inner,
    .footer-inner,
    .site-info,
    .fm-cat-toolbar,
    .fm-cat-subnav,
    .fm-blog-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Inre containrar som har egen padding */
    .fm-hero__inner,
    .fm-cat-banner__inner,
    .fm-post-hero__inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}
body,
body.wc-block-page-content,
.site,
#page,
.site-content,
.site-content-inner,
main,
.col-full {
    background: var(--fm-bg) !important;
    color: var(--fm-ink) !important;
    font-family: var(--fm-font-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Explicitly opt out of system dark mode */
@media (prefers-color-scheme: dark) {
    html, body, .site, #page, .site-content, main, .col-full {
        background: var(--fm-bg) !important;
        color: var(--fm-ink) !important;
    }
    p { color: var(--fm-ink-soft) !important; }
    h1, h2, h3, h4, h5, h6, .entry-title, .product_title { color: var(--fm-ink) !important; }
}

h1, h2, h3, h4, h5, h6,
.entry-title, .product_title {
    font-family: var(--fm-font-display);
    font-weight: 700;
    color: var(--fm-ink);
    letter-spacing: -0.005em;
    line-height: 1.05;
    text-transform: uppercase;
}

p { color: var(--fm-ink-soft); }
a { color: var(--fm-ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--fm-accent); }
::selection { background: var(--fm-ink); color: var(--fm-bg); }

/* =========================================================================
   3. ANNOUNCEMENT + HEADER
   ========================================================================= */
.fm-announce {
    background: var(--fm-ink);
    color: var(--fm-bg);
    text-align: center;
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 9px 20px;
}

.site-header {
    background: var(--fm-bg) !important;
    border-bottom: 1px solid var(--fm-line);
    padding: 20px 0 !important;
}
.site-header .site-branding .site-title a,
.site-header .site-logo-anchor,
.site-header .custom-logo-link {
    color: var(--fm-ink);
    font-family: var(--fm-font-display);
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.main-navigation ul li a {
    color: var(--fm-ink) !important;
    font-family: var(--fm-font-display);
    font-size: 14px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 10px 16px;
}
.main-navigation ul li a:hover { color: var(--fm-accent) !important; }

.site-header-cart .cart-contents {
    color: var(--fm-ink) !important;
    background: transparent !important;
    border: 1px solid var(--fm-ink);
    padding: 10px 18px;
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.site-header-cart .cart-contents:hover {
    background: var(--fm-ink) !important;
    color: var(--fm-bg) !important;
}
.site-header-cart .count {
    background: var(--fm-accent);
    color: var(--fm-bg);
    border-radius: 50%;
}

/* =========================================================================
   4. HERO
   ========================================================================= */
.fm-hero {
    position: relative;
    height: 92vh;
    min-height: 640px;
    overflow: hidden;
    background: var(--fm-bg-alt);
}
.fm-hero__media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.fm-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.45) 100%);
}
.fm-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px 96px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.fm-hero__sub {
    font-family: var(--fm-font-display);
    font-size: clamp(13px, 1vw, 15px);
    color: #fff;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.fm-hero__title {
    font-family: var(--fm-font-display);
    font-size: clamp(56px, 10vw, 144px);
    line-height: 0.9;
    font-weight: 600;
    color: #fff;
    margin: 0 0 32px;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    max-width: 14ch;
}
.fm-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 768px) {
    .fm-hero__inner { padding: 0 16px 56px; }
    .fm-cat-banner__inner { padding: 0 16px 48px !important; }
    .fm-post-hero__inner { padding: 0 16px 48px !important; }
}

/* =========================================================================
   5. BUTTONS
   ========================================================================= */
.button, button, input[type="submit"],
.fm-btn, .added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--fm-ink) !important;
    color: var(--fm-bg) !important;
    border: 1px solid var(--fm-ink) !important;
    border-radius: 0 !important;
    padding: 16px 32px !important;
    font-family: var(--fm-font-display) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    transition: all .2s ease !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
}
.button:hover, .fm-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--fm-accent) !important;
    border-color: var(--fm-accent) !important;
    color: #fff !important;
}
.fm-btn--ghost {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
.fm-btn--ghost:hover {
    background: #fff !important;
    color: var(--fm-ink) !important;
    border-color: #fff !important;
}

/* =========================================================================
   6. SECTIONS
   ========================================================================= */
.fm-section {
    padding: 96px 48px;
    max-width: 1440px;
    margin: 0 auto;
}
.fm-section__head {
    text-align: center;
    margin-bottom: 56px;
}
.fm-section__title {
    font-family: var(--fm-font-display);
    font-size: clamp(32px, 4vw, 56px);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* =========================================================================
   7. TABBED COLLECTION
   ========================================================================= */
.fm-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--fm-line);
    flex-wrap: wrap;
}
.fm-tab {
    background: none;
    border: none;
    padding: 18px 28px;
    font-family: var(--fm-font-display);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
    cursor: pointer;
    position: relative;
    transition: color .2s ease;
}
.fm-tab:hover { color: var(--fm-ink); }
.fm-tab.is-active { color: var(--fm-ink); }
.fm-tab.is-active::after {
    content: "";
    position: absolute;
    bottom: -1px; left: 20%; right: 20%;
    height: 2px;
    background: var(--fm-ink);
}
.fm-tab-panel { display: none; }
.fm-tab-panel.is-active { display: block; }

/* =========================================================================
   8. WOOCOMMERCE PRODUCT GRID
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products,
.fm-products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 56px 24px;
    margin: 0 !important;
    list-style: none;
    padding: 0;
}
@media (max-width: 1024px) { .woocommerce ul.products, .fm-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woocommerce ul.products, .fm-products { grid-template-columns: repeat(2, 1fr); gap: 36px 12px; } }

.woocommerce ul.products li.product,
.fm-product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent;
    position: relative;
}
.woocommerce ul.products li.product a img,
.fm-product__img {
    margin: 0 0 14px !important;
    background: var(--fm-bg-alt);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    transition: opacity .3s ease;
    background-size: cover;
    background-position: center;
    display: block;
}
.woocommerce ul.products li.product:hover a img,
.fm-product:hover .fm-product__img { opacity: 0.92; }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.fm-product__title {
    font-family: var(--fm-font-display) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--fm-ink) !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.25;
}
.woocommerce ul.products li.product .price,
.fm-product__price {
    font-family: var(--fm-font-body) !important;
    color: var(--fm-ink-soft) !important;
    font-size: 13px !important;
    font-weight: 400;
}
.woocommerce ul.products li.product .price del,
.fm-product__price del {
    color: var(--fm-ink-muted) !important;
    opacity: 0.6;
    margin-right: 6px;
}
.woocommerce ul.products li.product .price ins,
.fm-product__price ins {
    color: var(--fm-accent) !important;
    background: transparent;
    text-decoration: none;
    font-weight: 500;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.fm-product__badge {
    position: absolute;
    background: var(--fm-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--fm-font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 5px 10px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 2;
}

.woocommerce ul.products li.product .button {
    margin-top: 12px !important;
    width: 100%;
    text-align: center;
}

/* =========================================================================
   9. STORY STRIP
   ========================================================================= */
.fm-story {
    background: var(--fm-bg-alt);
    padding: 120px 32px;
    border-top: 1px solid var(--fm-line);
    border-bottom: 1px solid var(--fm-line);
}
.fm-story__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.fm-story__quote {
    font-family: var(--fm-font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.2;
    margin: 0 0 28px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.fm-story__attr {
    font-family: var(--fm-font-body);
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
}

/* =========================================================================
   10. FOOTER
   ========================================================================= */
.site-footer {
    background: var(--fm-ink) !important;
    color: var(--fm-ink-muted) !important;
    border-top: none !important;
    padding: 96px 0 40px !important;
}
.site-footer .col-full { max-width: 1440px; padding: 0 48px; }
.site-footer h3, .site-footer .widget-title {
    color: #fff !important;
    font-family: var(--fm-font-display) !important;
    font-size: 13px !important;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 20px !important;
}
.site-footer a { color: #c8c5be !important; }
.site-footer a:hover { color: var(--fm-accent) !important; }
.site-info {
    border-top: 1px solid #2a2a26;
    padding-top: 32px;
    margin-top: 56px;
    font-size: 12px;
    color: #6a665e;
}

/* =========================================================================
   11. BLOGG — arkiv + enskilt inlägg
   ========================================================================= */

/* Blog index page header */
.fm-blog-header {
    text-align: center;
    padding: 96px 32px 64px;
    border-bottom: 1px solid var(--fm-line);
    margin-bottom: 64px;
    background: var(--fm-bg);
}
.fm-blog-header__eyebrow {
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--fm-accent);
    margin-bottom: 16px;
}
.fm-blog-header__title {
    font-family: var(--fm-font-display);
    font-size: clamp(40px, 5vw, 72px);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
}
.fm-blog-header__lede {
    font-family: var(--fm-font-body);
    font-size: 17px;
    color: var(--fm-ink-soft);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* Blog index article cards */
.blog .site-content,
.archive:not(.woocommerce) .site-content {
    background: var(--fm-bg);
    padding: 0 0 96px;
}
.blog .col-full,
.archive:not(.woocommerce) .col-full {
    max-width: 1320px !important;
    padding: 0 48px !important;
}
.blog article.post,
.archive:not(.woocommerce) article.post {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 80px !important;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}
.blog article.post:nth-child(even),
.archive:not(.woocommerce) article.post:nth-child(even) {
    grid-template-columns: 1fr 1.2fr;
}
.blog article.post:nth-child(even) .post-thumbnail,
.archive:not(.woocommerce) article.post:nth-child(even) .post-thumbnail {
    order: 2;
}
@media (max-width: 768px) {
    .blog article.post,
    .archive:not(.woocommerce) article.post {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .blog article.post:nth-child(even) .post-thumbnail,
    .archive:not(.woocommerce) article.post:nth-child(even) .post-thumbnail {
        order: 0;
    }
}

.blog .post-thumbnail,
.archive:not(.woocommerce) .post-thumbnail {
    margin: 0 !important;
}
.blog .post-thumbnail img,
.archive:not(.woocommerce) .post-thumbnail img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
    transition: opacity .3s ease;
}
.blog .post-thumbnail:hover img { opacity: 0.92; }

.blog .entry-meta,
.archive:not(.woocommerce) .entry-meta,
.fm-blog-card__meta {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
    margin-bottom: 16px;
}
.blog .entry-meta a { color: var(--fm-accent); }

.blog .entry-title,
.archive:not(.woocommerce) .entry-title {
    font-family: var(--fm-font-display) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.005em !important;
    margin: 0 0 16px !important;
    line-height: 1.05;
}
.blog .entry-title a { color: var(--fm-ink) !important; }
.blog .entry-title a:hover { color: var(--fm-accent) !important; }

.blog .entry-content,
.archive:not(.woocommerce) .entry-content {
    font-family: var(--fm-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--fm-ink-soft);
    margin-bottom: 20px;
}
.fm-read-more {
    display: inline-block;
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink);
    border-bottom: 1px solid var(--fm-ink);
    padding-bottom: 4px;
}
.fm-read-more:hover {
    color: var(--fm-accent);
    border-color: var(--fm-accent);
}

/* Single post — full hero */
.single-post .site-content {
    background: var(--fm-bg);
    padding: 0 0 96px;
}
.fm-post-hero {
    position: relative;
    height: 70vh;
    min-height: 480px;
    overflow: hidden;
    background: var(--fm-bg-alt);
}
.fm-post-hero__media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.fm-post-hero::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.fm-post-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 48px 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.fm-post-hero__cat {
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
}
.fm-post-hero__cat a { color: #fff; }
.fm-post-hero__cat a:hover { color: var(--fm-accent); }
.fm-post-hero__title {
    font-family: var(--fm-font-display);
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: #fff;
    font-weight: 500;
    max-width: 22ch;
}
.fm-post-hero__meta {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}

/* Article body */
.fm-post-body,
.single-post .entry-content {
    max-width: 720px;
    margin: 80px auto 0;
    padding: 0 32px;
}
.fm-post-body p,
.single-post .entry-content p {
    font-family: var(--fm-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--fm-ink-soft);
    margin: 0 0 28px;
}
.fm-post-body > p:first-of-type::first-letter,
.single-post .entry-content > p:first-of-type::first-letter {
    font-family: var(--fm-font-display);
    font-size: 72px;
    font-weight: 600;
    color: var(--fm-ink);
    float: left;
    line-height: 0.85;
    margin: 8px 12px 0 0;
    text-transform: uppercase;
}
.fm-post-body h2,
.single-post .entry-content h2 {
    font-family: var(--fm-font-display);
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 56px 0 20px;
    line-height: 1.1;
}
.fm-post-body h3,
.single-post .entry-content h3 {
    font-family: var(--fm-font-display);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 40px 0 16px;
}
.fm-post-body blockquote,
.single-post .entry-content blockquote {
    font-family: var(--fm-font-display);
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    color: var(--fm-ink);
    border-left: 3px solid var(--fm-accent);
    padding: 8px 0 8px 24px;
    margin: 40px 0;
}
.fm-post-body img,
.single-post .entry-content img {
    width: 100%;
    margin: 40px 0;
}
.fm-post-body ul, .fm-post-body ol,
.single-post .entry-content ul,
.single-post .entry-content ol {
    font-family: var(--fm-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--fm-ink-soft);
    padding-left: 24px;
    margin-bottom: 28px;
}
.fm-post-body li,
.single-post .entry-content li { margin-bottom: 8px; }
.fm-post-body a,
.single-post .entry-content a {
    color: var(--fm-accent);
    border-bottom: 1px solid var(--fm-accent);
}

/* Article footer */
.fm-post-footer {
    max-width: 720px;
    margin: 80px auto 0;
    padding: 48px 32px 0;
    border-top: 1px solid var(--fm-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.fm-post-author { display: flex; align-items: center; gap: 16px; }
.fm-post-author__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--fm-bg-alt);
    background-size: cover;
}
.fm-post-author__name {
    font-family: var(--fm-font-display);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 2px;
}
.fm-post-author__role {
    font-family: var(--fm-font-body);
    font-size: 13px;
    color: var(--fm-ink-muted);
}
.fm-post-share { display: flex; gap: 16px; }
.fm-post-share a {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
}
.fm-post-share a:hover { color: var(--fm-accent); }

/* Related posts */
.fm-related {
    background: var(--fm-bg-alt);
    padding: 96px 48px;
    margin-top: 96px;
    border-top: 1px solid var(--fm-line);
}
.fm-related__inner { max-width: 1320px; margin: 0 auto; }
.fm-related__title {
    font-family: var(--fm-font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 48px;
    letter-spacing: 0.01em;
}
.fm-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 768px) { .fm-related__grid { grid-template-columns: 1fr; } }
.fm-related__img {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    margin-bottom: 14px;
    transition: opacity .3s;
    background-color: var(--fm-bg);
}
.fm-related__card a:hover .fm-related__img { opacity: 0.92; }
.fm-related__cat {
    font-family: var(--fm-font-display);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fm-accent);
    margin-bottom: 6px;
}
.fm-related__heading {
    font-family: var(--fm-font-display);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0;
    line-height: 1.2;
}

/* =========================================================================
   12. SINGLE PRODUCT
   ========================================================================= */
.single-product .site-content {
    background: var(--fm-bg);
    padding: 0 !important;
}
.single-product .site-main,
.single-product .col-full {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 32px 48px 96px !important;
}

.woocommerce .woocommerce-breadcrumb {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
    margin: 0 0 32px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fm-line);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--fm-ink-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--fm-accent); }

.single-product div.product {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
}
@media (max-width: 900px) {
    .single-product div.product { grid-template-columns: 1fr; gap: 32px; }
    .single-product .site-main { padding: 24px !important; }
}

/* Gallery */
.single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
    background: var(--fm-bg-alt);
}
.single-product div.product .woocommerce-product-gallery img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
    width: auto !important;
    margin: 0 !important;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img {
    aspect-ratio: 1 / 1;
    opacity: 0.6;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img:hover,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs .flex-active {
    opacity: 1;
}

/* Summary column */
.single-product div.product .summary {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    position: sticky;
    top: 32px;
    align-self: start;
    padding: 16px 0;
}
@media (max-width: 900px) { .single-product div.product .summary { position: static; } }

.single-product .summary .product_meta {
    font-family: var(--fm-font-display);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--fm-ink-muted);
    margin-bottom: 12px;
    padding: 0;
    border: none;
}
.single-product .summary .product_meta > span { display: block; margin-bottom: 4px; }
.single-product .summary .product_meta a { color: var(--fm-ink-muted); }
.single-product .summary .product_meta a:hover { color: var(--fm-accent); }

.single-product .summary .product_title {
    font-family: var(--fm-font-display) !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.005em !important;
    line-height: 1.05 !important;
    margin: 0 0 16px !important;
}

.single-product .summary .price {
    font-family: var(--fm-font-body) !important;
    font-size: 22px !important;
    color: var(--fm-ink) !important;
    margin: 0 0 24px !important;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--fm-line);
}
.single-product .summary .price del {
    color: var(--fm-ink-muted);
    opacity: 0.6;
    margin-right: 10px;
    font-size: 18px;
}
.single-product .summary .price ins {
    color: var(--fm-accent);
    text-decoration: none;
    font-weight: 500;
}

.single-product .summary .woocommerce-product-details__short-description {
    font-family: var(--fm-font-body) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--fm-ink-soft) !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
}

.single-product .variations {
    margin-bottom: 24px !important;
    border: none !important;
}
.single-product .variations th {
    font-family: var(--fm-font-display) !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--fm-ink) !important;
    padding: 12px 16px 12px 0 !important;
    background: transparent !important;
    width: 80px;
}
.single-product .variations select {
    background: var(--fm-surface) !important;
    border: 1px solid var(--fm-line) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
    width: 100%;
    color: var(--fm-ink);
}

.single-product .quantity input.qty {
    background: var(--fm-surface) !important;
    border: 1px solid var(--fm-line) !important;
    color: var(--fm-ink) !important;
    border-radius: 0 !important;
    padding: 16px 12px !important;
    height: auto !important;
    width: 64px !important;
}
.single-product form.cart {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 32px !important;
    flex-wrap: wrap;
}
.single-product form.cart .single_add_to_cart_button { flex: 1; min-width: 200px; }

.fm-product-trust {
    list-style: none;
    margin: 0 0 32px;
    padding: 24px 0;
    border-top: 1px solid var(--fm-line);
    border-bottom: 1px solid var(--fm-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fm-product-trust li {
    font-family: var(--fm-font-body);
    font-size: 13px;
    color: var(--fm-ink-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.fm-product-trust li::before {
    content: "✓";
    color: var(--fm-accent);
    font-weight: 700;
}

/* Tabs (description/details) */
.single-product .woocommerce-tabs {
    grid-column: 1 / -1;
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid var(--fm-line);
}
.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--fm-line) !important;
    padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 28px 0 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li a {
    color: var(--fm-ink-muted) !important;
    font-family: var(--fm-font-display) !important;
    font-size: 14px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 18px 0 !important;
    font-weight: 400;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--fm-ink) !important;
    border-bottom: 2px solid var(--fm-ink);
}
.single-product .woocommerce-tabs .panel {
    padding-top: 32px !important;
    font-family: var(--fm-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--fm-ink-soft);
    max-width: 720px;
    background: transparent !important;
}

/* Related on single */
.single-product .related.products,
.single-product .upsells.products {
    grid-column: 1 / -1;
    margin-top: 96px;
    padding-top: 80px;
    border-top: 1px solid var(--fm-line);
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
    font-family: var(--fm-font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-align: center;
    margin: 0 0 48px;
}

/* =========================================================================
   13. KATEGORI / SHOP
   ========================================================================= */
.woocommerce.archive .site-content,
.woocommerce-shop .site-content,
.tax-product_cat .site-content {
    background: var(--fm-bg);
    padding: 0 !important;
}

/* Category banner */
.fm-cat-banner {
    position: relative;
    height: 50vh;
    min-height: 360px;
    overflow: hidden;
    background: var(--fm-bg-alt);
    margin-bottom: 0;
}
.fm-cat-banner__media {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.fm-cat-banner::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
}
.fm-cat-banner__inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.fm-cat-banner__crumbs {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.85);
}
.fm-cat-banner__crumbs a { color: rgba(255,255,255,0.85); }
.fm-cat-banner__crumbs a:hover { color: var(--fm-accent); }
.fm-cat-banner__title {
    font-family: var(--fm-font-display);
    font-size: clamp(48px, 7vw, 96px);
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.95;
    margin: 0 0 16px;
    color: #fff;
    font-weight: 600;
}
.fm-cat-banner__lede {
    font-family: var(--fm-font-body);
    font-size: 17px;
    line-height: 1.55;
    max-width: 56ch;
    color: rgba(255,255,255,0.95);
    margin: 0;
}

/* Filter bar */
.fm-cat-toolbar {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 48px;
    border-bottom: 1px solid var(--fm-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.fm-cat-count {
    font-family: var(--fm-font-display);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fm-ink-soft);
}
.fm-cat-count strong {
    color: var(--fm-ink);
    font-weight: 600;
    margin-right: 8px;
}
.woocommerce-ordering select,
.fm-cat-sort select {
    background: transparent !important;
    border: 1px solid var(--fm-ink) !important;
    border-radius: 0 !important;
    padding: 10px 36px 10px 16px !important;
    font-family: var(--fm-font-display) !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--fm-ink) !important;
    cursor: pointer;
}

/* Subcategory pills */
.fm-cat-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 48px 0;
}
.fm-cat-subnav a {
    font-family: var(--fm-font-display);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid var(--fm-line);
    color: var(--fm-ink-soft);
}
.fm-cat-subnav a:hover,
.fm-cat-subnav a.is-active {
    background: var(--fm-ink);
    border-color: var(--fm-ink);
    color: var(--fm-bg);
}

/* Product list inside category */
.woocommerce.archive .site-main,
.woocommerce-shop .site-main,
.tax-product_cat .site-main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 48px 96px;
}
@media (max-width: 768px) {
    .woocommerce.archive .site-main,
    .tax-product_cat .site-main { padding: 32px 16px 64px; }
    .fm-cat-toolbar, .fm-cat-subnav { padding-left: 16px; padding-right: 16px; }
}

/* Hide default WC archive title (we use banner instead) */
.woocommerce-products-header,
.woocommerce-page .page-title {
    display: none !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
    margin-top: 64px !important;
}
.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex;
    gap: 4px;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    font-family: var(--fm-font-display) !important;
    font-size: 14px !important;
    letter-spacing: 0.18em !important;
    background: transparent !important;
    color: var(--fm-ink-soft) !important;
    border: 1px solid var(--fm-line) !important;
    padding: 12px 18px !important;
    min-width: 44px;
    text-align: center;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--fm-ink) !important;
    border-color: var(--fm-ink) !important;
    color: var(--fm-bg) !important;
}

/* =========================================================================
   14. CART / CHECKOUT
   ========================================================================= */
.woocommerce table.shop_table {
    background: var(--fm-surface);
    border: 1px solid var(--fm-line);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: var(--fm-line) !important;
    color: var(--fm-ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    background: var(--fm-surface) !important;
    border: 1px solid var(--fm-line) !important;
    color: var(--fm-ink) !important;
    border-radius: 0 !important;
    padding: 12px 14px !important;
}

/* =========================================================================
   15. UTILITIES
   ========================================================================= */
.screen-reader-text { position: absolute; left: -9999px; }
.home .storefront-product-categories,
.home .storefront-recent-products,
.home .storefront-featured-products,
.home .storefront-popular-products,
.home .storefront-on-sale-products,
.home .storefront-best-selling-products { display: none; }