/* 
  Final MegaMenu Fix V5
  Author: Gemini
  Date: 2025-11-18
  Description: This CSS provides the final, definitive styling for the TB MegaMenu, 
               addressing all user-reported issues including alignment, colors, 
               full-width submenus, and hover behavior. It is designed to work
               with the module's native hover event, which has been enabled
               via Drush configuration.
*/

/* ===== 0. Admin Toolbar Fix ===== */
/* Ensure toolbar is always visible at the very top */
html.js {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body {
    margin-top: 0 !important;
}

/* Raise toolbar z-index above Jango header (z-index: 9995) */
#toolbar-administration {
    z-index: 10000 !important;
}

/* Ensure toolbar-bar is fixed at top: 0 */
.toolbar-fixed #toolbar-administration .toolbar-bar,
.toolbar-horizontal #toolbar-administration .toolbar-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Push Jango header down when toolbar is present */
/* Use CSS variable set by Drupal, fallback to 79px (toolbar + tray) */
.toolbar-fixed .c-layout-header,
.toolbar-horizontal .c-layout-header {
    top: var(--drupal-displace-offset-top, 79px) !important;
}

/* ===== 1. Header Alignment ===== */
/* Use Flexbox to perfectly align logo and menu */
.c-layout-header .c-navbar .c-navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    min-height: 64px;
    /* Compact header height */
    height: auto;
    /* Allow height to be flexible */
}

.c-layout-header .c-navbar .c-brand {
    flex-shrink: 0;
    /* Prevent logo from shrinking */
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0;
}

.c-layout-header .c-navbar .c-brand>a.c-logo {
    display: flex;
    align-items: center;
    line-height: 1;
}

.c-layout-header .c-navbar .c-brand>img,
.c-layout-header .c-navbar .c-brand .c-logo img {
    max-height: 60px !important;
    /* Increase logo height */
    width: auto;
    vertical-align: middle;
}

.c-layout-header .c-navbar .c-mega-menu {
    flex-grow: 1;
    /* Allow menu to take remaining space */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Push menu to the right */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure the menu block itself fills the container */
.c-mega-menu .tb-megamenu {
    width: 100%;
}


/* ===== 2. Main Menu Bar Styling ===== */
/* Remove ALL backgrounds from menu bar - make it completely transparent */
.c-mega-menu {
    background: transparent !important;
}

.c-mega-menu .tbm-nav.tbm-nav-main,
.c-mega-menu .tbm-nav,
.c-mega-menu .tbm,
.c-mega-menu .nav.navbar-nav {
    background: transparent !important;
}

/* Remove default padding/margin that causes misalignment */
.c-layout-header .c-navbar .c-mega-menu .tbm-nav {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.c-layout-header .c-navbar .c-mega-menu .tbm-item.level-1 {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Top-level menu item link styling - ensure background is transparent */
.c-layout-header .c-navbar .tbm-link.level-1,
.tbm-link.level-1 {
    color: #444 !important;
    /* Slightly lighter for elegance */
    font-weight: 500;
    font-size: 14px !important;
    letter-spacing: 0.02em;
    padding: 0 24px !important;
    /* Tighter padding */
    line-height: 64px !important;
    /* Match compact header height */
    transition: color 0.3s;
    background-color: transparent !important;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure tbm-item containers also have transparent background */
.c-mega-menu .tbm-item.level-1,
.c-mega-menu .tbm-item {
    background-color: transparent !important;
}

/* Top-level link color on scrolled header - keep dark for white bg */
.c-page-on-scroll .c-layout-header .c-navbar .tbm-link.level-1 {
    color: #444 !important;
}

.c-page-on-scroll .c-layout-header .c-navbar .tbm-link.level-1:hover {
    color: #222 !important;
}


/* Top-level link color on solid header (top of page) */
.c-layout-header-6:not(.c-page-on-scroll) .c-layout-header .c-navbar .tbm-link.level-1 {
    color: #555 !important;
}

.c-layout-header-6:not(.c-page-on-scroll) .c-layout-header .c-navbar .tbm-link.level-1:hover {
    color: #333 !important;
}

/* Remove dropdown arrow, as requested */
.tbm-item.tbm-item--has-dropdown>a>.tbm-caret,
.tbm-item.tbm-item--has-flyout>a>.tbm-caret {
    display: none !important;
}


/* ===== 3. Submenu / Dropdown Styling ===== */
/* Control visibility with opacity and visibility for fade effect */
.tbm-submenu.tbm-item-child {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    top: 100% !important;
    margin-top: 0 !important;
}

/* Show submenu on hover (when parent has 'open' or 'animating' class from JS) */
.tbm-item.level-1.open>.tbm-submenu.tbm-item-child,
.tbm-item.level-1.animating>.tbm-submenu.tbm-item-child {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Full-width MegaMenu container - truly full width from left to right edge */
/* Break out of container constraints using viewport-relative positioning */
.c-mega-menu .tbm-item.level-1 {
    position: static;
}

/* Ensure parent containers don't constrain */
.c-layout-header .c-navbar .container,
.c-layout-header .c-navbar .container-fluid {
    overflow: visible !important;
}

.c-mega-menu {
    overflow: visible !important;
}

/* Ensure submenu rows and columns have no strange background */
.tbm-submenu .tbm-row,
.tbm-submenu .tbm-col {
    background-color: transparent !important;
}

/* Submenu link styling */
.tbm-submenu .tbm-link {
    color: #333 !important;
    /* DARK text for white background */
    padding: 8px 15px;
}

.tbm-submenu .tbm-link:hover {
    color: #000 !important;
    background-color: #f5f5f5 !important;
}

/* Submenu section titles (e.g., in a mega menu) */
.tbm-submenu .tbm-col-title {
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 15px;
    margin-top: 10px;
    border-bottom: 1px solid #eee;
}

/* ===== 4. Remove Bootstrap dropdown interference ===== */
/* Remove Bootstrap dropdown-menu styles that interfere with mega menu */
.tbm-submenu.dropdown-menu,
.tbm-subnav.dropdown-menu {
    position: static !important;
    float: none !important;
    min-width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ===== 5. Level-2 menu items styling (using CSS selectors, not HTML classes) ===== */
/* Style level-2 items using CSS descendant selectors */
.tbm-subnav.level-1 .tbm-item.level-2,
.tbm-submenu .tbm-item.level-2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tbm-subnav.level-1 .tbm-link.level-2,
.tbm-submenu .tbm-link.level-2 {
    display: block;
    color: #333 !important;
    padding: 8px 15px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.tbm-subnav.level-1 .tbm-link.level-2:hover,
.tbm-submenu .tbm-link.level-2:hover {
    color: #000 !important;
    background-color: #f5f5f5 !important;
}

/* ===== 6. Modern CSS Grid layout for columns (replacing Bootstrap span12) ===== */
.tbm-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0;
}

.tbm-column {
    grid-column: span 12;
    /* Default to full width */
    width: 100%;
}

/* Column width variations based on data-width attribute */
.tbm-column[data-width="1"] {
    grid-column: span 1;
}

.tbm-column[data-width="2"] {
    grid-column: span 2;
}

.tbm-column[data-width="3"] {
    grid-column: span 3;
}

.tbm-column[data-width="4"] {
    grid-column: span 4;
}

.tbm-column[data-width="5"] {
    grid-column: span 5;
}

.tbm-column[data-width="6"] {
    grid-column: span 6;
}

.tbm-column[data-width="7"] {
    grid-column: span 7;
}

.tbm-column[data-width="8"] {
    grid-column: span 8;
}

.tbm-column[data-width="9"] {
    grid-column: span 9;
}

.tbm-column[data-width="10"] {
    grid-column: span 10;
}

.tbm-column[data-width="11"] {
    grid-column: span 11;
}

.tbm-column[data-width="12"] {
    grid-column: span 12;
}

/* Legacy Jango class overrides, just in case */
.c-layout-header .c-navbar .c-mega-menu>.nav.navbar-nav>li.c-menu-type-classic>.dropdown-menu {
    left: auto;
    right: auto;
}

.c-layout-header .c-navbar .c-mega-menu>.nav.navbar-nav>li>.dropdown-menu {
    border-color: #f1f1f1;
    border-top: 4px solid #3f444a;
}

.c-mega-menu-column-container-content>h3 {
    color: #868e99;
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* ===== 7. Remove inline height from field body element ===== */
/* Override any inline height styles added by JavaScript - MUST use more specific selectors */
#block-menuwhitetopbarnotfixed .field--name-body.field--type-text-with-summary .field__item,
#block-menuwhitetopbarnotfixed .field.field--name-body.field--type-text-with-summary .field__item,
.field--name-body.field--type-text-with-summary .field__item[style*="height"],
.field.field--name-body.field--type-text-with-summary .field__item[style*="height"] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Prevent JavaScript from setting height on the field wrapper */
#block-menuwhitetopbarnotfixed .field__item {
    height: auto !important;
    min-height: 140px !important;
    overflow: visible !important;
}

/* ===== 8. Fix Scroll Menu Dividers & Arrows ===== */
/* 修正滾動時選單項目的背景色問題 */
.c-layout-header.c-layout-header-fixed .c-mega-menu .nav.navbar-nav>li>.c-link,
.c-layout-header.c-layout-header-fixed .c-mega-menu .nav.navbar-nav>li:hover>.c-link,
.c-layout-header.c-layout-header-fixed .c-mega-menu .nav.navbar-nav>li.active>.c-link {
    background: transparent !important;
}

/* 隱藏可能出現的分隔線偽元素背景 */
.c-layout-header .c-mega-menu .nav.navbar-nav>li>.c-link:before {
    background: transparent !important;
    display: none !important;
    /* 強制隱藏分隔線 */
}

/* 修正下拉箭頭背景 */
.c-layout-header .c-mega-menu .nav.navbar-nav>li>.c-arrow {
    background: transparent !important;
    color: inherit !important;
}

/* 修正選單高度溢出問題 */
.c-layout-header .c-mega-menu .nav.navbar-nav>li {
    height: auto !important;
    overflow: visible !important;
}

/* ===== 9. Jony Ive Style Refinements ===== */
/* 
 * Design Philosophy: Simplicity, Clarity, Depth through Subtlety
 * - Remove visual noise (borders, separators)
 * - Use whitespace as delimiter
 * - Subtle interactions over obvious ones
 */

/* 9.1 Remove menu separators - let whitespace do the work */
.tbm-item.level-1 {
    border-right: none !important;
}

/* 9.2 Clean dropdown toggle - remove gray background block */
.tbm-submenu-toggle {
    background-color: transparent !important;
    border: none !important;
}

.tbm-submenu-toggle:hover,
.tbm-submenu-toggle:focus {
    background-color: transparent !important;
}

/* Dropdown indicator - tight to text */
.tbm-submenu-toggle {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 8px 0 2px !important;
    margin: 0 !important;
    background: transparent !important;
}

.tbm-submenu-toggle::before {
    border-width: 4px !important;
    margin: 0 !important;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.tbm-item.level-1:hover .tbm-submenu-toggle::before {
    opacity: 0.7;
}

/* Remove gap between menu text and arrow */
.tbm-link.level-1 {
    padding-right: 2px !important;
}

/* 9.3 Slick Carousel Arrows - MUJI Pure Minimal */
.slick-prev,
.slick-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    font-size: 0 !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease !important;
}

.slick-prev:hover,
.slick-next:hover {
    opacity: 1 !important;
}

.slick-prev:focus,
.slick-next:focus {
    outline: none !important;
}

/* Pure CSS arrows - darker for better visibility */
.slick-prev::before,
.slick-next::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2.5px solid #5a4535 !important;
    border-right: 2.5px solid #5a4535 !important;
    position: absolute !important;
    top: 50% !important;
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.5)) !important;
}

.slick-prev::before {
    transform: translateY(-50%) rotate(-135deg) !important;
    left: 16px !important;
}

.slick-next::before {
    transform: translateY(-50%) rotate(45deg) !important;
    right: 16px !important;
}

/* Position at edges */
.slick-prev {
    left: 24px !important;
}

.slick-next {
    right: 24px !important;
}

/* 9.4 Dropdown Menu - MUJI Simple Style */
.tbm-submenu,
.tbm-submenu.tbm-item-child,
.dropdown-menu {
    margin-top: 0 !important;
    padding: 8px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background: #fff !important;
    min-width: 160px !important;
    max-width: 200px !important;
}

/* Vertical list layout */
.tbm-submenu .tbm-subnav,
.tbm-submenu .tbm-row {
    display: block !important;
}

.tbm-submenu .tbm-item {
    display: block !important;
    padding: 0 !important;
}

.tbm-submenu .tbm-link,
.tbm-subnav .tbm-item .tbm-link {
    display: block !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555 !important;
    letter-spacing: 0.03em !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

.tbm-submenu .tbm-link:hover,
.tbm-subnav .tbm-item .tbm-link:hover {
    color: #222 !important;
    background: #f8f8f8 !important;
}

/* Remove borders */
.tbm-submenu .tbm-row,
.tbm-submenu .tbm-col,
.c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark>.nav.navbar-nav>li .dropdown-menu>li {
    border: none !important;
}

/* ===== 10. Typography - MUJI-inspired Minimalist ===== */
/* 
 * Noto Sans TC (思源黑體) - MUJI style
 * Light weight for elegance, clean and neutral
 */

/* Import Noto Sans TC with light weights */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&display=swap');

/* Base typography - MUJI aesthetic */
body {
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
    font-weight: 350;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headlines - Light Sans for Lifestyle */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');

h1,
h2,
h3,
.c-title {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans TC', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
}

/* ===== 11. Carousel Slogan - Light Lifestyle ===== */
/* Carousel title - clear and accessible */
.slide__title,
.slick__slide .slide__title,
.slide__caption h2 {
    display: block !important;
    visibility: visible !important;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans TC', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(26px, 3.5vw, 40px) !important;
    letter-spacing: 0.08em !important;
    color: #fff !important;
    text-shadow: none !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

/* Carousel caption - positioned at bottom with readable background */
.slide__content {
    position: relative !important;
}

/* Caption container at bottom - with background */
.slide__constrained {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 24px 48px !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 10 !important;
}

@media (min-width: 64em) {
    .slick--skin--fullwidth .slide__constrained {
        position: absolute !important;
        bottom: 5% !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 24px 48px !important;
        background: rgba(0, 0, 0, 0.55) !important;
    }
}

.slide__caption {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Link button - no extra margins */
.slide__link {
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
}

.slide__link a {
    display: inline-block !important;
    padding: 6px 0 !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.slide__link a:hover {
    color: #fff !important;
    border-bottom-color: #fff !important;
}

/* ===== 12. Back to Top Button ===== */
.c-layout-go2top {
    bottom: 28px !important;
    right: 28px !important;
    width: 48px !important;
    height: 48px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    line-height: 48px !important;
    transition: all 0.25s ease !important;
    z-index: 99 !important;
}

.c-layout-go2top:hover {
    border-color: #8b7355 !important;
    box-shadow: 0 4px 16px rgba(139, 115, 85, 0.15) !important;
}

.c-layout-go2top>i {
    color: #666 !important;
    font-size: 18px !important;
    opacity: 1 !important;
    line-height: 48px !important;
}

.c-layout-go2top:hover>i {
    color: #8b7355 !important;
}

/* ===== 13. Mattress Finder - Soft Floating Trigger ===== */
/* Right side, rounded, with icon - above back-to-top */
.mf-trigger,
.mf-trigger.mf-primary-btn {
    position: fixed !important;
    bottom: 92px !important;
    right: 28px !important;
    left: auto !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 24px 14px 20px !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.mf-trigger,
.mf-trigger.mf-primary-btn,
button.mf-trigger {
    border: 1px solid #8b7355 !important;
    outline: none !important;
    background: #fff !important;
}

.mf-trigger:hover,
.mf-trigger.mf-primary-btn:hover,
button.mf-trigger:hover {
    border: 1px solid #7a6548 !important;
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(139, 115, 85, 0.15) !important;
    transform: translateY(-1px) !important;
}

.mf-trigger:focus,
.mf-trigger:active,
.mf-trigger.mf-primary-btn:focus,
.mf-trigger.mf-primary-btn:active,
button.mf-trigger:focus,
button.mf-trigger:active {
    border: 1px solid #8b7355 !important;
    background: #fff !important;
    outline: none !important;
    box-shadow: 0 2px 12px rgba(139, 115, 85, 0.12) !important;
}

/* Add search icon before text */
.mf-trigger-text {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: #444 !important;
}

.mf-trigger-text::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: -3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.mf-trigger-icon {
    display: none !important;
}

/* Slide link - minimal underline style */
.slide__link a,
a.c-theme-btn,
.slick .slide__link a {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    padding: 12px 0 !important;
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

.slide__link a:hover,
a.c-theme-btn:hover {
    border-bottom-color: #fff !important;
}

/* ===== Mattress Finder Modal - MUJI/Jony Ive Style ===== */
/* Override module CSS variables with softer, warmer tones */
.mattress-finder-wrapper,
.mf-modal,
.mf-overlay {
    --mf-primary: #8b7355 !important;
    /* Warm taupe - MUJI natural */
    --mf-primary-hover: #7a6548 !important;
    --mf-accent: #a8917a !important;
    /* Soft beige accent */
    --mf-text-heading: #333 !important;
    --mf-text-body: #555 !important;
    --mf-text-muted: #888 !important;
    --mf-border: #e8e4e0 !important;
    /* Warm gray border */
    --mf-bg-light: #f9f7f5 !important;
    /* Warm off-white */
    --mf-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    --mf-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    font-family: 'Noto Sans TC', sans-serif !important;
}

.mf-modal-container {
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
    max-height: 80vh !important;
    max-width: 680px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Modal body - compact */
.mf-modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 20px 16px !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.mf-modal-body::-webkit-scrollbar {
    display: none !important;
}

.mf-steps-container {
    min-height: auto !important;
}

/* Compact header */
.mf-modal-header {
    padding: 16px 20px 12px !important;
    border-bottom: none !important;
}

.mf-modal-title {
    font-size: 22px !important;
    margin-bottom: 4px !important;
}

.mf-modal-subtitle {
    font-size: 13px !important;
}

/* Compact progress */
.mf-progress {
    padding: 8px 20px 12px !important;
}

.mf-progress-steps {
    margin-bottom: 8px !important;
}

.mf-step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

.mf-step-label {
    font-size: 11px !important;
    margin-top: 4px !important;
}

.mf-progress-bar {
    height: 3px !important;
}

/* Compact step content */
.mf-step-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
}

.mf-step-subtitle {
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

/* Compact footer */
.mf-modal-footer {
    padding: 12px 20px !important;
    border-top: 1px solid #eee !important;
}

.mf-btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
}

/* Modal Header - Remove emoji, clean title */
.mf-modal-title {
    font-size: 26px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: #333 !important;
}

/* Hide the sparkle emoji in title */
.mf-modal-title::before {
    display: none !important;
}

.mf-modal-subtitle {
    font-size: 15px !important;
    font-weight: 300 !important;
    color: #777 !important;
    letter-spacing: 0.03em !important;
}

.mf-modal-close {
    font-size: 24px !important;
    color: #aaa !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.mf-modal-close:hover {
    color: #666 !important;
    background: transparent !important;
}

/* Progress Steps - Subtle, not shouty */
.mf-step-number {
    width: 36px !important;
    height: 36px !important;
    background: #e8e4e0 !important;
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.mf-progress-step.active .mf-step-number {
    background: #8b7355 !important;
    color: #fff !important;
    box-shadow: none !important;
    animation: none !important;
}

.mf-progress-step.completed .mf-step-number {
    background: #a8917a !important;
    color: #fff !important;
}

.mf-step-label {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #777 !important;
}

.mf-progress-fill {
    background: #8b7355 !important;
}

/* Step Titles */
.mf-step-title {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #333 !important;
    letter-spacing: 0.04em !important;
}

.mf-step-subtitle {
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #888 !important;
}

/* Options Grid - responsive */
.mf-options-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

/* 3 items: show as 3 columns */
.mf-options-grid:has(.mf-option-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Option Cards - Compact, clean */
.mf-option-card {
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 10px 8px !important;
    transition: all 0.2s ease !important;
    min-height: auto !important;
}

.mf-option-card:hover {
    border-color: #999 !important;
    box-shadow: none !important;
    transform: none !important;
}

.mf-option-card.selected {
    border-color: #8b7355 !important;
    background: #faf8f6 !important;
}

.mf-option-card.selected::after {
    background: #8b7355 !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    top: 8px !important;
    right: 8px !important;
}

/* Option icons - compact */
.mf-option-icon {
    font-size: 24px !important;
    color: #8b7355 !important;
    margin-bottom: 6px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mf-icon-svg {
    width: 24px !important;
    height: 24px !important;
    color: #8b7355 !important;
}

.mf-option-card:hover .mf-icon-svg,
.mf-option-card.selected .mf-icon-svg {
    color: #6b5540 !important;
}

.mf-option-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 2px !important;
}

.mf-option-description {
    font-size: 11px !important;
    color: #999 !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
}

/* Buttons - Understated elegance */
.mf-btn {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    border-radius: 6px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
}

.mf-btn-primary {
    background: #8b7355 !important;
    box-shadow: none !important;
}

.mf-btn-primary:hover:not(:disabled) {
    background: #7a6548 !important;
    box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2) !important;
}

.mf-btn-primary:disabled {
    background: #d5d0ca !important;
    color: #999 !important;
}

.mf-btn-secondary {
    color: #8b7355 !important;
    border: 1px solid #c5b9ac !important;
    background: transparent !important;
}

.mf-btn-secondary:hover {
    background: #f5f2ef !important;
    color: #7a6548 !important;
    border-color: #8b7355 !important;
}

/* BMI Result */
.mf-bmi-number {
    color: #8b7355 !important;
}

.mf-category-badge.mf-bmi-normal {
    background: #8b7355 !important;
}

.mf-category-badge.mf-bmi-light {
    background: #a8917a !important;
}

.mf-category-badge.mf-bmi-heavy {
    background: #9d7b5a !important;
}

/* Result Page */
.mf-expert-badge {
    background: #a8917a !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
}

.mf-hardness-badge strong {
    color: #8b7355 !important;
}

.mf-series-name {
    color: #8b7355 !important;
}

.mf-link {
    color: #8b7355 !important;
}

.mf-link:hover {
    color: #7a6548 !important;
}

/* Tips section */
.mf-tips-section {
    background: #faf8f6 !important;
    border-left-color: #a8917a !important;
}

/* ===== 13. Section Titles - Lifestyle Style ===== */
.c-content-title-1 h3,
.c-title,
section h2 {
    font-family: 'Zen Kaku Gothic New', 'Noto Sans TC', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.12em !important;
}

.c-content-title-1 h3 .title-wrap,
.c-title .title-wrap {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.15em !important;
}

/* Remove uppercase for cleaner look */
.c-font-uppercase {
    text-transform: none !important;
}

/* ===== 14. Global UI Refinements ===== */
/* Buttons */
.btn,
button {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
    border-radius: 4px !important;
}

/* Form inputs */
input,
select,
textarea {
    font-family: 'Noto Sans TC', sans-serif !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #999 !important;
    outline: none !important;
}

/* Links */
a {
    color: #333;
    transition: color 0.2s ease;
}

a:hover {
    color: #000;
}

/* ===== Footer Contrast Fix ===== */
.c-layout-footer,
.c-layout-footer-6,
footer {
    color: #ccc !important;
}

.c-layout-footer h1,
.c-layout-footer h2,
.c-layout-footer h3,
.c-layout-footer h4,
.c-layout-footer .c-title,
footer h1,
footer h2,
footer h3,
footer h4 {
    color: #fff !important;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans TC', sans-serif !important;
}

.c-layout-footer p,
.c-layout-footer span,
.c-layout-footer li,
footer p,
footer span,
footer li {
    color: #aaa !important;
}

.c-layout-footer a,
footer a {
    color: #ccc !important;
}

.c-layout-footer a:hover,
footer a:hover {
    color: #fff !important;
}

/* ===== 15. Body Input - Side by Side Layout ===== */
.mf-body-layout {
    display: flex !important;
    gap: 16px !important;
    align-items: stretch !important;
}

.mf-body-quick {
    flex: 1 !important;
}

.mf-body-divider {
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    color: #bbb !important;
    font-size: 12px !important;
}

.mf-body-bmi {
    flex: 1 !important;
    max-width: 200px !important;
}

.mf-section-label {
    font-size: 11px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 8px !important;
}

/* Vertical option rows */
.mf-options-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.mf-option-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mf-option-row:hover {
    border-color: #ccc !important;
}

.mf-option-row[aria-checked="true"],
.mf-option-row.selected {
    border-color: #8b7355 !important;
    background: #faf8f6 !important;
}

.mf-option-row .mf-option-icon {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.mf-option-row .mf-icon-svg {
    width: 24px !important;
    height: 24px !important;
}

.mf-option-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.mf-option-row .mf-option-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 !important;
}

.mf-option-row .mf-option-desc {
    font-size: 11px !important;
    color: #999 !important;
}

/* BMI compact form */
.mf-bmi-compact {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.mf-input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.mf-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mf-input-group label {
    font-size: 11px !important;
    color: #888 !important;
}

.mf-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.mf-input-wrap .mf-input {
    flex: 1 !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    width: 100% !important;
}

.mf-input-wrap .mf-unit {
    font-size: 12px !important;
    color: #999 !important;
    min-width: 24px !important;
}

.mf-bmi-compact .mf-bmi-result {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
    background: #f5f5f5 !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

.mf-bmi-label {
    font-size: 11px !important;
    color: #888 !important;
}

.mf-bmi-compact .mf-bmi-number {
    font-size: 16px !important;
    color: #8b7355 !important;
}

.mf-bmi-compact .mf-category-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
}

/* Hide old tab toggle */
.mf-input-mode-toggle {
    display: none !important;
}

/* ===== 16. Body Type - Calm Technology BMI Helper ===== */
.mf-body-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

.mf-body-icon {
    color: #8b7355 !important;
}

.mf-body-icon svg {
    display: block !important;
}

.mf-option-card:hover .mf-body-icon,
.mf-option-card.selected .mf-body-icon {
    color: #6b5540 !important;
}

.mf-bmi-helper {
    margin-top: 16px !important;
    text-align: center !important;
}

.mf-bmi-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    color: #999 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    transition: color 0.2s ease !important;
}

.mf-bmi-toggle:hover {
    color: #666 !important;
}

.mf-bmi-toggle.expanded .mf-bmi-toggle-icon {
    transform: rotate(180deg) !important;
}

.mf-bmi-toggle-icon {
    transition: transform 0.2s ease !important;
}

.mf-bmi-panel {
    margin-top: 12px !important;
    padding: 16px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    animation: mf-fade-in 0.2s ease !important;
}

.mf-bmi-inputs {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
}

.mf-input-inline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.mf-input-inline label {
    font-size: 12px !important;
    color: #888 !important;
}

.mf-input-sm {
    width: 70px !important;
    padding: 6px 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    text-align: center !important;
}

.mf-input-sm:focus {
    border-color: #8b7355 !important;
    outline: none !important;
}

.mf-unit {
    font-size: 12px !important;
    color: #999 !important;
}

.mf-bmi-result {
    margin-top: 12px !important;
    text-align: center !important;
}

.mf-bmi-suggestion {
    font-size: 13px !important;
    color: #8b7355 !important;
    font-weight: 500 !important;
}

/* ===== 17. Carousel RWD Fix ===== */
/* Limit carousel height on smaller screens */
@media (max-width: 991px) {

    .slick .media--ratio,
    .slick-slider .media--ratio {
        padding-bottom: 56% !important;
        /* 16:9 ratio */
        max-height: 50vh !important;
    }

    .slick .media--ratio img,
    .slick-slider .media--ratio img {
        object-fit: cover !important;
        object-position: center !important;
    }

    .slide__title {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {

    .slick .media--ratio,
    .slick-slider .media--ratio {
        padding-bottom: 70% !important;
        max-height: 45vh !important;
    }

    .slide__caption {
        padding: 20px !important;
    }

    .slide__title {
        font-size: 18px !important;
        letter-spacing: 0.05em !important;
    }

    .slick-prev,
    .slick-next {
        width: 36px !important;
        height: 36px !important;
    }

    .slick-prev::before,
    .slick-next::before {
        width: 14px !important;
        height: 14px !important;
        border-width: 1.5px !important;
    }

    .slick-prev {
        left: 10px !important;
    }

    .slick-next {
        right: 10px !important;
    }

    .slick-prev::before {
        left: 12px !important;
    }

    .slick-next::before {
        right: 12px !important;
    }
}

@media (max-width: 480px) {

    .slick .media--ratio,
    .slick-slider .media--ratio {
        padding-bottom: 80% !important;
        max-height: 40vh !important;
    }

    .slide__title {
        font-size: 16px !important;
    }

    .slick-prev,
    .slick-next {
        width: 30px !important;
        height: 30px !important;
        opacity: 0.6 !important;
    }

    .slick-prev::before,
    .slick-next::before {
        width: 12px !important;
        height: 12px !important;
    }

    .slick-prev {
        left: 5px !important;
    }

    .slick-next {
        right: 5px !important;
    }

    .slick-prev::before {
        left: 10px !important;
    }

    .slick-next::before {
        right: 10px !important;
    }

    /* Modal RWD */
    .mf-body-grid {
        grid-template-columns: 1fr !important;
    }

    .mf-bmi-inputs {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ===== 18. Result Page - MUJI Style ===== */
.mf-result-page {
    text-align: center !important;
    padding: 8px 0 !important;
}

.mf-result-main {
    margin-bottom: 20px !important;
}

.mf-result-badge {
    display: inline-block !important;
    font-size: 11px !important;
    color: #8b7355 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.mf-result-series {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #333 !important;
    margin: 0 0 8px !important;
    letter-spacing: 0.02em !important;
}

.mf-result-desc {
    font-size: 14px !important;
    color: #888 !important;
    margin: 0 0 16px !important;
}

.mf-result-hardness {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: #f5f5f5 !important;
    border-radius: 20px !important;
}

.mf-hardness-label {
    font-size: 12px !important;
    color: #888 !important;
}

.mf-hardness-value {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #8b7355 !important;
}

.mf-result-summary {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 16px 0 !important;
    border-top: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 16px !important;
}

.mf-summary-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.mf-summary-label {
    font-size: 11px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.mf-summary-value {
    font-size: 13px !important;
    color: #333 !important;
}

.mf-result-tips {
    text-align: left !important;
    padding: 12px 16px !important;
    background: #faf9f7 !important;
    border-radius: 6px !important;
    margin-bottom: 16px !important;
}

.mf-tips-title {
    font-size: 12px !important;
    color: #8b7355 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

.mf-result-tips .mf-tips-list {
    margin: 0 !important;
    padding-left: 16px !important;
    font-size: 12px !important;
    color: #666 !important;
}

.mf-result-tips .mf-tips-list li {
    padding: 2px 0 !important;
}

.mf-result-tips .mf-tips-list li::before {
    display: none !important;
}

.mf-result-alternatives {
    margin-bottom: 16px !important;
}

.mf-alt-title {
    font-size: 11px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
}

.mf-alt-items {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
}

.mf-alt-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 8px 12px !important;
    background: #f9f9f9 !important;
    border-radius: 4px !important;
}

.mf-alt-name {
    font-size: 12px !important;
    color: #333 !important;
}

.mf-alt-hardness {
    font-size: 11px !important;
    color: #999 !important;
}

.mf-result-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    padding-top: 8px !important;
}

/* ===== 19. Home Page - App Showcase ===== */
.c-phone-img,
.c-tablet-img,
.c-desktop-img {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* ===== 20. News Page - Category Sidebar ===== */
.c-blog-sidebar {
    margin-bottom: 30px;
}

/* Blog post card - Tags above title customization */
.c-content-blog-post-card-1 .c-body>.c-panel {
    border-top: none !important;
    padding-top: 0 !important;
}

.c-content-blog-post-card-1 .c-body>.c-panel .c-tags {
    float: left !important;
}

/* Blog post full view - Tags alignment */
.c-content-blog-post-1 .c-panel {
    border: none !important;
    margin-top: 10px !important;
}

.c-content-blog-post-1 .c-panel .c-tags {
    float: left !important;
}

.c-content-blog-post-1 .c-title {
    margin-top: 10px !important;
}

.c-blog-sidebar .view-header,
.c-blog-sidebar .view-id-news {
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .c-blog-sidebar {
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .c-blog-sidebar {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }

    .col-md-9 {
        width: 100%;
    }
}

/* ===== 21. Product Grid - MUJI Style ===== */
/* 21.1 Labels - Subtle, Understated */
.field.field--name-field-sale-label,
.c-content-product-2 .field.field--name-field-sale-label {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: #8b7355 !important;
    border: 1px solid #8b7355 !important;
    border-radius: 2px !important;
}

.field.field--name-field-new-label,
.c-content-product-2 .field.field--name-field-new-label {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 5 !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: #f5f5f5 !important;
    color: #666 !important;
    border: none !important;
    border-radius: 2px !important;
}

/* Hide empty labels */
.field.field--name-field-sale-label:empty,
.field.field--name-field-new-label:empty {
    display: none !important;
}

/* 21.2 Product Card Container */
.c-content-product-2 {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.c-content-product-2:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-4px) !important;
}

/* Product overlay wrapper */
.c-content-product-2 .c-content-overlay {
    position: relative !important;
    overflow: hidden !important;
}

/* Image container - fixed height */
.c-content-product-2 .c-overlay-object {
    height: 220px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.c-content-product-2:hover .c-overlay-object {
    transform: scale(1.05) !important;
}

/* Explore overlay - MUJI style warm overlay */
.c-content-product-2 .c-overlay-wrapper {
    background: rgba(250, 248, 246, 0.95) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.c-content-product-2:hover .c-overlay-wrapper {
    opacity: 1 !important;
}

.c-content-product-2 .c-overlay-content .btn {
    background: transparent !important;
    color: #8b7355 !important;
    border: 1px solid #8b7355 !important;
    padding: 10px 24px !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    transition: all 0.25s ease !important;
}

.c-content-product-2 .c-overlay-content .btn:hover {
    background: #8b7355 !important;
    color: #fff !important;
    transform: scale(1.02) !important;
}

/* 21.3 Product Info */
.c-content-product-2 .c-info {
    padding: 16px 12px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.c-content-product-2 .c-info .c-title {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.c-content-product-2 .c-info .c-price {
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 !important;
}

.c-content-product-2 .c-info .c-price .c-font-line-through {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    margin-left: 8px !important;
}

/* 21.4 Action Buttons - Minimal */
.c-content-product-2 .btn-group-justified {
    border-top: 1px solid #f0f0f0 !important;
    display: flex !important;
}

.c-content-product-2 .btn-group {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.c-content-product-2 .btn-group.c-border-top {
    border-top: none !important;
}

.c-content-product-2 .btn-group.c-border-left {
    border-left: 1px solid #f0f0f0 !important;
}

/* 21.4 Action Buttons Container - Full width hover */
.c-content-product-2 .btn-group.c-border-top {
    flex: 1 !important;
    padding: 0 !important;
}

.c-content-product-2 .btn-group .flag-outer,
.c-content-product-2 .btn-group .flag-wrapper {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Wishlist button - full width hover */
.c-content-product-2 .flag-wishlist a {
    display: block !important;
    width: 100% !important;
    padding: 14px 8px !important;
    font-size: 11px !important;
    color: #999 !important;
    text-decoration: none !important;
    text-align: center !important;
    letter-spacing: 0.05em !important;
    transition: all 0.25s ease !important;
    background: transparent !important;
}

.c-content-product-2 .flag-wishlist a:hover {
    color: #8b7355 !important;
    background: #faf8f6 !important;
}

/* Add to Cart button - full width hover */
.c-content-product-2 .btn-group.c-border-left {
    flex: 1 !important;
    padding: 0 !important;
}

.c-content-product-2 .btn-group.c-border-left .field {
    width: 100% !important;
    height: 100% !important;
}

.c-content-product-2 .c-btn-product {
    display: block !important;
    width: 100% !important;
    padding: 14px 8px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    letter-spacing: 0.05em !important;
    transition: all 0.25s ease !important;
}

.c-content-product-2 .c-btn-product:hover {
    color: #fff !important;
    background: #8b7355 !important;
}

/* 21.5 Grid Spacing */
.node-product-teaser {
    margin-bottom: 24px !important;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.node-product-teaser:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.small-col-space {
    padding: 0 12px !important;
}

/* Row spacing */
[class*="row-"] {
    margin-bottom: 0 !important;
}

/* 21.6 Remove .c-border globally on product cards */
.c-content-product-2.c-border {
    border: none !important;
}

/* ===== 22. Pagination - MUJI Style ===== */
.pagers,
nav.pagers {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 32px 0 !important;
    padding: 0 !important;
}

.pager__items.c-content-pagination,
.c-content-pagination {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.c-content-pagination .pager__item {
    margin: 0 !important;
    padding: 0 !important;
}

/* Page number links - circular */
.c-content-pagination .pager__item>a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

/* Hover state */
.c-content-pagination .pager__item>a:hover {
    color: #8b7355 !important;
    border-color: #8b7355 !important;
    background: transparent !important;
}

/* Current/Active page */
.c-content-pagination .pager__item.is-active>a {
    color: #fff !important;
    background: #8b7355 !important;
    border-color: #8b7355 !important;
}

/* Next, Last arrows - same circular style, no double border */
.c-content-pagination .pager__item--next>a,
.c-content-pagination .pager__item--last>a,
.c-content-pagination .pager__item--previous>a,
.c-content-pagination .pager__item--first>a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    color: #999 !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    background: transparent !important;
}

.c-content-pagination .pager__item--next>a:hover,
.c-content-pagination .pager__item--last>a:hover,
.c-content-pagination .pager__item--previous>a:hover,
.c-content-pagination .pager__item--first>a:hover {
    color: #8b7355 !important;
    border-color: #8b7355 !important;
}

/* Remove any extra borders/backgrounds from c-theme class */
.c-content-pagination.c-theme .pager__item>a,
.c-content-pagination.c-theme .pager__item--next>a,
.c-content-pagination.c-theme .pager__item--last>a {
    box-shadow: none !important;
    outline: none !important;
}

/* Visually hidden text */
.c-content-pagination .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

#block-jango-sub-content--2 {
    margin-top: 20px;
}

/* ===== 23. Close Button of Dialog Titlebar ===== */
.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #333;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ui-dialog .ui-dialog-titlebar-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}