/*
Theme Name: Glozin Child
Theme URI: https://wpglozin.com/
Author: UIXThemes
Author URI: https://uix.store
Description: Multipurpose WooCommerce WordPress Theme
Version: 1.0.0
Requires at least: 5.0
Tested up to: 5.8
Requires PHP: 7.0
License: GNU General Public License v2+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glozin
Tags: one-column, two-columns, left-sidebar, right-sidebar, full-width-template, post-formats, theme-options, threaded-comments, translation-ready
Template: glozin
*/
/*.sz-panel-overlay{cursor: url('data:image/svg+xml;utf8,
') 16 16, pointer} */
body {background:#fefafa}
.age-gate{border-radius:19px;padding:40px;max-width: 600px;font-weight:600;color:#08090A !important}
.age-gate-subheadline {order:-1;font-size:2.25rem;font-weight:600;color:#08090A !important}
.age-gate-headline, .age-gate__headline {font-size:2.25rem;font-weight:600;color:#08090A !important}
.age-gate-background, .age-gate__background {opacity: 0.8;}
input[type=checkbox]{appearance: none;margin-inline-end: 25px;margin-block-start: -18px;}
input[type=checkbox]::before {border-radius: 90px;}
.age-gate-buttons .age-gate-submit{font-size:var(--gz-button-font-size);background-color:var(--gz-button-bg-color);color:var(--gz-button-color);border:var(--gz-button-border-width) solid var(--gz-button-border-color);padding:var(--gz-button-padding-top) var(--gz-button-padding-right) var(--gz-button-padding-bottom) var(--gz-button-padding-left);line-height:var(--gz-button-line-height);border-radius:var(--gz-button-rounded);font-weight:var(--gz-button-font-weight);gap:var(--gz-button-icon-spacing);display:inline-flex;align-items:center;justify-content:center;transition:.4s;cursor:pointer;vertical-align:middle;letter-spacing:calc(var(--gz-heading-letter-spacing) + .01em);transition:.25s;min-height:3.25rem;min-width:11rem}.age-gate-buttons .age-gate-submit.age-gate-submit-no{--gz-button-color:#111111;--gz-button-color-hover:#ffffff;--gz-button-bg-color:#ffffff;--gz-button-border-color:#111111}.age-gate-buttons .age-gate-submit:active,.age-gate-buttons .age-gate-submit:hover{color:var(--gz-button-color-hover);background-color:var(--gz-button-bg-color-hover);border-color:var(--gz-button-border-color-hover)}.age-gate-buttons .age-gate-submit:hover:after{animation:shine .75s cubic-bezier(.01,.56,1,1)}.menu-wrap-mood,.menu-wrap-potency{display:flex;flex-direction:row;column-gap:10px;flex-wrap:wrap;margin-bottom:10px;margin-top:-10px!important;margin-left:0!important;padding-left:0!important}@media (min-width:1025px){.nav-menu li.menu-item>a:not(.wc-attr-menu-badge),.nav-menu li.menu-item>a:not(.wc-attr-menu.wc-attr-badge.attr-thc-level){background:none}}@media (min-width:1025px) and (pointer:fine) and (prefers-reduced-motion:no-preference){.age-gate-buttons .age-gate-submit{position:relative;overflow:hidden;z-index:1}.age-gate-buttons .age-gate-submit:after,.age-gate-buttons .age-gate-submit:before{content:'';z-index:-1;transition:transform .4s cubic-bezier(.75,0,.125,1);position:absolute;top:-5px;bottom:-5px;left:-5px;right:-5px;transform:translate(-100%)}.age-gate-buttons .age-gate-submit:before{background-color:var(--gz-button-eff-bg-color-hover)}.age-gate-buttons .age-gate-submit:after{background-color:var(--gz-button-bg-color-hover)}.age-gate-buttons .age-gate-submit:hover:before{transform:translate(0)}.age-gate-buttons .age-gate-submit:hover:after{transform:translate(0);transition-delay:175ms}}
/*.header-left-items.flex-1 {flex-grow:0.6;} */
.current-product-info {display: flex;justify-content: flex-start;align-items: center;gap:20px;margin-bottom:15px}
.current-product-info .current-product-image img {max-width:100px;border-radius:90px !important}
.main-navigation.primary-navigation .menu-item-1001287 .mega-menu .mega-menu__column:nth-child(2) {margin-top:38px}
#menu-item-1698 .mega-menu ul.mega-menu__column .menu-widget-banner__style-light:before {content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;border-radius: 10px;background-image: linear-gradient(120deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 90%);opacity: 1;pointer-events: none;border-radius:9px;}
#menu-item-1698 .menu-widget-banner__content.justify-content-center.position-absolute.align-items-center {justify-content:flex-start;align-items:flex-end}
#menu-item-1698 .menu-widget-banner__inner.text-center {text-align:left}
#menu-item-1698 .menu-widget-banner__title.fs-32 {line-height:1.2;font-size:1.58rem}
#menu-item-1698 .menu-widget-banner__inner.text-center .me-auto {margin-inline-start: 0;margin-top:20px}
#menu-item-1698 .mega-menu ul.mega-menu__column .menu-item--widget-button.menu-item--align-center {text-align: center}
.mega-menu ul.mega-menu__column .menu-callbox .menu-widget-banner__before-title.fw-semibold {font-weight:500}
.menu-callbox .fs-32 {font-size: 1.15rem;line-height:1;margin:0.5rem 0 1rem}
.mega-menu ul.mega-menu__column .menu-callbox .menu-widget-banner__sub-description.mb-25{margin-bottom:15px;margin-top:0;border-radius:0;order: -1;}
.mega-menu ul.mega-menu__column .menu-callbox .menu-widget-banner__link {position: absolute; width: 100%; height: 100%; display: block; z-index: 3;}
.hamburger-panel ul#menu-mobile-custom-menu {margin:20px 0 0 }
@media (min-width: 768px) {
.menu-callbox.menu-widget-banner .px-md-50 {padding-left: 2.125rem;padding-right: 2.125rem;}
}
.woocommerce-ResetPassword.lost_reset_password {max-width: 680px;margin-left: auto;margin-right: auto;margin-top: 50px;margin-bottom: 40px;background: #fff;padding: 30px;border-radius: 14px;}
.lost_reset_password p:before {content:"Password reset";position:absolute;top:0;font-size:20px;font-weight:800}
.main-navigation.primary-navigation .menu li .menu-item-badge:after,.hamburger-panel .main-navigation.hambuger-navigation ul.menu li .menu-item-badge:after{content:none !important}
.main-navigation.primary-navigation .menu li .menu-item-badge,.hamburger-panel .main-navigation.hambuger-navigation ul.menu li .menu-item-badge{display: inline-block;background: #A11D26!important;color: initial;border-radius: 30px;font-weight: 600;font-size: 10px;line-height: 13px;letter-spacing: .55px;padding: 3px 8px;margin-left: 8px;left: 100%;animation: bgscale 3s infinite .3s cubic-bezier(.25, 0, 0, 1);box-shadow: 0 0 0 0 #A11D26;top: 0;inset-inline-end: auto;color: #fff !important;
}
.hamburger-panel .main-navigation.hambuger-navigation ul.menu li .menu-item-badge {left:auto !important}
@keyframes bgscale {
to {
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
}
}
body .account-panel__links li {padding: 0 0}
body .account-panel__links a:hover {background:#f5f5f5;}
body .account-panel__links a {position:relative;display:block;border:1px solid transparent;border-radius:90px;padding:12px 15px}
body .account-panel__links a::after {content: "";position: absolute;right: 20px;top: 50%;width: 6px;height: 6px;border-right: 1px solid currentColor;border-bottom: 1px solid currentColor;transform: translateY(-50%) rotate(-45deg);}
/* == Base badge layout == */
.wc-attr-badges {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: 0 0 1rem;
}
.wc-attr-badge {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: 12px;
line-height: 1;
padding: .35rem .6rem;
border-radius: 999px;
font-weight: 500;
letter-spacing: .2px;
background: #eee;
color: #222;
border: 1px solid rgba(0,0,0,.06);
text-transform: capitalize;
}
.wc-attr-badges--single .wc-attr-badge {
font-size: 13px;
padding: .4rem .7rem;
}
/*
Focus #e47c3a
Energy #e6b400
Relax #3a7b61
Social #d5567d
Sleep #244b6c
Creative #a05ca6
Love #b8332f
*/
/* == EFFECT colors (attr-effect) == */
.wc-attr-badge.attr-effect.term-focus { background:#e47c3a; color:#fff; }
.wc-attr-badge.attr-effect.term-energy { background:#e6b400; color:#fff; }
.wc-attr-badge.attr-effect.term-relax { background:#3a7b61; color:#fff; }
.wc-attr-badge.attr-effect.term-social { background:#d5567d; color:#fff; }
.wc-attr-badge.attr-effect.term-sleep { background:#244b6c; color:#fff; }
.wc-attr-badge.attr-effect.term-creative { background:#a05ca6; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge {display: inline-flex;align-items: center;gap: .25rem;font-size: 14px;line-height: 1;padding: .55rem 1.6rem;border-radius: 999px;font-weight: 600;letter-spacing: .2px;background: #eee;color: #222;border: 1px solid rgba(0,0,0,.06);text-transform: capitalize;}
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-focus { background:#e47c3a; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-energy { background:#e6b400; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-relax { background:#3a7b61; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-social { background:#d5567d; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-sleep { background:#244b6c; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-menu-badge.attr-effect.term-creative { background:#a05ca6; color:#fff; }
.primary-navigation li .menu-item > a.wc-attr-badge.attr-thc-level {background: #f6f7f7;color: #283d39;border-color: #e6eaea;padding: .55rem 1.6rem;}
.primary-navigation li .menu-item > a.item-bold {border:1px solid #e6eaea;padding:0.5rem 1.5rem;border-radius:999px}
.termBack-focus { background:#e47c3a; }
.termBack-energy { background:#e6b400; }
.termBack-relax { background:#3a7b61; }
.termBack-social { background:#d5567d; }
.termBack-sleep { background:#244b6c; }
.termBack-creative { background:#a05ca6; }
/* Single Product 3 Column row based on effects attribute colors */
/* Focus — #e47c3a */
.effect-focus .effectLeft { background: #fdeee4; }
.effect-focus .effectMid { background: #fff5ef; }
.effect-focus .effectRight { background: #fffaf7; }
.effect-focus .effect-divider span { --divider-color: #f4b88e !important; }
/* Energy — #e6b400 */
.effect-energy .effectLeft { background: #fff5cc; }
.effect-energy .effectMid { background: #fff9e0; }
.effect-energy .effectRight { background: #fffdf2; }
.effect-energy .effect-divider span { --divider-color: #ffe073 !important; }
/* Relax — #3a7b61 */
.effect-relax .effectLeft { background: #d8eee5; }
.effect-relax .effectMid { background: #eaf7f2; }
.effect-relax .effectRight { background: #f6fbf9; }
.effect-relax .effect-divider span { --divider-color: #94cdb5 !important; }
/* Social — #d5567d */
.effect-social .effectLeft { background: #fbe0e8; }
.effect-social .effectMid { background: #fdf0f4; }
.effect-social .effectRight { background: #fef7f9; }
.effect-social .effect-divider span { --divider-color: #eda0b5 !important; }
/* Sleep — #244b6c */
.effect-sleep .effectLeft { background: #d7e2ec; }
.effect-sleep .effectMid { background: #e7eef4; }
.effect-sleep .effectRight { background: #f4f7fa; }
.effect-sleep .effect-divider span { --divider-color: #95abc1 !important; }
/* Creative — #a05ca6 */
.effect-creative .effectLeft { background: #edd8f1; }
.effect-creative .effectMid { background: #f5e8f8; }
.effect-creative .effectRight { background: #faf4fb; }
.effect-creative .effect-divider span { --divider-color: #d7a7dc !important; }
/* Love — #b8332f */
.effect-love .effectLeft { background: #f7d6d4; }
.effect-love .effectMid { background: #fae5e3; }
.effect-love .effectRight { background: #fdf4f3; }
.effect-love .effect-divider span { --divider-color: #e58a86 !important; }
/* Single Product Gummies Cannabinoids based on effects attribute colors */
.canna-term-focus { background-image: radial-gradient(at center center, #FEFAFA 0%, #e47c3a 100%);}
.canna-term-energy { background-image: radial-gradient(at center center, #FEFAFA 0%, #e6b400 100%);}
.canna-term-relax { background-image: radial-gradient(at center center, #FEFAFA 0%, #3a7b61 100%);}
.canna-term-social { background-image: radial-gradient(at center center, #FEFAFA 0%, #d5567d 100%);}
.canna-term-sleep { background-image: radial-gradient(at center center, #FEFAFA 0%, #244b6c 100%);}
.canna-term-creative { background-image: radial-gradient(at center center, #FEFAFA 0%, #a05ca6 100%);}
/* == THC LEVEL badge neutral look; text remains readable == */
.wc-attr-badge.attr-thc-level { background:#f6f7f7; color:#283d39; border-color:#e6eaea; }
/* == Potency 3-dot icon == */
.risk-level-dot {
margin: 0 2px 0 0;
align-items: center !important;
display: inline-flex !important;
gap: 4px;
}
.risk-level-dot span {
border: 1px solid #283d39 !important;
height: 10px;
width: 10px;
border-radius: 9999px;
flex-shrink: 0;
transition: all .25s ease-in-out;
background: transparent; /* default empty */
}
/* Fill rules:
- per your example: 0-thc shows 1 filled dot
- low-thc: 1 filled
- medium-thc: 2 filled
- high-thc: 3 filled
If you prefer true "zero = 0 dots filled", simply remove the first rule.
*/
.risk-level-dot.potency-low span:nth-child(1) { background:#283d39; }
.risk-level-dot.potency-medium span:nth-child(-n+2) { background:#283d39; }
.risk-level-dot.potency-high span:nth-child(-n+3) { background:#283d39; }
/* Make each badge a tooltip anchor */
.wc-attr-badge { position: relative; }
/* Tiny “i” help button inside the badge */
.wc-badge-help {
display: inline-grid;
place-items: center;
width: 12px;
height: 12px;
margin-left: 0px;
border-radius: 999px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
font-size: 8px;
line-height: 1.4;
cursor: pointer;
padding: 0;
}
/* Tooltip panel */
.wc-badge-tooltip {
position: absolute;
left: 0; top: calc(100% + 8px);
min-width: 280px; max-width: 320px;
background: #4F71C5;
color: #fff;
font-weight:500;
line-height:1.3;
padding: 1rem 1rem;
border-radius: .5rem;
box-shadow: 0 10px 24px rgba(0,0,0,.2);
z-index: 50;
opacity: 0; visibility: hidden; transform: translateY(0px);
pointer-events: none;
transition: opacity .0s ease, transform .0s ease, visibility .0s;
}
.wc-badge-tooltip__title{margin-bottom:5px;display:inline-block;font-size:0.875rem}
.wc-badge-tooltip__footer{margin-top:15px;margin-bottom:5px;display:inline-block}
.wc-badge-tooltip__footer a {color:#fff;font-weight:600;}
/* Arrow */
.wc-badge-tooltip::after {
content: "";
position: absolute;
top: -5px; left: 16px;
width: 10px; height: 10px;
background: #4F71C5;
transform: rotate(45deg); transition: opacity .08s ease, transform .08s ease, visibility .18s;
}
/* Show tooltip on hover or keyboard/touch focus */
.wc-attr-badge:hover .wc-badge-tooltip,
.wc-attr-badge:focus-within .wc-badge-tooltip {
opacity: 1; visibility: visible; transform: translateY(0);
pointer-events: auto;
}
.wc-attr-badge:hover .wc-badge-help{color: var(--gz-button-color-hover);
background-color: var(--gz-button-bg-color-hover);
border-color: var(--gz-button-border-color-hover);}
/* Optional: stronger single-page badge look */
.wc-attr-badges--single .wc-attr-badge { gap: .5rem; }
.wc-attr-badges--single .wc-attr-badge .wc-attr-badge__text { white-space: nowrap; }
/* 1) Extend hover area below the badge (prevents flicker while moving down) */
.wc-attr-badge {
position: relative; /* ensure ::before is positioned correctly */
}
.wc-attr-badge::before {
content: "";
position: absolute;
left: -8px; /* widen a bit so diagonal moves don't flicker */
right: -8px;
top: 100%;
height: 14px; /* "hover bridge" height between badge and tooltip */
/* no background needed; transparent area still counts for :hover */
}
/* 2) Let the tooltip keep itself open while hovered */
.wc-badge-tooltip:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* 3) (Optional) reduce the vertical gap a bit for a tighter feel */
.wc-attr-badge .wc-badge-tooltip {
top: calc(100% + 4px); /* was +8px in the earlier snippet */
}
/* 4) Make sure the tooltip sits above neighboring elements */
.wc-badge-tooltip { z-index: 999; }
/* 5) If you see clipping inside certain themes/containers */
.wc-attr-badges { overflow: visible; } /* ensure the tooltip isn't cut off */
/* Style the "Learn more" link + arrow icon */
.wc-badge-tooltip__footer { margin-top: .6rem; }
.wc-badge-tooltip__link {
display: inline-flex;
align-items: center;
gap: .4rem;
text-decoration: none;
font-weight: 600;
color: #a6d3ff; /* tweak to your brand */
}
.wc-badge-tooltip__link:hover,
.wc-badge-tooltip__link:focus {
text-decoration: underline;
}
.wc-badge-tooltip__icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
transition: transform .18s ease;
}
.wc-badge-tooltip__link:hover .wc-badge-tooltip__icon,
.wc-badge-tooltip__link:focus .wc-badge-tooltip__icon {
transform: translateX(2px);
}
.modal__content .current-product-title{margin: 0}
@media (min-width:1070px) {
.modal__content .ask-question-content {display: flex;gap: 20px;}
.modal__content .current-product-info {flex-direction: column;justify-content: flex-start;align-items: flex-start;background: #fbe9ea;padding: 15px;border-radius: 9px;flex: 1 1 50%;gap:15px;margin-bottom: 0;}
}
.qilo-product-points {text-align: center;display: block;line-height: 1.75;}
/* ------- Base container ------- */
.wc-dosage {
--card-bg: #f5f1ed;
--text: #08090A;
--muted: #405042;
--bar-h: 50px;
--bar-radius: 999px;
--tick: 2px;
--tick-h: 36px;
/* default gradient if no match */
--bar-start: #a08cf5;
--bar-mid: #8ba0ff;
--bar-end: #b7c5ff;
--notice-bg: #f7e6d5;
--notice-text: #543b1c;
background: var(--card-bg);
border-radius: 24px;
padding: clamp(20px, 3vw, 40px);
}
.wc-dosage__inner { max-width: 1100px; margin: 0 auto; }
.wc-dosage__title {
line-height: 1;
margin: 0 0 6px;
font-weight: 800;
letter-spacing: 0.5px;
}
.wc-dosage__sub {
color: var(--muted);
margin: 0 0 28px;
font-size: clamp(14px, 1.6vw, 18px);
margin-block-end: 28px !important;
}
/* ------- Bar ------- */
.wc-dosage__bar {
position: relative;
height: var(--bar-h);
border-radius: var(--bar-radius);
background: linear-gradient(90deg, var(--bar-start), var(--bar-mid) 50%, var(--bar-end));
overflow: hidden;
box-shadow: inset 0 0 0 1px #0000000d;
}
/* tick marks (dotted feel via gradient dashes) */
.wc-dosage__tick {
position: absolute;
top: 0;
bottom: 0;
width: 0;
left: calc(var(--pos) * 100%);
}
.wc-dosage__tick::after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: -1px;
width: var(--tick);
background:
repeating-linear-gradient(
to bottom,
#00000030 0 6px,
transparent 6px 12px
);
}
/* ------- Labels grid ------- */
.wc-dosage__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(18px, 2.2vw, 26px);
margin: 18px 0 6px;
}
.wc-dosage__col {
text-align:center
}
.wc-dosage__time {
font-weight: 800;
color: var(--text);
font-size: clamp(15px, 2.6vw, 20px);
margin-bottom: 6px;
letter-spacing: 0.2px;
}
.wc-dosage__copy {
color: var(--muted);
font-size: clamp(12px, 1.6vw, 13px);
line-height: 1.45;
}
/* ------- Notice ------- */
.wc-dosage__notice {
display: flex;
align-items: center;
gap: 10px;
background: var(--notice-bg);
color: var(--notice-text);
border-radius: 12px;
padding: 14px 16px;
margin-top: 30px;
font-size: 13px;
}
.wc-dosage__warn-icon {
display: inline-grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid currentColor;
font-weight: 800;
}
/* ------- Responsive ------- */
@media (max-width: 800px) {
.wc-dosage__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.wc-dosage__grid { grid-template-columns: 1fr; }
.wc-dosage__bar { --bar-h: 46px; }
}
/* =========================================================
EFFECT THEMES (set by .effect--{slug})
Tweak to your brand palette as desired.
========================================================= */
/* Focus: cool indigo -> violet */
/* =========================================================
EFFECT THEMES — Matching your badge term background colors
========================================================= */
/* Focus — #e47c3a (warm orange) */
.wc-dosage.effect--focus {
--bar-start: #f7c5a5;
--bar-mid: #f1a878;
--bar-end: #fbe4d5;
}
/* Energy — #e6b400 (golden yellow) */
.wc-dosage.effect--energy {
--bar-start: #ffe58f;
--bar-mid: #ffd84f;
--bar-end: #fff5cc;
}
/* Relax — #3a7b61 (deep green) */
.wc-dosage.effect--relax {
--bar-start: #a5d4c0;
--bar-mid: #7dbb9e;
--bar-end: #e0f4ec;
}
/* Social — #d5567d (pink-red) */
.wc-dosage.effect--social {
--bar-start: #f5b8c9;
--bar-mid: #eb8fa9;
--bar-end: #fde4ec;
}
/* Sleep — #244b6c (deep blue) */
.wc-dosage.effect--sleep {
--bar-start: #a1b7cc;
--bar-mid: #7a96b5;
--bar-end: #e0e7ee;
}
/* Creative — #a05ca6 (purple) */
.wc-dosage.effect--creative {
--bar-start: #e1bce5;
--bar-mid: #ce94d3;
--bar-end: #f5e7f7;
}
/* Love — #b8332f (deep red) */
.wc-dosage.effect--love {
--bar-start: #ef9d99;
--bar-mid: #de6b66;
--bar-end: #f8d7d6;
}
/* ===========================
MOBILE LAYOUT (≤ 640px)
Vertical timeline with center pill bar
=========================== */
@media (max-width: 640px) {
/* Make the inner container a 3-col grid:
[ left text | center bar | right text ] */
.wc-dosage__inner {
display: grid;
grid-template-columns: 1fr 64px 1fr; /* center = bar width */
column-gap: 16px;
align-items: start;
}
/* Title + sub span full width above the grid */
.wc-dosage__title,
.wc-dosage__sub {
grid-column: 1 / -1;
text-align: left;
}
/* Turn the bar vertical and place it in the center column */
.wc-dosage__bar {
grid-column: 2;
grid-row: 3 / span 4; /* sits alongside the 4 content blocks */
width: 64px;
height: 700px; /* adjust to taste */
margin: 0 auto;
border-radius: 999px;
background: linear-gradient(180deg, var(--bar-start), var(--bar-mid) 50%, var(--bar-end));
position: relative;
--dash: min(45vw, 220px); /* length of the dashed tick lines */
}
/* Fade top/bottom (was left/right on desktop) */
.wc-dosage__bar::before,
.wc-dosage__bar::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 84px; /* fade size */
pointer-events: none;
z-index: 2;
}
.wc-dosage__bar::before {
top: 0;
background: linear-gradient(to bottom, var(--card-bg) 0%, transparent 100%);
}
.wc-dosage__bar::after {
bottom: 0;
background: linear-gradient(to top, var(--card-bg) 0%, transparent 100%);
}
/* Reposition ticks for vertical axis and draw short horizontal dashes */
.wc-dosage__tick {
left: 50%;
top: calc(var(--pos) * 100%);
transform: translate(-50%, -1px);
width: 0; height: 0;
}
.wc-dosage__tick::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: var(--dash);
height: 2px; /* tick thickness */
transform: translateX(-50%);
background: repeating-linear-gradient(
to right,
#213b2a55 0 10px, /* dash color/length */
transparent 10px 20px
);
}
/* Let the four copy blocks participate in the outer grid */
.wc-dosage__grid { display: contents; }
/* Alternate blocks around the center bar, like your mock */
.wc-dosage__col { margin: 0 0 12px; }
.wc-dosage__col:nth-child(1) {g;grid-column: 3;rid-row: 3;margin-top: 35px;} /* 0–10 mins (right, top) */
.wc-dosage__col:nth-child(2) { grid-column: 1; grid-row: 4; } /* 10–30 mins (left) */
.wc-dosage__col:nth-child(3) { grid-column: 3; grid-row: 5; } /* 30–120+ (right) */
.wc-dosage__col:nth-child(4) {grid-column: 1;grid-row: 6;margin-top: 40px;} /* 2–3+ hrs (left, bottom) */
/* Tweak mobile type sizes/spacing */
.wc-dosage__time {font-size: 18px;margin-bottom: 6px;}
.wc-dosage__copy {font-size: 13px;line-height: 1.45;}
.wc-dosage__notice { grid-column: 1 / -1; margin-top: 16px; }
}
/* ===========================
GUMMIES VARIANT
=========================== */
.wc-dosage--gummies {
/* keep your card + typography vars from base */
/* Gummies gradient (rose → coral → peach, like your mock) */
--bar-start: #e799a6;
--bar-mid: #cf626d;
--bar-end: #f0c6ad;
}
/* Desktop/Tablet bar: horizontal with soft fades at both ends */
.wc-dosage--gummies .wc-dosage__bar {
position: relative;
height: var(--bar-h);
border-radius: var(--bar-radius);
background: linear-gradient(90deg, var(--bar-start), var(--bar-mid) 55%, var(--bar-end));
overflow: hidden;
box-shadow: inset 0 0 0 1px #00000010;
}
/* dashed ticks */
.wc-dosage--gummies .wc-dosage__tick {
position: absolute;
top: 0; bottom: 0; width: 0;
left: calc(var(--pos) * 100%);
}
.wc-dosage--gummies .wc-dosage__tick::after {
content: "";
position: absolute;
top: 10px; bottom: 10px; left: -1px;
width: 2px;
background: repeating-linear-gradient(
to bottom,
#1b3b2a66 0 7px,
transparent 7px 14px
);
}
/* Desktop labels: 3-up centered like mock */
.wc-dosage__grid--gummies {
display: grid;
grid-template-columns: repeat(3, minmax(0, 300px));
justify-content: center;
gap: clamp(18px, 2.2vw, 26px);
margin: 18px 0 6px;
}
.wc-dosage__grid--gummies .wc-dosage__col { text-align: center; }
.wc-dosage__grid--gummies .wc-dosage__time {
font-weight: 800;
color: var(--text);
font-size: clamp(17px, 2.4vw, 22px);
margin-bottom: 6px;
}
.wc-dosage__grid--gummies .wc-dosage__copy {
color: var(--muted);
font-size: clamp(12px, 1.6vw, 14px);
line-height: 1.45;
}
/* ===========================
MOBILE LAYOUT (≤ 640px)
Vertical center bar with 3 blocks (R/L/R)
=========================== */
@media (max-width: 640px) {
.wc-dosage--gummies .wc-dosage__inner {
display: grid;
grid-template-columns: 1fr 64px 1fr; /* center column is the bar */
column-gap: 16px;
align-items: start;
}
/* Title & sub full width */
.wc-dosage--gummies .wc-dosage__title,
.wc-dosage--gummies .wc-dosage__sub { grid-column: 1 / -1; text-align: left; }
/* Vertical bar */
.wc-dosage--gummies .wc-dosage__bar {
grid-column: 2;
grid-row: 3 / span 3; /* runs next to the 3 content rows */
width: 64px;
height: 620px; /* adjust if needed */
margin: 0 auto;
border-radius: 999px;
background: linear-gradient(180deg, var(--bar-start), var(--bar-mid) 50%, var(--bar-end));
position: relative;
--dash: min(45vw, 220px);
}
/* Horizontal dashed ticks crossing the bar */
.wc-dosage--gummies .wc-dosage__tick {
left: 50%;
top: calc(var(--pos) * 100%);
transform: translate(-50%, -1px);
width: 0; height: 0;
}
.wc-dosage--gummies .wc-dosage__tick::after {
top: 0; left: 50%; width: var(--dash); height: 2px;
transform: translateX(-50%);
background: repeating-linear-gradient(
to right,
#1b3b2a66 0 10px,
transparent 10px 20px
);
}
/* Place the 3 content blocks around the center bar (R/L/R like your mock) */
.wc-dosage--gummies .wc-dosage__grid--gummies { display: contents; }
.wc-dosage--gummies .wc-dosage__col { margin: 0 0 12px; }
.wc-dosage--gummies .wc-dosage__col:nth-child(1) { grid-column: 3; grid-row: 3; margin-top: 32px; } /* 5–15 min (right, top) */
.wc-dosage--gummies .wc-dosage__col:nth-child(2) { grid-column: 1; grid-row: 4; } /* 15 min–2+ hrs (left, middle) */
.wc-dosage--gummies .wc-dosage__col:nth-child(3) { grid-column: 3; grid-row: 5; } /* 5+ hrs (right, bottom) */
/* Type sizes for mobile */
.wc-dosage--gummies .wc-dosage__time { font-size: 20px; margin-bottom: 6px; }
.wc-dosage--gummies .wc-dosage__copy { font-size: 15px; line-height: 1.45; }
.wc-dosage--gummies .wc-dosage__notice { grid-column: 1 / -1; margin-top: 16px; }
}
/* Tablet tweak: 2 columns if needed */
@media (min-width: 641px) and (max-width: 900px) {
.wc-dosage__grid--gummies { grid-template-columns: 1fr 1fr; }
}
.header-search__products .swiper-slide .wc-attr-badge {font-size:10px}
.header-search__products .swiper-slide .risk-level-dot span {border: 1px solid #283d39 !important;height: 6px;width: 6px;}
.header-search__products .swiper-slide .risk-level-dot {margin: 0 0 0 0;gap: 2px;}
body.woocommerce-account .woocommerce-MyAccount-content h3 {font-size: 1.675rem;font-weight: 600;}
.glozin-button-link.glozin-button.gz-button.gz-button-dark svg{color:#fff;fill:#fff}
.qilo-bundle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.qilo-bundle-item {
display: block;
}
.qilo-bundle-card {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: #faf6ff;
border: 1px solid rgba(0,0,0,0.05);
cursor: pointer;
}
.qilo-bundle-card img {max-width:75px}
.qilo-bundle-item-checkbox {
display: none;
}
.qilo-bundle-item-checkbox:checked + .qilo-bundle-card {
border-color: #a11d26;
box-shadow: 0 0 0 2px rgba(161,29,38,0.2);
}
/* ===== Elementor Popup Zoom (robust version) ===== */
/* Base state */
.elementor-popup-modal.modal-zoom-effect .dialog-widget-content{
transform-origin: center center;
will-change: transform, opacity;
opacity: 0;
transform: scale(.94);
}
/* OPEN animation:
Runs whenever the modal is visible (style does NOT contain 'display: none')
Works for style="", 'display:block', etc. */
.elementor-popup-modal.modal-zoom-effect:not([style*="display: none"]) .dialog-widget-content{
animation: szZoomIn .26s cubic-bezier(.22,.61,.36,1) forwards;
}
/* CLOSE animation:
We’ll add .is-closing (via tiny JS) right before closing */
.elementor-popup-modal.modal-zoom-effect.is-closing .dialog-widget-content{
animation: szZoomOut .22s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes szZoomIn{
0% { opacity: 0; transform: scale(.8); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes szZoomOut{
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(.80); }
}
/* (Optional) overlay fade for polish */
.elementor-popup-modal.modal-zoom-effect{ background: rgba(0,0,0,0); }
.elementor-popup-modal.modal-zoom-effect:not([style*="display: none"]){
animation: szOverlayIn .26s ease-out forwards;
}
.elementor-popup-modal.modal-zoom-effect.is-closing{
animation: szOverlayOut .22s ease-in forwards;
}
@keyframes szOverlayIn { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.25); } }
@keyframes szOverlayOut { from { background: rgba(0,0,0,.5); } to { background: rgba(0,0,0,0); } }
/* Accessibility */
@media (prefers-reduced-motion: reduce){
.elementor-popup-modal.modal-zoom-effect .dialog-widget-content{ animation: none !important; opacity: 1 !important; transform: none !important; }
.elementor-popup-modal.modal-zoom-effect.is-closing .dialog-widget-content{ animation: none !important; }
}
/* Show an "X" cursor on the overlay area only (modal visible state) */
.elementor-popup-modal.modal-zoom-effect:not([style*="display: none"]) {
cursor: url("data:image/svg+xml;utf8,") 12 12, not-allowed;
}
/* Keep normal cursor over the content */
.elementor-popup-modal.modal-zoom-effect .dialog-widget-content {
cursor: auto;
}
/* Keep pointer for close buttons */
.elementor-popup-modal.modal-zoom-effect .dialog-close-button {
cursor: pointer;
}
/* Optional: sharper X on high-DPI screens (bigger cursor) */
@media (min-resolution: 2dppx) {
.elementor-popup-modal.modal-zoom-effect:not([style*='display: none']) {
cursor: url("data:image/svg+xml;utf8,") 20 20, not-allowed;
}
}
.modal--open .modal__backdrop {background-color: rgba(0, 0, 0, .25);}
body .offscreen-panel .sidebar__backdrop,body .panel__backdrop { background-color: rgba(0,0,0,.25); }
body.woocommerce-account .woocommerce-MyAccount-content {background: #fff;border-radius: 14px !important;}
body.woocommerce-account .woocommerce-MyAccount-navigation {padding: 0;border: 0;}
@media (max-width:767px) {
.header-logo > a img, .header-logo > a svg {
width: 50px;
height: 50px;
}
}