/* HHC Header Modern – scoped to the template-part header */
.hhc-header-modern{
  position: sticky; top: 0; z-index: 1000;
}

.wc-blocks-pattern-header-essential wc-blocks-header-pattern{
	background: rgba(20,20,22,0.60);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 6px 24px rgba(0,0,0,0.18);
	overflow: hidden !important;
}

/* prevent horizontal scroll globally */
html, body, .wp-site-blocks{ overflow-x: hidden; }

/* keep the header visually bounded without overflow side-effects */
/*header.wp-block-template-part{ clip-path: inset(0); }  /* acts like a mask */


.wp-block-navigation__responsive-close{
	padding: 0px 0px 0px 0px !important;
}

.top_menu_pp{
	padding-right:10rem !important;
}

.top_menu_pp ul{
	padding-right:0rem !important;
}

@media only screen and (max-width: 1010px) {
	.top_menu_pp{
		padding-right:10% !important;
	}
}


/* Liquid glass for the search bar */
header.wp-block-template-part .wp-block-search__inside-wrapper{
  position: relative;
  overflow: hidden;
  background: rgba(12,12,14,0.0) !important; /* darker glass base */
  border: 0px solid rgba(255,255,255,0.0) !important;
  border-radius: 999px !important;
  /*box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 28px rgba(0,0,0,0.20);*/
}

@media only screen and (max-width: 760px) {
header.wp-block-template-part .wp-block-search__inside-wrapper{
  position: relative;
  overflow: hidden;
  background: rgba(12,12,14,0.5) !important; /* darker glass base */
  border: 0px solid rgba(255,255,255,0.2) !important;
  border-radius: 999px !important;
  /*box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 28px rgba(0,0,0,0.20);*/
}
}
/* soft specular highlights + gentle cyan tint */
header.wp-block-template-part .wp-block-search__inside-wrapper::before,
header.wp-block-template-part .wp-block-search__inside-wrapper::after{
  content:"";
  position:absolute; inset:-20%;
  pointer-events:none;
  border-radius: 999px;
}

/* highlight layers */
header.wp-block-template-part .wp-block-search__inside-wrapper::before{
  background:
    radial-gradient(160px 90px at 15% 25%, rgba(255,255,255,0.14), transparent 30%),
    radial-gradient(220px 140px at 85% 115%, rgba(255,255,255,0.08), transparent 30%),
    linear-gradient(120deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 35%);
  filter: blur(8px);
}

/* slow “liquid” sheen */
header.wp-block-template-part .wp-block-search__inside-wrapper::after{
  background:
    radial-gradient(45% 35% at 30% 30%, rgba(78,192,218,0.18), transparent 30%),
    radial-gradient(35% 30% at 70% 70%, rgba(255,255,255,0.08), transparent 30%);
  animation: hhcGlassFlow 12s ease-in-out infinite alternate;
  mix-blend-mode: screen; /* gentle lightening */
  filter: blur(10px);
}

@keyframes hhcGlassFlow{
  0%   { transform: translate(-6%, -6%) rotate(0.001deg); }
  100% { transform: translate(6%, 6%)  rotate(0.001deg); }
}

/* Focus state: crisper edge + faint glow */
header.wp-block-template-part .wp-block-search__inside-wrapper:focus-within{
  border-color: #4EC0DA !important;
  box-shadow:
    0 0 0 3px rgba(78,192,218,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.22);
}

/* Input text/placeholder contrast */
header.wp-block-template-part .wp-block-search__input::placeholder{ color:#a8b0b4 !important; }
header.wp-block-template-part .wp-block-search__input{ color:#f2f4f5 !important; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  header.wp-block-template-part .wp-block-search__inside-wrapper::after{
    animation: none;
  }
}

header.wp-block-template-part .wp-block-search__inside-wrapper:focus-within{
	border-color: transparent !important;
	box-shadow: 0 0 0 3px rgba(78, 192, 218, 0), inset 0 1px 0 rgba(255, 255, 255, 0), 0 10px 28px rgba(0, 0, 0, 0) !important;
}

input:focus{
  outline: none;
}
.wp-block-navigation:not(.has-background .mobile_main_menu_pp) .wp-block-navigation__submenu-container{
	padding:10px 20px 20px 20px !important;
	background-color: rgba(78, 192, 218, 0.85) !important;	
	backdrop-filter: blur(12px)!important;
	-webkit-backdrop-filter: blur(12px)!important;
	border-bottom: 1px solid rgba(255,255,255,0.18)!important;
	
	/*-webkit-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.25);
	box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.25);*/
	
	box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) -10px -10px 100px inset;

	border-bottom-left-radius: 25px !important;
	border-bottom-right-radius: 25px !important;
}

.wp-block-navigation:not(.mobile_main_menu_pp) .wp-block-navigation-item{
	background-color: rgba(78, 192, 218, 0.0) !important;
	transition: all 0.5s ease-out !important;
	border-radius: 10px;
	margin:2px 0px;
}

.wp-block-navigation:not(.mobile_main_menu_pp) .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--ti-a-hover) !important;
    border-radius: 10px;
	background-color: rgba(68, 68, 68, 0.75) !important;
	transition: all 1s ease-out !important;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25), rgba(0, 255, 255, 0.15) -2px -2px 50px inset;
}

.wc-blocks-pattern-header-essential{
	background: rgba(12,12,14,0.38) !important; /* darker glass base */
	border: 1px solid rgba(255,255,255,0.12) !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	box-shadow:
		inset 0px 20px 50px rgba(255,255,255,0.1),
		0 10px 28px rgba(0,0,0,0.20);
	overflow: hidden !important;
}
@media (max-width: 840px){
.wc-blocks-pattern-header-essential < *{
	background: rgba(12,12,14,0.38) !important; /* darker glass base */
	backdrop-filter: blur(514px) !important;
	-webkit-backdrop-filter: blur(514px) !important;
	}
}

.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
	/*background-color: rgb(78, 192, 218, 0.5) !important;*/
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button{
	margin:auto !important;
}



/* ===========================
   Product Image Gallery – Liquid Glass
   Scope: single product gallery block only
   =========================== */
:root{ --hhc-cyan:#4EC0DA; }

.wp-block-woocommerce-product-image-gallery .woo-product-gallery-slider.images{
  position: relative;
  border-radius: 18px;
  overflow: hidden;                 /* keeps effects tidy */
  background: rgba(18,18,20,0.0);
  border: 0px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0px 0 rgba(255,255,255,0.0),
    0 14px 34px rgba(0,0,0,0.0);
}

/* subtle moving sheen inside the glass */
.wp-block-woocommerce-product-image-gallery .woo-product-gallery-slider.images::after{
  content:"";
  position:absolute; inset:-25%;
  background:
    radial-gradient(40% 30% at 25% 20%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(35% 30% at 70% 80%, rgba(78,192,218,0.16), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(12px);
  pointer-events:none;
  animation: hhcGlassDrift 16s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .wp-block-woocommerce-product-image-gallery .woo-product-gallery-slider.images::after{ animation: none; }
}
@keyframes hhcGlassDrift{
  0%   { transform: translate(-6%, -4%) rotate(.001deg); }
  100% { transform: translate(6%, 4%)  rotate(.001deg); }
}

/* Main image area */
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image{
  border-radius: 14px;
  overflow: hidden;
}
.woocommerce div.product div.images img{
  border-radius: 14px;
  overflow: hidden;
}

.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  width: 100%; height: auto; display:block;
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(1.02);
}
/* punchier hover zoom */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-current img:hover{
  transform: scale(1.05);
  filter: saturate(1.08) contrast(1.02);
}

/* Dots (if enabled) -> clean pills with cyan active */
.wp-block-woocommerce-product-image-gallery .wpgs-dots{
  bottom: 8px;
}
.wp-block-woocommerce-product-image-gallery .wpgs-dots li{
  margin: 0 4px;
}
.wp-block-woocommerce-product-image-gallery .wpgs-dots button{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,0.35);
  border: 0;
}
.wp-block-woocommerce-product-image-gallery .wpgs-dots .slick-active button{
  background: var(--hhc-cyan);
}

/* Thumbnail strip container – glass rail */
.wp-block-woocommerce-product-image-gallery .wpgs-nav .slick-list{
  margin-top: 10px;
  padding: 6px !important;
  border-radius: 12px;
  background: rgba(18,18,20,0.30);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Thumbs */
.wp-block-woocommerce-product-image-gallery .wpgs-nav img{
  border-radius: 10px;
  display:block;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
  transition: transform .25s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  opacity: .85;
}
.wp-block-woocommerce-product-image-gallery .wpgs-nav .slick-current img,
.wp-block-woocommerce-product-image-gallery .wpgs-nav img:hover{
  opacity: 1;
  border-color: var(--hhc-cyan);
  box-shadow: 0 6px 18px rgba(78,192,218,0.24);
  transform: translateY(-2px);
}

/* Lightbox icon (if shown) – subtle chip */
.wp-block-woocommerce-product-image-gallery .wpgs-lightbox-icon::after{
  content:"";
}
.wp-block-woocommerce-product-image-gallery .wpgs-lightbox-icon{
  position:absolute; top:12px; right:12px;
  z-index: 3;
  width: 34px; height: 34px; border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-woocommerce-product-image-gallery .wpgs-lightbox-icon:hover{
  background:#fff; color: var(--hhc-cyan) !important; border-color: var(--hhc-cyan);
}

/* Make sure slider heights don’t get bouncy */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-list{ will-change: transform; }





/* Fix: ensure the glass sheen sits under the slides */
.wp-block-woocommerce-product-image-gallery .woo-product-gallery-slider.images{
  position: relative;               /* create stacking context */
  overflow: hidden;                 /* keep it tidy */
}
.wp-block-woocommerce-product-image-gallery .woo-product-gallery-slider.images::after{
  z-index: 0;                       /* under everything */
}

/* Lift the main slider layer above the sheen */
.wp-block-woocommerce-product-image-gallery .wpgs-for{
  position: relative;
  z-index: 1;
}

/* Make absolutely sure the current image is visible */
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0);         /* fixes odd GPU compositing cases */
}

/* If your theme/slider injects opacity on non-active slides, keep current one solid */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-current img{
  opacity: 1 !important;
}


/* Safety net: prevent height collapse of the main track */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-list{
  min-height: 160px; /* adjust as needed or swap for aspect-ratio */
  /* aspect-ratio: 4 / 3;  <-- optional, looks great if your images are consistent */
}

/* 1) RESET the lightbox anchor inside the MAIN slider (wpgs-for) */
.wp-block-woocommerce-product-image-gallery .wpgs-for .wpgs-lightbox-icon{
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* 2) Ensure the main slide holds an overlay layer */
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image{
  position: relative;
}


/* 4) Keep the main image fully visible */
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  display:block; width:100%; height:auto;
  opacity:1 !important; visibility:visible !important;
}

/* (Optional) stabilize height if needed */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-list{
  /* pick one: uncomment preferred */
   /*min-height: 320px;*/
  /* aspect-ratio: 4 / 3; */
}

/* Collapse the main slider’s fixed height so it hugs the image */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-list,
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-track,
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image{
  height: auto !important;
}

/* Make the image truly fill the slide and remove any stray spacing */
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image a,
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

/* If dots are enabled, don’t reserve vertical space */
.wp-block-woocommerce-product-image-gallery .wpgs-dots{
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  margin: 0 !important;
}

/* Bring the thumbnail rail closer to the main image */
.wp-block-woocommerce-product-image-gallery .wpgs-nav .slick-list{
  margin-top: 8px !important;   /* was larger; tune to taste */
  padding-top: 6px !important;  /* keeps the glass edge soft */
}

/* Safety: remove any bottom padding/margins some themes add to the for-list */
.wp-block-woocommerce-product-image-gallery .wpgs-for{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Alternative: enforce a consistent aspect ratio */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-list{
  /*aspect-ratio: 4 / 3;           /* or 1 / 1 for square */
  height: auto !important;
}
.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  height: 100% !important; width: 100% !important; object-fit: cover;
}

/* Smooth, buttery zoom on the main image */
:root{
  --hhc-ease-out: cubic-bezier(.22, 1, .36, 1); /* easeOutCubic-ish */
}

.wp-block-woocommerce-product-image-gallery .wpgs-for .woocommerce-product-gallery__image img{
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    transform .65s var(--hhc-ease-out),
    filter   .65s var(--hhc-ease-out);
  will-change: transform;           /* hint the compositor */
  backface-visibility: hidden;      /* avoids shimmer on Safari */
  -webkit-font-smoothing: antialiased;
}

.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-current img:hover{
  transform: scale(1.06);           /* slightly stronger but smoother */
  filter: saturate(1.08) contrast(1.02);
}

/* Prevent jank while dragging the slider */
.wp-block-woocommerce-product-image-gallery .wpgs-for.slick-dragging img{
  transition: none !important;
}

/* Optional: when the slide becomes active, ease in the base scale (prevents a pop on slide change) */
.wp-block-woocommerce-product-image-gallery .wpgs-for .slick-current img{
  transition:
    transform .65s var(--hhc-ease-out),
    filter   .65s var(--hhc-ease-out);
}



/* ===========================
   ThemeIsle Tabs – Liquid Glass
   Scope: wrapper has class `tabs-glass-modern`
   =========================== */
:root{ --hhc-cyan:#4EC0DA; }

.wp-site-blocks > .tabs-glass-modern{
	padding-left:0px !important;
	padding-right:0px !important;
}

.tabs-glass-modern{
  border-radius:18px;
  /*background: rgba(18,18,20,0.35);
  border:1px solid rgba(255,255,255,0.10);*/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /*box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 14px 34px rgba(0,0,0,0.28);*/
  overflow:hidden;                 /* keeps rounded corners tidy */
	padding: 0px 0px !important;	
	margin:0px 0px;
}

/* header row */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__header{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 5px 10px 10px;
  background:transparent;
  border-bottom:0px solid rgba(255,255,255,0.08);
}

/* each tab chip */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__header_item{
  border-radius:12px;
  padding:8px 14px;
  line-height:1;
  color:#e8eef2;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__header_item:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__header_item:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(78,192,218,0.55);
}

/* active tab */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__header_item.active{
  color:#fff;
  background: linear-gradient(180deg, rgba(78,192,218,0.18), rgba(78,192,218,0.08));
  border-color: rgba(78,192,218,0.45);
  box-shadow: inset 0 0 0 1px rgba(78,192,218,0.25), 0 6px 18px rgba(78,192,218,0.22);
  transform: translateY(-1px);
}

/* content area */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__content{
  /*padding:18px;*/
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content{
  background: rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* typography tweaks inside content */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content p{
  color:#e9edf1;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content strong{
  font-weight:700;
  color:#ffffff;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content table{
  width:100%;
  border-collapse: collapse;
  background: rgba(18,18,20,0.35);
  border-radius:10px;
  overflow:hidden;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content table td,
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content table th{
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content table tr:last-child td{
  border-bottom:none;
}

/* reduce chrome on the mobile “accordion” headers ThemeIsle renders */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header{
  background: transparent;
  border: none;
  padding: 0px 0 0px;
  color:#cfd6dc;
}
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header.active{
  color:#fff;
}

/* small screens: keep breathing room */
@media (max-width: 640px){
  .tabs-glass-modern{ border-radius:14px; }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs__header{ padding:12px; gap:6px; }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs__header_item{ padding:7px 12px; }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs__content{ padding:0px; }
}


.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0 0 2em;
    padding: 0px 0px;
}


/* Slide/fade the active panel in */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content.active{
  animation: hhcTabSlideIn .35s cubic-bezier(.2,.65,.2,1) both;
}

@keyframes hhcTabSlideIn{
  from{
    opacity: 0;
    transform: translateY(-10px) scale(.98);
    filter: blur(2px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* keep layout stable */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__content{
  position: relative;
}

@media (prefers-reduced-motion: reduce){
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content.active{
    animation: none;
  }
}


/* ---------- Mobile accordion styles for ThemeIsle Tabs ---------- */
:root{ --hhc-cyan:#4EC0DA; }

/* scope */
.tabs-glass-modern{ isolation:isolate; }

/* hide the desktop tab strip on small screens (ThemeIsle already does, we enforce) */
@media (max-width: 782px){
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs__header{
    display:none !important;
  }

  /* accordion headers (one per section) */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header{
    display:flex; align-items:center; gap:.5rem;
    padding:12px 14px;
    margin:10px 0 0;
    border-radius:14px;
    background: rgba(18,18,20,.42);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:#e8eef2;
    cursor:pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header strong{
    font-weight:600;
    letter-spacing:.1px;
  }

  /* active/open header state */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header.active,
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header[aria-selected="true"]{
    background: rgba(78,192,218,.18);
    border-color: var(--hhc-cyan);
    box-shadow: 0 10px 24px rgba(78,192,218,.18);
    color:#fff;
  }

  /* content panels — glass card, remove theme red */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content{
    margin:6px 0 14px;
    padding:16px 18px;
    border-radius:16px;
    background: rgba(18,18,20,.38);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color:#eaf2f6;
  }

  /* show/hide controlled by ThemeIsle classes — enforce just in case */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content.hidden{ display:none !important; }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content.active{ display:block !important; }

  /* tidy tables inside content */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content table{
    width:100%;
    border-collapse:collapse;
    border-radius:10px;
    overflow:hidden;
    background: rgba(0,0,0,.15);
  }
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content td{
    padding:8px 10px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  /* mobile slide-in for active content */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content.active{
    animation: hhcTabSlideIn .35s cubic-bezier(.2,.65,.2,1) both;
  }
}

/* slide-in keyframes (already used on desktop; safe to keep once globally) */
@keyframes hhcTabSlideIn{
  from{ opacity:0; transform:translateY(-10px) scale(.98); filter:blur(2px); }
  to  { opacity:1; transform:translateY(0)     scale(1);   filter:blur(0); }
}

/* nuke any theme background that leaks through (both desktop & mobile) */
.tabs-glass-modern .wp-block-themeisle-blocks-tabs__content,
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item,
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header,
.tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content{
  background-clip: padding-box;
}



/* Mobile: make the accordion headers look like the glassy pills */
@media (max-width: 782px){
  /* the header rows themselves */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:10px 10px;
    margin:0px 0 0px;

    border-radius:12px;
    background: rgba(18,18,20,.45) !important;             /* kill the red/blue */
    border:1px solid rgba(255,255,255,.12) !important;
    color:#eaf2f6 !important;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: background .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease;
  }

  /* label weight like desktop */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header > strong{
    font-weight:600;
    letter-spacing:.1px;
  }

  /* hover/focus state */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header:hover,
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header:focus{
    background: rgba(78,192,218,.14) !important;
    border-color: #4EC0DA !important;
    box-shadow: 0 8px 18px rgba(78,192,218,.18),
                inset 0 1px 0 rgba(255,255,255,.18);
    outline: none;
  }

  /* active/expanded tab */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header.active,
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__header[aria-selected="true"]{
    background: #4EC0DA !important;
    color: #0e2430 !important;
    border-color: #4EC0DA !important;
    box-shadow: 0 10px 24px rgba(78,192,218,.28),
                inset 0 1px 0 rgba(255,255,255,.35);
  }

  /* optional: tighten spacing of the panel content after header */
  .tabs-glass-modern .wp-block-themeisle-blocks-tabs-item__content{
    margin-top: 6px;
  }
}


.wp-block-themeisle-blocks-tabs .wp-block-themeisle-blocks-tabs-item:not(:last-child)>.wp-block-themeisle-blocks-tabs-item__header:not(.active) {
	margin: 10px 0px;
}

/* MOBILE: force reliable header blur via its own overlay */
@media (max-width: 782px){
  header.wp-block-template-part{
    position: sticky; top: 0; z-index: 9999;
    background: transparent !important;           /* let the blur layer show */
    overflow: visible;                             /* let backdrop sample behind */
    -webkit-backface-visibility: hidden;          /* iOS comp layer nudge */
  }
  /* the glass layer */
  header.wp-block-template-part::before{
    content:"";
    position: absolute; inset: 0;
    z-index: 0;
    background: rgba(18,18,20,.34);               /* must be semi-transparent */
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: saturate(120%) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    pointer-events: none;                          /* don’t block clicks */
    /* helps iOS allocate its own compositing layer */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari quirk */
	  margin: 0px -50px !important;
  }
  /* content sits above the blur layer */
  header.wp-block-template-part > *{
    position: relative; z-index: 1;
  }
}

/* 1) Don’t transform the header wrapper on mobile */
@media (max-width: 782px){
  .wc-blocks-pattern-header-essential,
  .wp-block-group[style*="transform"],
  .wp-block-navigation__responsive-container {
    transform: none !important;
    filter: none !important;   /* filters break backdrop-filter too */
  }
}

/* 2) Keep header ancestors from clipping the sampling area */
@media (max-width: 782px){
  /*.wp-site-blocks, .wp-block-template-part { overflow: visible !important; }*/
}

/* 3) Ensure the header still has some transparency on mobile */
@media (max-width: 782px){
  header.wp-block-template-part .wp-block-search__inside-wrapper{
    background: rgba(18,18,20,.34) !important; /* not fully opaque */
  }
}


/* === HHC: perfectly centered badges on mobile === */
@media (max-width: 782px) {

  /* Inner badges row: make grid width shrink to content and center it */
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, max-content)); /* tracks fit content */
    justify-content: center;   /* center the whole grid inside container */
    align-content: center;     /* vertical centering if there's extra height */
    justify-items: center;     /* center each badge in its track */
    gap: 14px 18px;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;        /* text centered by default inside */
  }

  /* Each badge column */
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d > .wp-block-column {
    display: grid !important;
    place-items: center;       /* icon + text centered together */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kill nested column noise and center contents */
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d 
  .wp-block-columns.wp-block-columns-is-layout-flex {
    display: grid !important;
    place-items: center;       /* centers icon + heading */
    gap: 5rem;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Icons */
  .wp-container-core-columns-is-layout-1ec2ec05 figure.wp-block-image img {
    display: block;
    width: clamp(36px, 9vw, 44px) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto !important; /* belt-and-braces centering */
  }

  /* Headings under icons */
  .wp-container-core-columns-is-layout-1ec2ec05 h5.wp-block-heading {
    font-size: clamp(11px, 3.2vw, 13px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-align: center !important;
    max-width: 13ch; /* keeps tidy line breaks */
	  word-break: normal !important;
  }

  /* Trim outer section padding a touch on phones */
  .wp-container-core-columns-is-layout-1ec2ec05 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Center the entire 3-badge group inside the blue box on mobile */
@media (max-width: 782px) {

  /* Make the outer blue section act like a centering flex wrapper */
  .wp-container-core-columns-is-layout-1ec2ec05 {
    display: flex !important;
    justify-content: center;   /* centers child column */
    padding-left: 12px !important;   /* optional breathing room */
    padding-right: 12px !important;
  }

  /* Ensure the inner column also centers its contents */
  .wp-container-core-columns-is-layout-1ec2ec05 > .wp-block-column {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  /* The badges row: shrink to content and center */
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d {
    display: inline-grid !important;                 /* so width hugs content */
    grid-template-columns: repeat(3, max-content);   /* three tight tracks */
    gap: 10px 10px;
    justify-content: center;                         /* center tracks */
    align-items: start;
    margin: 0 auto !important;                       /* center the whole block */
    text-align: center;
  }

  /* Keep each badge centered internally (icon + text) */
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d > .wp-block-column,
  .wp-container-core-columns-is-layout-1ec2ec05 
  .wp-container-core-columns-is-layout-4109350d 
  .wp-block-columns.wp-block-columns-is-layout-flex {
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* === HHC: Collagen feature tri-column → tidy mobile stack === */
@media (max-width: 782px) {
  /* Outer gradient box: stack, center, and keep the rounded corners clean */
  .wp-container-core-columns-is-layout-28232c24 {
    display: flex !important;
    flex-direction: column;
    align-items: center;              /* center all three columns */
    gap: 18px;
    padding: 16px;
    overflow: hidden;                 /* clip gradients to radius */
  }

  /* Re-order to mirror desktop feel: left features, product image, right features */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1) { order: 1; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) { order: 2; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) { order: 3; }

  /* Normalise widths so content doesn't hug the edges */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column {
    width: 100%;
    max-width: 720px;                 /* keeps it tidy on big phones */
  }

  /* Center-align all copy on mobile (overrides left/right desktop align) */
  .wp-container-core-columns-is-layout-28232c24 h5,
  .wp-container-core-columns-is-layout-28232c24 p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Icon/text pairs: make each pair a centered vertical stack */
  .wp-container-core-columns-is-layout-28232c24 
  .wp-block-columns.wp-block-columns-is-layout-flex {
    display: grid !important;
    grid-template-columns: 1fr;       /* force one column per pair */
    place-items: center;
    gap: 6px;
    margin: 0 !important;
  }

  /* Icons: smaller on mobile, never overflow */
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image img {
    /*width: clamp(64px, 22vw, 100px) !important;*/
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* Product packshot in the middle column: scale sensibly */
  .wp-container-core-columns-is-layout-28232c24 img.wp-image-1621 {
    height: auto !important;          /* kill the inline 800px height */
    display: block;
    margin: 6px auto 0 auto !important;
  }

  /* Tighter body copy */
  .wp-container-core-columns-is-layout-28232c24 p.has-small-font-size {
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.35;
    max-width: 30ch;                  /* keeps lines from getting too long */
  }

  /* Headings pop but don't shout */
  .wp-container-core-columns-is-layout-28232c24 h5 {
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }

  /* Trim those spacer blocks on phones */
  .wp-container-core-columns-is-layout-28232c24 .wp-block-spacer[style*="height:20px"] {
    height: 8px !important;
  }
}


/* === HHC: Desktop tri-column → mobile layout that matches the desktop logic === */
@media (max-width: 782px) {

  /* Outer gradient card */
  .wp-container-core-columns-is-layout-28232c24 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 16px;
    overflow: hidden; /* respect the 25px border-radius */
  }

  /* Keep the order: left features → product → right features */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1) { order: 1; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) { order: 2; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) { order: 3; }

  /* Normalize widths */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column {
    width: 100%;
    max-width: 760px;
  }

  /* Each feature pair becomes one horizontal row: [icon][text] */
  .wp-container-core-columns-is-layout-28232c24 .wp-block-columns.wp-block-columns-is-layout-flex {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 12px;
    margin: 0 !important;
  }

  /* LEFT column pairs: swap child order (HTML is text then icon on desktop) */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1)
  .wp-block-columns.wp-block-columns-is-layout-flex > .wp-block-column:first-child { order: 2; } /* text */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1)
  .wp-block-columns.wp-block-columns-is-layout-flex > .wp-block-column:last-child  { order: 1; } /* icon */

  /* RIGHT column pairs already icon→text; keep as-is (no swap needed) */

  /* Kill floats and oversized inline widths on icons */
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image.alignright,
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image {
    float: none !important;
    margin: 0 !important;
  }
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image img {
    display: block;
    /*width: clamp(56px, 17vw, 84px) !important;*/ /* responsive icon size */
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* Text: left-align on mobile for quick scanning; tame the desktop right/left aligns */
  .wp-container-core-columns-is-layout-28232c24 h5,
  .wp-container-core-columns-is-layout-28232c24 p {
    text-align: left !important;
    margin: 0 !important;
  }
  .wp-container-core-columns-is-layout-28232c24 h5 {
    font-size: clamp(15px, 4.3vw, 18px) !important;
    line-height: 1.2 !important;
  }
  .wp-container-core-columns-is-layout-28232c24 p.has-small-font-size {
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.35;
    max-width: 38ch; /* readable line length */
    opacity: 0.95;
  }

  /* Product image in the center column: scale naturally (kills inline height:800px) */
  .wp-container-core-columns-is-layout-28232c24 img.wp-image-1621 {
    height: auto !important;
    display: block;
    margin: 4px auto 2px auto !important;
  }

  /* Tighten spacer blocks */
  .wp-container-core-columns-is-layout-28232c24 .wp-block-spacer[style*="height:20px"] {
    height: 8px !important;
  }
}

@media (max-width: 782px) {
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3)
  .wp-block-columns.wp-block-columns-is-layout-flex {
    grid-template-columns: 1fr auto; /* text then icon (row mirrored) */
  }
}


/* === HHC: Collagen card — desktop logic, clean mobile === */
@media (max-width: 782px) {

  /* OUTER GRADIENT CARD */
  .wp-container-core-columns-is-layout-28232c24 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 5px;
    overflow: hidden; /* keep the 25px radius clean */
  }

  /* FORCE ORDER: left → center bottle → right */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1) { order: 1; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) { order: 2; }
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) { order: 3; }

  /* NORMALIZE WIDTHS */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column {
    width: 100%;
    max-width: 680px;                  /* keeps rows tidy on big phones */
    margin: 0 auto !important;
  }

  /* === FEATURE ROWS (icon + text) === */
  .wp-container-core-columns-is-layout-28232c24 
  .wp-block-columns.wp-block-columns-is-layout-flex {
    display: grid !important;
    grid-template-columns: 84px 1fr;   /* icon column + text column */
    align-items: center;
    gap: 10px 14px;
    padding: 6px 8px;
    margin: 0 !important;
  }

  /* Kill floats so icons sit in the grid cell */
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image,
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image.alignright {
    float: none !important;
    margin: 0 !important;
  }

  /* ICON SIZE (both sides) */
  .wp-container-core-columns-is-layout-28232c24 figure.wp-block-image img {
    display: block;
    /*width: clamp(56px, 18vw, 84px) !important;*/
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* LEFT FEATURE STACK → swap children so ICON is first, TEXT second */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1)
  .wp-block-columns.wp-block-columns-is-layout-flex > .wp-block-column:first-child { order: 2; } /* text */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1)
  .wp-block-columns.wp-block-columns-is-layout-flex > .wp-block-column:last-child  { order: 1; } /* icon */

  /* RIGHT FEATURE STACK already icon→text; no swap required */

  /* TEXT STYLES */
  .wp-container-core-columns-is-layout-28232c24 h5,
  .wp-container-core-columns-is-layout-28232c24 p {
    text-align: left !important;
    margin: 0 !important;
  }
  .wp-container-core-columns-is-layout-28232c24 h5 {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.2 !important;
  }
  .wp-container-core-columns-is-layout-28232c24 p.has-small-font-size {
    font-size: clamp(12px, 3.5vw, 14px);
    line-height: 1.35;
    max-width: 38ch;
    opacity: .95;
  }

  /* BOTTLE IMAGE — make it the star, centered, and break the tall inline height */
  .wp-container-core-columns-is-layout-28232c24 img.wp-image-1621 {
    height: auto !important;           /* override inline height:800px */
    display: block !important;
    margin: 8px auto 12px auto !important;
  }

  /* Space above the right stack so it doesn’t collide with the bottle */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) {
    margin-top: 6px !important;
  }

  /* Shorten the spacer blocks */
  .wp-container-core-columns-is-layout-28232c24 .wp-block-spacer[style*="height:20px"] {
    height: 8px !important;
  }
	
	.wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3)
  .wp-block-columns.wp-block-columns-is-layout-flex {
    grid-template-columns: 84px 1fr !important;
}
	
}

@media (max-width: 782px) {
  /* Bigger product image on mobile, icons/text unchanged */
  .wp-container-core-columns-is-layout-28232c24 img.wp-image-1621 {
    width: 100% !important;  /* was ~82vw → go larger */
    height: auto !important;                      /* kill inline 800px */
	  max-height:20rem !important;  
    display: block !important;
    margin: 10px auto 12px auto !important;       /* keep it centered */
  }

  /* Optional: add a tiny buffer so it doesn't kiss the feature rows */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) {
    margin-top: 10px !important;
  }
}


/* === Mobile: show image first, then all 6 features === */
@media (max-width: 782px) {
  /* Make the outer section stack */
  .wp-container-core-columns-is-layout-28232c24 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  /* Reorder the three main columns:
     1) center image, 2) left features, 3) right features */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) { order: 1; } /* image */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1) { order: 2; } /* left features */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) { order: 3; } /* right features */

  /* Optional: spacing so the first feature stack doesn't collide with the image */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(1),
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(3) {
    margin-top: 4px !important;
  }
}

@media (max-width: 782px) {
  /* Make the middle (image) column a centering flex box */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) {
    display: flex !important;
    justify-content: center !important;  /* center horizontally */
    align-items: flex-start !important;  /* keep top-aligned */
  }

  /* Belt-and-braces: ensure the figure and img don't carry stray floats/margins */
  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) figure {
    float: none !important;
    margin: 0 auto !important;
  }

  .wp-container-core-columns-is-layout-28232c24 > .wp-block-column:nth-child(2) img.wp-image-1621 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: clamp(360px, 96vw, 560px) !important;  /* your chosen mobile size */
    height: auto !important;                      /* override inline height */
  }
}

/* === HHC: Liquid-glass gradient card === */
.wp-container-core-columns-is-layout-28232c24 {
  position: relative;
  border-radius: 25px;
  overflow: hidden;                                /* clip glow + sheen to radius */

  /* Glassy base + gentle color washes */
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) ,
    radial-gradient(900px 900px at 8% -10%, rgba(0, 208, 255, .22), transparent 60%),
    radial-gradient(800px 800px at 108% 120%, rgba(255, 0, 204, .18), transparent 60%);
  background-blend-mode: screen, normal, normal;

  /* Frosted effect */
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);

  /* Glass edge + soft depth */
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.18);
}

/* Optional: animated soft sheen */
.wp-container-core-columns-is-layout-28232c24::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 35%, transparent 65%, rgba(255,255,255,.10));
  opacity: .6;
  pointer-events: none;
}

/* Mobile padding tweak so the glass has breathing room on phones */
@media (max-width: 782px) {
  .wp-container-core-columns-is-layout-28232c24 { padding: 16px; }
}

/* Respect users who prefer less transparency/blur */
@media (prefers-reduced-transparency: reduce) {
  .wp-container-core-columns-is-layout-28232c24 {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, #e9f7ff, #ffe9f7);
  }
}


/* === HHC: Subtle liquid-glass card on grey === */
.wp-container-core-columns-is-layout-28232c24 {
  /* wipe any theme gradient on this block */
  background: transparent !important;
  background-image: none !important;

  position: relative;
  border-radius: 25px;
  overflow: hidden;
  isolation: isolate;                 /* keep internal effects contained */

  /* frosted glass base */
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  /* soft edge + depth */
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 14px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.15);
}

/* whisper-color glows (very subtle) */
.wp-container-core-columns-is-layout-28232c24::before,
.wp-container-core-columns-is-layout-28232c24::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* cyan hint top-left, magenta hint bottom-right */
.wp-container-core-columns-is-layout-28232c24::before {
  background:
    radial-gradient(520px 380px at 6% 0%, rgba(0, 209, 255, .14), transparent 60%),
    radial-gradient(520px 380px at 100% 100%, rgba(255, 0, 170, .10), transparent 60%);
}

/* gentle diagonal sheen */
.wp-container-core-columns-is-layout-28232c24::after {
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(255,255,255,.08));
  mix-blend-mode: screen;
  opacity: .7;
}

/* content padding so the glass breathes */
.wp-container-core-columns-is-layout-28232c24 { padding: 20px; }
@media (max-width: 782px) {
  .wp-container-core-columns-is-layout-28232c24 { padding: 16px; }
}

/* accessibility/fallbacks */
@media (prefers-reduced-transparency: reduce) {
  .wp-container-core-columns-is-layout-28232c24 {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.9) !important;
  }
}

/* === HHC: Liquid-glass card with faint full-width color === */
.wp-container-core-columns-is-layout-28232c24 {
  /* neutral glass base */
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
  position: relative;
  border-radius: 25px;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 14px 40px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.15);
  padding: 20px;
}

/* subtle color across the whole container */
.wp-container-core-columns-is-layout-28232c24::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  /* soft diagonal wash (very faint) */
  background:
    linear-gradient(135deg,
      rgba(0, 208, 255, .10) 0%,
      rgba(121, 56, 255, .08) 45%,
      rgba(255, 0, 170, .10) 100%),
    /* two extra gentle corner glows */
    radial-gradient(420px 320px at 6% 0%,   rgba(0, 208, 255, .12), transparent 60%),
    radial-gradient(520px 380px at 100% 100%, rgba(255, 0, 170, .10), transparent 60%);
  mix-blend-mode: screen;
  opacity: .9; /* turn this down to .7 for even subtler color */
}

/* soft sheen on top for glassy feel */
.wp-container-core-columns-is-layout-28232c24::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(255,255,255,.08));
  mix-blend-mode: screen;
  opacity: .7;
}

/* mobile padding */
@media (max-width: 782px) {
  .wp-container-core-columns-is-layout-28232c24 { padding: 16px; }
}

/* accessibility fallback */
@media (prefers-reduced-transparency: reduce) {
  .wp-container-core-columns-is-layout-28232c24 {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: linear-gradient(135deg, #f6fbff, #fff5fb) !important;
  }
}

/* Mobile: cap spacers to 30px inside the collagen card */
@media (max-width: 782px) {
  .wp-block-spacer {
    height: 30px !important;
    min-height: 0 !important; /* Guten sometimes writes min-height */
    line-height: 0 !important; /* avoid accidental extra space */
  }
}




/* === HHC: faint liquid-glass overlay for THIS container only === */
/* Works with whatever background you set on the block in the editor */
.hhc-glass-card{
  position: relative;
  border-radius: 25px;            /* keep your rounded corners */
  overflow: hidden;
  isolation: isolate;             /* contain blend layers */
  /* Do NOT set background here — the editor's background remains */
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 14px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.14);
}

/* Soft, faint color hints on top of the editor background */
.hhc-glass-card::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* barely-there diagonal wash + corner glows */
  background:
    linear-gradient(135deg,
      rgba(0,208,255,.08) 0%,
      rgba(121,56,255,.06) 45%,
      rgba(255,0,170,.08) 100%),
    radial-gradient(38% 28% at 10% 4%,  rgba(255,255,255,.06), transparent 60%),
    radial-gradient(36% 28% at 90% 96%, rgba(255,255,255,.05), transparent 62%);
  mix-blend-mode: screen;
  opacity:.9; /* lower to .7 for even softer color */
}

/* Gentle neutral sheen so it reads as glass */
.hhc-glass-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 32%, transparent 68%, rgba(255,255,255,.08));
  mix-blend-mode: screen;
  opacity:.7;
}

/* Mobile breathing room (optional) */
@media (max-width: 782px){
  .hhc-glass-card{ padding: 16px; }
}

/* Accessibility fallback */
@media (prefers-reduced-transparency: reduce){
  .hhc-glass-card{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
  }
  .hhc-glass-card::before, .hhc-glass-card::after{ opacity:0.0; }
}