/**
 * FilamentHub - High Luxury Atelier Design System
 * Inspired by Grown Brilliance Fine Jewelry & Swiss Additive Manufacturing Excellence
 * Palette: Gallery Alabaster (#FAF9F6), Pure White (#FFFFFF), Deep Obsidian (#18181B),
 *          Warm Charcoal (#3F3F46), Stone Smoke (#71717A / #A1A1AA),
 *          Champagne Bronze Gold (#9A6735 / #7C5127), Hairline Dividers (#E7E5E4)
 */

/* ==========================================================================
   0. CSS Variables & Typography Definitions
   ========================================================================== */
:root {
  --at-canvas: #faf9f6;
  --at-surface: #ffffff;
  --at-obsidian: #18181b;
  --at-charcoal: #3f3f46;
  --at-slate: #52525b;
  --at-smoke: #71717a;
  --at-hairline: #e7e5e4;
  --at-hairline-subtle: #f0eee9;
  --at-gold: #9a6735;
  --at-gold-hover: #7c5127;
  --at-gold-soft: #fcfbf7;
  --at-gold-border: #eedfcb;
  --at-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --at-font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   1. Top Luxury Utility Bar
   ========================================================================== */
.atelier-top-utility-bar {
  background-color: #18181b !important;
  color: #d4d4d8 !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #27272a !important;
  padding: 8px 0 !important;
  position: relative !important;
  z-index: 99 !important;
}

.atelier-utility-container {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.atelier-utility-item {
  color: #e4e4e7 !important;
  white-space: nowrap !important;
}

.atelier-utility-sep {
  color: #9a6735 !important;
  font-size: 0.625rem !important;
}

/* ==========================================================================
   2. Global Canvas & Full-Width Layout
   ========================================================================== */
body.woocommerce,
body.woocommerce-page,
body.custom-background,
body {
  background-color: var(--at-canvas) !important;
  color: var(--at-slate) !important;
  font-family: var(--at-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#secondary.widget-area {
  display: none !important;
}

#primary.content-area {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

.site-content .col-full {
  max-width: 1320px !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* Hide redundant home page title */
.home .entry-header,
.home .entry-title {
  display: none !important;
}

/* Shop and Archive Page Title Serif Styling */
.woocommerce-products-header__title.page-title,
.woocommerce-page h1.page-title {
  font-family: var(--at-font-serif) !important;
  font-size: 2.75rem !important;
  font-weight: 600 !important;
  color: var(--at-obsidian) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 20px 0 !important;
}

/* ==========================================================================
   3. Site Header & Luxury Classical Navigation
   ========================================================================== */
.site-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--at-hairline) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
  padding: 1.25rem 0 0 0 !important;
  position: relative !important;
}

/* Row 1: The Three-Pillar Luxury Atelier Bar (Left Tag, Center Brand, Right Actions) */
.site-header > .col-full {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  box-sizing: border-box !important;
  float: none !important;
}

.site-header > .col-full .skip-link {
  display: none !important;
}

/* Left: Subtle Atelier Tagline */
.atelier-header-left {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  float: none !important;
}

.atelier-header-tagline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--at-smoke) !important;
  white-space: nowrap !important;
}

.atelier-header-tagline .atelier-tag-dot {
  color: var(--at-gold) !important;
  font-size: 0.625rem !important;
}

/* Center: Grand Classical Brand Title */
.site-branding {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  text-align: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 24px !important;
  width: auto !important;
}

.site-title {
  font-family: var(--at-font-serif) !important;
  font-size: 2.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}

.site-title a {
  color: var(--at-obsidian) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

.site-title a:hover {
  color: var(--at-gold) !important;
}

.site-description {
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin: 4px 0 0 0 !important;
  white-space: nowrap !important;
}

/* Right: Horizontally Aligned Actions (Search Pill + Cart Pill) */
.atelier-header-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  white-space: nowrap !important;
  float: none !important;
}

/* Search Widget Styling */
.atelier-header-search {
  display: flex !important;
  align-items: center !important;
}

.atelier-header-search .site-search {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
}

.atelier-header-search .widget_product_search {
  margin: 0 !important;
  padding: 0 !important;
}

.atelier-header-search .widget_product_search form {
  position: relative !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Magnifying Glass Icon Clean Absolute Placement */
.atelier-header-search .widget_product_search form::before {
  content: "\f002" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 0.75rem !important;
  color: var(--at-smoke) !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: color 0.2s ease !important;
}

.atelier-header-search .widget_product_search form:focus-within::before {
  color: var(--at-gold) !important;
}

/* Search Input Box */
.atelier-header-search .widget_product_search form input[type="search"] {
  width: 200px !important;
  height: 38px !important;
  padding: 0 16px 0 36px !important; /* 36px left padding ensures text never overlaps the 14px icon */
  background: #fbfaf8 !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 9999px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  color: var(--at-obsidian) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 36px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.atelier-header-search .widget_product_search form input[type="search"]::placeholder {
  color: #a1a1aa !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.atelier-header-search .widget_product_search form input[type="search"]:focus {
  width: 240px !important;
  background: #ffffff !important;
  border-color: var(--at-gold) !important;
  box-shadow: 0 0 0 3px rgba(154, 103, 53, 0.12) !important;
}

/* Suppress Raw Submit Button */
.atelier-header-search .widget_product_search form button[type="submit"],
.atelier-header-search .widget_product_search form input[type="submit"] {
  display: none !important;
}

/* Cart Bag Styling */
.atelier-header-cart {
  display: flex !important;
  align-items: center !important;
}

.atelier-header-cart ul.site-header-cart,
.site-header-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  float: none !important;
  position: relative !important;
}

.atelier-header-cart ul.site-header-cart > li:first-child,
.site-header-cart > li:first-child {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.atelier-header-cart .cart-contents,
.site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  padding: 0 16px !important;
  background: #fbfaf8 !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.atelier-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:hover {
  background: #ffffff !important;
  border-color: var(--at-gold) !important;
  box-shadow: 0 2px 8px rgba(154, 103, 53, 0.08) !important;
}

.atelier-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .amount {
  display: inline !important;
  float: none !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
  line-height: 1 !important;
}

.atelier-header-cart .cart-contents .count,
.site-header-cart .cart-contents .count {
  display: inline !important;
  float: none !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--at-smoke) !important;
  line-height: 1 !important;
}

.atelier-header-cart .cart-contents::after,
.site-header-cart .cart-contents::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  content: "\f290" !important; /* Shopping bag */
  font-size: 0.8125rem !important;
  color: var(--at-gold) !important;
  margin-left: 2px !important;
  line-height: 1 !important;
}

/* ==========================================================================
   Cart Dropdown Widget Positioning & High Luxury Layout Refinement
   ========================================================================== */
.atelier-header-cart {
  position: relative !important;
}

.atelier-header-cart ul.site-header-cart,
.site-header-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  float: none !important;
  position: relative !important;
}

.atelier-header-cart ul.site-header-cart li,
.site-header-cart li {
  position: relative !important;
}

.atelier-header-cart ul.site-header-cart li .widget_shopping_cart,
.site-header-cart .widget_shopping_cart {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important; /* Crucial: overrides Storefront default left: 0 to align to right edge */
  width: 380px !important;
  max-width: calc(100vw - 32px) !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(154, 103, 53, 0.08) !important;
  z-index: 9999 !important;
  padding: 20px !important;
  box-sizing: border-box !important;

  /* Default state: completely hidden until hover */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(8px) !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.25s !important;
}

/* Invisible bridge so mouse doesn't drop hover when crossing the 8px gap */
.atelier-header-cart ul.site-header-cart li .widget_shopping_cart::before,
.site-header-cart .widget_shopping_cart::before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  right: 0 !important;
  height: 12px !important;
  display: block !important;
  background: transparent !important;
}

/* Active hover state: smoothly reveal dropdown when hovering cart pill or dropdown itself */
.atelier-header-cart:hover ul.site-header-cart li .widget_shopping_cart,
.atelier-header-cart:hover .widget_shopping_cart,
.site-header-cart:hover li .widget_shopping_cart,
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus li .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart,
.atelier-header-cart:focus-within ul.site-header-cart li .widget_shopping_cart,
.atelier-header-cart:focus-within .widget_shopping_cart {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Reset and clean cart list container */
.widget_shopping_cart ul.cart_list,
.widget_shopping_cart ul.product_list_widget {
  list-style: none !important;
  padding: 0 4px 0 0 !important;
  margin: 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
  /* Firefox 极细高奢香槟金滚动条 */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(154, 103, 53, 0.28) transparent !important;
}

/* Webkit 极细高奢定制滚动条 (Chrome / Edge / Safari) */
.widget_shopping_cart ul.cart_list::-webkit-scrollbar,
.widget_shopping_cart ul.product_list_widget::-webkit-scrollbar {
  width: 4px !important;
  height: 0px !important;
  display: block !important;
}

.widget_shopping_cart ul.cart_list::-webkit-scrollbar-track,
.widget_shopping_cart ul.product_list_widget::-webkit-scrollbar-track {
  background: transparent !important;
}

.widget_shopping_cart ul.cart_list::-webkit-scrollbar-thumb,
.widget_shopping_cart ul.product_list_widget::-webkit-scrollbar-thumb {
  background: rgba(154, 103, 53, 0.25) !important;
  border-radius: 9999px !important;
  transition: background 0.2s ease !important;
}

.widget_shopping_cart ul.cart_list::-webkit-scrollbar-thumb:hover,
.widget_shopping_cart ul.product_list_widget::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 103, 53, 0.55) !important;
}

.widget_shopping_cart ul.cart_list::-webkit-scrollbar-corner,
.widget_shopping_cart ul.product_list_widget::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Single Cart Item: Left 54px Thumbnail, Center Details, Right Remove Button */
.widget_shopping_cart ul.cart_list li.mini_cart_item,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item {
  position: relative !important;
  display: block !important;
  min-height: 56px !important;
  padding: 14px 34px 14px 64px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--at-hairline-subtle) !important;
  box-sizing: border-box !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item:first-child,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item:first-child {
  padding-top: 4px !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item:first-child img,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item:first-child img {
  top: 4px !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item:first-child a.remove,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item:first-child a.remove {
  top: 4px !important;
}

/* 1. Left Thumbnail: Absolutely anchored to left, preventing text collisions */
.widget_shopping_cart ul.cart_list li.mini_cart_item img,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item img {
  position: absolute !important;
  left: 0 !important;
  top: 14px !important;
  right: auto !important;
  bottom: auto !important;
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--at-hairline) !important;
  background-color: #faf9f6 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  z-index: 1 !important;
}

/* 2. Product Title: Takes remaining horizontal space cleanly */
.widget_shopping_cart ul.cart_list li.mini_cart_item > a:not(.remove),
.widget_shopping_cart ul.product_list_widget li.mini_cart_item > a:not(.remove) {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  width: 100% !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--at-obsidian) !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  float: none !important;
  transition: color 0.15s ease !important;
  word-break: break-word !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item > a:not(.remove):hover,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item > a:not(.remove):hover {
  color: var(--at-gold) !important;
}

/* 3. Quantity & Price */
.widget_shopping_cart ul.cart_list li.mini_cart_item .quantity,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item .quantity {
  display: block !important;
  width: 100% !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--at-smoke) !important;
  line-height: 1.2 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item .quantity .amount,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item .quantity .amount {
  font-weight: 700 !important;
  color: var(--at-gold) !important;
  margin-left: 2px !important;
}

/* 4. Remove Button: Top right subtle round button */
.widget_shopping_cart ul.cart_list li.mini_cart_item a.remove,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item a.remove {
  position: absolute !important;
  right: 4px !important;
  top: 14px !important;
  left: auto !important; /* Crucial: overrides Storefront default left/float */
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 18px !important;
  border-radius: 50% !important;
  background: #f4f4f5 !important;
  color: #71717a !important;
  text-align: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  text-indent: 0 !important; /* Crucial: overrides Storefront -9999px text-indent */
  transition: all 0.2s ease !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.widget_shopping_cart ul.cart_list li.mini_cart_item a.remove:hover,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item a.remove:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  transform: scale(1.1) !important;
}

/* Suppress Storefront default pseudo-elements on remove buttons */
.widget_shopping_cart ul.cart_list li.mini_cart_item a.remove::before,
.widget_shopping_cart ul.cart_list li.mini_cart_item a.remove::after,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item a.remove::before,
.widget_shopping_cart ul.product_list_widget li.mini_cart_item a.remove::after {
  display: none !important;
}

/* Subtotal Row */
.widget_shopping_cart .total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 0 14px 0 !important;
  margin: 8px 0 0 0 !important;
  border-top: 1px solid var(--at-hairline) !important;
  border-bottom: 1px solid var(--at-hairline-subtle) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.875rem !important;
}

.widget_shopping_cart .total strong {
  font-weight: 600 !important;
  color: var(--at-obsidian) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.8125rem !important;
}

.widget_shopping_cart .total .amount {
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
  font-size: 1.0625rem !important;
}

/* Cart Action Buttons: View Cart & Checkout */
.widget_shopping_cart .buttons {
  display: flex !important;
  gap: 10px !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
}

.widget_shopping_cart .buttons a.button {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 14px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.widget_shopping_cart .buttons a.button:not(.checkout) {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  color: var(--at-obsidian) !important;
}

.widget_shopping_cart .buttons a.button:not(.checkout):hover {
  background: #f8fafc !important;
  border-color: var(--at-obsidian) !important;
  color: var(--at-obsidian) !important;
}

.widget_shopping_cart .buttons a.button.checkout {
  background: var(--at-obsidian) !important;
  border: 1px solid var(--at-obsidian) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.2) !important;
}

.widget_shopping_cart .buttons a.button.checkout:hover {
  background: #27272a !important;
  border-color: #27272a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(24, 24, 27, 0.28) !important;
}

/* Empty message */
.widget_shopping_cart .woocommerce-mini-cart__empty-message {
  text-align: center !important;
  padding: 24px 16px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  color: var(--at-smoke) !important;
  margin: 0 !important;
}

/* Row 2: Classical Horizontally Centered Navigation Bar */
.storefront-primary-navigation {
  background-color: transparent !important;
  border-top: 1px solid var(--at-hairline-subtle) !important;
  margin-top: 1.25rem !important;
  padding: 0.625rem 0 !important;
  clear: both !important;
}

.storefront-primary-navigation > .col-full {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.main-navigation {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.main-navigation ul.menu,
.main-navigation ul.nav-menu {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  flex-wrap: wrap !important;
}

.main-navigation ul.menu li,
.main-navigation ul.nav-menu li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

.main-navigation ul.menu li a,
.main-navigation ul.nav-menu li a {
  color: var(--at-charcoal) !important;
  font-family: var(--at-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 6px 0 !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.main-navigation ul.menu li a:hover,
.main-navigation ul.nav-menu li a:hover {
  color: var(--at-gold) !important;
  border-bottom-color: var(--at-gold) !important;
}

/* Only the exact Home link (no anchor hash) receives the active underline */
.main-navigation ul.menu li.current_page_item.menu-item-home > a:not([href*="#"]),
.main-navigation ul.nav-menu li.current_page_item.menu-item-home > a:not([href*="#"]) {
  color: var(--at-obsidian) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--at-gold) !important;
}

/* Anchor links explicitly clear the active bottom border */
.main-navigation ul.menu li a[href*="#"],
.main-navigation ul.nav-menu li a[href*="#"] {
  border-bottom-color: transparent !important;
  color: var(--at-charcoal) !important;
  font-weight: 600 !important;
}

.main-navigation ul.menu li a[href*="#"]:hover,
.main-navigation ul.nav-menu li a[href*="#"]:hover {
  color: var(--at-gold) !important;
  border-bottom-color: var(--at-gold) !important;
}



/* Redundant Cart & Checkout Suppression from Header Nav */
.main-navigation ul.menu li a[href*="cart"],
.main-navigation ul.menu li a[href*="checkout"],
.main-navigation ul.nav-menu li a[href*="cart"],
.main-navigation ul.nav-menu li a[href*="checkout"],
.main-navigation ul.menu li.menu-item-cart,
.main-navigation ul.menu li.menu-item-checkout,
.main-navigation ul.nav-menu li.menu-item-cart,
.main-navigation ul.nav-menu li.menu-item-checkout {
  display: none !important;
}


/* ==========================================================================
   4. The Atelier Flagship Studio Showcase (Inspired by Grown Brilliance Editorial)
   ========================================================================== */
.atelier-studio-showcase {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto 36px auto !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.atelier-studio-frame {
  position: relative !important;
  width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #12100e !important;
  border: 1px solid rgba(154, 103, 53, 0.28) !important;
  box-shadow: 0 20px 50px -15px rgba(24, 20, 15, 0.18), 0 0 0 1px rgba(238, 223, 203, 0.12) !important;
}

/* Dynamic Visual Stage */
.atelier-studio-visual {
  position: relative !important;
  width: 100% !important;
  height: 580px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #1a1612 !important;
}

.atelier-studio-visual picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.atelier-studio-dynamic-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  display: block !important;
  transform: scale(1.01) !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atelier-studio-frame:hover .atelier-studio-dynamic-img {
  transform: scale(1.03) !important;
}

/* Luxury Vignette & Ambient Light Gradient */
.atelier-studio-vignette {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(18, 14, 10, 0.02) 0%,
    rgba(18, 14, 10, 0.06) 48%,
    rgba(14, 11, 8, 0.62) 74%,
    rgba(10, 8, 6, 0.90) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Subtle Shimmer Light Sweep across the stage */
.atelier-studio-light-gleam {
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 245, 225, 0.08) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-25deg) !important;
  animation: studioGleamSweep 8s infinite ease-in-out !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

@keyframes studioGleamSweep {
  0% { left: -100%; }
  35% { left: 180%; }
  100% { left: 180%; }
}

/* Studio Typography & Actions Overlay */
.atelier-studio-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 32px 30px 32px !important;
  text-align: center !important;
  z-index: 4 !important;
  box-sizing: border-box !important;
}

.atelier-studio-eyebrow {
  display: inline-block !important;
  padding: 5px 16px !important;
  background: rgba(24, 20, 16, 0.6) !important;
  border: 1px solid rgba(238, 223, 203, 0.3) !important;
  color: #eedfcb !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  border-radius: 9999px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  margin-bottom: 12px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.atelier-studio-title {
  color: #ffffff !important;
  font-family: var(--at-font-serif) !important;
  font-size: 3.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.55), 0 0 40px rgba(154, 103, 53, 0.2) !important;
}

.atelier-studio-subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  max-width: 720px !important;
  margin: 0 auto 26px auto !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75) !important;
}

/* Actions: Grown Brilliance Style Semitransparent Ghost Button */
.atelier-studio-actions {
  display: inline-flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
}

.atelier-studio-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
  padding: 13px 36px !important;
  border-radius: 4px !important;
  font-family: var(--at-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  text-decoration: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atelier-studio-btn-primary:hover {
  background-color: #ffffff !important;
  color: #18181b !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35) !important;
}

.atelier-btn-sparkle {
  color: #eedfcb !important;
  transition: transform 0.25s ease !important;
}

.atelier-studio-btn-primary:hover .atelier-btn-sparkle {
  color: #18181b !important;
  transform: translateX(4px) !important;
}

.atelier-studio-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 13px 28px !important;
  border-radius: 4px !important;
  background-color: rgba(20, 16, 12, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: var(--at-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  text-decoration: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

.atelier-studio-btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Micro-Pills for the 3 Featured Products */
.atelier-studio-pills {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.atelier-studio-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(18, 14, 10, 0.65) !important;
  border: 1px solid rgba(238, 223, 203, 0.22) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.25s ease !important;
}

.atelier-studio-pill:hover {
  background: rgba(24, 18, 12, 0.9) !important;
  border-color: #eedfcb !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.studio-pill-indicator {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.indicator-silk {
  background: radial-gradient(circle, #fde047 0%, #c084fc 100%) !important;
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.6) !important;
}

.indicator-cf {
  background: #71717a !important;
  box-shadow: 0 0 6px rgba(161, 161, 170, 0.4) !important;
}

.indicator-marble {
  background: #f4f4f5 !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
}

.studio-pill-name {
  color: #f4f4f5 !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

.studio-pill-price {
  color: #eedfcb !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding-left: 8px !important;
}

/* Fallback .atelier-hero */
.atelier-hero {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%) !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 12px !important;
  padding: 80px 48px !important;
  text-align: center !important;
  margin-bottom: 36px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
}

/* ==========================================================================
   5. Four-Pillar Peace-of-Mind Trust Strip (The Quadruple Reassurance)
   ========================================================================== */
.atelier-trust-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 10px !important;
  padding: 24px 32px !important;
  margin-bottom: 48px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

@media (max-width: 1024px) {
  .atelier-trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  .atelier-trust-strip {
    grid-template-columns: 1fr !important;
  }
}

.atelier-trust-cell {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

.atelier-trust-num {
  font-family: var(--at-font-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--at-gold) !important;
  line-height: 1 !important;
}

.atelier-trust-cell div {
  display: flex !important;
  flex-direction: column !important;
}

.atelier-trust-cell strong {
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 3px !important;
}

.atelier-trust-cell span {
  color: var(--at-smoke) !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   6. Formulation Spectrum Matrix (Inspired by Diamond Shapes)
   ========================================================================== */
.atelier-spectrum-section {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 12px !important;
  padding: 48px 36px !important;
  margin-bottom: 48px !important;
  text-align: center !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important;
}

.atelier-section-header {
  margin-bottom: 36px !important;
  text-align: center !important;
}

.atelier-section-eyebrow {
  display: block !important;
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.atelier-section-title {
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-serif) !important;
  font-size: 2.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 12px 0 !important;
}

.atelier-section-desc {
  color: var(--at-smoke) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.9375rem !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.atelier-spectrum-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 14px !important;
}

@media (max-width: 1080px) {
  .atelier-spectrum-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .atelier-spectrum-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.atelier-spectrum-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 10px !important;
  background: var(--at-canvas) !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.atelier-spectrum-card:hover {
  background: #ffffff !important;
  border-color: var(--at-gold) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 20px rgba(154, 103, 53, 0.1) !important;
}

.spectrum-icon-box {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 12px !important;
  color: var(--at-charcoal) !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.atelier-spectrum-card:hover .spectrum-icon-box {
  color: var(--at-gold) !important;
  transform: scale(1.08) !important;
}

.spectrum-icon-box svg {
  width: 100% !important;
  height: 100% !important;
}

.spectrum-card-title {
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

.spectrum-card-meta {
  color: var(--at-smoke) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  text-align: center !important;
}

/* ==========================================================================
   7. Permanent Catalog Header
   ========================================================================== */
.atelier-catalog-header {
  margin: 48px 0 28px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  border-bottom: 1px solid var(--at-hairline) !important;
  padding-bottom: 16px !important;
}

.atelier-catalog-eyebrow {
  display: block !important;
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.atelier-catalog-title {
  margin: 0 !important;
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-serif) !important;
  font-size: 2.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

.atelier-catalog-link {
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.atelier-catalog-link:hover {
  color: var(--at-gold-hover) !important;
}

/* ==========================================================================
   8. 4:5 Luxury Atelier Product Cards
   ========================================================================== */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.site-main ul.products::before,
.site-main ul.products::after,
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
  grid-column: unset !important;
}

.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 0 3rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.yebai-industrial-card-li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.yebai-card-wrapper {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.yebai-card-wrapper:hover {
  transform: translateY(-4px) !important;
  border-color: var(--at-gold) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06), 0 0 16px rgba(154, 103, 53, 0.08) !important;
}

.yebai-card-media-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background: #fbfbf9 !important;
  overflow: hidden !important;
}

@supports not (aspect-ratio: 4 / 5) {
  .yebai-card-media-wrap {
    height: 0 !important;
    padding-top: 125% !important;
  }
}

.yebai-card-media-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.yebai-card-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.4s ease !important;
}

.yebai-card-wrapper:hover .yebai-card-img {
  transform: scale(1.04) !important;
}

.yebai-card-badge-strip {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 2 !important;
}

.yebai-card-tag {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--at-gold-border) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}

.yebai-card-quick-add {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  background: var(--at-obsidian) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.yebai-card-wrapper:hover .yebai-card-quick-add {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.yebai-card-quick-add:hover {
  background: var(--at-gold) !important;
  color: #ffffff !important;
  transform: translateY(-2px) scale(1.02) !important;
}

.yebai-card-info {
  padding: 14px 16px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

.yebai-card-sku {
  color: var(--at-smoke) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.yebai-card-title {
  margin: 0 0 6px 0 !important;
  font-family: var(--at-font-serif) !important;
  font-size: 1.1875rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  height: 2.5em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.yebai-card-title a {
  color: var(--at-obsidian) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.yebai-card-title a:hover {
  color: var(--at-gold) !important;
}

.yebai-card-desc {
  display: none !important;
}

.yebai-card-specs-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

.yebai-spec-pill {
  background: var(--at-canvas) !important;
  border: 1px solid var(--at-hairline) !important;
  color: var(--at-charcoal) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.yebai-spec-pill.yebai-spec-highlight {
  background: var(--at-gold-soft) !important;
  border-color: var(--at-gold-border) !important;
  color: var(--at-gold) !important;
  font-weight: 700 !important;
}

.yebai-card-footer {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--at-hairline-subtle) !important;
}

.yebai-card-price {
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.yebai-card-curr {
  font-size: 0.75rem !important;
  color: var(--at-smoke) !important;
  font-weight: 500 !important;
  margin-left: 2px !important;
}

/* ==========================================================================
   9. The 4Ps Educational Section (Like Grown Brilliance 4Cs)
   ========================================================================== */
.atelier-4ps-section {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 12px !important;
  padding: 56px 40px !important;
  margin: 56px 0 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02) !important;
}

.atelier-4ps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 960px) {
  .atelier-4ps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .atelier-4ps-grid {
    grid-template-columns: 1fr !important;
  }
}

.atelier-4p-card {
  padding: 24px !important;
  background: var(--at-canvas) !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.atelier-4p-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--at-gold-border) !important;
}

.atelier-4p-num {
  font-family: var(--at-font-serif) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--at-gold) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

.atelier-4p-title {
  margin: 0 0 8px 0 !important;
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.atelier-4p-text {
  color: var(--at-slate) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ==========================================================================
   9.1 Slicer Presets & Technical Metrology Hub
   ========================================================================== */
.atelier-slicer-bar {
  margin-top: 36px !important;
  padding: 28px 32px !important;
  background: var(--at-gold-soft) !important;
  border: 1px solid var(--at-gold-border) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.atelier-slicer-intro {
  flex: 1 1 360px !important;
}

.atelier-slicer-tag {
  display: inline-block !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--at-gold) !important;
  margin-bottom: 6px !important;
}

.atelier-slicer-title {
  font-family: var(--at-font-sans) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px 0 !important;
}

.atelier-slicer-desc {
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  color: var(--at-slate) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.atelier-slicer-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.atelier-slicer-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 9999px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--at-charcoal) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.atelier-slicer-btn:hover {
  border-color: var(--at-gold) !important;
  color: var(--at-gold-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(154, 103, 53, 0.1) !important;
}

.atelier-slicer-btn .slicer-icon {
  width: 14px !important;
  height: 14px !important;
  color: var(--at-gold) !important;
}

.atelier-slicer-btn-gold {
  background: var(--at-obsidian) !important;
  border-color: var(--at-obsidian) !important;
  color: #ffffff !important;
}

.atelier-slicer-btn-gold:hover {
  background: #27272a !important;
  border-color: #27272a !important;
  color: #ffffff !important;
}

.atelier-slicer-btn-gold .slicer-icon {
  color: #eedfcb !important;
}

/* ==========================================================================
   9.2 Industrial Print Farm & Peer Validation Section
   ========================================================================== */
.atelier-validation-section {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 12px !important;
  padding: 56px 40px !important;
  margin: 56px 0 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.02) !important;
}

.atelier-metrics-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 40px !important;
  padding-bottom: 36px !important;
  border-bottom: 1px solid var(--at-hairline-subtle) !important;
}

@media (max-width: 960px) {
  .atelier-metrics-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .atelier-metrics-strip {
    grid-template-columns: 1fr !important;
  }
}

.atelier-metric-tile {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
  background: var(--at-canvas) !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  text-align: center !important;
}

.atelier-metric-number {
  font-family: var(--at-font-serif) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.atelier-metric-label {
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--at-gold) !important;
  margin-bottom: 4px !important;
}

.atelier-metric-note {
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--at-smoke) !important;
  line-height: 1.35 !important;
}

.atelier-peer-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 36px !important;
}

@media (max-width: 960px) {
  .atelier-peer-grid {
    grid-template-columns: 1fr !important;
  }
}

.atelier-peer-card {
  padding: 28px !important;
  background: var(--at-canvas) !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.atelier-peer-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--at-gold-border) !important;
}

.atelier-peer-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--at-gold) !important;
  background: var(--at-gold-soft) !important;
  border: 1px solid var(--at-gold-border) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 16px !important;
}

.atelier-peer-quote {
  font-family: var(--at-font-serif) !important;
  font-size: 1.0625rem !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  color: var(--at-charcoal) !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
}

.atelier-peer-meta {
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid var(--at-hairline-subtle) !important;
  padding-top: 14px !important;
}

.atelier-peer-meta strong {
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
}

.atelier-peer-meta span {
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--at-smoke) !important;
  margin-top: 2px !important;
}

/* Digital Batch Twin Bar */
.atelier-batch-twin-bar {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px 24px !important;
  background: #fbfaf8 !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 8px !important;
  flex-wrap: wrap !important;
}

.batch-twin-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--at-gold) !important;
  flex-shrink: 0 !important;
}

.batch-twin-icon svg {
  width: 22px !important;
  height: 22px !important;
}

.batch-twin-info {
  flex: 1 1 300px !important;
  display: flex !important;
  flex-direction: column !important;
}

.batch-twin-info strong {
  font-family: var(--at-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: var(--at-obsidian) !important;
  margin-bottom: 2px !important;
}

.batch-twin-info span {
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--at-slate) !important;
  line-height: 1.4 !important;
}

.batch-twin-action {
  flex-shrink: 0 !important;
}

.batch-twin-tag {
  display: inline-block !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--at-obsidian) !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
}

/* ==========================================================================
   9.3 Toast Notification
   ========================================================================== */
.atelier-preset-toast {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 999999 !important;
  background: var(--at-obsidian) !important;
  color: #ffffff !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 9999px !important;
  padding: 12px 24px !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  opacity: 0 !important;
  transform: translateY(16px) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.atelier-preset-toast.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.atelier-preset-toast .toast-star {
  color: #eedfcb !important;
  font-size: 0.875rem !important;
}

/* ==========================================================================
   10. Category Filter Pill Bar (Shop & Category Archives)
   ========================================================================== */
.yebai-cat-pill-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  padding: 4px 0 12px 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.yebai-cat-pill-bar::-webkit-scrollbar {
  display: none !important;
}

.yebai-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  border-radius: 9999px !important;
  color: var(--at-slate) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.yebai-cat-pill:hover {
  background: #ffffff !important;
  border-color: var(--at-gold) !important;
  color: var(--at-gold) !important;
  transform: translateY(-1px) !important;
}

.yebai-cat-pill.is-active {
  background: var(--at-obsidian) !important;
  border-color: var(--at-obsidian) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.15) !important;
}

/* ==========================================================================
   11. Translation-Friendly Dropdown & Shop Controls
   ========================================================================== */
.woocommerce-result-count {
  color: var(--at-smoke) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}

.yebai-select-trigger {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.yebai-select-trigger:hover {
  border-color: var(--at-gold) !important;
}

.yebai-select-dropdown {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
}

.yebai-select-option {
  color: var(--at-slate) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
}

.yebai-select-option:hover {
  background: var(--at-gold-soft) !important;
  color: var(--at-gold) !important;
}

.yebai-select-option.is-selected {
  background: var(--at-gold-soft) !important;
  color: var(--at-gold) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   12. Stream Loading & Atelier Seal Badge
   ========================================================================== */
.yebai-load-more-btn {
  background: #ffffff !important;
  border: 1px solid var(--at-hairline) !important;
  color: var(--at-obsidian) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 13px 36px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

.yebai-load-more-btn:hover {
  background: var(--at-obsidian) !important;
  border-color: var(--at-obsidian) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.yebai-stream-dot {
  background: var(--at-gold) !important;
}

.yebai-stream-text {
  color: var(--at-smoke) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.06em !important;
}

.yebai-end-badge {
  background: #ffffff !important;
  border: 1px solid var(--at-gold-border) !important;
  color: var(--at-gold) !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 10px 28px !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(154, 103, 53, 0.08) !important;
}

/* ==========================================================================
   13. Footer Refinement
   ========================================================================== */
.site-footer {
  background-color: #ffffff !important;
  border-top: 1px solid var(--at-hairline) !important;
  color: var(--at-smoke) !important;
  padding: 3rem 0 !important;
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
}

.site-footer a {
  color: var(--at-slate) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.site-footer a:hover {
  color: var(--at-gold) !important;
}

/* ==========================================================================
   14. Mobile Responsive Polishing (< 640px)
   ========================================================================== */
@media (max-width: 640px) {
  .site-title {
    font-size: 1.375rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1.25 !important;
  }
  .site-title a {
    white-space: normal !important;
  }
  .site-header {
    padding: 1rem 0 0 0 !important;
  }
  .site-header > .col-full {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }
  .atelier-header-left {
    display: none !important;
  }
  .site-branding {
    grid-column: auto !important;
    grid-row: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .site-description {
    font-size: 0.5625rem !important;
    letter-spacing: 0.14em !important;
  }
  .atelier-header-actions {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .atelier-header-search .widget_product_search form input[type="search"] {
    width: 160px !important;
  }
  .atelier-header-search .widget_product_search form input[type="search"]:focus {
    width: 180px !important;
  }
  .storefront-primary-navigation {
    margin-top: 0.75rem !important;
    padding: 0.5rem 0 !important;
  }
  .storefront-primary-navigation > .col-full {
    display: flex !important;
    justify-content: center !important;
    padding: 0 16px !important;
  }
  button.menu-toggle {
    margin: 0 auto !important;
    float: none !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--at-hairline) !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    font-family: var(--at-font-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--at-obsidian) !important;
    padding: 6px 20px !important;
  }
  button.menu-toggle span {
    padding-left: 18px !important;
    margin: 0 !important;
  }


  .main-navigation ul.menu,
  .main-navigation ul.nav-menu {
    gap: 14px !important;
  }

  .site-content .col-full {
    padding: 0 16px !important;
  }
  .atelier-top-utility-bar {
    padding: 6px 0 !important;
    font-size: 0.5625rem !important;
    letter-spacing: 0.08em !important;
  }
  .atelier-utility-container {
    gap: 6px !important;
  }
  .atelier-hero {
    padding: 44px 18px !important;
  }
  .atelier-hero-title {
    font-size: 2.125rem !important;
  }
  .atelier-hero-subtitle {
    font-size: 0.9375rem !important;
    margin-bottom: 24px !important;
  }
  .atelier-trust-strip {
    padding: 18px 16px !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
  }
  .atelier-spectrum-section {
    padding: 32px 14px !important;
    margin-bottom: 32px !important;
  }
  .atelier-section-title {
    font-size: 1.625rem !important;
  }
  .atelier-4ps-section {
    padding: 32px 16px !important;
    margin: 32px 0 !important;
  }
  .yebai-card-info {
    padding: 10px 10px 12px 10px !important;
  }
  .yebai-card-title {
    font-size: 0.875rem !important;
    height: 2.4em !important;
  }
  .yebai-card-specs-row {
    display: none !important;
  }
  .yebai-card-price {
    font-size: 1rem !important;
  }
  .atelier-slicer-bar {
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .atelier-slicer-buttons {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .atelier-slicer-btn {
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .atelier-validation-section {
    padding: 32px 16px !important;
    margin: 32px 0 !important;
  }
  .atelier-metrics-strip {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    padding-bottom: 24px !important;
  }
  .atelier-peer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  .atelier-peer-card {
    padding: 20px 16px !important;
  }
  .atelier-batch-twin-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  .atelier-studio-showcase {
    margin-bottom: 24px !important;
  }
  .atelier-studio-visual {
    height: 520px !important;
  }
  .atelier-studio-dynamic-img {
    object-position: center 25% !important;
  }
  .atelier-studio-overlay {
    padding: 16px 14px 20px 14px !important;
  }
  .atelier-studio-eyebrow {
    font-size: 0.5625rem !important;
    letter-spacing: 0.16em !important;
    padding: 4px 12px !important;
    margin-bottom: 8px !important;
  }
  .atelier-studio-title {
    font-size: 1.875rem !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 6px !important;
  }
  .atelier-studio-subtitle {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }
  .atelier-studio-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .atelier-studio-btn-primary,
  .atelier-studio-btn-secondary {
    flex: 1 !important;
    justify-content: center !important;
    padding: 11px 12px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.12em !important;
    box-sizing: border-box !important;
  }
  .atelier-studio-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .atelier-studio-pill {
    flex-shrink: 0 !important;
    padding: 5px 10px !important;
    font-size: 0.6875rem !important;
  }
}

/* ==========================================================================
   Cyber Chamber & Telemetry Matrix Enhancements (D3Spool Precision Fusion)
   ========================================================================== */

/* 1. Cyber Telemetry Badge with Living Pulse */
.atelier-telemetry-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  margin-bottom: 12px !important;
}

.telemetry-ping-wrap {
  position: relative !important;
  display: inline-flex !important;
  width: 8px !important;
  height: 8px !important;
}

.telemetry-ping-pulse {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background-color: #c3f400 !important;
  opacity: 0.75 !important;
  animation: telemetry-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.telemetry-ping-dot {
  position: relative !important;
  display: inline-flex !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #c3f400 !important;
  box-shadow: 0 0 8px rgba(195, 244, 0, 0.9) !important;
}

@keyframes telemetry-ping {
  75%, 100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.telemetry-text {
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #f1f5f9 !important;
  text-transform: uppercase !important;
}

/* 2. Polymer Matrix Cards (Materials Guide) */
.atelier-matrix-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

.atelier-matrix-card {
  display: flex !important;
  flex-direction: column !important;
  background: #141b2b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

.atelier-matrix-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(195, 244, 0, 0.45) !important;
  box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(195, 244, 0, 0.2) !important;
}

.matrix-card-media {
  position: relative !important;
  width: 100% !important;
  height: 100px !important;
  overflow: hidden !important;
  background: #090d14 !important;
}

.matrix-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

.atelier-matrix-card:hover .matrix-card-media img {
  transform: scale(1.08) !important;
}

.matrix-badge-tag {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  background: rgba(10, 15, 26, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.matrix-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.matrix-code {
  font-family: monospace, var(--at-font-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.05em !important;
}

.matrix-card-info {
  padding: 12px 10px 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: #141b2b !important;
  flex-grow: 1 !important;
}

.matrix-name {
  font-family: var(--at-font-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  transition: color 0.2s ease !important;
}

.atelier-matrix-card:hover .matrix-name {
  color: #c3f400 !important;
}

.matrix-feat {
  font-family: var(--at-font-sans) !important;
  font-size: 0.6875rem !important;
  color: #94a3b8 !important;
  line-height: 1.3 !important;
}

/* Responsive adjustments */
@media screen and (max-width: 1024px) {
  .atelier-matrix-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media screen and (max-width: 640px) {
  .atelier-telemetry-badge {
    padding: 4px 10px !important;
    margin-bottom: 8px !important;
  }
  .telemetry-text {
    font-size: 0.5625rem !important;
    letter-spacing: 0.08em !important;
  }
  .atelier-matrix-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .matrix-card-media {
    height: 80px !important;
  }
  .matrix-card-info {
    padding: 10px 8px !important;
  }
  .matrix-name {
    font-size: 0.75rem !important;
  }
  .matrix-feat {
    font-size: 0.625rem !important;
  }
}