:root{--ml-cream:#fffdf9;--ml-sand:#f7f3ee;--ml-clay:#d78246;--ml-earth:#9a6335;--ml-stone:#2f2a25;--ml-light-clay:#eadfce;--ml-header-height:104px;--ml-header-height-scrolled:76px;}
.ast-site-header-cart,.site-header,#masthead,.ast-mobile-header-wrap,.ast-primary-header-bar,.ast-above-header-wrap,.ast-below-header-wrap{display:none!important}html{scroll-padding-top:var(--ml-header-height)}body.mysticlith-ui-framework{padding-top:var(--ml-header-height)!important;background:var(--ml-cream)}body.admin-bar .ml-custom-header{top:32px}.ml-custom-header{position:fixed;top:0;left:0;right:0;z-index:99999;background:rgba(255,253,249,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:0!important;box-shadow:0 4px 18px rgba(47,42,37,.045);transition:all .28s ease}.ml-custom-header.is-scrolled{background:rgba(255,253,249,.985);box-shadow:0 8px 26px rgba(47,42,37,.08)}.ml-header-inner{height:var(--ml-header-height);max-width:1320px;margin:0 auto;padding:0 34px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;transition:height .28s ease}.ml-custom-header.is-scrolled .ml-header-inner{height:var(--ml-header-height-scrolled)}.ml-main-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:30px}.ml-main-menu li{margin:0;padding:0}.ml-main-menu a{position:relative;display:inline-block;font-family:'Jost',system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ml-stone);line-height:1;padding:10px 0}.ml-main-menu a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,transparent,var(--ml-clay),transparent);transform:scaleX(0);transform-origin:center;transition:transform .25s ease}.ml-main-menu a:hover:after,.ml-main-menu .current-menu-item>a:after{transform:scaleX(1)}.ml-main-menu a:hover{color:var(--ml-earth)}.ml-header-logo{text-align:center;display:flex;justify-content:center;align-items:center}.ml-header-logo-link{display:inline-flex;align-items:center;justify-content:center}.ml-header-logo-img{display:block;max-height:86px;width:auto;object-fit:contain;transition:all .28s ease}.ml-custom-header.is-scrolled .ml-header-logo-img{max-height:60px}.ml-header-logo-text{font-family:'Cormorant Garamond',serif;color:var(--ml-earth);font-size:36px;line-height:1;text-decoration:none}.ml-header-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}.ml-header-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;text-decoration:none;color:var(--ml-stone);font-size:19px;transition:all .22s ease}.ml-header-icon:hover{background:var(--ml-sand);color:var(--ml-earth);transform:translateY(-1px)}.ml-account{font-size:22px}.ml-cart-symbol{font-size:17px;line-height:1}.ml-cart-count{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;border-radius:50%;background:var(--ml-earth);color:#fff;font-size:11px;line-height:18px;text-align:center;font-family:system-ui,sans-serif}
.home .entry-header,.home .page-title,.home .ast-archive-description{display:none!important}.home .site-content,.home .content-area,.home .ast-container,.home .entry-content{margin-top:0!important;padding-top:0!important}.home .entry-content>.wp-block-cover:first-child,.home .wp-block-post-content>.wp-block-cover:first-child{width:min(100%,1320px)!important;max-width:1320px!important;margin:20px auto 54px!important;min-height:clamp(420px,46vw,640px)!important;border-radius:16px;overflow:hidden;box-shadow:0 18px 45px rgba(47,42,37,.10);background:#fffdf9!important}.home .entry-content>.wp-block-cover:first-child img.wp-block-cover__image-background,.home .wp-block-post-content>.wp-block-cover:first-child img.wp-block-cover__image-background{object-fit:cover!important;object-position:center center!important;width:100%!important;height:100%!important}.home .entry-content>.wp-block-cover:first-child .wp-block-cover__background,.home .wp-block-post-content>.wp-block-cover:first-child .wp-block-cover__background{opacity:0!important}.home .entry-content>figure.wp-block-image:first-child,.home .wp-block-post-content>figure.wp-block-image:first-child{max-width:1320px!important;margin:20px auto 54px!important;border-radius:16px;overflow:hidden;box-shadow:0 18px 45px rgba(47,42,37,.10)}.home .entry-content>figure.wp-block-image:first-child img,.home .wp-block-post-content>figure.wp-block-image:first-child img{width:100%!important;height:auto!important;display:block}.home .entry-content>*:first-child{margin-top:0!important}.home .entry-content{padding-top:0!important}
.ml-home-section{max-width:1320px;margin:0 auto 64px;padding:0 34px;box-sizing:border-box}.ml-section-heading{text-align:center;margin:10px auto 28px}.ml-eyebrow{display:flex;align-items:center;justify-content:center;gap:18px;text-transform:uppercase;letter-spacing:.28em;color:var(--ml-clay);font:700 12px/1 'Jost',system-ui,sans-serif;margin-bottom:10px}.ml-eyebrow span{display:inline-block;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--ml-clay))}.ml-eyebrow span:last-child{background:linear-gradient(90deg,var(--ml-clay),transparent)}.ml-section-heading h2,.ml-difference-section h2{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--ml-stone);font-size:clamp(36px,4vw,58px);line-height:1.05;margin:0}.ml-section-subtitle{text-align:center;margin:-16px auto 34px;color:#5a5048;font-size:17px}.ml-carousel-wrap{position:relative;overflow:visible}.ml-carousel-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 4px 18px}.ml-carousel-track::-webkit-scrollbar{display:none}.ml-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(154,99,53,.28);background:#fff;color:#2f2a25;box-shadow:0 10px 24px rgba(47,42,37,.10);font-size:30px;line-height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.ml-carousel-arrow:hover{transform:translateY(-50%) scale(1.05);box-shadow:0 12px 28px rgba(47,42,37,.14);color:var(--ml-earth)}.ml-prev{left:-68px}.ml-next{right:-68px}
.ml-category-section{margin-bottom:72px}.ml-category-track{justify-content:flex-start}.ml-category-card{flex:0 0 calc((100% - 112px)/5);scroll-snap-align:start;text-align:center;text-decoration:none;color:var(--ml-stone);display:block}.ml-category-img{width:190px;max-width:100%;aspect-ratio:1/1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;padding:9px;background:#fff;border:1px solid rgba(199,133,80,.42);box-shadow:0 14px 30px rgba(47,42,37,.08);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}.ml-category-img img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}.ml-category-card:hover .ml-category-img{transform:translateY(-5px) scale(1.035);border-color:var(--ml-clay);box-shadow:0 18px 42px rgba(199,133,80,.18)}.ml-category-title{display:block;font-family:'Cormorant Garamond',serif;font-size:27px;line-height:1.1;color:var(--ml-stone);margin-bottom:8px}.ml-category-explore{display:block;font:700 11px/1 'Jost',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--ml-clay)}
.ml-products-section{padding:42px 34px 38px;border-radius:22px;background:linear-gradient(180deg,rgba(247,243,238,.66),rgba(255,253,249,.96));box-shadow:inset 0 0 0 1px rgba(234,223,206,.38);max-width:1320px}.ml-product-track{align-items:stretch}.ml-product-card{flex:0 0 calc((100% - 112px)/5);scroll-snap-align:start;background:#fff;border:1px solid rgba(47,42,37,.08);border-radius:12px;overflow:hidden;box-shadow:0 12px 28px rgba(47,42,37,.08);display:flex;flex-direction:column;min-height:438px;transition:transform .3s ease,box-shadow .3s ease}.ml-product-card:hover{transform:translateY(-7px);box-shadow:0 18px 42px rgba(47,42,37,.14)}.ml-product-image{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ml-sand)}.ml-product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.ml-product-card:hover .ml-product-image img{transform:scale(1.045)}.ml-product-body{padding:20px 18px 18px;display:flex;flex-direction:column;flex:1;text-align:center}.ml-product-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px!important;line-height:1.15!important;color:var(--ml-stone);margin:0 0 14px!important;min-height:56px;display:flex;align-items:center;justify-content:center}.ml-product-title a{color:inherit!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ml-product-price{font:800 18px/1.1 'Jost',system-ui,sans-serif;color:#111;margin-top:auto;margin-bottom:20px;min-height:22px}.ml-product-price del,.ml-product-price ins{display:inline-block}.ml-product-button{display:flex!important;align-items:center;justify-content:center;height:46px;border-radius:8px;background:var(--ml-clay);color:#fff!important;text-decoration:none!important;font:800 13px/1 'Jost',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;transition:background .2s ease,transform .2s ease}.ml-product-button:hover{background:#c97539;transform:translateY(-1px)}
.ml-difference-section{padding:46px 34px 42px;border:1px solid rgba(234,223,206,.75);border-radius:20px;background:rgba(255,253,249,.9);box-shadow:0 12px 30px rgba(47,42,37,.045);text-align:center}.ml-difference-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:34px}.ml-difference-item{padding:0 24px;border-right:1px solid rgba(154,99,53,.16)}.ml-difference-item:last-child{border-right:0}.ml-difference-icon{width:70px;height:70px;border-radius:50%;background:#fff;box-shadow:0 10px 24px rgba(47,42,37,.07);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--ml-earth);font-size:30px}.ml-difference-item h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:24px;line-height:1.1;margin:0 0 10px;color:var(--ml-stone)}.ml-difference-item p{font-size:14px;line-height:1.5;margin:0;color:#5a5048}
.ml-story-section{margin-top:72px}.ml-story-card{border:1px solid rgba(234,223,206,.85);border-radius:20px;background:rgba(255,253,249,.94);box-shadow:0 14px 34px rgba(47,42,37,.055);padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}.ml-story-image{background:var(--ml-sand);border-radius:16px;min-height:360px;overflow:hidden;box-shadow:0 12px 26px rgba(47,42,37,.06)}.ml-story-image img{width:100%;height:100%;min-height:360px;object-fit:cover;display:block}.ml-story-content p{font-size:17px;line-height:1.75;color:#2f2a25;margin:0 0 22px}.ml-story-content p:last-child{margin-bottom:0}
@media (max-width:1450px){.ml-prev{left:-40px}.ml-next{right:-40px}}
@media (max-width:1100px){.ml-category-card,.ml-product-card{flex-basis:calc((100% - 56px)/3)}.ml-difference-grid{grid-template-columns:repeat(2,1fr);row-gap:30px}.ml-difference-item{border-right:0}.ml-story-card{grid-template-columns:1fr;gap:30px}}
@media (max-width:921px){:root{--ml-header-height:92px;--ml-header-height-scrolled:74px}.ml-header-inner{padding:0 18px;grid-template-columns:1fr auto 1fr;gap:12px}.ml-main-menu{gap:14px}.ml-main-menu a{font-size:10px;letter-spacing:.09em}.ml-header-logo-img{max-height:64px}.ml-custom-header.is-scrolled .ml-header-logo-img{max-height:52px}.ml-header-actions{gap:8px}.ml-header-icon{width:30px;height:30px;font-size:16px}.home .entry-content>.wp-block-cover:first-child,.home .wp-block-post-content>.wp-block-cover:first-child{width:calc(100% - 24px)!important;min-height:clamp(290px,58vw,430px)!important;margin-bottom:38px!important;border-radius:10px}.ml-home-section,.ml-products-section{padding-left:18px;padding-right:18px}.ml-prev{left:2px}.ml-next{right:2px}.ml-carousel-arrow{width:38px;height:38px;font-size:26px}.ml-category-card,.ml-product-card{flex-basis:calc((100% - 28px)/2)}.ml-product-card{min-height:410px}.ml-story-card{padding:28px}.ml-section-heading h2,.ml-difference-section h2{font-size:38px}}
@media (max-width:640px){:root{--ml-header-height:118px;--ml-header-height-scrolled:96px}.ml-header-inner{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:var(--ml-header-height);padding:10px 14px;gap:5px}.ml-custom-header.is-scrolled .ml-header-inner{height:var(--ml-header-height-scrolled)}.ml-header-logo{order:1}.ml-header-nav{order:2}.ml-header-actions{order:3;justify-content:center}.ml-main-menu{justify-content:center;gap:20px}.ml-header-logo-img{max-height:48px}.ml-custom-header.is-scrolled .ml-header-logo-img{max-height:40px}.home .entry-content>.wp-block-cover:first-child,.home .wp-block-post-content>.wp-block-cover:first-child{min-height:280px!important}.ml-category-card,.ml-product-card{flex-basis:82%}.ml-difference-grid{grid-template-columns:1fr}.ml-story-card{padding:20px}.ml-story-image,.ml-story-image img{min-height:260px}.ml-section-subtitle{font-size:14px}.ml-product-title{font-size:22px!important}}


/* v4.1 final polish: product titles + carousel arrows */
.ml-product-card{
  min-height: 458px !important;
}
.ml-product-body{
  display:flex !important;
  flex-direction:column !important;
  min-height:250px !important;
}
.ml-product-title{
  min-height:86px !important;
  height:86px !important;
  margin:0 0 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}
.ml-product-title a{
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  text-overflow:clip !important;
  max-height:none !important;
  font-size:22px !important;
  line-height:1.15 !important;
  word-break:normal !important;
  hyphens:none !important;
}
.ml-product-price{
  margin-top:auto !important;
  margin-bottom:22px !important;
  min-height:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.ml-product-button{
  margin-top:0 !important;
  flex:0 0 auto !important;
}
button.ml-carousel-arrow,
.ml-carousel-arrow{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:999px !important;
  background:#fffdf9 !important;
  color:#2f2a25 !important;
  border:1px solid rgba(47,42,37,.18) !important;
  box-shadow:0 10px 24px rgba(47,42,37,.12) !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:400 !important;
}
button.ml-carousel-arrow:hover,
.ml-carousel-arrow:hover{
  background:#ffffff !important;
  color:#111111 !important;
  border-color:rgba(47,42,37,.28) !important;
  box-shadow:0 14px 30px rgba(47,42,37,.16) !important;
}
.ml-prev{ left:-76px !important; }
.ml-next{ right:-76px !important; }
@media (max-width:1450px){
  .ml-prev{ left:-54px !important; }
  .ml-next{ right:-54px !important; }
}
@media (max-width:921px){
  .ml-prev{ left:-8px !important; }
  .ml-next{ right:-8px !important; }
  .ml-product-title{ height:82px !important; min-height:82px !important; }
  .ml-product-title a{ font-size:21px !important; }
}
@media (max-width:640px){
  .ml-product-card{ min-height:430px !important; }
  .ml-product-body{ min-height:235px !important; }
  .ml-product-title{ height:78px !important; min-height:78px !important; }
  .ml-product-title a{ font-size:20px !important; }
}


/* v4.2 final home polish: shorter product cards + perfectly round white carousel arrows */
.ml-product-card{
  min-height:412px !important;
}
.ml-product-body{
  min-height:206px !important;
  padding-top:16px !important;
  padding-bottom:16px !important;
}
.ml-product-title{
  min-height:70px !important;
  height:70px !important;
  margin-bottom:8px !important;
}
.ml-product-title a{
  font-size:21px !important;
  line-height:1.12 !important;
}
.ml-product-price{
  margin-bottom:16px !important;
}
.ml-product-button{
  height:44px !important;
}
button.ml-carousel-arrow,
.ml-carousel-arrow{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:#222222 !important;
  border:1px solid rgba(47,42,37,.16) !important;
  box-shadow:0 10px 24px rgba(47,42,37,.11) !important;
  font-size:30px !important;
  line-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
button.ml-carousel-arrow:hover,
.ml-carousel-arrow:hover{
  background:#ffffff !important;
  color:#9a6335 !important;
  border-color:rgba(154,99,53,.30) !important;
}
@media (max-width:921px){
  .ml-product-card{ min-height:398px !important; }
  .ml-product-body{ min-height:198px !important; }
  .ml-product-title{ height:68px !important; min-height:68px !important; }
  .ml-product-title a{ font-size:20px !important; }
  button.ml-carousel-arrow,.ml-carousel-arrow{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; max-width:44px !important; max-height:44px !important; line-height:44px !important; }
}
@media (max-width:640px){
  .ml-product-card{ min-height:400px !important; }
  .ml-product-body{ min-height:198px !important; }
  .ml-product-title{ height:66px !important; min-height:66px !important; }
}


/* v4.3 final card proportions: ONLY product card height/vertical rhythm */
.ml-product-card{
  min-height: 368px !important;
}
.ml-product-body{
  min-height: 166px !important;
  padding: 14px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
}
.ml-product-title{
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ml-product-title a{
  font-size: 20px !important;
  line-height: 1.12 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
}
.ml-product-price{
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  min-height: 22px !important;
}
.ml-product-button{
  height: 42px !important;
}
@media (max-width:921px){
  .ml-product-card{ min-height: 358px !important; }
  .ml-product-body{ min-height: 160px !important; }
  .ml-product-title{ height: 72px !important; min-height: 72px !important; }
  .ml-product-title a{ font-size: 19px !important; }
}
@media (max-width:640px){
  .ml-product-card{ min-height: 370px !important; }
  .ml-product-body{ min-height: 170px !important; }
}


/* v5.0 Product Page Experience */
.single-product.mysticlith-ui-framework .site-content,
.single-product.mysticlith-ui-framework .content-area,
.single-product.mysticlith-ui-framework .ast-container{
  background:linear-gradient(180deg,#fffdf9 0%,#faf6ef 100%) !important;
}
/* v5.7: Layout Polish Phase - equal-height outer cards only. Stretching
   this outer grid item is the ONLY change here - the gallery's own
   internals (.woocommerce-product-gallery__wrapper, .flex-viewport,
   .flex-control-thumbs, the image) are completely untouched below,
   exactly as locked. Any extra stretched height inside the gallery card
   is left as-is (not centered, not filled, not redistributed) - the
   card's white background simply extends to match the summary card's
   height, with the gallery's own content sitting at its natural
   position. This does not touch FlexSlider's own measured elements at
   all, unlike every earlier equal-height attempt this session. */
/* v5.8: the REAL source of "gap above Description" and "gap above
   Related Products" was never just .woocommerce-tabs/.related.products'
   own margin-top - both elements are direct children of THIS grid
   container (confirmed from WooCommerce's real template: they render
   inside div.product, using grid-column:1/-1 to span full width as
   their own rows), so the grid's own gap:58px ALSO applies as row-gap
   between every row transition (gallery/summary row -> tabs row ->
   related-products row), completely independent of any margin. That's
   why 50px->34px on the margin barely moved the visible total: 58
   (untouched row-gap) + 34 (reduced margin) = 92px, only a 15%
   reduction from the true 108px baseline (58+50), not the 25-35% asked
   for. Splitting gap into column-gap (unchanged, horizontal spacing
   between gallery/summary - not part of this request) and a reduced
   row-gap consolidates ALL vertical row-to-row spacing into one clear,
   directly-editable property - margin-top on .woocommerce-tabs/
   .related.products is set to 0 below, so row-gap alone is now
   unambiguously the one selector controlling this spacing. */
.single-product.mysticlith-ui-framework div.product{
  max-width:1320px !important;
  margin:42px auto 0 !important;
  padding:0 34px !important;
  display:grid !important;
  grid-template-columns:minmax(420px, 1fr) minmax(420px, 520px) !important;
  column-gap:58px !important;
  row-gap:44px !important; /* v5.9: was 72px, per confirmed-source (grid row-gap) reduction */
  align-items:stretch !important;
}
.single-product.mysticlith-ui-framework div.product .woocommerce-product-gallery{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 22px 55px rgba(47,42,37,.10) !important;
}
.single-product.mysticlith-ui-framework .woocommerce-product-gallery__wrapper,
.single-product.mysticlith-ui-framework .woocommerce-product-gallery__image{
  margin:0 !important;
}
.single-product.mysticlith-ui-framework .woocommerce-product-gallery__image img,
.single-product.mysticlith-ui-framework div.product div.images img{
  width:100% !important;
  display:block !important;
  object-fit:cover !important;
}
.single-product.mysticlith-ui-framework div.product .summary{
  float:none !important;
  width:100% !important;
  margin:0 !important;
  padding:42px 44px !important;
  border-radius:22px !important;
  background:rgba(255,253,249,.86) !important;
  border:1px solid rgba(234,223,206,.85) !important;
  box-shadow:0 20px 50px rgba(47,42,37,.07) !important;
}
.single-product.mysticlith-ui-framework .woocommerce-breadcrumb{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  letter-spacing:.05em !important;
  color:#9a6335 !important;
  margin-bottom:18px !important;
}
.single-product.mysticlith-ui-framework div.product .product_title{
  font-family:'Cormorant Garamond',serif !important;
  font-size:clamp(42px,4vw,64px) !important;
  line-height:.96 !important;
  font-weight:400 !important;
  color:#2f2a25 !important;
  margin:0 0 18px !important;
  /* v0.54 originally a 2-line safety net (simple + variable alike) -
     approved typography above is unchanged. Raised 2->3 lines (matching
     the existing <=640px mobile value below) after live investigation
     confirmed this rule's own founding assumption never held: the
     import-time concise-title generator this comment originally cited
     was preview-only, never auto-applied, for every CJ-imported product
     this whole project - so this "safety net" was firing as the primary
     truncation path on real product pages, not a rare edge case, and
     doing so with NO visible ellipsis at this font size (confirmed live:
     a raw ~110-character title hard-cut mid-word with no "..." at all).
     text-overflow:ellipsis added so anything still long enough to clip
     at 3 lines shows a real ellipsis instead of a silent cut - matches
     the mobile rule below, which was already confirmed (by injection
     testing) to render one correctly at its own line-clamp:3. */
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.single-product.mysticlith-ui-framework div.product p.price,
.single-product.mysticlith-ui-framework div.product span.price{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:30px !important;
  line-height:1 !important;
  color:#9a6335 !important;
  font-weight:700 !important;
  margin:0 0 18px !important;
}
.single-product.mysticlith-ui-framework div.product .woocommerce-product-details__short-description{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:16px !important;
  line-height:1.75 !important;
  color:#3f352d !important;
  margin:22px 0 28px !important;
}
.single-product.mysticlith-ui-framework div.product form.cart{
  display:flex !important;
  gap:14px !important;
  align-items:stretch !important;
  margin:0 0 24px !important;
  padding:0 0 24px !important;
  border-bottom:1px solid rgba(234,223,206,.9) !important;
}
.single-product.mysticlith-ui-framework div.product form.cart .quantity{
  margin:0 !important;
}
.single-product.mysticlith-ui-framework div.product form.cart .qty{
  width:74px !important;
  height:52px !important;
  border-radius:12px !important;
  border:1px solid rgba(154,99,53,.25) !important;
  background:#fffdf9 !important;
  font-size:16px !important;
}
.single-product.mysticlith-ui-framework div.product form.cart .single_add_to_cart_button{
  flex:1 !important;
  height:52px !important;
  border-radius:999px !important;
  background:#d87d43 !important;
  color:#fff !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:0 12px 26px rgba(216,125,67,.20) !important;
  transition:all .25s ease !important;
}
.single-product.mysticlith-ui-framework div.product form.cart .single_add_to_cart_button:hover{
  background:#b96835 !important;
  transform:translateY(-2px) !important;
}

/* Variable-product Add to Cart layout (v0.53 → v0.54 → v0.56 → v0.57).
   Scoped to .product-type-variable only - never touches
   .product-type-simple's form.cart above.

   v0.57 root cause of the v9.5 (v0.56) bug: form.cart used Flexbox with
   table.variations{flex:1 1 240px; min-width:0}. Reported live symptom
   was very specific - Stone selector and Quantity shared row 1
   correctly, but Add to Cart alone wrapped to row 2. That precise
   fingerprint (only the LAST item overflows, everything before it is
   correctly grouped and ordered) is the signature of a <table> element
   not honoring flex-shrink/min-width:0 as reliably as an ordinary block
   element - <table> keeps its own internal table-layout sizing algorithm
   even with its outer display overridden, so its rendered width can
   exceed its flex-basis under flex's shrink math, leaving no row space
   for the next item. This is a documented flexbox/table interop gap,
   not evidence that display:contents itself failed: the selector and
   quantity being correctly grouped and ordered on the same row is
   itself proof the two display:contents unwraps below (needed because
   WooCommerce nests Quantity/Add to Cart/Wishlist two DOM levels deeper
   than the sibling <table>, an unavoidable structural fact, not a
   choice) placed every element correctly - only the wrap boundary was
   wrong, which is a sizing issue.
   Fix: CSS Grid instead of Flexbox. grid-template-columns:
   minmax(0,1fr) auto auto explicitly caps the selector column's
   MINIMUM size at 0 regardless of the <table>'s own content-driven
   sizing preference - Grid's minmax() overrides an item's automatic
   content-based minimum outright, which is why this is the standard,
   documented fix for exactly this class of "won't shrink" bug and is
   more reliable here than flexbox's min-width:0 ever was. Placement is
   named via grid-template-areas (price / selector-qty-cart / wishlist)
   for explicit, self-documenting placement rather than order+flex-basis
   juggling. */
.single-product.mysticlith-ui-framework div.product.product-type-variable form.cart{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  grid-template-areas:
    "price price price"
    "selector qty cart"
    "wishlist wishlist wishlist" !important;
  column-gap:14px !important;
  row-gap:14px !important;
  align-items:center !important;
  /* v0.58: the approved simple-product form.cart rule further up this
     file (unscoped .product form.cart, untouched) carries border-bottom
     :1px solid rgba(234,223,206,.9) as a separator before .product_meta.
     That rule still matches variable products too since nothing here
     had reset it - defensive reset, not the primary fix (see
     table.variations below), kept in case it's a contributing source. */
  border-bottom:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation{
  grid-area:price !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation .woocommerce-variation-price{
  margin:0 0 4px !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation .woocommerce-variation-price .price{
  margin:0 !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation .woocommerce-variation-availability{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:13px !important;
  color:#6f6258 !important;
  margin:0 !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations{
  grid-area:selector !important;
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  border:none !important;
  border-collapse:collapse !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations tbody,
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations tr{
  display:block !important;
  width:100% !important;
  border:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations th.label{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#6f6258 !important;
  padding:0 0 8px !important;
  border:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations td.value{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  border:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations select{
  display:block !important;
  width:100% !important;
  height:52px !important;
  border-radius:12px !important;
  border:1px solid rgba(154,99,53,.25) !important;
  background:#fffdf9 !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:15px !important;
  color:#3f352d !important;
  padding:0 16px !important;
  /* Long option names (e.g. "Blue Grain Stone") must fit, not overflow
     or break the row - the selector takes all remaining row width; this
     is a safety net for a narrower viewport or an even longer name. */
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable table.variations td.value .reset_variations{
  display:inline-block !important;
  margin-top:8px !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  color:#9a6335 !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .single_variation_wrap,
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart{
  /* Unwrap both levels so .quantity / .single_add_to_cart_button / the
     Wishlist block become direct grid items of form.cart, placeable
     into the named areas above. Structurally necessary given
     WooCommerce's real DOM nesting - see the block comment above for
     why this is not believed to be the v9.5 bug's root cause. */
  display:contents !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .quantity{
  grid-area:qty !important;
  margin:0 !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .qty{
  width:74px !important;
  height:52px !important;
  border-radius:12px !important;
  border:1px solid rgba(154,99,53,.25) !important;
  background:#fffdf9 !important;
  font-size:16px !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  grid-area:cart !important;
  height:52px !important;
  padding:0 30px !important;
  border-radius:999px !important;
  background:#d87d43 !important;
  color:#fff !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  box-shadow:0 12px 26px rgba(216,125,67,.20) !important;
  transition:all .25s ease !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover{
  background:#b96835 !important;
  transform:translateY(-2px) !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinv-wishlist-clear,
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinvwl-tooltip{
  display:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinv-wraper.tinv-wishlist{
  grid-area:wishlist !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  margin-top:10px !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinv-wraper.tinv-wishlist::before,
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinv-wraper.tinv-wishlist::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,var(--ml-clay)) !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinv-wraper.tinv-wishlist::after{
  background:linear-gradient(90deg,var(--ml-clay),transparent) !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:#9a6335 !important;
  text-decoration:none !important;
}
.single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .tinvwl_add_to_wishlist_button:hover{
  color:#b96835 !important;
}

.single-product.mysticlith-ui-framework .product_meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  color:#6f6258 !important;
  border:0 !important;
  padding:0 !important;
}
/* SKU stays in WooCommerce (DB/admin/orders/API/inventory unaffected) -
   this only hides its customer-facing display on the single product page. */
.single-product.mysticlith-ui-framework .product_meta .sku_wrapper{
  display:none !important;
}
.single-product.mysticlith-ui-framework .product_meta .posted_in a{
  display:inline-flex !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:#f7f1e9 !important;
  color:#9a6335 !important;
  text-decoration:none !important;
  font-weight:700 !important;
}
.single-product.mysticlith-ui-framework .ml-product-trust-badges{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  margin:26px 0 6px !important;
}
.single-product.mysticlith-ui-framework .ml-product-trust-badges div{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  background:#fff !important;
  border:1px solid rgba(234,223,206,.85) !important;
  color:#4f3d31 !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
}
.single-product.mysticlith-ui-framework .ml-product-trust-badges span{
  color:#c78550 !important;
  font-size:18px !important;
}
/* v5.8: margin-top removed entirely (was 34px) - row-gap on the grid
   above is now the sole source of vertical spacing here, so there's no
   second, overlapping property left to cause confusion about which one
   is "winning". Internal card padding (34px 38px, the whitespace INSIDE
   each card) is untouched - only the gap BETWEEN cards changed. */
.single-product.mysticlith-ui-framework .woocommerce-tabs,
.single-product.mysticlith-ui-framework .related.products{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:1320px !important;
  margin:0 !important;
  background:rgba(255,253,249,.82) !important;
  border:1px solid rgba(234,223,206,.85) !important;
  border-radius:22px !important;
  padding:34px 38px !important;
  box-shadow:0 16px 42px rgba(47,42,37,.05) !important;
}
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs{
  border-bottom:1px solid rgba(234,223,206,.95) !important;
  padding:0 !important;
  margin:0 0 28px !important;
  display:flex !important;
  gap:28px !important;
}
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs:before,
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs li:before,
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs li:after{
  display:none !important;
}
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs li{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
}
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs li a{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#6f6258 !important;
  padding:0 0 12px !important;
  text-decoration:none !important;
}
.single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs li.active a{
  color:#9a6335 !important;
  border-bottom:2px solid #c78550 !important;
}
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel h2,
.single-product.mysticlith-ui-framework .related.products > h2{
  font-family:'Cormorant Garamond',serif !important;
  font-size:38px !important;
  font-weight:400 !important;
  color:#2f2a25 !important;
  margin:0 0 22px !important;
}
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel,
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel p,
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel li{
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:15px !important;
  line-height:1.8 !important;
  color:#3f352d !important;
}
/* v9.2: canonical spec list separator. Root cause confirmed in
   commerceai/planner/product_content_writer.py's _details_html(): the
   generated markup is
   <span class="ml-spec-label">Stone</span><span class="ml-spec-value">
   Tiger's Eye</span> with no separator character between the two spans
   at all - not a spacing/CSS problem, a missing character. No rule for
   .ml-spec-list/.ml-spec-row/.ml-spec-label/.ml-spec-value existed
   anywhere in this file before this change (confirmed by search), so
   the two spans rendered flush against each other ("StoneTiger's Eye").
   Fixed at the CSS layer specifically (not the Python generator) so it
   applies retroactively to descriptions already written to the live
   store, not just future ones. Only a content string is added - no
   typography, color or spacing property is touched. */
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel .ml-spec-label:after{
  content:": ";
}
/* v9.3: description section-heading icons. Minimal, scoped to the two new
   classes only - no gallery/spacing/card/typography rule touched. The
   icon is a plain emoji character (no icon font, no external asset, no
   image), aria-hidden in the markup, sized slightly below body text and
   vertically centered against the heading via flex so it never looks
   baseline-misaligned regardless of the emoji glyph's own metrics.
   v9.4: visual refinement only - same markup, same emoji, same section
   logic. Reuses 'Cormorant Garamond' (already loaded for the Description/
   Related Products h2 elsewhere in this file) rather than introducing a
   new font family/import, since the brief asked to match the site's
   existing serif, not add a new one. .ml-spec-list's top margin is
   zeroed so the heading's own margin-bottom is the only thing controlling
   the gap to the bullet list below it (list's own bottom margin is left
   alone and collapses normally against the next heading's top margin). */
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel .ml-description-section-title{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:32px 0 10px !important;
}
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel .ml-description-section-icon{
  display:inline-flex !important;
  font-size:26px !important;
  line-height:1 !important;
  opacity:1 !important;
}
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel .ml-description-section-title strong{
  font-family:'Cormorant Garamond',serif !important;
  font-size:24px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  color:#2f2a25 !important;
}
.single-product.mysticlith-ui-framework .woocommerce-Tabs-panel .ml-spec-list{
  margin-top:0 !important;
}
.single-product.mysticlith-ui-framework .related.products ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:24px !important;
}
/* v5.9: title/price/button vertical alignment - corrected. This is NOT
   stock WooCommerce markup: Astra's own product-card template wraps
   li.product's real content in two direct children,
   .astra-shop-thumbnail-wrap (image + an on-card quick-add overlay) and
   .astra-shop-summary-wrap (category, title, price, and the real Add to
   Cart button). Confirmed from the actual live HTML. The previous
   version flexed .woocommerce-loop-product__link, which only wraps the
   image in this template - price and the button live in
   .astra-shop-summary-wrap, so margin-top:auto/align-self:center on
   them were silently inert (auto-margins only work when the DIRECT
   parent is flex/grid). Flexing the correct wrapper below fixes that.
   Grid items already stretch to match the tallest card in a row by
   default, so flex-column + margin-top:auto reuses that height to
   anchor price+button at the same bottom position on every card,
   regardless of title line count. No typography touched. */
.single-product.mysticlith-ui-framework .related.products ul.products li.product{
  width:auto !important;
  background:#fff !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 12px 30px rgba(47,42,37,.07) !important;
  padding-bottom:16px !important;
  display:flex !important;
  flex-direction:column !important;
}
.single-product.mysticlith-ui-framework .related.products ul.products li.product .astra-shop-summary-wrap{
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
}
.single-product.mysticlith-ui-framework .related.products ul.products li.product img{
  border-radius:0 !important;
  aspect-ratio:4/3 !important;
  object-fit:cover !important;
}
.single-product.mysticlith-ui-framework .related.products ul.products li.product .price{
  display:block !important;
  text-align:center !important;
  margin-top:auto !important;
}
.single-product.mysticlith-ui-framework .related.products ul.products li.product .button{
  border-radius:999px !important;
  background:#d87d43 !important;
  color:#fff !important;
  padding:12px 20px !important;
  align-self:center !important;
  margin:12px auto 0 !important;
}
@media (max-width: 921px){
  .single-product.mysticlith-ui-framework div.product{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:0 18px !important;
  }
  .single-product.mysticlith-ui-framework div.product .summary{ padding:30px 24px !important; }
  .single-product.mysticlith-ui-framework .related.products ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .single-product.mysticlith-ui-framework div.product .product_title{ font-size:38px !important; }
  .single-product.mysticlith-ui-framework div.product form.cart{ flex-direction:column !important; }
  .single-product.mysticlith-ui-framework div.product form.cart .qty{ width:100% !important; }
  /* Mobile grid: same named-area technique as desktop, re-defined with
     2 columns instead of 3 - Stone selector spans both on its own row,
     Quantity + Add to Cart share the row below it, Wishlist spans both
     on the final row. */
  .single-product.mysticlith-ui-framework div.product.product-type-variable form.cart{
    grid-template-columns:auto auto !important;
    grid-template-areas:
      "price price"
      "selector selector"
      "qty cart"
      "wishlist wishlist" !important;
  }
  .single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .qty{ width:74px !important; }
  .single-product.mysticlith-ui-framework div.product.product-type-variable .woocommerce-variation-add-to-cart .single_add_to_cart_button{ padding:0 20px !important; }
  .single-product.mysticlith-ui-framework .ml-product-trust-badges{ grid-template-columns:1fr !important; }
  .single-product.mysticlith-ui-framework .woocommerce-tabs,
  .single-product.mysticlith-ui-framework .related.products{ padding:26px 20px !important; }
}

/* MysticLith Shop Safe Experience v8.1
   Scoped only to WooCommerce shop/category archives. Does not affect Home carousels. */
body.woocommerce-shop.mysticlith-ui-framework #secondary,
body.tax-product_cat.mysticlith-ui-framework #secondary,
body.post-type-archive-product.mysticlith-ui-framework #secondary{
  display:none !important;
}
body.woocommerce-shop.mysticlith-ui-framework .site-content,
body.tax-product_cat.mysticlith-ui-framework .site-content,
body.post-type-archive-product.mysticlith-ui-framework .site-content{
  background:linear-gradient(180deg,#fffdf9 0%,#fbf6ef 100%);
}
body.woocommerce-shop.mysticlith-ui-framework .ast-container,
body.tax-product_cat.mysticlith-ui-framework .ast-container,
body.post-type-archive-product.mysticlith-ui-framework .ast-container{
  max-width:1380px !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
body.woocommerce-shop.mysticlith-ui-framework .content-area,
body.tax-product_cat.mysticlith-ui-framework .content-area,
body.post-type-archive-product.mysticlith-ui-framework .content-area{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}
body.woocommerce-shop.mysticlith-ui-framework .site-main,
body.tax-product_cat.mysticlith-ui-framework .site-main,
body.post-type-archive-product.mysticlith-ui-framework .site-main{
  width:100% !important;
  max-width:100% !important;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-breadcrumb,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-breadcrumb,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-breadcrumb{
  max-width:1320px;
  margin:34px auto 12px !important;
  color:#9a846f !important;
  font-size:13px;
}
.ml-shop-experience{
  max-width:1320px;
  margin:24px auto 78px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.ml-shop-sidebar{
  background:rgba(255,253,249,.88);
  border:1px solid rgba(199,133,80,.20);
  border-radius:20px;
  padding:24px 18px 18px;
  box-shadow:0 18px 42px rgba(47,42,37,.055);
  position:sticky;
  top:122px;
}
.ml-shop-sidebar h2{
  margin:0 0 18px;
  font-family:'Cormorant Garamond',serif;
  font-size:30px;
  font-weight:500;
  color:#4b3428;
  line-height:1;
}
.ml-shop-cats{ display:flex; flex-direction:column; gap:8px; }
.ml-shop-cat{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:8px 10px;
  border-radius:13px;
  text-decoration:none !important;
  color:#463529 !important;
  font-family:'Jost',system-ui,sans-serif;
  font-size:14px;
  font-weight:500;
  transition:all .22s ease;
}
.ml-shop-cat:hover,
.ml-shop-cat.is-active{
  background:#f8e7dd;
  transform:translateX(2px);
}
.ml-shop-cat-thumb{
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 4px 12px rgba(47,42,37,.08);
}
.ml-shop-cat-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ml-shop-all-icon{ font-size:17px; }
.ml-shop-cat em{
  font-style:normal;
  min-width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fffaf6;
  border:1px solid rgba(199,133,80,.18);
  color:#b36d3c;
  font-size:12px;
}
.ml-shop-sidebar-note{
  margin-top:28px;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid rgba(199,133,80,.18);
  background:#fff9f3;
  color:#6b5143;
  font-family:'Jost',system-ui,sans-serif;
  font-size:13px;
  line-height:1.45;
}
.ml-shop-main{ min-width:0; }
.ml-shop-hero{
  margin:0 0 26px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(199,133,80,.18);
}
.ml-shop-eyebrow{
  margin:0 0 8px;
  font-family:'Jost',system-ui,sans-serif;
  color:#c78550;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.ml-shop-hero h1{
  margin:0 0 12px;
  font-family:'Cormorant Garamond',serif;
  font-size:48px;
  line-height:1.02;
  font-weight:500;
  color:#2f2a25;
}
.ml-shop-hero p{
  max-width:760px;
  margin:0;
  font-family:'Jost',system-ui,sans-serif;
  color:#5f5046;
  line-height:1.65;
  font-size:15px;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-result-count,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-result-count,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-result-count{
  display:none !important;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-ordering,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-ordering,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-ordering{
  float:none !important;
  margin:0 0 24px auto !important;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  font-family:'Jost',system-ui,sans-serif;
  color:#6c5b50;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-ordering:before,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-ordering:before,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-ordering:before{
  content:'Sort by:';
  font-size:13px;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-ordering select,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-ordering select,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-ordering select{
  min-width:230px;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(199,133,80,.22);
  background:#fffdf9;
  color:#463529;
  padding:0 16px;
  font-size:14px;
  box-shadow:0 8px 22px rgba(47,42,37,.035);
}
body.woocommerce-shop.mysticlith-ui-framework ul.products,
body.tax-product_cat.mysticlith-ui-framework ul.products,
body.post-type-archive-product.mysticlith-ui-framework ul.products{
  clear:both !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:28px !important;
  margin:0 !important;
  padding:0 !important;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products:before,
body.woocommerce-shop.mysticlith-ui-framework ul.products:after,
body.tax-product_cat.mysticlith-ui-framework ul.products:before,
body.tax-product_cat.mysticlith-ui-framework ul.products:after,
body.post-type-archive-product.mysticlith-ui-framework ul.products:before,
body.post-type-archive-product.mysticlith-ui-framework ul.products:after{
  display:none !important;
  content:none !important;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  background:#fffdf9 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 12px 30px rgba(47,42,37,.075) !important;
  border:1px solid rgba(199,133,80,.12) !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  transition:transform .28s ease, box-shadow .28s ease;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product:hover,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product:hover,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 42px rgba(47,42,37,.11) !important;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product a img,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product a img,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product a img{
  width:100% !important;
  aspect-ratio:1 / .88;
  height:auto !important;
  object-fit:cover !important;
  margin:0 !important;
  display:block !important;
  transition:transform .32s ease;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product:hover a img,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product:hover a img,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product:hover a img{ transform:scale(1.04); }
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product .woocommerce-loop-category__title,
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product .woocommerce-loop-product__title{
  margin:14px 14px 8px !important;
  padding:0 !important;
  min-height:50px;
  font-family:'Cormorant Garamond',serif !important;
  font-size:21px !important;
  line-height:1.12 !important;
  font-weight:500 !important;
  text-align:left !important;
  color:#3b2b24 !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product .price,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product .price,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product .price{
  margin:0 14px 12px !important;
  color:#c06f37 !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
}
body.woocommerce-shop.mysticlith-ui-framework ul.products li.product .button,
body.tax-product_cat.mysticlith-ui-framework ul.products li.product .button,
body.post-type-archive-product.mysticlith-ui-framework ul.products li.product .button{
  margin:auto 14px 16px !important;
  width:calc(100% - 28px) !important;
  height:42px !important;
  border-radius:10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#d98247 !important;
  color:#fff !important;
  font-family:'Jost',system-ui,sans-serif !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  padding:0 !important;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination{
  margin-top:42px !important;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination ul,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination ul,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination ul{
  border:0 !important;
  display:flex;
  justify-content:center;
  gap:10px;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination ul li,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination ul li,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination ul li{
  border:0 !important;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination ul li a,
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination ul li span,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination ul li a,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination ul li span,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination ul li a,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination ul li span{
  min-width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffdf9;
  border:1px solid rgba(199,133,80,.20);
  color:#533b2f;
}
body.woocommerce-shop.mysticlith-ui-framework .woocommerce-pagination ul li span.current,
body.tax-product_cat.mysticlith-ui-framework .woocommerce-pagination ul li span.current,
body.post-type-archive-product.mysticlith-ui-framework .woocommerce-pagination ul li span.current{
  background:#d98247;
  color:#fff;
}
@media (max-width:1200px){
  .ml-shop-experience{ grid-template-columns:240px minmax(0,1fr); gap:34px; }
  body.woocommerce-shop.mysticlith-ui-framework ul.products,
  body.tax-product_cat.mysticlith-ui-framework ul.products,
  body.post-type-archive-product.mysticlith-ui-framework ul.products{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:921px){
  .ml-shop-experience{ grid-template-columns:1fr; gap:24px; }
  .ml-shop-sidebar{ position:relative; top:auto; }
  body.woocommerce-shop.mysticlith-ui-framework ul.products,
  body.tax-product_cat.mysticlith-ui-framework ul.products,
  body.post-type-archive-product.mysticlith-ui-framework ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:560px){
  body.woocommerce-shop.mysticlith-ui-framework ul.products,
  body.tax-product_cat.mysticlith-ui-framework ul.products,
  body.post-type-archive-product.mysticlith-ui-framework ul.products{ grid-template-columns:1fr !important; }
  .ml-shop-hero h1{ font-size:38px; }
}

/* ===== Mobile header layout fix (v9.9) =====
   Root cause: the Home page's carousel tracks inflate the browser's
   layout viewport even though they clip their own content correctly
   via their own overflow-x:auto. Any position:fixed element's
   containing block resolves against that inflated layout viewport
   instead of the true screen, which is why .ml-custom-header rendered
   up to 4x wider than the visible phone width. contain:layout on the
   wrap is a purely internal containment hint - it does not change the
   carousel's own visual appearance, card sizing, spacing, or scroll
   behavior; confirmed identical before/after via live screenshot
   testing. Both rules below are required together: contain:layout
   alone does not reposition the header, and position:sticky alone
   (without contain:layout) fails to actually stick, because the same
   inflated layout viewport also confuses sticky's own threshold
   calculation. Scoped to <=640px only - desktop is untouched. */
@media (max-width:640px){
  .ml-carousel-wrap{
    contain: layout;
  }

  .ml-custom-header{
    position: sticky;
  }

  body.mysticlith-ui-framework{
    padding-top: 0 !important;
  }

  .ml-header-inner{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo actions"
      "nav nav";
  }
  .ml-header-logo{
    grid-area: logo;
    order: initial;
    justify-content: flex-start;
  }
  .ml-header-actions{
    grid-area: actions;
    order: initial;
    justify-content: flex-end;
  }
  .ml-header-nav{
    grid-area: nav;
    order: initial;
  }
}

/* ===== Mobile header polish (v9.10) =====
   Two small visual adjustments to the v9.9 layout above, same scope,
   no structural change:
   1. --ml-header-height was still 118px, inherited from the old 3-row
      layout. The 2-row content only needs ~103px, leaving an
      unbalanced ~14px gap above and below the logo/nav. Tightened to
      104px, a close match to the real content height.
   2. .ml-cart-count (the cart badge) is sized/positioned the same at
      every breakpoint by its own base rule and reads as oversized next
      to the compact 30px mobile icons, hanging loosely off the
      corner. Shrunk and pulled in slightly for mobile only - desktop's
      badge is untouched. */
@media (max-width:640px){
  :root{
    --ml-header-height: 104px;
  }
  .ml-cart-count{
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
    top: -3px;
    right: -3px;
  }
}

/* ===== Home hero crop fix (v9.11) =====
   Root cause: the hero container's mobile min-height:280px (fixed) is
   independent of its own responsive width, forcing a container aspect
   as narrow as 1.06:1 against the source image's native 1.875:1. With
   object-fit:cover and centered object-position, that mismatch cropped
   30-44% of the image width - enough to cut the left-aligned headline
   text ("MysticLith / Discover the Beauty of Natural Crystals") clean
   off the left edge, confirmed via live screenshot at 360/390/430px.
   Replacing the fixed height with a responsive aspect-ratio close to
   the image's own ratio (16/9 vs native 1.875) lets the container's
   height follow its already-responsive width instead of fighting it,
   cutting the crop to ~5%, low enough that the full headline is
   visible at all three widths with no stretching. Scoped to <=640px
   only - desktop's own clamp(420px,46vw,640px) height is untouched. */
@media (max-width:640px){
  .home .entry-content>.wp-block-cover:first-child,
  .home .wp-block-post-content>.wp-block-cover:first-child{
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* ===== Home carousel two-card fix (v9.12) =====
   Root cause, two parts:
   1. flex-basis:82% at this breakpoint (below) showed one full card
      plus a large fragment of a second - neither one card nor two.
      The <=921px breakpoint already solves this correctly with
      flex-basis:calc((100% - 28px)/2); reusing that exact formula
      here instead of 82%.
   2. Reusing that formula alone was not enough for .ml-category-card:
      its child .ml-category-img has a fixed width:190px, and flex
      items default to min-width:auto, which floors the card at its
      child's content size - so the category card refused to shrink
      below 190px regardless of flex-basis (confirmed live: identical
      190px card width at 360/390/430px before this rule). Confirmed
      .ml-product-card has no such floor (its image is width:100%,
      already fluid) - it resolved correctly with flex-basis alone.
      min-width:0 removes the floor for both; harmless on
      .ml-product-card, required for .ml-category-card.
   Result: exactly two full, equal-width cards visible at 360/390/430,
   no partial third card, swipe and the existing arrow buttons
   unaffected (framework.js computes arrow step distance from the
   card's own rendered width at click time, so it adapts automatically
   with no JS change). Scoped to <=640px only - desktop's own 5-column
   formula and .ml-category-img's 190px are untouched. */
@media (max-width:640px){
  .ml-category-card,
  .ml-product-card{
    flex-basis: calc((100% - 28px)/2);
    min-width: 0;
  }
}

/* ===== Product card polish (v9.13) =====
   Four issues at the new two-card mobile width:
   1. .ml-product-title a had -webkit-line-clamp:unset!important set
      elsewhere (unmedia'd, applies at all widths) for the old 5-across
      desktop layout. At the new narrow 139px card, long titles wrapped
      word-by-word past the fixed title box height with no ellipsis -
      restoring a real 2-line clamp here, scoped to mobile only.
   2. .ml-product-card/.ml-product-body/.ml-product-title min-heights
      were leftovers sized for the old 5-card/3-card widths, leaving
      ~94px of dead space below the Discover button at the new width.
      Reduced to the smallest height that still reads balanced (316px),
      not the minimum possible - matches the two-line title reserved
      at 44px plus a real price box plus normal padding.
   3. .ml-product-price had no reserved height for 2-line price ranges
      (e.g. "194,05 EUR - 2.061,06 EUR"), so the Discover button's
      vertical position could vary card to card. Reserved 40px.
      display:flex+align-items:center alone was tried first and broke
      this: it turns WooCommerce's separate price sub-spans (amount /
      dash / amount) into non-wrapping flex items, so the range price
      overflowed past the card edge instead of wrapping. flex-wrap:wrap
      with align-content:center fixes it while still centering.
   4. .ml-carousel-arrow is forced to 44x44px by a higher-specificity
      rule at the <=921px breakpoint above (button.ml-carousel-arrow,
      .ml-carousel-arrow selector, two-part specificity) - matching
      that same selector here to win the cascade and shrink to 34px
      (~23% smaller), keeping top:50%/translateY(-50%) centering
      untouched so arrowVerticalCenterOffset stays 0.
   Verified live at 360/390/430px: uniform card height and identical
   Discover-button vertical position across six sampled cards (short
   title, long title, and the range-price card), no horizontal
   overflow, swipe/scroll-snap/arrow-click behavior unchanged, desktop
   (1280px) unaffected since every rule here is scoped to <=640px. */
@media (max-width:640px){
  .ml-product-card{
    min-height: 316px !important;
  }
  .ml-product-body{
    min-height: 0 !important;
    padding: 14px 16px 16px !important;
  }
  .ml-product-title{
    /* v9.18: 2 lines at this width's 19px/1.12 metrics (~44px) was
       measurably too tight for real Commercial Titles - e.g. "Tree Of
       Life Feather Dream Catcher" (6 words) or "Labradorite Sterling
       Silver Earrings" (a single word pair, "Sterling Silver", that
       alone doesn't fit this rule's own ~13-character line width) both
       need a 3rd line. Raised height/min-height to fit 3 lines at the
       SAME font-size/line-height (unchanged) - 3 * 19px * 1.12 ~= 64px,
       +2px buffer, matching this rule's own existing precedent of not
       cutting exactly to the line-box edge. Scoped to this <=640px
       block only - desktop, the shop/category grid's own separate
       .woocommerce-loop-product__title rule, and everything else in
       this file are untouched. */
    height: 66px !important;
    min-height: 66px !important;
  }
  .ml-product-title a{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .ml-product-price{
    /* v9.19: a variable-product range (e.g. "24.90 - 98.90") at the
       unchanged 18px/800 weight was right at/over this card's own
       ~130-140px usable width (same width v9.18's title fix already
       measured), so flex-wrap:wrap (v9.13) let the second amount span
       drop to its own line. Reducing font-size only, mobile-only, is
       enough to fit the full range on one line at this width - nothing
       else about the box (font-weight, line-height, min-height,
       alignment) needs to change. flex-wrap:nowrap only becomes safe
       paired with this smaller size - at the previous 18px it would
       reproduce the exact overflow v9.13's own comment already
       described and fixed once. Scoped to this <=640px block only -
       desktop and the shop/category grid's own separate .price rule
       are untouched. */
    font-size: 15px !important;
    min-height: 40px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    justify-content: center !important;
  }
  button.ml-carousel-arrow,
  .ml-carousel-arrow{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    font-size: 22px !important;
    line-height: 34px !important;
  }
}

/* ===== Fresh Finds mobile "peek" carousel (v9.17) =====
   Replaces the 2-card mobile layout above (the .ml-category-card,
   .ml-product-card{flex-basis:calc((100% - 28px)/2)} rule, kept
   completely untouched) with one large centered card and a small
   visible peek of the previous/next card - Fresh Finds only, targeted
   via .ml-product-track (the more specific of the two classes on that
   element - it also carries the shared .ml-carousel-track class used
   by the Explore Collections category carousel). The untouched
   .ml-category-card,.ml-product-card rule still applies its own
   flex-basis to .ml-category-card; only .ml-product-card's flex-basis
   is overridden below, so Explore Collections keeps its existing
   2-up mobile layout exactly as it is.

   Values chosen, and why:
   - flex-basis:78% (originally shipped at 88%, tuned to 83% at v9.20 -
     see v9.21 tuning note below).
   - .ml-product-track padding-left/right:3%, approximating
     (100% - 78%)/2 - the scroll runway a first/last card needs to
     reach a centered scroll-snap position. Note: an exact closed-form
     value isn't obtainable this way - flex-basis:78% resolves against
     the track's OWN content box, which this same padding also shrinks,
     making the two self-referential (more padding narrows the card,
     which would then call for still more padding, with no fixed-point
     solution short of switching to viewport-unit sizing or spacer
     pseudo-elements). 3% is a deliberate, documented approximation of
     the right ballpark, not a verified pixel value - confirm/fine-tune
     the exact centering after a real visual check, the same as every
     other estimate in this file.
   - gap reduced to 10px for Fresh Finds only (from the inherited
     28px; originally reduced to 14px at 88%, then 12px at 83% - see
     v9.20/v9.21 tuning notes below) - at 28px, the gap alone consumes
     most of the space between the card and the full track width,
     leaving little to no room for an actual visible peek. This is a
     value that specifically has to change for the peek to be visible
     at this width, not a speculative styling choice.
   - scroll-snap-align:center (was :start, inherited from the base
     .ml-product-card rule) - required for the symmetric resting
     position.

   v9.20 tuning (live visual feedback, no code investigation needed -
   the original v9.17 values above were confirmed genuinely live and
   rendering, per the prior cache-busting fix, but read as too
   dominant with too little neighbor peek): flex-basis 88%->83%,
   .ml-product-track padding-left/right 6%->4%, gap 14px->12px. Same
   mechanism, same approximation caveat as above - only the three
   numbers changed. Typography (v9.18 title clamp, v9.19 price font)
   and every other carousel behavior (arrow buttons, scroll-snap-align,
   overflow-x:auto, native swipe, JS) are untouched by this tuning
   pass.

   v9.21 tuning (live visual feedback, confirmed via a real-device
   incognito check that ruled out caching as a factor - the v9.20
   values above were confirmed genuinely live and rendering, but the
   83% vs 88% difference read as too subtle; a more noticeable
   intermediate peek was requested): flex-basis 83%->78%, .ml-product-
   track padding-left/right 4%->3%, gap 12px->10px. Same mechanism,
   same approximation caveat as above - only the three numbers changed
   again. scroll-snap-align:center, typography (v9.18 title clamp,
   v9.19 price font), arrow buttons, and every other carousel behavior
   are untouched by this tuning pass.

   Deliberately NOT changed here: the 3-line title clamp/66px box and
   the 15px price font added for the 2-card layout. Width math suggests
   both now have more room than they strictly need at this much wider
   card, but the peek-width estimate above is itself an approximation,
   not a verified pixel value - changing typography in the same commit
   as an unverified layout change would make any visual issue
   impossible to attribute to one change or the other. Left as a
   follow-up once this layout is visually confirmed live.

   Arrow buttons (.ml-prev/.ml-next) are unchanged - their position is
   anchored to the wrap's own edges (position:absolute), independent of
   card width, so they remain functionally unaffected by this change.
   They may now sit visually closer to the peeked neighbor card than in
   the 2-card layout, since the peek card's edge sits closer to the
   wrap's own edge - a visual-QA item, not a structural break.

   Scoped entirely to .ml-product-track/.ml-product-card inside this
   <=640px query - desktop, tablet, the Explore Collections category
   carousel, the shop/category grid, and the v9.14/v9.15 typography
   rules above are all untouched. */
@media (max-width:640px){
  .ml-product-track{
    padding-left: 3% !important;
    padding-right: 3% !important;
    gap: 10px !important;
  }
  .ml-product-card{
    flex-basis: 78% !important;
    scroll-snap-align: center !important;
  }
}

/* ===== Home section spacing polish (v9.14) =====
   All four home sections (Explore Collections, Fresh Finds, The
   MysticLith Difference, Story) share the .ml-home-section wrapper
   class, which sets margin-bottom:64px - a desktop-tuned value that
   read as excessive gap between sections on narrow mobile widths.
   The Story section additionally had a real bug: it has no
   margin-bottom of its own, and a theme-level rule
   (.entry-content > :last-child{margin-bottom:0}, from WordPress/
   Astra, not this plugin) was actively zeroing any bottom space
   before the footer at higher selector specificity than a plain
   .ml-story-section override could beat - confirmed via
   CSS.getMatchedStylesForNode live, not guessed. !important is
   required here specifically to win against that rule.
   One rule against the shared wrapper class fixes both problems at
   once: tightens every inter-section gap from 64px to 40px AND
   gives the Story section the same 40px as breathing room before
   the footer, since it carries .ml-home-section too. This also
   makes the Difference->Story gap 40px (previously 64px, not
   flagged as a problem) for the sake of uniform rhythm across all
   four sections rather than three matching and one different.
   Verified live at 360/390/430px: all four gaps uniformly 40px, no
   horizontal overflow. Desktop (1280px) confirmed fully unaffected
   (still 64px/64px/64px/0px, scoped to <=640px only). Card
   dimensions, carousel behavior, typography and arrows untouched -
   this block only sets margin-bottom on the section wrapper. */
@media (max-width:640px){
  .ml-home-section{
    margin-bottom: 40px !important;
  }
}

/* ===== Mobile product-page fixes: variable-product gallery, disappearing
   header, and title truncation (v9.15) =====
   Three problems, one investigation. Confirmed via elimination testing
   (Page.getLayoutMetrics, hiding one candidate container at a time,
   fresh page load between each) rather than guessing:

   1. Disappearing header on variable products only. NOT the gallery -
      removing the gallery, summary column, or related-products section
      individually left the overflow unchanged. Removing
      .woocommerce-tabs alone fixed it. The real culprit inside it:
      ul.tabs.wc-tabs (Description / Additional information / Reviews
      tab nav) is display:flex, flex-wrap:nowrap, no defined width.
      Simple products only get 2 tabs (Description, Reviews - no
      product attributes, so no "Additional information" tab) and fit
      fine. Variable products need attributes for their variations, so
      WooCommerce auto-adds a 3rd tab, and the combined nav no longer
      fits at nowrap. Confirmed measured: docScrollWidth/layoutViewport
      390 -> 415px on variable products at 360/390px (width-independent,
      ~415px absolute - doesn't reproduce at 430px+). Individual
      elements inside the tab nav only measured ~4px over, because the
      inflation is an intrinsic-size feedback loop escaping to a shared
      ancestor (the exact same mechanism already root-caused this
      session for the Home carousel wrap) - not visible as one obviously
      oversized rect. contain:inline-size on ul.tabs.wc-tabs is the
      confirmed, isolated fix (tested alone: 415 -> 390 exactly).
      min-width:0 on the tab <li>s alone was tried and was NOT enough
      (stayed at 415) - contain:inline-size is specifically required.
      overflow-x:auto + flex-wrap:nowrap + white-space:nowrap on the
      items keeps every tab label fully readable (swipeable if they
      don't all fit) instead of the ugly mid-word wrap
      ("Reviews" -> "REV"/"(0)") that contain:inline-size alone produces
      once flex-shrink is allowed to compress the labels. Not fixed with
      only overflow-x:hidden as a mask - this targets the actual
      flex-sizing mechanism. The header itself (.ml-custom-header) is
      NOT touched anywhere in this block - fixing the overflow is
      expected to resolve it as a side effect, per the same viewport-
      inflation -> sticky-breakage mechanism already proven this
      session, without needing a second header-specific change.

   2. Variable-product gallery: WooCommerce's default thumbnail markup
      (.flex-control-thumbs, no custom CSS existed for it anywhere in
      this file before now) wraps to as many rows as needed - 3 rows for
      a 10-thumbnail variable product, 1 row for a typical 4-thumbnail
      simple product. That row count difference, not any single
      selector unique to variable products, is why variable-product
      galleries render so much taller (685px vs 411px measured on
      comparable products at 390px). Converted to a single-row,
      horizontally scrollable strip. Every thumbnail remains reachable
      by swipe; thumbnail-click still swaps the main image; PhotoSwipe
      zoom/lightbox (.woocommerce-product-gallery__trigger) still opens
      correctly - all verified live with this exact CSS applied, not
      assumed. No image is hidden, removed, or made unreachable - only
      the layout (grid rows -> single scrollable row) changes.

   3. Product-page title: .product_title's 2-line clamp
      (framework-9.7.css line ~299, the "v0.54 2-line safety net") was
      written for card contexts and is too aggressive for the individual
      product page - it hard-clips a 3rd line with no ellipsis rendered
      at that display value. Relaxed to allow up to 3 lines at a smaller
      mobile font size, so normal-length titles show completely and only
      an exceptionally long title (verified with an artificial 100+
      character title) gets truncated, with a real ellipsis, at 3 lines.

   All three rules are scoped to <=640px AND (where relevant)
   .product-type-variable, and target only product-page-specific
   selectors (.woocommerce-product-gallery, ul.tabs.wc-tabs,
   .product_title inside div.product) - nothing here touches Home,
   header markup/positioning, carousels, or any selector shared with
   those. Verified live on one simple product, two variable products
   (a bracelet and a crystal geode) at 360/390/430px: no horizontal
   overflow on any of them, single-row thumbnails, titles fully visible,
   swipe/click/zoom interactions all functioning. Desktop (1280px)
   confirmed unaffected by injecting this exact CSS: thumbnails still
   render their native 3-row grid, title still 2-line clamps at its
   original desktop font-size, tab nav still overflow-x:hidden/
   contain:none - every rule here is inert above 640px. */
@media (max-width:640px){
  .single-product.mysticlith-ui-framework .woocommerce-product-gallery .flex-control-thumbs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    gap:8px !important;
    padding:4px 2px 6px !important;
  }
  .single-product.mysticlith-ui-framework .woocommerce-product-gallery .flex-control-thumbs li{
    float:none !important;
    flex:0 0 auto !important;
    width:78px !important;
    height:78px !important;
    margin:0 !important;
    scroll-snap-align:start;
  }
  .single-product.mysticlith-ui-framework .woocommerce-product-gallery .flex-control-thumbs li img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs.wc-tabs{
    contain:inline-size !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    flex-wrap:nowrap !important;
  }
  .single-product.mysticlith-ui-framework .woocommerce-tabs ul.tabs.wc-tabs li{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .single-product.mysticlith-ui-framework div.product .product_title{
    font-size:30px !important;
    line-height:1.15 !important;
    -webkit-line-clamp:3 !important;
  }
}

/* ===== Mobile Cart page: premium card layout (v9.16) =====
   The Cart page's own styling lives in a separate plugin
   (mysticlith-cart-experience-v1-1/assets/cart.css), not this one -
   confirmed by fetching the live stylesheet directly, since none of
   its selectors (table.cart, .ml-qty-btn, .ml-cart-trust-panel, etc.)
   exist anywhere in this file. That plugin isn't mirrored in this repo,
   so this block is a scoped override targeting its markup/classes from
   here instead, the same approach already used against the untracked
   Customizer CSS on .ml-story-section earlier this session.

   Root causes, confirmed via elimination testing (Page.getLayoutMetrics,
   hiding one candidate at a time, fresh navigation between each):
   1. table.cart stays display:table and its tbody stays
      display:table-row-group while only <tr>/<td> were switched to
      display:block by WooCommerce/Astra's responsive CSS - an
      incomplete transformation. With the outer table/tbody still real
      table boxes, the browser's column-width algorithm still computes
      an intrinsic width for the row that exceeds the true available
      width, so the table renders ~353px wide regardless of viewport
      (360 or 390) rather than shrinking to its 100%-of-parent
      constraint - confirmed measured, and confirmed this alone
      (nothing else) is what inflates layoutViewport 360->387, which is
      the same mechanism already root-caused for the disappearing
      header on variable product pages this session. Not fixed with
      only overflow-x:hidden - display:block on table+tbody addresses
      the actual layout algorithm, not just the symptom. The header
      itself is not touched anywhere below.
   2. .ml-qty-btn is declared width:38px but rendered at ~54.5px: it's a
      flex item of .ml-qty-wrap, and Astra's global !important button
      padding (.7rem 1.8rem) sets a min-content floor wider than the
      declared width - the same flexbox min-width:auto trap already hit
      twice this session (Home category cards, product-page tab nav).
      min-width:0 + an !important padding override let the declared
      44px actually apply.
   3. .coupon is display:flex with an input min-width:210px plus a
      ~112px button that don't fit/wrap at mobile widths - clipped
      within its own row even though it didn't add to the page-level
      scrollbar.

   Beyond fixing those three, per approval feedback this doesn't stop at
   "technically fits" - each product row becomes one card (grid-area
   layout, same named-region technique already used for the product-page
   variation form) instead of a plain WooCommerce responsive label:value
   list: prominent centered image, serif title with natural wrapping (no
   clamp - variation text is already part of the title string on this
   site, confirmed no separate .variation element exists), price and
   quantity balanced side by side with small eyebrow-style labels
   (reusing the data-title attribute WooCommerce already outputs - no
   PHP/JS change needed), subtotal presented as its own emphasized
   closing line, the remove control moved into the card's corner instead
   of its own empty-looking row, the coupon fields grouped into a
   bordered panel instead of bare stacked fields, and the trust-panel
   gap widened from 18px to 28px so it reads as breathing room rather
   than being glued to Cart totals. Every color/radius/shadow value here
   is reused from cart.css's own tokens (--ml-border, --ml-clay,
   --ml-earth) - nothing new introduced.

   Verified live with a real cart (one simple product, one variable
   product with a selected variation, a third product for multi-item
   coverage) at 360/390/430px: zero horizontal overflow at any width,
   variation title wraps fully instead of truncating. Functionally
   verified end-to-end: quantity +/- updates the input, Update Cart
   (AJAX) recalculates the total, Apply coupon (AJAX) round-trips
   correctly (tested an invalid code, got the real WooCommerce rejection
   message back), shipping method change (AJAX) recalculates the total,
   the remove (x) button still removes the item from cart, and Proceed
   to Checkout still links to /checkout/. Desktop (1280px) confirmed
   fully unaffected by injecting this exact CSS: table still
   display:table, quantity buttons still their original ~59.6x40px,
   coupon still flex-direction:row, trust panel still 18px - everything
   here is scoped inside @media (max-width:640px). */
@media (max-width:640px){
  body.woocommerce-cart table.cart,
  body.woocommerce-cart table.cart tbody{
    display:block !important;
  }

  body.woocommerce-cart table.cart tr.cart_item{
    display:grid !important;
    position:relative !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "thumb thumb"
      "name name"
      "price qty"
      "subtotal subtotal" !important;
    row-gap:12px !important;
    column-gap:14px !important;
    background:#fff !important;
    border:1px solid var(--ml-border) !important;
    border-radius:18px !important;
    box-shadow:0 14px 34px rgba(47,42,37,.06) !important;
    margin:0 0 16px !important;
    padding:22px 18px 20px !important;
    overflow:visible !important;
  }
  body.woocommerce-cart table.cart tr.cart_item:last-child{
    margin-bottom:0 !important;
  }

  body.woocommerce-cart table.cart td{
    border-top:0 !important;
    padding:0 !important;
  }
  body.woocommerce-cart table.cart td.product-remove::before,
  body.woocommerce-cart table.cart td.product-thumbnail::before,
  body.woocommerce-cart table.cart td.product-name::before{
    content:none !important;
  }

  body.woocommerce-cart table.cart td.product-remove{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    z-index:2 !important;
  }

  body.woocommerce-cart table.cart td.product-thumbnail{
    grid-area:thumb !important;
    text-align:center !important;
  }
  .ml-cart-thumb-wrap img{
    width:128px !important;
    height:128px !important;
  }

  body.woocommerce-cart table.cart td.product-name{
    grid-area:name !important;
    text-align:center !important;
    padding:0 8px !important;
  }
  .ml-cart-product-name a{
    font-size:20px !important;
    line-height:1.3 !important;
  }

  body.woocommerce-cart table.cart td.product-price,
  body.woocommerce-cart table.cart td.product-quantity{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
  }
  body.woocommerce-cart table.cart td.product-price{ grid-area:price !important; font-size:17px !important; }
  body.woocommerce-cart table.cart td.product-quantity{ grid-area:qty !important; }
  body.woocommerce-cart table.cart td.product-price[data-title]::before,
  body.woocommerce-cart table.cart td.product-quantity[data-title]::before,
  body.woocommerce-cart table.cart td.product-subtotal[data-title]::before{
    content:attr(data-title);
    font:700 10px/1 'Jost',system-ui,sans-serif;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:var(--ml-clay,#d68147);
  }

  body.woocommerce-cart table.cart td.product-subtotal{
    grid-area:subtotal !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:6px !important;
    margin-top:6px !important;
    padding-top:14px !important;
    border-top:1px solid #f0e8de !important;
    font-size:20px !important;
    font-weight:800 !important;
    color:var(--ml-earth,#9a6335) !important;
  }

  .ml-qty-wrap{
    height:44px !important;
  }
  .ml-qty-btn{
    width:44px !important;
    height:44px !important;
    min-width:0 !important;
    padding:0 !important;
    flex:0 0 44px !important;
  }
  .ml-qty-wrap input.qty{
    width:44px !important;
    height:42px !important;
  }

  body.woocommerce-cart .coupon{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    background:#fffaf6 !important;
    border:1px solid var(--ml-border) !important;
    border-radius:16px !important;
    padding:16px !important;
    margin:0 0 14px !important;
  }
  body.woocommerce-cart .coupon input.input-text{
    min-width:0 !important;
    width:100% !important;
  }
  body.woocommerce-cart .coupon button.button{
    width:100% !important;
  }

  .ml-cart-trust-panel{
    margin-bottom:28px !important;
  }
}

/* ===== Checkout/cart "Standard Shipping (12-50 days)" label: keep the
   delivery-day range from breaking mid-range (v9.22) =====
   WooCommerce's own shipping-method list (id="shipping_method",
   already targeted by the unrelated price-on-its-own-line rule in
   this site's WordPress Additional CSS, confirmed live) renders the
   label as plain text followed by a separate price <span> - there is
   no dedicated element around just the "(12-50 days)" portion, so this
   cannot be scoped any narrower than the <label> itself without a PHP/
   markup change (explicitly out of scope here - presentation only).

   Root cause of the wrap: CSS's default line-breaking rules treat a
   hyphen/dash as a soft break opportunity even with no surrounding
   whitespace, so "12-50" can break into "12-" / "50" whenever the
   label doesn't fully fit - not a mid-word break in the word-break:
   break-all sense, but visually just as broken. word-break:keep-all
   disables exactly that break opportunity while leaving normal
   whitespace-boundary wrapping intact as a safety net, so this can
   never cause horizontal overflow even if a label is unexpectedly
   long - applied at every width, mobile included.

   white-space:nowrap is layered on top for wider viewports only (see
   the <=640px override below) to strongly prefer a single line where
   there is room for it; deliberately NOT forced on mobile, where it
   could overflow instead of wrapping - keep-all alone is mobile's own
   safety net there.

   Does not touch the price span's own display:block rule (WordPress
   Additional CSS, 2026-07-29 patch) - the price still gets its own
   line exactly as before. Does not touch shipping calculation, the
   selected logistics method, the shipping price, the delivery
   estimate, or any shipping metadata - text layout only.

   v9.23 mobile follow-up: the day-range no longer breaks mid-range
   (confirmed working), but on <=640px the row still read as cramped -
   "Shipping:Standard Shipping (20-60 days): EUR7.26" running together
   on one line. Root cause: this table carries WooCommerce's own
   unmodified shop_table_responsive mobile behavior (confirmed - no
   custom override exists anywhere in this repo or the site's
   Additional CSS for .cart_totals specifically, unlike the separate,
   heavily-customized table.cart item rows above) - on <=640px,
   WooCommerce floats a data-title::before label to the left of each
   td's content, and #shipping_method (a <ul> living inside that td)
   was never told to clear that float or take the full row width, so
   it rendered squeezed beside the floated label instead of stacking
   cleanly below it. #shipping_method{display:block;clear:both;
   width:100%} makes it drop below the floated label onto its own
   line, exactly like the goal layout - label on one line, "Standard
   Shipping (20-60 days)" and the price (already its own line via the
   untouched price rule above) stacked underneath. text-align:left
   overrides shop_table_responsive's own default right-alignment for
   value cells, which would otherwise misalign this left-to-right
   label/price content. Desktop (>640px) is completely untouched -
   this entire addition lives inside the existing <=640px block below,
   nothing added outside it. */
#shipping_method label{
  word-break: keep-all !important;
  white-space: nowrap !important;
}
@media (max-width:640px){
  #shipping_method label{
    white-space: normal !important;
  }
  #shipping_method{
    display: block !important;
    clear: both !important;
    width: 100% !important;
    text-align: left !important;
    margin-top: 6px !important;
  }
}