.elementor-176 .elementor-element.elementor-element-22686a6:not(.elementor-motion-effects-element-type-background), .elementor-176 .elementor-element.elementor-element-22686a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-6cdf229 );}.elementor-176 .elementor-element.elementor-element-22686a6 .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:15px;}.elementor-176 .elementor-element.elementor-element-22686a6{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-176 .elementor-element.elementor-element-22686a6 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-176 .elementor-element.elementor-element-1f123110 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-176 .elementor-element.elementor-element-1f123110 .elementor-column-gap-custom .elementor-column > .elementor-element-populated{padding:0px;}.elementor-176 .elementor-element.elementor-element-1f123110{margin-top:0px;margin-bottom:15px;}.elementor-176 .elementor-element.elementor-element-11bee5cf{width:auto;max-width:auto;--et_select-arrow-size:.75em;--et_inputs-height:30px;}.elementor-176 .elementor-element.elementor-element-11bee5cf select{font-family:"Source Sans Pro", Sans-serif;font-size:16px;width:100%;max-width:170px;}.elementor-176 .elementor-element.elementor-element-1cd27cd0{width:var( --container-widget-width, 31.534% );max-width:31.534%;--container-widget-width:31.534%;--container-widget-flex-grow:0;}.elementor-176 .elementor-element.elementor-element-1cd27cd0 > .elementor-widget-container{margin:0px 0px 0px 15px;}.elementor-176 .elementor-element.elementor-element-1cd27cd0.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-176 .elementor-element.elementor-element-1cd27cd0 .etheme-elementor-grid-list-switcher > .switcher-wrapper a, .elementor-176 .elementor-element.elementor-element-1cd27cd0 .switch-more > .switcher-wrapper a{font-size:16px;}.elementor-176 .elementor-element.elementor-element-1cd27cd0 .etheme-elementor-grid-list-switcher ul a{font-size:16px;}.elementor-176 .elementor-element.elementor-element-5c3a4b1 .products-per-page{justify-content:flex-end;}.elementor-176 .elementor-element.elementor-element-5c3a4b1 .products-per-page > span{font-family:"Source Sans Pro", Sans-serif;font-size:16px;}.elementor-176 .elementor-element.elementor-element-5c3a4b1 select{font-family:"Source Sans Pro", Sans-serif;font-size:16px;}.elementor-176 .elementor-element.elementor-element-5c3a4b1{--et_select-arrow-size:.75em;--et_inputs-height:30px;}.elementor-176 .elementor-element.elementor-element-49b0b257{--cols:4;--rows-gap:40px;--image-space:10px;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-item{text-align:center;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button, .elementor-176 .elementor-element.elementor-element-49b0b257 .quantity-wrapper[data-type=advanced] .quantity>span.plus{background-color:#F2F2F2;fill:#000000;color:#000000;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button:hover, .elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button:focus{background-color:#000000;color:#FFFFFF;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-elementor-lazy-button{background-color:#000000;font-family:"Source Sans Pro", Sans-serif;font-size:12px;text-transform:uppercase;fill:#FFFFFF;color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:13px 31px 13px 31px;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-elementor-lazy-button:hover, .elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-elementor-lazy-button:focus{background-color:#000000;color:#FFFFFF;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button .button-text:last-child{margin-left:7px;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button .button-text:first-child{margin-right:7px;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-title{font-family:"Staatliches", Sans-serif;font-size:16px;margin-bottom:10px;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-item.type-list{text-align:left;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-item.type-list .etheme-product-grid-content{align-self:center;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-title a{color:#111111;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-image img{width:100%;}.elementor-176 .elementor-element.elementor-element-49b0b257 .sku_wrapper{font-family:"Source Sans Pro", Sans-serif;font-size:16px;color:#555555;}.elementor-176 .elementor-element.elementor-element-49b0b257 .price{font-family:"Source Sans Pro", Sans-serif;font-size:16px;color:#888888;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button:hover svg, .elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-product-grid-button:focus svg{fill:#FFFFFF;}.elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-elementor-lazy-button:hover svg, .elementor-176 .elementor-element.elementor-element-49b0b257 .etheme-elementor-lazy-button:focus svg{fill:#FFFFFF;}@media(max-width:1024px){.elementor-176 .elementor-element.elementor-element-1cd27cd0{--items-gap:3px;}.elementor-176 .elementor-element.elementor-element-49b0b257{--cols:2;}}@media(max-width:1024px) and (min-width:768px){.elementor-176 .elementor-element.elementor-element-1e365e8e{width:70%;}.elementor-176 .elementor-element.elementor-element-4163f7b7{width:85%;}.elementor-176 .elementor-element.elementor-element-36b8f2ea{width:15%;}}@media(max-width:767px){.elementor-176 .elementor-element.elementor-element-1e365e8e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-176 .elementor-element.elementor-element-4163f7b7{width:70%;}.elementor-176 .elementor-element.elementor-element-36b8f2ea{width:30%;}}/* Start custom CSS *//* =====================================================================
   TWILIGHT COSMETICS – COMPLETE SHOP PAGE CSS
   Paste in: Elementor → Page Settings → Advanced → Custom CSS
   (replaces ALL earlier shop / quick-view CSS – remove the old ones)
   No custom CSS classes needed: it finds toolbar, grid & cards itself.
   ===================================================================== */

body{
  --g-dark:#123524; --g-mid:#315C3A; --ink:#18231C; --sage:#AFC9A4;
  --cream:#F5F1E8; --ivory:#FCFBF7; --blush:#D9A99B; --gold:#B69A5A; --line:#D8DED2;
  --ease:cubic-bezier(.22,.61,.36,1);
}
.mfp-wrap{--g-dark:#123524; --g-mid:#315C3A; --ink:#18231C; --sage:#AFC9A4; --cream:#F5F1E8; --ivory:#FCFBF7; --blush:#D9A99B; --line:#D8DED2; --ease:cubic-bezier(.22,.61,.36,1)}

/* ---------- 1. SHOP AREA SPACING ---------- */
:is(.elementor-top-section,.e-con.e-parent):has(.products){
  padding:0 clamp(14px,3.2vw,56px) clamp(48px,6vw,90px) !important; overflow:visible !important;
}

/* ---------- 2. TOOLBAR (sorting · view switcher · per page) ---------- */
.elementor-inner-section:has(.woocommerce-ordering,select.orderby){
  background:#fff; border:1px solid var(--line); border-radius:60px;
  padding:10px 24px; margin:clamp(24px,3vw,40px) 0 clamp(26px,3vw,40px);
  box-shadow:0 1px 2px rgba(18,53,36,.04),0 12px 30px rgba(18,53,36,.07);
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) > .elementor-container{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:14px; max-width:100%;
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column{width:auto !important; flex:0 0 auto}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column:first-child{flex:1 1 auto}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-widget-wrap{
  display:flex !important; flex-wrap:nowrap; align-items:center; gap:12px; padding:0 !important;
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column:last-child .elementor-widget-wrap{justify-content:flex-end}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-widget{margin:0 !important; width:auto !important}

.elementor-inner-section:has(.woocommerce-ordering,select.orderby) select{
  font:600 13px 'Manrope',sans-serif !important; letter-spacing:.03em; color:var(--g-dark);
  background-color:var(--cream); border:1px solid var(--line); border-radius:40px; box-shadow:none;
  height:46px; min-width:120px; padding:0 42px 0 20px; cursor:pointer;
  appearance:none; -webkit-appearance:none; text-overflow:ellipsis; transition:.25s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23315C3A' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) select.orderby,
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .woocommerce-ordering select{min-width:230px}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) select:hover,
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) select:focus{
  border-color:var(--g-mid); box-shadow:0 0 0 3px rgba(175,201,164,.45); outline:none;
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) :is(label,.elementor-widget-container > span,.products-per-page > span){
  font:700 11px 'Manrope',sans-serif !important; letter-spacing:.16em; text-transform:uppercase; color:var(--g-mid); white-space:nowrap;
}
.elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-widget-container{display:flex; align-items:center; gap:10px}

/* grid / list switcher */
.switch-grid,.switch-list,.view-switcher a,.etheme-grid-list-switcher a,
.elementor-inner-section:has(select.orderby) [class*="switcher"] a{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--cream); color:var(--g-mid);
  border:1px solid var(--line); transition:.25s var(--ease);
}
:is(.switch-grid,.switch-list,.view-switcher a,.etheme-grid-list-switcher a):is(:hover,.active,.current){
  background:var(--g-dark); color:#fff; border-color:var(--g-dark);
}
.woocommerce-result-count{font:500 13px 'Manrope',sans-serif; color:#5d6b60; margin:0}

/* ---------- 3. PRODUCT GRID ---------- */
.products{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px) clamp(14px,1.8vw,26px); margin:0 !important; padding:6px 6px 30px !important;
  list-style:none; overflow:visible !important;
}
.products::before,.products::after{display:none !important}
.products > *{width:auto !important; float:none !important; margin:0 !important}

/* ---------- 4. PRODUCT CARD ---------- */
.products :is(div,li,article):has(> .etheme-product-grid-image){
  position:relative; display:flex; flex-direction:column; text-align:center; background:#fff;
  border:1px solid rgba(18,53,36,.09); border-radius:22px; overflow:hidden; padding:0 0 22px;
  box-shadow:0 1px 2px rgba(18,53,36,.04),0 12px 28px rgba(18,53,36,.08);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.products :is(div,li,article):has(> .etheme-product-grid-image):hover{
  transform:translateY(-8px); border-color:rgba(49,92,58,.35);
  box-shadow:0 4px 8px rgba(18,53,36,.05),0 28px 50px rgba(18,53,36,.17);
}
.etheme-product-grid-image{
  position:relative; display:block; overflow:hidden; aspect-ratio:1/1; border-radius:0;
  background:linear-gradient(180deg,var(--ivory),var(--cream));
}
.etheme-product-grid-image img{
  width:100% !important; height:100% !important; object-fit:cover; display:block; border-radius:0 !important;
  transition:transform .8s var(--ease);
}
.etheme-product-grid-image::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:linear-gradient(180deg,transparent 62%,rgba(18,53,36,.16));
}
.products :is(div,li,article):has(> .etheme-product-grid-image):hover .etheme-product-grid-image img:first-of-type{transform:scale(1.07)}
.products :is(div,li,article):has(> .etheme-product-grid-image):hover .etheme-product-grid-image::after{opacity:1}
/* hover-swap 2nd image must overlay, not stack */
.etheme-product-grid-image img:nth-of-type(n+2),.etheme-product-grid-image img[class*="hover"],.etheme-product-grid-image [class*="hover"] img{
  position:absolute !important; inset:0; opacity:0; transition:opacity .5s var(--ease);
}
.products :is(div,li,article):has(> .etheme-product-grid-image):hover .etheme-product-grid-image :is(img:nth-of-type(n+2),img[class*="hover"]){opacity:1}

/* sale badge */
.products .onsale{
  position:absolute; top:14px; left:14px; right:auto; margin:0; z-index:3; min-height:0; min-width:0; line-height:1;
  padding:8px 14px; border-radius:30px; background:var(--blush); color:var(--g-dark);
  font:700 11px 'Manrope',sans-serif; letter-spacing:.1em; text-transform:uppercase;
}

/* text */
.products :is(.woocommerce-loop-product__title,.product-title,h2 a,h3 a){
  font:600 clamp(18px,1.5vw,22px)/1.22 'Cormorant Garamond',serif !important; text-transform:none !important;
  letter-spacing:.01em !important; color:var(--g-dark) !important;
  margin:20px 0 10px !important; padding:0 18px !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.45em; transition:color .25s;
}
.products .price{
  display:flex; justify-content:center; align-items:baseline; gap:8px; margin:0 0 8px;
  font:700 16px 'Manrope',sans-serif; color:var(--g-mid);
}
.products .price del{color:#9aa59c; font-weight:500; font-size:13px}
.products .price ins{text-decoration:none; color:var(--g-dark); font-size:17px}
.products :is(.sku_wrapper,.sku,.product-sku){
  font:500 10.5px 'Manrope',sans-serif !important; letter-spacing:.16em !important; text-transform:uppercase;
  color:#8a968d !important; margin:0 0 16px !important;
}

/* actions pinned to the bottom → all cards align */
.products :is(form.cart,.read-more-button,.product_type_variable){margin-top:auto}
.products form.cart{display:flex; justify-content:center; align-items:center; gap:10px; padding:0 16px}
.products .quantity{display:inline-flex; align-items:center; height:46px; overflow:hidden; background:var(--cream); border:1px solid var(--line); border-radius:40px}
.products .quantity input.qty{width:42px; border:0; background:transparent; text-align:center; font:600 14px 'Manrope',sans-serif; color:var(--ink)}
.products .quantity :is(.minus,.plus){width:32px; border:0; background:transparent; color:var(--g-mid); cursor:pointer}
.products :is(.add_to_cart_button,.single_add_to_cart_button){
  display:inline-flex; align-items:center; justify-content:center; width:46px !important; height:46px !important; padding:0 !important;
  border:0 !important; border-radius:50% !important; background:var(--g-dark) !important; color:#fff !important;
  box-shadow:0 8px 18px rgba(18,53,36,.25); transition:.3s var(--ease); cursor:pointer;
}
.products :is(.add_to_cart_button,.single_add_to_cart_button) *{color:#fff !important; fill:#fff !important}
.products :is(.add_to_cart_button,.single_add_to_cart_button):hover{background:var(--g-mid) !important; transform:scale(1.08) rotate(-6deg)}
.products :is(.read-more-button,.product_type_variable){
  display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:center; width:auto !important;
  height:46px !important; padding:0 26px !important; border-radius:40px !important; background:transparent !important;
  color:var(--g-dark) !important; border:0 !important; box-shadow:inset 0 0 0 1.5px var(--g-dark);
  font:700 12px 'Manrope',sans-serif !important; letter-spacing:.12em; text-transform:uppercase; transition:.3s var(--ease);
}
.products :is(.read-more-button,.product_type_variable):hover{background:var(--g-dark) !important; color:#fff !important}

/* list view (theme adds one of these classes) */
.products:is(.list-view,.products-list){grid-template-columns:1fr}
.products:is(.list-view,.products-list) :is(div,li,article):has(> .etheme-product-grid-image){flex-direction:row; align-items:center; text-align:left; gap:28px; padding:0 28px 0 0}
.products:is(.list-view,.products-list) .etheme-product-grid-image{width:230px; flex:0 0 230px}
.products:is(.list-view,.products-list) .price{justify-content:flex-start}

/* ---------- 5. QUICK VIEW BUTTON (on card) ---------- */
.etheme-product-grid-image :is(a,button,span,div)[class*="quick"],
.etheme-product-grid-image :is(a,button,span,div)[class*="show-quickly"]{
  position:absolute !important; top:auto !important; right:auto !important; left:50% !important; bottom:14px !important; z-index:4;
  transform:translate(-50%,12px) !important; opacity:0;
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:auto !important; max-width:calc(100% - 24px); height:42px !important; margin:0 !important; padding:0 22px !important; white-space:nowrap;
  background:rgba(252,251,247,.97) !important; color:var(--g-dark) !important;
  border:1px solid rgba(18,53,36,.12) !important; border-radius:40px !important;
  font:700 11px 'Manrope',sans-serif !important; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 8px 20px rgba(18,53,36,.16); transition:transform .4s var(--ease),opacity .3s,background .25s,color .25s;
}
.etheme-product-grid-image :is(a,button,span,div)[class*="quick"] *{color:inherit !important; fill:currentColor !important}
.products :is(div,li,article):has(> .etheme-product-grid-image):hover .etheme-product-grid-image :is(a,button,span,div)[class*="quick"],
.etheme-product-grid-image :is(a,button,span,div)[class*="quick"]:focus-visible{opacity:1; transform:translate(-50%,0) !important}
.etheme-product-grid-image :is(a,button,span,div)[class*="quick"]:hover{background:var(--g-dark) !important; color:#fff !important; border-color:var(--g-dark) !important}
@media (hover:none){
  .etheme-product-grid-image :is(a,button,span,div)[class*="quick"]{opacity:1; transform:translate(-50%,0) !important; height:38px !important; bottom:10px !important; padding:0 16px !important; font-size:10px !important}
}

/* ---------- 6. QUICK VIEW POPUP ---------- */
.mfp-bg{background:#0d2218 !important; opacity:.6 !important}
.mfp-container{padding:16px !important}
.mfp-content{
  width:100%; max-width:min(94vw,1200px); margin:0 auto; position:relative; background:var(--ivory); border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px rgba(13,34,24,.35); font-family:'Manrope',sans-serif; color:var(--ink);
}
.mfp-content > div,.mfp-content .product{background:transparent !important; margin:0 !important; max-width:100% !important; box-shadow:none !important}
.mfp-content div.product{display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:0}
.mfp-content div.product > *{width:100% !important; max-width:100% !important; float:none !important; margin:0 !important}
.mfp-content :is(.summary,.entry-summary,[class*="summary"],[class*="quick-view"]){position:static !important}

.mfp-content :is(.woocommerce-product-gallery,.images,.product-image){position:relative; background:linear-gradient(180deg,var(--ivory),var(--cream)); padding:0 !important; margin:0 !important; min-height:clamp(400px,44vw,700px) !important}
.mfp-content :is(.woocommerce-product-gallery__wrapper,.woocommerce-product-gallery__image,.flex-viewport,.swiper,.swiper-container,.swiper-wrapper,.swiper-slide,.slick-list,.slick-track,.owl-stage-outer,.owl-stage,.owl-item){
  width:100% !important; max-width:100% !important; height:100%; margin:0 !important; padding:0 !important;
}
.mfp-content :is(.flex-control-thumbs,.swiper-button-prev,.swiper-button-next,.slick-arrow){display:none !important}
.mfp-content :is(.woocommerce-product-gallery,.images,.product-image) img{position:absolute !important; inset:0; width:100% !important; height:100% !important; max-height:none !important; object-fit:cover}
.mfp-content .onsale{
  position:absolute; top:16px; left:16px; right:auto; z-index:5; min-height:0; min-width:0; line-height:1; padding:8px 14px; border-radius:30px;
  background:var(--blush); color:var(--g-dark); font:700 11px 'Manrope',sans-serif; letter-spacing:.1em; text-transform:uppercase;
}
.mfp-content :is(.summary,.entry-summary,[class*="summary"]){
  padding:clamp(28px,3.6vw,56px) !important; max-height:min(90vh,740px); overflow-y:auto;
  display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:var(--sage) transparent;
}
.mfp-content .product_title{font:600 clamp(30px,3.2vw,46px)/1.08 'Cormorant Garamond',serif !important; color:var(--g-dark); text-transform:none; margin:0 !important; padding-right:40px}
.mfp-content .price{display:flex; align-items:baseline; gap:10px; margin:0 !important; font:700 22px 'Manrope',sans-serif; color:var(--g-mid)}
.mfp-content .price del{color:#9aa59c; font-weight:500; font-size:15px}
.mfp-content .price ins{text-decoration:none; color:var(--g-dark)}
.mfp-content :is(.woocommerce-product-details__short-description,.summary > p){font:400 15px/1.75 'Manrope',sans-serif; color:#4d5a50; margin:0 !important; padding-bottom:16px; border-bottom:1px solid var(--line)}
.mfp-content form.cart{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 !important}
.mfp-content .quantity{display:inline-flex; align-items:center; height:50px; overflow:hidden; background:var(--cream); border:1px solid var(--line); border-radius:40px}
.mfp-content .quantity input.qty{width:46px; height:100%; border:0; background:transparent; text-align:center; font:600 15px 'Manrope',sans-serif; color:var(--ink); -moz-appearance:textfield}
.mfp-content .quantity :is(.minus,.plus){width:38px; height:100%; border:0; background:transparent; cursor:pointer; font-size:0 !important; color:var(--g-mid)}
.mfp-content .quantity .minus::before{content:"−"}
.mfp-content .quantity .plus::before{content:"+"}
.mfp-content .quantity :is(.minus,.plus)::before{font:500 20px/1 'Manrope',sans-serif}
.mfp-content .single_add_to_cart_button{
  flex:1 1 180px; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px !important; padding:0 30px !important;
  border:0 !important; border-radius:40px !important; background:var(--g-dark) !important; color:#fff !important;
  font:700 12px 'Manrope',sans-serif !important; letter-spacing:.14em; text-transform:uppercase; box-shadow:0 10px 22px rgba(18,53,36,.25); transition:.3s var(--ease);
}
.mfp-content .single_add_to_cart_button *{color:#fff !important; fill:#fff !important}
.mfp-content .single_add_to_cart_button:hover{background:var(--g-mid) !important; transform:translateY(-2px)}
.mfp-content .product_meta{display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid var(--line); font:500 12px/1.6 'Manrope',sans-serif; letter-spacing:.06em; color:#6b786e}
.mfp-content .product_meta > span{display:block; margin:0}
.mfp-content .product_meta a{color:var(--g-mid); text-decoration:none}
.mfp-content .product_meta a:hover{color:var(--g-dark); text-decoration:underline}

/* close button drawn in CSS (no missing-icon box) */
.mfp-close{
  position:absolute !important; top:14px !important; right:14px !important; z-index:20; width:42px !important; height:42px !important;
  border-radius:50% !important; background:var(--cream) !important; border:1px solid var(--line) !important;
  font-size:0 !important; line-height:0 !important; color:transparent !important; opacity:1 !important; cursor:pointer; transition:.25s var(--ease);
}
.mfp-close::before,.mfp-close::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:var(--g-dark); transform:translate(-50%,-50%) rotate(45deg)}
.mfp-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mfp-close:hover{background:var(--g-dark) !important; transform:rotate(90deg)}
.mfp-close:hover::before,.mfp-close:hover::after{background:#fff}
.mfp-close:focus-visible,.mfp-content :is(a,button):focus-visible,.elementor-inner-section select:focus-visible{outline:2px solid var(--g-mid); outline-offset:3px}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width:1199px){
  .products:not(.list-view):not(.products-list){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:991px){
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby){border-radius:30px; padding:14px 16px}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) > .elementor-container{flex-wrap:wrap}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column:last-child .elementor-widget-wrap{justify-content:flex-start}
  .mfp-content{max-width:760px}
}
@media (max-width:767px){
  .products:not(.list-view):not(.products-list){grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; padding:4px 0 24px !important}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby){border-radius:24px; padding:12px; margin:20px 0 22px}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column{width:100% !important; flex:1 1 100%}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-widget-wrap{flex-wrap:wrap}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) :is(.woocommerce-ordering,select.orderby,.woocommerce-ordering select){min-width:0 !important; width:100%}
  .elementor-inner-section:has(.woocommerce-ordering,select.orderby) .elementor-column:last-child .elementor-widget-wrap{justify-content:space-between}
  .products :is(div,li,article):has(> .etheme-product-grid-image){border-radius:18px; padding-bottom:16px; box-shadow:0 1px 2px rgba(18,53,36,.05),0 8px 18px rgba(18,53,36,.08)}
  .products :is(div,li,article):has(> .etheme-product-grid-image):hover{transform:none}
  .products :is(.woocommerce-loop-product__title,.product-title,h2 a,h3 a){font-size:17px !important; margin-top:12px !important; padding:0 10px !important}
  .products .price{font-size:14px; flex-wrap:wrap; gap:4px 8px}
  .products form.cart{flex-direction:column; gap:8px; padding:0 10px}
  .products .quantity{width:100%; justify-content:space-between}
  .products .quantity input.qty{flex:1}
  .products :is(.add_to_cart_button,.single_add_to_cart_button){width:100% !important; height:44px !important; border-radius:40px !important}
  .products:is(.list-view,.products-list) :is(div,li,article):has(> .etheme-product-grid-image){flex-direction:column; padding:0 0 16px; text-align:center}
  .products:is(.list-view,.products-list) .etheme-product-grid-image{width:100%; flex:none}
  .etheme-product-grid-image :is(a,button,span,div)[class*="quick"]{height:34px !important; padding:0 12px !important; font-size:9.5px !important; letter-spacing:.08em; bottom:8px !important}

  /* popup on phones: single column, whole popup scrolls */
  .mfp-container{padding:10px !important}
  .mfp-content{max-height:calc(100dvh - 20px); overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius:18px; max-width:100%}
  .mfp-content div.product{display:block !important; height:auto !important; min-height:0 !important}
  .mfp-content div.product > *{height:auto !important; min-height:0 !important}
  .mfp-content :is(.woocommerce-product-gallery,.images,.product-image,.woocommerce-product-gallery__wrapper,.woocommerce-product-gallery__image,.flex-viewport,.swiper,.swiper-container,.swiper-wrapper,.swiper-slide,.slick-list,.slick-track,.owl-stage-outer,.owl-stage,.owl-item){
    height:auto !important; min-height:0 !important; max-height:none !important; padding:0 !important; margin:0 !important; transform:none !important; aspect-ratio:auto !important; display:block;
  }
  .mfp-content :is(.woocommerce-product-gallery,.images,.product-image) img{position:static !important; display:block; width:100% !important; height:auto !important; aspect-ratio:4/3; max-height:34vh !important; object-fit:contain; background:linear-gradient(180deg,var(--ivory),var(--cream))}
  .mfp-content :is(.summary,.entry-summary,[class*="summary"]){max-height:none !important; overflow:visible !important; padding:18px 18px 26px !important; gap:12px; margin:0 !important}
  .mfp-content .product_title{font-size:28px !important}
  .mfp-content .price{font-size:18px}
  .mfp-content form.cart{flex-direction:column; align-items:stretch}
  .mfp-content .quantity{width:100%; justify-content:space-between}
  .mfp-content .quantity input.qty{flex:1}
  .mfp-content .single_add_to_cart_button{width:100%; flex:none}
  .mfp-close{top:10px !important; right:10px !important; width:38px !important; height:38px !important; background:rgba(252,251,247,.95) !important}
}
@media (max-width:380px){
  .products{gap:12px 8px !important}
  .products :is(.sku_wrapper,.sku){font-size:9.5px !important; letter-spacing:.08em !important}
  .mfp-content .product_title{font-size:25px !important}
}
@media (min-width:768px) and (max-height:620px){
  .mfp-content{max-height:calc(100dvh - 20px); overflow-y:auto}
  .mfp-content :is(.summary,.entry-summary,[class*="summary"]){max-height:none !important; overflow:visible !important}
  .mfp-content :is(.woocommerce-product-gallery,.images,.product-image){min-height:300px !important}
}
@media (prefers-reduced-motion:reduce){
  .products *,.mfp-content *,.mfp-close,.elementor-inner-section select{transition:none !important}
}
/* =====================================================
   TWILIGHT – PRODUCT CARD SHAPE (paste at the very bottom)
   Card = the element that directly holds .etheme-product-grid-image
   ===================================================== */

:is(div,li,article):has(> .etheme-product-grid-image){
  position:relative !important;
  display:flex !important; flex-direction:column !important;
  background:#fff !important;
  border:1px solid rgba(18,53,36,.12) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  padding:0 0 22px !important;
  margin:0 !important;
  text-align:center;
  box-shadow:0 1px 2px rgba(18,53,36,.05), 0 14px 32px rgba(18,53,36,.10) !important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .3s !important;
}
:is(div,li,article):has(> .etheme-product-grid-image):hover{
  transform:translateY(-8px) !important;
  border-color:rgba(49,92,58,.38) !important;
  box-shadow:0 4px 8px rgba(18,53,36,.06), 0 30px 55px rgba(18,53,36,.18) !important;
}

/* image fills the top of the card, no inner rounding */
:is(div,li,article):has(> .etheme-product-grid-image) > .etheme-product-grid-image{
  border-radius:0 !important; margin:0 !important;
}

/* even gaps between cards */
.products{gap:clamp(18px,2.2vw,32px) clamp(14px,1.8vw,26px) !important; padding:6px 6px 30px !important}

@media (max-width:767px){
  :is(div,li,article):has(> .etheme-product-grid-image){
    border-radius:18px !important; padding-bottom:16px !important;
    box-shadow:0 1px 2px rgba(18,53,36,.05), 0 8px 18px rgba(18,53,36,.09) !important;
  }
  :is(div,li,article):has(> .etheme-product-grid-image):hover{transform:none !important}
}/* End custom CSS */