/* ===========================================================
   CarpetArtisian — Atelier Mega Menu
   Theme override: Magiccart_Magicmenu::css/custom-megamenu.css
   ---
   Shared chrome (variables, panel shell, intro row, footer bar)
   + four content layouts (Collection, Style&Patterns, Shapes, Discover).
   All dimensions/colors flow from CSS custom properties on .level-top-mega.
   =========================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
.magicmenu,.level-top-mega{--mm-bg:#ffffff;--mm-bg2:#fafafa;--mm-gold:#000000;--mm-gold-lt:#444444;--mm-text:rgba(0,0,0,0.92);--mm-text-mid:rgba(0,0,0,0.62);--mm-text-faint:rgba(0,0,0,0.42);--mm-div:rgba(0,0,0,0.10);--mm-gold-div:rgba(0,0,0,0.30);--mm-ease:cubic-bezier(0.25,0.46,0.45,0.94);--mm-r:0}

/* ---------- 2. TOP-LEVEL NAV LINKS ---------- */
.magicmenu .nav-desktop{background:transparent !important}
.magicmenu .nav-desktop>li.level0>a.level-top,.magicmenu .nav-desktop>li.level0>span.level-top{font-family:"Inter",sans-serif !important;font-size:11px !important;font-weight:700 !important;letter-spacing:0.1em !important;text-transform:uppercase !important;color:#0a0a0a !important;padding:16px 20px !important;border-bottom:2px solid transparent !important;transition:color 180ms ease,border-color 180ms ease !important}
.magicmenu .nav-desktop>li.level0>a.level-top:hover,.magicmenu .nav-desktop>li.level0.active>a.level-top,.magicmenu .nav-desktop>li.level0.has-active>a.level-top,.magicmenu .nav-desktop>li.level0.over>a.level-top{color:#000000 !important;border-bottom-color:#000000 !important}
.boder-menu{display:none !important}

/* ---------- 3. PANEL SHELL (shared by all 4 mega menus) ---------- */
.magicmenu .nav-desktop .level0 .level-top-mega{left:50% !important;transform:translateX(-50%) !important;width:100vw !important;background:var(--mm-bg) !important;border-top:2px solid var(--mm-gold) !important;border-left:none !important;border-right:none !important;border-bottom:none !important;box-shadow: none;padding:0 !important;border-radius:0 !important;min-width:0 !important;transition:opacity 200ms var(--mm-ease),visibility 200ms var(--mm-ease),top 200ms var(--mm-ease) !important}
.level-top-mega .content-mega{max-width:1400px !important;margin:0 auto !important;padding:36px 64px 32px !important;position:relative !important;box-sizing:border-box !important}
.level-top-mega .content-mega-horizontal{display:flex !important;gap:0 !important;align-items:flex-start !important;width:100% !important}

/* ---------- 4. SHARED INTRO ROW (eyebrow + serif title + helper) ---------- */
.ca-mm-intro{display:flex !important;align-items:flex-end !important;justify-content:space-between !important;gap:32px !important;padding-bottom:18px !important;margin-bottom:28px !important;border-bottom:1px solid var(--mm-div) !important}
.ca-mm-intro-text{display:flex !important;flex-direction:column !important;gap:8px !important}
.ca-mm-intro-eyebrow{font-family:"Inter",sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:0.22em !important;text-transform:uppercase !important;color:var(--mm-gold) !important;display:block !important}
.ca-mm-intro-title{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif !important;font-size:24px !important;font-weight:400 !important;color:var(--mm-text) !important;letter-spacing:0.01em !important;line-height:1.2 !important;display:block !important}
.ca-mm-intro-helper{font-family:"Inter",sans-serif !important;font-size:11px !important;font-weight:400 !important;color:var(--mm-text-mid) !important;letter-spacing:0.02em !important;text-align:right !important;max-width:340px !important;line-height:1.5 !important}

/* ---------- 5. SHARED FOOTER BAR (extras on left + primary CTA on right) ---------- */
.ca-mm-footer{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:32px !important;padding-top:22px !important;margin-top:30px !important;border-top:1px solid var(--mm-div) !important}
.ca-mm-footer-meta{font-family:"Inter",sans-serif !important;font-size:10px !important;font-weight:600 !important;letter-spacing:0.12em !important;text-transform:uppercase !important;color:var(--mm-text-faint) !important;display:inline-flex !important;align-items:center !important;gap:6px !important}
.ca-mm-footer-meta a{color:var(--mm-text-mid) !important;text-decoration:none !important;border-bottom:1px solid transparent !important;padding-bottom:1px !important;transition:color 150ms ease,border-color 150ms ease !important}
.ca-mm-footer-meta a:hover{color:var(--mm-gold-lt) !important;border-bottom-color:rgba(0,0,0,0.25) !important}
.ca-mm-footer-cta{font-family:"Inter",sans-serif !important;font-size:10px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-gold) !important;text-decoration:none !important;padding:12px 22px !important;border:1px solid rgba(0,0,0,0.30) !important;border-radius:2px !important;transition:background 200ms ease,color 200ms ease,border-color 200ms ease,letter-spacing 200ms ease !important;display:inline-block !important}
.ca-mm-footer-cta:hover{background:rgba(0,0,0,0.06) !important;border-color:var(--mm-gold) !important;color:var(--mm-gold-lt) !important;letter-spacing:0.18em !important}

/* ---------- 6. COLLECTION PANEL (3-col editorial: nav + hero + stories) ---------- */
.ca-mm-collection-panel{display:grid !important;grid-template-columns:220px 1fr 280px !important;gap:0 !important;align-items:stretch !important;width:100% !important}
.ca-mm-nav-col{padding-right:40px !important;border-right:1px solid var(--mm-div) !important}
.ca-mm-section-label{font-family:"Inter",sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:0.2em !important;text-transform:uppercase !important;color:var(--mm-text-faint) !important;display:block !important;margin-bottom:14px !important}
.ca-mm-collection-list{list-style:none !important;margin:0 !important;padding:0 !important;background:transparent !important;display:block !important;width:auto !important}
.ca-mm-collection-list .ca-collection-item{display:block !important;width:auto !important;min-width:0 !important;max-width:none !important;flex:unset !important;padding:0 !important;margin:0 !important;float:none !important;clear:none !important}
.ca-mm-collection-list .ca-collection-item>a{display:flex !important;align-items:center !important;justify-content:space-between !important;font-family:"Inter",sans-serif !important;font-size:13px !important;font-weight:500 !important;letter-spacing:0.01em !important;color:var(--mm-text-mid) !important;text-decoration:none !important;padding:9px 12px 9px 0 !important;border-bottom:1px solid transparent !important;transition:color 150ms ease,padding 200ms var(--mm-ease) !important;position:relative !important}
.ca-mm-collection-list .ca-collection-item>a::after{content:"" !important;position:absolute !important;bottom:-1px !important;left:0 !important;width:0 !important;height:1px !important;background:var(--mm-gold) !important;transition:width 220ms var(--mm-ease) !important}
.ca-mm-collection-list .ca-collection-item:hover>a{color:var(--mm-text) !important;padding-left:6px !important}
.ca-mm-collection-list .ca-collection-item:hover>a::after{width:100% !important}

/* Hero column — uses div+background-image (set inline + by JS) so we never show <img src=""> broken icon */
.ca-mm-hero-col{padding:0 40px !important}
.ca-mm-hero{position:relative !important;width:100% !important;aspect-ratio:16/10 !important;background:var(--mm-bg2) !important;border-radius:var(--mm-r) !important;overflow:hidden !important;display:flex !important;align-items:flex-end !important;border:1px solid var(--mm-div) !important}
.ca-mm-hero-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;background-color:var(--mm-bg2) !important;transition:opacity 350ms ease,filter 350ms ease !important;filter:brightness(0.72) saturate(0.82) !important}
.ca-mm-hero:hover .ca-mm-hero-img{filter:brightness(0.82) saturate(0.92) !important}
.ca-mm-hero-img.ca-fading{opacity:0 !important}
.ca-mm-hero::before{content:"" !important;position:absolute !important;inset:0 !important;background:linear-gradient(to top,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.04) 60%,transparent 100%) !important;z-index:1 !important;pointer-events:none !important}
.ca-mm-hero-caption{position:relative !important;z-index:2 !important;padding:20px 22px !important;display:flex !important;flex-direction:column !important;gap:6px !important;width:100% !important}
.ca-mm-hero-eyebrow{font-family:"Inter",sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:0.22em !important;text-transform:uppercase !important;color:var(--mm-gold) !important;display:block !important}
.ca-mm-hero-name{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif !important;font-size:22px !important;font-weight:400 !important;color:rgba(255,248,235,0.96) !important;letter-spacing:0.01em !important;line-height:1.2 !important;display:block !important;min-height:26px !important}
.ca-mm-hero-cta{font-family:"Inter",sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-gold-lt) !important;text-decoration:none !important;display:inline-block !important;margin-top:4px !important;align-self:flex-start !important;border-bottom:1px solid transparent !important;padding-bottom:2px !important;transition:border-color 200ms ease,color 200ms ease !important}
.ca-mm-hero-cta:hover{border-bottom-color:rgba(0,0,0,0.30) !important;color:#fff !important}

/* Editorial column */
.ca-mm-editorial-col{padding-left:40px !important;border-left:1px solid var(--mm-div) !important;display:flex !important;flex-direction:column !important;gap:0 !important;justify-content:space-between !important}
.ca-mm-feature-story{display:flex !important;flex-direction:column !important;gap:8px !important;padding:16px 0 !important;border-bottom:1px solid var(--mm-div) !important}
.ca-mm-feature-story:last-child{border-bottom:none !important;padding-bottom:0 !important}
.ca-mm-feature-story:first-child{padding-top:0 !important}
.ca-mm-story-title{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif !important;font-size:18px !important;font-weight:400 !important;color:var(--mm-text) !important;line-height:1.25 !important;display:block !important;margin-top:2px !important}
.ca-mm-story-blurb{font-family:"Inter",sans-serif !important;font-size:12px !important;font-weight:400 !important;color:var(--mm-text-mid) !important;line-height:1.55 !important;display:block !important;letter-spacing:0.01em !important}
.ca-mm-story-read{font-family:"Inter",sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-gold) !important;text-decoration:none !important;align-self:flex-start !important;border-bottom:1px solid transparent !important;padding-bottom:2px !important;margin-top:4px !important;transition:border-color 200ms ease,letter-spacing 200ms ease !important}
.ca-mm-story-read:hover{border-bottom-color:var(--mm-gold) !important;letter-spacing:0.18em !important}

/* ---------- 7. STYLE & PATTERNS PANEL (4-col image+caption-below) ---------- */
.mage-column.cat-mega.patterns-grid-container{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:24px !important;width:100% !important;list-style:none !important;padding:0 !important;margin:0 !important;flex-wrap:unset !important}
.patterns-grid-container li.pattern-grid-item{width:auto !important;min-width:0 !important;max-width:none !important;flex:unset !important;padding:0 !important;margin:0 !important;border:none !important;display:flex !important;flex-direction:column !important}
.patterns-grid-container a.pattern-link{display:flex !important;flex-direction:column !important;gap:12px !important;text-decoration:none !important}
.patterns-grid-container .pattern-image-container{width:100% !important;aspect-ratio:5/3 !important;overflow:hidden !important;border-radius:var(--mm-r) !important;background:#fafafa !important;display:block !important;position:relative !important}
.patterns-grid-container .pattern-image-container::after{content:"" !important;position:absolute !important;inset:0 !important;background:linear-gradient(to top,rgba(0,0,0,0.10) 0%,transparent 60%) !important;pointer-events:none !important;z-index:1 !important}
.patterns-grid-container .pattern-image-container img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;filter:brightness(0.78) saturate(0.78) !important;transition:transform 400ms var(--mm-ease),filter 400ms var(--mm-ease) !important}
.patterns-grid-container li.pattern-grid-item:hover .pattern-image-container img{transform:scale(1.06) !important;filter:brightness(1) saturate(1) !important}
.patterns-grid-container .pattern-name{font-family:"Inter",sans-serif !important;font-size:10px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-text-mid) !important;display:block !important;text-align:left !important;transition:color 200ms ease,letter-spacing 200ms ease !important}
.patterns-grid-container li.pattern-grid-item:hover .pattern-name{color:var(--mm-gold-lt) !important;letter-spacing:0.18em !important}

/* ---------- 8. SHAPES PANEL (5-col silhouette grid) ---------- */
.mage-column.cat-mega.shapes-grid-container{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:0 !important;width:100% !important;list-style:none !important;padding:0 !important;margin:0 !important;border-top:1px solid var(--mm-div) !important;border-left:1px solid var(--mm-div) !important;flex-wrap:unset !important}
.shapes-grid-container li.shapes-grid-item{width:auto !important;min-width:0 !important;max-width:none !important;flex:unset !important;padding:30px 16px !important;margin:0 !important;border-right:1px solid var(--mm-div) !important;border-bottom:1px solid var(--mm-div) !important;display:flex !important;align-items:center !important;justify-content:center !important;min-height:148px !important;transition:background 220ms ease !important;box-sizing:border-box !important;position:relative !important}
.shapes-grid-container li.shapes-grid-item::after{content:"" !important;position:absolute !important;inset:0 !important;background:linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.04) 100%) !important;opacity:0 !important;transition:opacity 220ms ease !important;pointer-events:none !important}
.shapes-grid-container li.shapes-grid-item:hover{background:rgba(0,0,0,0.02) !important}
.shapes-grid-container li.shapes-grid-item:hover::after{opacity:1 !important}
.shapes-grid-container li.shapes-grid-item a.shape-link{display:flex !important;flex-direction:column !important;align-items:center !important;gap:14px !important;text-decoration:none !important;width:100% !important;position:relative !important;z-index:1 !important}
.shapes-grid-container .shape-image-container{width:64px !important;height:64px !important;display:flex !important;align-items:center !important;justify-content:center !important;transition:transform 280ms var(--mm-ease) !important}
.shapes-grid-container li.shapes-grid-item:hover .shape-image-container{transform:scale(1.08) !important}
/* Clean gold tint: white-ghost at rest, gold at hover (no sepia) */
.shapes-grid-container .shape-image-container img{max-width:100% !important;max-height:100% !important;filter:brightness(0) saturate(100%) invert(0%) opacity(0.40) !important;transition:filter 250ms ease,opacity 250ms ease !important}
.shapes-grid-container li.shapes-grid-item:hover .shape-image-container img{filter:brightness(0) saturate(100%) invert(0%) opacity(1) !important}
.shapes-grid-container .shape-name{font-family:"Inter",sans-serif !important;font-size:10px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-text-mid) !important;text-align:center !important;transition:color 220ms ease !important}
.shapes-grid-container li.shapes-grid-item:hover .shape-name{color:var(--mm-gold-lt) !important}

/* ---------- 9. DISCOVER PANEL (5-col image+caption editorial cards) ---------- */
.mage-column.cat-mega.discover-grid-container{display:grid !important;grid-template-columns:repeat(5,1fr) !important;gap:24px !important;width:100% !important;list-style:none !important;padding:0 !important;margin:0 !important;flex-wrap:unset !important}
.discover-grid-container li.discover-grid-item{width:auto !important;min-width:0 !important;max-width:none !important;flex:unset !important;padding:0 !important;margin:0 !important;border:none !important;display:flex !important;flex-direction:column !important}
.discover-grid-container a.discover-link{display:flex !important;flex-direction:column !important;gap:12px !important;text-decoration:none !important}
.discover-grid-container .discover-image-container{width:100% !important;aspect-ratio:4/3 !important;overflow:hidden !important;border-radius:var(--mm-r) !important;background:#fafafa !important;display:block !important;height:auto !important;position:relative !important}
.discover-grid-container .discover-image-container::after{content:"" !important;position:absolute !important;inset:0 !important;background:linear-gradient(to top,rgba(0,0,0,0.12) 0%,transparent 55%) !important;pointer-events:none !important;z-index:1 !important}
.discover-grid-container .discover-image-container img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;filter:brightness(0.78) saturate(0.78) !important;transition:transform 400ms var(--mm-ease),filter 400ms var(--mm-ease) !important}
.discover-grid-container li.discover-grid-item:hover .discover-image-container img{transform:scale(1.06) !important;filter:brightness(1) saturate(1) !important}
.discover-grid-container .discover-name-container{text-align:left !important}
.discover-grid-container .discover-name{font-family:"Inter",sans-serif !important;font-size:10px !important;font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;color:var(--mm-text-mid) !important;display:block !important;transition:color 200ms ease,letter-spacing 200ms ease !important}
.discover-grid-container li.discover-grid-item:hover .discover-name{color:var(--mm-gold-lt) !important;letter-spacing:0.18em !important}

/* ---------- 10. EXTRA STATIC BLOCKS (admin-managed left/right rails) ---------- */
.mage-column.mega-block-right{min-width:250px !important;max-width:270px !important;flex-shrink:0 !important;padding-left:40px !important;border-left:1px solid var(--mm-div) !important;margin-left:40px !important}
.mage-column.mega-block-left{min-width:210px !important;max-width:230px !important;flex-shrink:0 !important;padding-right:40px !important;border-right:1px solid var(--mm-div) !important;margin-right:40px !important}
.mage-column.mega-block-right a,.mage-column.mega-block-left a{color:var(--mm-text-mid) !important;text-decoration:none !important;transition:color 150ms ease !important}
.mage-column.mega-block-right a:hover,.mage-column.mega-block-left a:hover{color:var(--mm-gold) !important}

/* ---------- 11. RESPONSIVE BREAKPOINTS ---------- */
@media (max-width:1023px){.magicmenu{display:none !important}}
@media (min-width:1024px) and (max-width:1280px){
  .level-top-mega .content-mega{padding:30px 40px 26px !important}
  .ca-mm-intro{margin-bottom:22px !important;padding-bottom:14px !important}
  .ca-mm-intro-title{font-size:20px !important}
  .ca-mm-footer{margin-top:24px !important;padding-top:18px !important}
  .ca-mm-collection-panel{grid-template-columns:190px 1fr 240px !important}
  .ca-mm-nav-col{padding-right:28px !important}
  .ca-mm-hero-col{padding:0 28px !important}
  .ca-mm-editorial-col{padding-left:28px !important}
  .mage-column.cat-mega.patterns-grid-container{grid-template-columns:repeat(3,1fr) !important;gap:18px !important}
  .mage-column.cat-mega.discover-grid-container{grid-template-columns:repeat(4,1fr) !important;gap:18px !important}
  .mage-column.cat-mega.shapes-grid-container{grid-template-columns:repeat(4,1fr) !important}
}
@media (min-width:1280px) and (max-width:1440px){
  .level-top-mega .content-mega{padding:32px 52px 28px !important}
}