/* ============================================================
   Cliton — unified WooCommerce / Shoptimizer skin (coffee)
   Loaded by the plugin; Customizer > Additional CSS can stay EMPTY.
   NON-DESTRUCTIVE: only colour / border / radius / shadow / hover —
   no layout, width, position or display changes.

   >>>>>  AI / CLONE-REBRAND REFERENCE  <<<<<
   Every brand-specific value is tagged  [AI-EDIT]  and lives in :root.
   Rules below only reference these tokens, so rebranding a clone = edit
   :root only. --coffee / --accent also inherit the Elementor global brand
   colours automatically (the hex values are just fallbacks).
   ============================================================ */

:root{
	/* =====  [AI-EDIT] brand tokens — change these per brand  ===== */
	--coffee:   var(--e-global-color-primary,#AD3B60); /* [AI-EDIT] main brand colour              */
	--accent:   var(--e-global-color-accent,#7A2444);  /* [AI-EDIT] accent / sale / highlights      */
	--rating:   var(--e-global-color-primary,#AD3B60);                               /* [AI-EDIT] review stars (gold, = theme)    */
	--espresso: var(--coffee);                         /* [AI-EDIT] prices/amounts = brand main     */
	--ink:      #2e241c;                               /* [AI-EDIT] strong heading text             */
	--muted:    #7a6e64;                               /* [AI-EDIT] secondary text                  */
	--tan:      #d8c7b6;                               /* [AI-EDIT] soft line / thumbnail border    */
	--line:     #ece6df;                               /* [AI-EDIT] light divider                   */
	--cream:    #F4EEE8;                               /* [AI-EDIT] light tint background           */
	--btn-text: #ffffff;                               /* [AI-EDIT] text on coloured buttons        */
	--radius-box:  20px;                               /* [AI-EDIT] big-box roundness               */
	--radius-card: 12px;                               /* [AI-EDIT] card / button roundness         */
	--radius-input:10px;                               /* [AI-EDIT] input roundness                 */
	--cat-title-size:32px;                             /* [AI-EDIT] shop/category H1 size            */
	--pdp-main-h:560px;                                /* [AI-EDIT] product main-image max height    */
	--footer-text:rgba(255,255,255,.90);               /* [AI-EDIT] footer body text on dark footer  */
	--footer-head:#ffffff;                             /* [AI-EDIT] footer headings / hover          */

	/* role mappings (reference the tokens above; normally no need to edit) */
	--shop-outline:      var(--coffee);
	--shop-outline-soft: var(--tan);
	--shop-sale-price:   var(--accent);
	--shop-amount:       var(--espresso);
	--shop-info-bg:      var(--coffee);
	--shop-img-overlay:  rgba(58,42,30,.32);
	--shop-input-shadow: rgba(58,42,30,.18);
}

/* ============================================================
   GLOBAL — buttons & form fields (all WooCommerce pages)
   ============================================================ */
/* Primary CTAs in the brand colour */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce .add_to_cart_button,
.woocommerce .checkout-button, .woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-account .woocommerce-Button, .wc-block-components-button,
.woocommerce-form-track-order button, .woocommerce-form-track-order .button{
	background:var(--coffee) !important;
	border:1px solid var(--coffee) !important;
	color:var(--btn-text) !important;
	border-radius:var(--radius-card) !important;
	font-weight:700;
	box-shadow:none !important;
	transition:filter .15s ease, transform .1s ease;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce .add_to_cart_button:hover,
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover{ filter:brightness(1.06) !important; }
.woocommerce .button.alt:active, .woocommerce .single_add_to_cart_button:active,
.woocommerce #place_order:active{ transform:translateY(1px); }

/* Secondary / ghost buttons in a soft tint */
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not(.checkout-button),
.woocommerce button.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt){
	background:var(--cream) !important;
	color:var(--coffee) !important;
	border:1px solid var(--line) !important;
	border-radius:var(--radius-card) !important;
	font-weight:600;
	box-shadow:none !important;
}

/* Inputs / selects — consistent radius + brand focus ring */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .input-text, .woocommerce input[type="text"], .woocommerce input[type="email"],
.woocommerce input[type="tel"], .woocommerce input[type="password"], .woocommerce select, .woocommerce textarea{
	border-radius:var(--radius-input) !important;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus,
.woocommerce input[type="text"]:focus, .woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus, .woocommerce input[type="password"]:focus,
.woocommerce select:focus, .woocommerce textarea:focus{
	border-color:var(--coffee) !important;
	box-shadow:0 0 0 3px var(--shop-input-shadow) !important;
	outline:0 !important;
}

/* ============================================================
   SHOP / CATEGORY ARCHIVE
   ============================================================ */
.woocommerce-loop-product__title{
	min-height:40px;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
	overflow:hidden; text-overflow:ellipsis;
}
ul.products li.product .price{ margin-bottom:0; }
span.onsale{ display:none; }                 /* hide sale flashes site-wide */
header.woocommerce-products-header{ margin-bottom:0; }
nav.woocommerce-breadcrumb{ font-size:14px; }
/* category / shop H1 — smaller, was oversized */
.woocommerce-products-header__title, .woocommerce-products-header__title.page-title{ font-size:var(--cat-title-size) !important; line-height:1.15; }
@media (max-width:600px){ .woocommerce-products-header__title{ font-size:calc(var(--cat-title-size) * .8) !important; } }
.woocommerce-pagination{ visibility:hidden; }
@media (max-width:990px){ .shoptimizer-sorting .woocommerce-pagination{ display:none !important; } }
/* card polish */
ul.products li.product img{ border-radius:var(--radius-card); }
ul.products li.product{ transition:transform .15s ease; }
ul.products li.product:hover{ transform:translateY(-3px); }
/* native Load More button + progress bar */
#shoptimizer-load-more-btn{
	background:var(--coffee) !important; border-color:var(--coffee) !important;
	color:var(--btn-text) !important; border-radius:var(--radius-card) !important; font-weight:700;
}
#shoptimizer-load-more-btn:hover{ filter:brightness(1.06); }
.load-more-progress-bar{ background:var(--coffee) !important; }

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.single-product #page div.product .summary{
	position:relative;
}
.summary h1{ padding-right:10px; }
div.product .woocommerce-product-rating{ margin-bottom:1em; clear:both; }
.woocommerce-product-details__short-description{ clear:both; line-height:1.5; }
.product-attributes{ padding-top:0; }
.change.price.format{ display:grid; }
.price ins{ font-size:20px; font-weight:600; color:var(--shop-sale-price) !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--espresso); }
/* gallery thumbnails */
div.product .woocommerce-product-gallery .flex-control-thumbs{ margin-left:0; text-align:left; }
div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{ border:1px solid var(--shop-outline-soft); }
/* CommerceKit main gallery — cap tall images so the stage height stays consistent (no crop) */
.cgkit-single-gallery .cg-main-swiper .swiper-slide{ text-align:center; }
.cgkit-single-gallery .cg-main-swiper .swiper-slide img, .cgkit-single-gallery .cg-psp-gallery img{
	max-height:var(--pdp-main-h) !important; width:auto !important; height:auto !important;
	display:inline-block; margin-left:auto !important; margin-right:auto !important; object-fit:contain;
}
/* review stars in accent */
.woocommerce .star-rating span::before, .woocommerce p.stars a::before, .woocommerce p.stars a:hover ~ a::before{ color:var(--rating); }
/* tabs — active state in brand colour */
.woocommerce-tabs ul.tabs li.active a{ color:var(--coffee); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--coffee); }
/* related / upsell headings */
.woocommerce .related.products > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2{ color:var(--ink); }

/* ============================================================
   CART
   ============================================================ */
#page table.cart.woocommerce-cart-form__contents td.product-price{ display:table-cell; min-width:200px; }
.cart_totals .shop_table tr.shipping th{ padding-bottom:0; display:none; }
.woocommerce-cart table.cart, .woocommerce-cart .cart-collaterals .cart_totals{ border-radius:var(--radius-card); }
.woocommerce-cart .cart_totals h2{ color:var(--ink); }
.woocommerce .order-total .amount, .cart_totals .order-total .amount{ color:var(--espresso); font-weight:800; }
.woocommerce a.remove:hover{ background:var(--accent) !important; color:var(--on-accent,#fff) !important; }
.shoptimizer-mini-cart-wrap .widget_shopping_cart .amount{ color:var(--shop-amount); }
/* mini-cart drawer buttons — ID-level specificity beats theme #fff/#333 default.
   Checkout = a.button.checkout ; View cart = a.button:not(.checkout) (real class is .wc-forward, NOT .cart) */
#shoptimizerCartDrawer .widget_shopping_cart a.button.checkout,
.shoptimizer-mini-cart-wrap .widget_shopping_cart a.button.checkout{
	background:var(--coffee) !important; border:1px solid var(--coffee) !important; color:var(--on-main,#fff) !important;
}
#shoptimizerCartDrawer .widget_shopping_cart a.button.checkout:hover{ filter:brightness(1.06) !important; background:var(--coffee) !important; color:var(--on-main,#fff) !important; }
#shoptimizerCartDrawer .widget_shopping_cart a.button:not(.checkout),
.shoptimizer-mini-cart-wrap .widget_shopping_cart a.button:not(.checkout){
	background:#fff !important; color:var(--coffee) !important; border:1.5px solid var(--coffee) !important;
}
#shoptimizerCartDrawer .widget_shopping_cart a.button:not(.checkout):hover{ background:var(--cream) !important; color:var(--coffee) !important; }

/* ============================================================
   CHECKOUT  (colour only — layout untouched)
   ============================================================ */
.woocommerce-checkout h3, .woocommerce-checkout #order_review_heading{ color:var(--ink); }
.woocommerce-checkout #order_review .order-total .amount{ color:var(--espresso); font-weight:800; }
.woocommerce-checkout #payment{ background:transparent; }
.woocommerce-checkout #payment ul.payment_methods{ border-radius:var(--radius-card); }

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--coffee); font-weight:700; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active{ border-color:var(--coffee); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){ color:var(--coffee); }
.woocommerce table.my_account_orders .button, .woocommerce-orders-table .button{ font-weight:600; }

/* ============================================================
   NOTICES / MESSAGES
   ============================================================ */
.woocommerce-message{ border-top-color:var(--coffee) !important; border-radius:var(--radius-input); }
.woocommerce-message::before{ color:var(--coffee); }
.woocommerce-error{ border-top-color:var(--accent) !important; border-radius:var(--radius-input); }
.woocommerce-info, .woocommerce-noreviews, p.no-comments{ background-color:var(--shop-info-bg); color:var(--on-main,#fff); border-radius:var(--radius-input); }
.woocommerce-info a, .woocommerce-noreviews a, p.no-comments a{ color:var(--on-main,#fff); text-decoration:underline; }

/* ============================================================
   ORDER RECEIVED / THANK YOU
   ============================================================ */
.woocommerce-order .woocommerce-order-overview, .woocommerce-order .woocommerce-table--order-details{
	border-radius:var(--radius-card);
}
.woocommerce-order .woocommerce-thankyou-order-received{ color:var(--ink); font-weight:700; }
.woocommerce-order .woocommerce-order-overview li strong{ color:var(--espresso); }

/* ============================================================
   SIDEBAR / SEARCH / NAV
   ============================================================ */
div#secondary{ border:2px solid var(--shop-outline); border-radius:10px; padding:15px; }
#secondary input[type="search"], .site-search form input[type="search"]{ box-shadow:0 1px 2px 0 var(--shop-input-shadow); }
.site-search input[type="search"], .site-search input[type="text"]{ padding:.7em .7em; line-height:1; border-radius:var(--radius-box) !important; }
.secondary-navigation .icon-wrapper svg{ stroke:var(--shop-outline); }
.secondary-navigation .menu li:not(.ri) a{ font-weight:600; }

/* ============================================================
   FOOTER  (dark brand-colour footer) — colour only, non-destructive
   If these selectors do not match your (Elementor) footer, send me the
   footer section's class/ID and I'll target it precisely.
   ============================================================ */
.site-footer, #colophon, .footer-widgets, .elementor-location-footer{ }
.site-footer p, .site-footer li, .site-footer address,
#colophon p, #colophon li, .footer-widgets p, .footer-widgets li,
.elementor-location-footer p, .elementor-location-footer li{ color:var(--footer-text); }
.site-footer a, #colophon a, .footer-widgets a, .elementor-location-footer a{ color:var(--footer-text); text-decoration:none; }
.site-footer a:hover, #colophon a:hover, .footer-widgets a:hover, .elementor-location-footer a:hover{ color:var(--footer-head); }
.site-footer .widget-title, #colophon .widget-title,
.footer-widgets .widget-title, .elementor-location-footer .elementor-heading-title{ color:var(--footer-head); }
/* Brighten every footer heading (incl. the "What customers are saying" review
   sub-heading, whatever tag/class it uses) so it isn't lost on the dark footer. */
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6,
#colophon h2, #colophon h3, #colophon h4, #colophon h5, #colophon h6,
.footer-widgets h2, .footer-widgets h3, .footer-widgets h4, .footer-widgets h5, .footer-widgets h6,
.elementor-location-footer h2, .elementor-location-footer h3, .elementor-location-footer h4,
.elementor-location-footer h5, .elementor-location-footer h6,
.elementor-location-footer .elementor-heading-title{ color:var(--footer-head) !important; }
/* STOPGAP white logo: uncomment to whiten a dark footer logo until you upload a
   real white version. Note: this flattens multi-colour logos (loses the bean accent). */
/* .site-footer .custom-logo, #colophon .custom-logo, .footer-widgets img,
   .elementor-location-footer .elementor-widget-theme-site-logo img{ filter:brightness(0) invert(1); } */

/* ============================================================
   MISC
   ============================================================ */
address,p,table{ margin:0 0 .3rem; }
body .image-feature a::before{ background-color:var(--shop-img-overlay); }

/* ============================================================
   Container background follows the single SSB widget inside it.
   Each SSB section is marked [data-ssb] with .bg-white / .bg-tint /
   .bg-main. The wrapping Elementor container adopts the same colour
   so the band is full-width (no colour box inside a white container).
   Non-destructive: pure CSS, matches the widget's chosen Background.
   ============================================================ */
/* Container adopts the background of the (single) widget inside it.
   Matches any SSB widget section (.bg-white/.bg-tint/.bg-main) at any depth —
   works for page, hot, brand and comp widgets, with or without data-ssb.
   !important so it wins over a container's own Elementor background on existing pages. */
.e-con:has(.bg-main),.elementor-section:has(.bg-main){ background-color:var(--coffee)!important; }
.e-con:has(.bg-tint),.elementor-section:has(.bg-tint){ background-color:var(--tint,color-mix(in srgb,var(--coffee) 12%,#fff))!important; }
.e-con:has(.bg-white),.elementor-section:has(.bg-white){ background-color:#fff!important; }
/* full-bleed brand widgets that colour themselves (no bg-* class) — make their container match too */
.e-con:has(.shoph-cta),.elementor-section:has(.shoph-cta){ background-color:var(--main)!important; }

/* ---- Buttons --------------------------------------------------------------
   Rule: light background -> brand bg + white text (default below);
         dark/brand background -> white bg + brand text (invert, so the button
         doesn't disappear into a same-colour section). */
.bg-main .btn,.bg-deep .btn,.shopbn-split.tmain .btn,.shopbn-card.cmain .btn,
.bg-main .cd-btn,.bg-main .cta .btn,.bg-main .co,.bg-main .buy,.bg-main .bm-btn,.bg-main .mpg-more,
.bg-deep .cd-btn,.bg-deep .co,.bg-deep .buy,.bg-deep .mpg-more{
	background:var(--on-main,#fff)!important;color:var(--coffee)!important;border-color:var(--on-main,#fff)!important;
}
/* WooCommerce shop / category / product / cart / checkout buttons -> brand (light pages) */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .button.alt,
.wc-block-components-button,.wp-element-button,
.single_add_to_cart_button,button.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,#place_order,.woocommerce #respond input#submit{
	background-color:var(--coffee)!important;color:var(--on-main,#fff)!important;border-color:var(--coffee)!important;
}
/* Prices: current price = brand; struck-through old price = grey */
.woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce .price ins,.woocommerce .price .amount{ color:var(--coffee); }
.woocommerce .price del,.woocommerce del,.woocommerce del .amount{ color:var(--mute-soft,#999)!important;text-decoration:line-through; }

/* ============================================================
   HOME COMP HEADER — Shoptimizer "header-5" (Logo / Search / Secondary / Cart).
   Purely layout-based: applies whenever the header-5 layout is active — whether
   set by the plugin (Home Comp) OR manually in the Customizer. Not tied to any
   plugin selection. Other layouts (header-4 etc.) are unaffected.
   Fixes pale icons / search border using the brand main colour.
   ============================================================ */
body.header-5 .site-search .dgwt-wcas-search-input,
body.header-5 .site-search input[type="search"]{
	border:1.5px solid color-mix(in srgb, var(--main) 45%, #fff)!important;
}
body.header-5 .site-search .dgwt-wcas-search-input:focus,
body.header-5 .site-search input[type="search"]:focus{
	border-color:var(--main)!important;
	box-shadow:0 0 0 3px color-mix(in srgb, var(--main) 16%, #fff)!important;
}
body.header-5 .site-search .dgwt-wcas-ico-magnifier,
body.header-5 .site-search .dgwt-wcas-search-submit svg,
body.header-5 .site-search .dgwt-wcas-search-submit svg path{
	fill:var(--main)!important;
}
/* My Account icon in the branding row */
body.header-5 .shoptimizer-myaccount a,
body.header-5 .shoptimizer-myaccount a svg{
	color:var(--main)!important;stroke:var(--main)!important;opacity:1!important;
}
/* Secondary nav (My Account / Faq / Checkout): labels dark, icons brand */
body.header-5 .secondary-navigation a{
	color:var(--ink)!important;font-weight:600;opacity:1!important;
}
body.header-5 .secondary-navigation a:hover{
	color:var(--main)!important;
}
/* Hide all secondary-menu icons AND remove the 35px icon space the theme reserves
   above each label (.secondary-navigation .menu li:not(.ri) a{padding-top:35px}). */
body.header-5 .secondary-navigation .icon-wrapper{display:none!important;}
body.header-5 .secondary-navigation .menu li a,
body.header-5 .secondary-navigation .menu li:not(.ri) a{padding-top:0.7em!important;}
/* Cart contents: dark text, brand count bubble */
body.header-5 .site-header-cart .cart-contents,
body.header-5 .site-header-cart .amount,
body.header-5 .site-header-cart .woocommerce-Price-amount{
	color:var(--ink)!important;
}
body.header-5 .site-header-cart .count{
	background:var(--main)!important;color:var(--on-main,#fff)!important;border-color:var(--main)!important;
}

/* ============================================================
   Home Comp header (header-5) — add depth so it lifts off the page.
   Shadow goes on the full-width nav row (.col-full-nav, below the header),
   so the whole header block casts a soft drop shadow onto the content.
   Hairlines separate header / nav / page. Desktop only (mobile nav is a drawer).
   ============================================================ */
@media(min-width:993px){
	body.header-5 .site-header{position:relative;z-index:7;}
	body.header-5 .col-full-nav{
		position:relative;z-index:6;
		border-top:1px solid color-mix(in srgb, var(--main) 8%, #fff);
		border-bottom:1px solid color-mix(in srgb, var(--main) 12%, #fff);
		box-shadow:0 8px 20px -10px rgba(0,0,0,.18);
	}
	/* keep the soft shadow when the nav sticks on scroll */
	body.header-5 .col-full-nav.is_stuck{box-shadow:0 6px 18px -8px rgba(0,0,0,.16);}
}

/* ============================================================
   Shop / category top area — make the whole stack (breadcrumb → title →
   Filter → sort row) very compact so products start higher up the page.
   ============================================================ */
/* breadcrumb: modest breathing room (on the shop/category pages it gets pulled
   into .ssb-arch-titlerow where padding is reset to 0, so this only spaces the
   breadcrumb on product / other pages where it sits on its own). */
.woocommerce-breadcrumb{padding-top:.85rem!important;padding-bottom:.55rem!important;margin-bottom:0!important;}
/* page title: smaller + tight margins */
h1.woocommerce-products-header__title,
.woocommerce-products-header__title.page-title{
	font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)!important;
	line-height:1.15!important;margin:.15rem 0 .35rem!important;
}
/* title block band */
header.woocommerce-products-header{margin-bottom:.5em!important;}
header.woocommerce-products-header .term-description{padding:.8em 1.4em!important;}
/* our Filter bar: hug the sort row */
.ssbf{margin:0 0 .5rem!important;}
/* sort + result-count row: tight top & bottom */
.shoptimizer-sorting{margin-top:.2rem!important;margin-bottom:.7rem!important;}

/* ---- Row 1: page title + breadcrumb on ONE line ---- */
.ssb-arch-titlerow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;margin:.3rem 0 .5rem;}
.ssb-arch-titlerow .woocommerce-products-header__title,
.ssb-arch-titlerow h1.woocommerce-products-header__title{margin:0!important;flex:0 1 auto;}
.ssb-arch-titlerow .woocommerce-breadcrumb{margin:0 0 0 auto!important;padding:0!important;font-size:13px;white-space:nowrap;}

/* ---- Row 2: Filter button + Sort by (left) + result count (right) on ONE line ---- */
.shoptimizer-sorting{justify-content:flex-start!important;}
.shoptimizer-sorting .ssbf{order:-1;margin:0 16px 0 0!important;position:relative;}
.shoptimizer-sorting .ssbf .ssbf-panel{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(700px,92vw);margin-top:0!important;box-shadow:0 10px 30px rgba(0,0,0,.12);}
.shoptimizer-sorting .woocommerce-result-count{margin-left:auto!important;}
@media(max-width:992px){
	.shoptimizer-sorting .ssbf{grid-column:1/-1;order:-1;margin:0 0 8px!important;}
	.shoptimizer-sorting .ssbf .ssbf-panel{position:static;width:auto;}
}

/* ============================================================
   Footer on mobile — keep TWO columns instead of collapsing to one.
   The theme drops .site-footer .col-full to a single column at <=768px;
   override it back to two (it is already a 2-col grid at <=992px).
   ============================================================ */
@media(max-width:768px){
	.below-content .col-full,
	.site-footer .col-full{
		grid-template-columns:repeat(2,1fr)!important;
		column-gap:1.4rem;
	}
}

/* ============================================================
   Single product gallery — keep the main image a CONSISTENT height so
   switching between images of different aspect ratios doesn't make the
   gallery jump/resize. Every image fits inside one fixed square box.
   ============================================================ */
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery .flex-viewport{height:auto!important;}
.single-product div.product .woocommerce-product-gallery__image{aspect-ratio:1/1;overflow:hidden;}
.single-product div.product .woocommerce-product-gallery__image a{display:block;width:100%;height:100%;}
.single-product div.product .woocommerce-product-gallery__image img{
	width:100%!important;height:100%!important;object-fit:contain;background:#fff;
}