/*
 * Momen Gastro â€” Shop Stylesheet (v4 â€” Lime & Confident)
 * Palette: #a1bc3a lime primary Â· #dfeea5 lime light Â· #0F0F0D black Â· #FFFFFF white
 */

 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Outfit:wght@400;500;600;700;800&display=swap');

 /* ============================================================
    1. CSS VARIABLES
    ============================================================ */
 :root {
   /* â”€â”€ Primary palette: lime replaces lime â”€â”€ */
   --momen-lime:         #a1bc3a;   /* lime â€” primary interactive */
   --momen-lime-light:   #dfeea5;   /* lime light */
   --momen-lime-dark:    #7a9228;   /* lime dark */
   --momen-lime-deep:    #1A1A17;   /* near-black (badges, deep bg) */
   --momen-terra:         #C4654A;
   --momen-terra-dark:    #A84F37;
   --momen-terra-light:   #f9ede9;
   --momen-sand:          #F5EFE0;
   --momen-cream:         #F8F5EE;
   --momen-cream-dark:    #EEE7D6;
   --momen-charcoal:      #1E1E18;
   --momen-mid:           #7A7A6E;
   --momen-border:        #DDD5C0;
   --momen-white:         #FFFFFF;
   --momen-lime:          #a1bc3a;
   --momen-lime-light:    #dfeea5;
   --momen-lime-dark:     #7a9228;
   --momen-black:         #0F0F0D;
   --momen-black-mid:     #1A1A17;
 
   --momen-font-display:  'Cormorant Garamond', 'Georgia', serif;
   --momen-font-body:     'Outfit', 'Helvetica Neue', sans-serif;
 
   --momen-radius:        8px;
   --momen-radius-sm:     6px;
   --momen-radius-pill:   100px;
   --momen-shadow-card:   0 2px 8px rgba(30,30,24,0.06), 0 8px 24px rgba(30,30,24,0.07);
   --momen-shadow-hover:  0 16px 48px rgba(30,30,24,0.18);
   --momen-shadow-sm:     0 1px 4px rgba(30,30,24,0.08);
 
   --momen-mobile-header-offset: 15px;
   --momen-shop-top-desktop: 3.5rem;
 }
 
 /* ============================================================
    2. GLOBAL RESETS & TYPOGRAPHY
    ============================================================ */
 *, *:before, *:after { box-sizing: border-box; }
 
 body {
   font-family: var(--momen-font-body);
   background-color: var(--momen-cream);
   color: var(--momen-charcoal);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--momen-font-display);
   color: var(--momen-charcoal);
   line-height: 1.15;
   letter-spacing: -0.02em;
 }
 
 p { font-family: var(--momen-font-body); color: var(--momen-charcoal); line-height: 1.65; }
 
 a { color: var(--momen-lime-dark); text-decoration: none; transition: color 0.2s; }
 a:hover { color: var(--momen-lime); }
 
 *:focus-visible { outline: 2px solid var(--momen-lime); outline-offset: 3px; border-radius: 2px; }
 
 .screen-reader-text {
   border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
   height: 1px; margin: -1px; overflow: hidden; padding: 0;
   position: absolute; width: 1px; word-wrap: normal;
 }
 
 /* ============================================================
    3. SHARED BUTTONS
    ============================================================ */
 .momen-btn-primary {
   font-family: var(--momen-font-body);
   font-weight: 700;
   font-size: 0.875rem;
   border-radius: var(--momen-radius-sm);
   padding: 0.7rem 1.5rem;
   transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
   border: none;
   cursor: pointer;
   display: inline-block;
   background: var(--momen-terra);
   color: var(--momen-white);
   letter-spacing: 0.02em;
   text-transform: none;
   box-shadow: 0 2px 10px rgba(196,101,74,0.28);
 }
 .momen-btn-primary:hover {
   background: var(--momen-terra-dark);
   color: var(--momen-white);
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(196,101,74,0.35);
 }
 
 .momen-btn-outline {
   font-family: var(--momen-font-body);
   font-weight: 600;
   font-size: 0.875rem;
   background: transparent;
   border: 1.5px solid rgba(255,255,255,0.28);
   border-radius: var(--momen-radius-sm);
   padding: 0.7rem 1.5rem;
   cursor: pointer;
   display: inline-block;
   transition: all 0.18s ease;
   color: rgba(255,255,255,0.82);
   letter-spacing: 0.01em;
 }
 .momen-btn-outline:hover {
   background: rgba(255,255,255,0.1);
   border-color: rgba(255,255,255,0.5);
   color: #fff;
 }
 
 .button, input[type="submit"] {
   font-family: var(--momen-font-body);
   font-weight: 600;
   border-radius: var(--momen-radius-sm);
   padding: 0.7rem 1.5rem;
   transition: all 0.18s ease;
   border: none;
   cursor: pointer;
 }
 
 /* ============================================================
    4. BANNERS
    ============================================================ */
 .momen-guest-banner {
   border-radius: var(--momen-radius);
   padding: 1.15rem 1.5rem;
   margin-bottom: 2rem;
   font-family: var(--momen-font-body);
   display: flex;
   align-items: center;
   gap: 1.5rem;
   background: var(--momen-charcoal);
   border-left: 4px solid var(--momen-terra);
 }
 .momen-guest-banner p {
   margin: 0;
   font-size: 0.875rem;
   color: rgba(255,255,255,0.65);
   line-height: 1.5;
   flex: 1;
 }
 .momen-guest-banner strong { color: var(--momen-lime); font-weight: 700; }
 .momen-guest-banner__actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
 .momen-guest-banner .momen-btn-outline {
   padding: 0.5rem 1rem; font-size: 0.82rem; white-space: nowrap;
   display: inline-flex; align-items: center;
 }
 .momen-guest-banner .momen-btn-primary {
   background: var(--momen-lime);
   color: var(--momen-black);
   padding: 0.5rem 1rem; font-size: 0.82rem; white-space: nowrap;
   display: inline-flex; align-items: center; box-shadow: none;
 }
 .momen-guest-banner .momen-btn-primary:hover {
   background: var(--momen-lime-dark); color: var(--momen-white); transform: none;
 }
 .momen-reg-banner {
   border-radius: var(--momen-radius);
   padding: 0.9rem 1.25rem;
   margin-bottom: 2rem;
   font-size: 0.875rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   background: rgba(161,188,58,0.08);
   border: 1px solid rgba(161,188,58,0.25);
   border-left: 3px solid var(--momen-lime);
 }
 .momen-reg-banner strong { color: var(--momen-lime-dark); font-weight: 700; }
 .momen-lime-pill {
   background: var(--momen-lime); color: var(--momen-black);
   border-radius: var(--momen-radius-pill);
   font-size: 0.68rem; font-weight: 700; padding: 0.18rem 0.65rem;
   font-family: var(--momen-font-body); letter-spacing: 0.06em;
   text-transform: uppercase; display: inline-block;
 }
 @media (max-width: 850px) {
   .momen-guest-banner { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
   .momen-guest-banner__actions { width: 100%; }
   .momen-guest-banner__actions a { flex: 1; text-align: center; justify-content: center; }
 }
 
 /* ============================================================
    5. SHOP PAGE WRAPPER
    ============================================================ */
 .momen-shop-page {
   width: 100%; max-width: var(--momen-shop-max-width, 1340px); margin: 0 auto; padding: var(--momen-shop-top-spacing, 3.5rem) 2rem 2rem;
 }
 #primary { width: 100%; float: none; margin: 0; }
 
 /* ============================================================
    6. TOOLBAR
    ============================================================ */
 .momen-shop-toolbar {
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
   padding-bottom: 1.25rem; border-bottom: 1px solid var(--momen-border);
 }
 .momen-shop-toolbar__left { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
 .momen-shop-toolbar__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
 .momen-shop-title {
   font-size: 2.4rem; font-family: var(--momen-font-display);
   font-weight: 600; font-style: italic; margin: 0; line-height: 1.05;
   color: var(--momen-charcoal); letter-spacing: -0.03em;
 }
 .momen-toolbar-count {
   font-size: 0.75rem; color: var(--momen-mid); white-space: nowrap;
   background: var(--momen-cream-dark); border-radius: var(--momen-radius-pill);
   padding: 0.18rem 0.6rem; font-weight: 500; font-family: var(--momen-font-body);
 }
 .momen-search-bar {
   display: flex; align-items: center; gap: 0.45rem;
   background: var(--momen-white); border: 1px solid var(--momen-border);
   border-radius: var(--momen-radius-pill); padding: 0.45rem 1rem 0.45rem 0.85rem;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 .momen-search-bar:focus-within {
   border-color: var(--momen-lime);
   box-shadow: 0 0 0 3px rgba(161,188,58,0.15);
 }
 .momen-search-bar__icon { font-size: 0.8rem; opacity: 0.4; flex-shrink: 0; }
 .momen-search-bar input, #momen-live-search {
   border: none; outline: none; background: transparent;
   font-family: var(--momen-font-body); font-size: 0.84rem;
   color: var(--momen-charcoal); width: 170px; box-shadow: none; padding: 0;
 }
 .momen-search-bar input::placeholder { color: var(--momen-mid); }
 .woocommerce-ordering { margin: 0; padding: 0; }
 .woocommerce-ordering select {
   background: var(--momen-white); border: 1px solid var(--momen-border);
   border-radius: var(--momen-radius-pill); padding: 0.45rem 1rem;
   font-family: var(--momen-font-body); font-size: 0.82rem;
   color: var(--momen-charcoal); cursor: pointer; outline: none;
   appearance: auto; transition: border-color 0.2s;
 }
 .woocommerce-ordering select:hover { border-color: var(--momen-lime); }
 
 /* ============================================================
    7. CATEGORY TABS â€” lime underline style
    ============================================================ */
 .momen-cat-tabs {
   display: flex !important; align-items: center; gap: 0;
   flex-wrap: nowrap; margin: 0 0 2rem; padding: 0; list-style: none;
   border-bottom: 1.5px solid var(--momen-border);
   overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
 }
 .momen-cat-tabs::-webkit-scrollbar { display: none; }
 
 .momen-cat-tab, a.momen-cat-tab {
   display: inline-flex !important; align-items: center; gap: 0.3em;
   padding: 0.6rem 1.15rem; border-radius: 0;
   font-size: 0.82rem; font-weight: 500; font-family: var(--momen-font-body);
   text-decoration: none !important; border: none !important;
   border-bottom: 2.5px solid transparent !important;
   background: transparent !important; color: var(--momen-mid) !important;
   transition: color 0.18s ease, border-color 0.18s ease;
   white-space: nowrap; line-height: 1.3; cursor: pointer; letter-spacing: 0.01em;
   margin-bottom: -1.5px; box-shadow: none;
 }
 .momen-cat-tab:hover, a.momen-cat-tab:hover {
   border-bottom-color: var(--momen-lime) !important;
   color: var(--momen-charcoal) !important;
   background: transparent !important; transform: none;
 }
 .momen-cat-tab.active, a.momen-cat-tab.active {
   background: transparent !important;
   border-bottom-color: var(--momen-lime) !important;
   color: var(--momen-charcoal) !important;
   font-weight: 700; box-shadow: none;
 }
 
 /* ============================================================
    8. SHOP LAYOUT
    ============================================================ */
 .momen-shop-layout {
   display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start;
 }
 .momen-shop-layout .momen-product-grid {
   display: grid; grid-template-columns: repeat(var(--momen-shop-cols-desktop, 3), minmax(0, 1fr)); gap: var(--momen-shop-grid-gap, 1.25rem);
   padding: 0; margin: 0; list-style: none;
 }
 
 .momen-product-subtotal__row,
 .momen-home-shop__subtotal-row {
   display: flex; justify-content: space-between; gap: 12px;
 }
 .momen-product-subtotal__row + .momen-product-subtotal__row,
 .momen-home-shop__subtotal-row + .momen-home-shop__subtotal-row { margin-top: 4px; }
 .momen-product-subtotal__row--netto,
 .momen-home-shop__subtotal-row--netto { font-size: 0.92em; color: var(--momen-mid); }
 

 /* ============================================================
    12. HEADER (Blocksy)
    ============================================================ */
 header.site-header, .ct-header, #masthead {
   background: var(--momen-black); border-bottom: 1px solid rgba(161,188,58,0.2);
 }
 .ct-header-inner, .ct-container, .site-header .ct-container { max-width: var(--momen-shop-max-width, 1340px); margin: 0 auto; }
 .site-branding a, .ct-site-title, .ct-site-title a, .custom-logo-link { color: var(--momen-white); }
 .site-branding .site-title { font-family: var(--momen-font-display); font-size: 1.4rem; letter-spacing: 0.02em; color: var(--momen-white); }
 .site-branding .site-title span, .ct-site-title span { color: var(--momen-lime); }
 .ct-main-nav > ul > li > a, .main-navigation ul li a, .site-header .menu > li > a, nav.ct-header-menu ul li a {
   font-family: var(--momen-font-body); font-size: 0.88rem; font-weight: 500;
   color: rgba(255,255,255,0.82); letter-spacing: 0.02em; padding: 0.5rem 0.9rem;
   border-radius: 6px; transition: all 0.15s ease; text-decoration: none;
 }
 .ct-main-nav > ul > li > a:hover, .main-navigation ul li a:hover, nav.ct-header-menu ul li a:hover {
   color: var(--momen-lime); background: rgba(161,188,58,0.1);
 }
 .ct-main-nav > ul > li.current-menu-item > a, .main-navigation ul li.current-menu-item > a,
 .main-navigation ul li.current_page_item > a { color: var(--momen-lime); font-weight: 600; }
 .ct-main-nav .sub-menu, .main-navigation ul ul, .ct-header-menu .sub-menu {
   background: var(--momen-black-mid); border: 1px solid rgba(161,188,58,0.15);
   border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.35); padding: 0.4rem;
 }
 .ct-main-nav .sub-menu a, .main-navigation ul ul a {
   font-size: 0.85rem; color: rgba(255,255,255,0.75); border-radius: 6px; padding: 0.5rem 0.9rem;
 }
 .ct-main-nav .sub-menu a:hover, .main-navigation ul ul a:hover {
   background: rgba(161,188,58,0.12); color: var(--momen-lime);
 }
 .ct-header .ct-cart-content, .site-header .woocommerce-mini-cart,
 .header-cart-btn, .ct-header [data-id="cart"] { color: var(--momen-white); }
 .ct-header .cart-count, .site-header .count, .ct-cart-content .count {
   background: var(--momen-lime); color: var(--momen-black); font-weight: 700;
   font-size: 0.65rem; border-radius: 100px;
 }
 .ct-header .ct-button, .site-header .header-cta-btn {
   background: var(--momen-lime); color: var(--momen-black); font-weight: 700;
   border-radius: var(--momen-radius-sm); padding: 0.45rem 1rem; font-size: 0.84rem;
   transition: all 0.15s ease;
 }
 .ct-header .ct-button:hover, .site-header .header-cta-btn:hover { background: var(--momen-lime-dark); color: var(--momen-white); }
 .ct-toggle-dropdown-mobile button, .menu-toggle, .ct-header .ct-toggle { color: var(--momen-white); }
 .ct-toggle-dropdown-mobile button:hover, .menu-toggle:hover { color: var(--momen-lime); }
 .admin-bar header.site-header, .admin-bar .ct-header { top: 32px; }
.ct-header [data-id="account"] a { font-weight: 700; }
