@charset "UTF-8";
@charset "UTF-8";
@charset "UTF-8";
.wt-mycoupons ul li {
box-sizing: border-box;
display: inline-block;
padding: 15px;
width: 170px;
min-height: 60px;
margin-bottom: 15px;
vertical-align: top;
line-height: 1.4;
}   
.wt_coupon_wrapper{ width:100%; position:relative; flex-direction:row; flex-wrap:wrap; display:flex; justify-content:flex-start; margin-bottom:15px; gap:26px;  padding:15px 4px 4px 4px; }
.wt_coupon_wrapper .wt-single-coupon, .wt_coupon_wrapper .wt-sc-hidden-coupon-box{ width: 30%; min-width: 314px; margin: 0px; flex: 1 0 30%; }
.wt_coupon_wrapper .wt-sc-hidden-coupon-box{ content:""; visibility:hidden; }
.wt_sc_pagination{ width:100%; clear:both; margin-bottom:15px; text-align:right; }
.wt_sc_pagination .woocommerce-pagination{ display:inline-block; float:none; }
.wt_sc_available_coupon_sort_by{ float:right; font-size:14px; }
.wt_sc_available_coupon_sort_by form{ margin-bottom: 0; }
.wt_sc_bogo_cart_item_discount, .wt_sc_bogo_cart_item_discount *{ color:green; font-size:small; }
.wt-mycoupons:has(.wt_sc_myaccount_no_available_coupons) .wt_sc_available_coupon_sort_by { display: none; }
  :root { --hx-primary:            #1d4497;
--hx-primary-hover:      #0066bf;
--hx-primary-deep:       #0a3f9d;
--hx-secondary:          #141414;
--hx-accent-gold:        #bca76d; --hx-text:               #545454;
--hx-heading:            #333333;
--hx-text-strong:        #212121;
--hx-inverse:            #ffffff; --hx-bg:                 #ffffff;
--hx-bg-alt:             #f8f8f8;
--hx-border:             #e9e9e9; --hx-link:               #1d4497;
--hx-link-hover:         #002f96; --hx-btn-bg:             #0a0100; --hx-btn-text:           #ffffff;
--hx-btn-checkout-bg:    #333333;
--hx-btn-cart-bg:        #ffd814; --hx-btn-cart-text:      #000000; --hx-badge-sale:         #0a3f9d;
--hx-badge-oos:          #ff6161;
--hx-badge-new:          #82b440;
--hx-badge-featured:     #ff9f00;
--hx-success:            #8fae1b;
--hx-info:               #1e85be;
--hx-error:              #b81c23;
--hx-notice-bg:          #f7f6f7;
--hx-notice-text:        #515151;
--hx-discount:           #388e3c; --hx-plan-1:             #ffd814;
--hx-plan-2:             #3266d3; --hx-font:               Montserrat, Arial, Helvetica, sans-serif;
--hx-text-base:          16px;
--hx-leading:            1.75;
--hx-leading-heading:    1.4;
--hx-weight-body:        400;
--hx-weight-heading:     600;
--hx-h1: 26px;
--hx-h2: 24px;
--hx-h3: 22px;
--hx-h4: 19px;
--hx-h5: 16px;
--hx-h6: 14px;
--hx-text-nav:           14px;
--hx-text-button:        15px;
--hx-text-small:         14px;
--hx-text-xs:            12px;
--hx-heading-mb:         0.6781em;  --hx-container-max:      1600px;
--hx-container-width:    96%; --hx-gutter:             10px;
--hx-content-pad-y:      35px;
--hx-hero-pad-top:       200px;
--hx-hero-pad-bottom:    150px;
--hx-footer-pad-y:       5rem; --hx-container-boxed:    1200px; --hx-surface-grey:       #f3f3f3; --hx-radius:             0;
--hx-radius-pill:        20px; --hx-radius-plan:        29px; --hx-radius-cta:         30px;
--hx-radius-media:       20px;
--hx-radius-round:       50%; --hx-shadow-button:      0 1px 2px 0 rgba(0, 0, 0, .15);
--hx-shadow-ring:        0 0 3px rgba(0, 0, 0, .1);
--hx-shadow-ring-strong: 0 0 4px rgba(0, 0, 0, .15);
--hx-shadow-card-hover:  0 0 10px rgba(0, 0, 0, .15);
--hx-shadow-overlay:     0 8px 8px 0 rgba(0, 0, 0, .15);
--hx-shadow-sticky:      0 -1px 5px rgba(0, 0, 0, .06); --hx-t-fast:    all .25s ease;
--hx-t-ui:      background-color .2s ease-in-out, border-color .2s ease-in-out, color .3s ease-in-out;
--hx-t-slide:   transform .5s ease;
--hx-t-drawer:  transform .3s ease, opacity .3s ease, visibility .3s ease;
--hx-t-image:   all .4s linear; --hx-ease-overshoot: cubic-bezier(0, 0, .44, 1.18); --hx-z-card: 9;
--hx-z-sticky-cta: 99;
--hx-z-header: 100;
--hx-z-promo: 101;
--hx-z-canvas: 995;
--hx-z-header-sticky: 997;
--hx-z-mask: 998;
--hx-z-drawer: 999;
--hx-z-lightbox: 1000;
--hx-z-tooltip: 1070;
--hx-z-preloader: 9999;
--hx-z-search: 99999;
--hx-z-skiplink: 100000;  --hx-header-topbar-h:    42px;
--hx-header-topbar-line: 40px;
--hx-header-main-h:      92px;
--hx-header-main-h-sticky: 75px;
--hx-header-main-h-mobile: 100px; --hx-header-nav-h:       42px; --hx-header-sticky-offset: 450px;
--hx-logo-max:           80px;
--hx-submenu-w:          210px;
--hx-drawer-w:           300px; --hx-minicart-w:         340px;  --hx-count-size:         18px;
--hx-text-badge:         10px; --hx-mask-bg:            rgba(0, 0, 0, .6);
--hx-search-popup-bg:    rgba(0, 0, 0, .7); --hx-mobile-link-hover:  #0066cc;  --hx-accordion-border: #d4d4d4; --hx-gutter-wide: 20px;
}
@media (prefers-reduced-motion: reduce) {
:root {
--hx-t-fast: none;
--hx-t-ui: none;
--hx-t-slide: none;
--hx-t-drawer: none;
--hx-t-image: none;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
} body.admin-bar {
--hx-z-offset: 999000;
} @font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(//helixxfoods.ca/wp-content/themes/helixx/assets/fonts/montserrat-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(//helixxfoods.ca/wp-content/themes/helixx/assets/fonts/montserrat-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
U+A720-A7FF;
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
margin: 0;
min-height: 100vh;
background-color: var(--hx-bg);
color: var(--hx-text);
font-family: var(--hx-font);
font-size: var(--hx-text-base);
font-weight: var(--hx-weight-body);
line-height: var(--hx-leading);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, pre {
margin: 0;
}
ul, ol {
margin: 0;
padding: 0;
}
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
hr {
border: 0;
border-top: 1px solid var(--hx-border);
margin: 2rem 0;
height: 0;
}
[hidden] {
display: none !important;
} h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--hx-heading);
font-family: var(--hx-font);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
margin-bottom: var(--hx-heading-mb);
text-transform: inherit;
}
h1, .h1 { font-size: var(--hx-h1); }
h2, .h2 { font-size: var(--hx-h2); }
h3, .h3 { font-size: var(--hx-h3); }
h4, .h4 { font-size: var(--hx-h4); }
h5, .h5 { font-size: var(--hx-h5); }
h6, .h6 { font-size: var(--hx-h6); }
p {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: 0;
}
a {
color: var(--hx-link);
text-decoration: none;
transition: var(--hx-t-ui);
}
a:hover,
a:focus {
color: var(--hx-link-hover);
}
strong, b {
font-weight: 600;
}
small {
font-size: var(--hx-text-small);
} ul, ol {
list-style: none;
}
blockquote {
border-left: 3px solid var(--hx-primary);
margin: 1.5rem 0;
padding-left: 1.25rem;
font-style: italic;
}
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .9em;
}
pre {
background: var(--hx-bg-alt);
overflow-x: auto;
padding: 1rem;
}
::selection {
background: var(--hx-primary);
color: var(--hx-inverse);
}  .hx-container {
width: 100%;
max-width: var(--hx-container-max);
margin-inline: auto;
padding-inline: 15px;
}
@media (min-width: 768px) {
.hx-container {
padding-inline: var(--hx-gutter);
}
}
@media (min-width: 1200px) {
.hx-container {
width: var(--hx-container-width);
padding-inline: 0;
}
}
.hx-container--narrow {
max-width: 860px;
} .hx-container--fluid {
width: 100%;
max-width: none;
} .hx-grid {
display: grid;
gap: var(--hx-gutter);
grid-template-columns: repeat(var(--hx-cols, 1), minmax(0, 1fr));
}
.hx-grid--2 { --hx-cols: 2; }
.hx-grid--3 { --hx-cols: 3; }
.hx-grid--4 { --hx-cols: 4; }
.hx-grid--5 { --hx-cols: 5; }
@media (max-width: 1024px) {
.hx-grid--4,
.hx-grid--5 { --hx-cols: 3; }
}
@media (max-width: 767px) {
.hx-grid--3,
.hx-grid--4,
.hx-grid--5 { --hx-cols: 2; }
.hx-grid--2 { --hx-cols: 1; }
} .hx-layout {
display: grid;
gap: 30px;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1025px) {
.hx-layout--has-aside {
grid-template-columns: minmax(0, 1fr) var(--hx-aside, 290px);
}
.hx-layout--aside-left {
grid-template-columns: var(--hx-aside, 290px) minmax(0, 1fr);
}
.hx-layout--aside-left > .hx-layout__main { order: 2; }
.hx-layout--aside-left > .hx-layout__aside { order: 1; }
} .site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: var(--hx-bg);
}
.site-content {
flex: 1 0 auto;
padding-block: var(--hx-content-pad-y);
}
.content-area {
min-width: 0;
} .hx-spacer { height: var(--hx-space, 40px); }
.hx-spacer--sm { --hx-space: 20px; }
.hx-spacer--lg { --hx-space: 80px; } input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
width: 100%;
max-width: 100%;
padding: 10px 18px;
background-color: var(--hx-bg);
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-pill);
color: var(--hx-text);
line-height: 1.6;
transition: var(--hx-t-ui);
appearance: none;
}
textarea {
min-height: 140px;
border-radius: var(--hx-radius-media);
resize: vertical;
}
select {
background-image: linear-gradient(45deg, transparent 50%, var(--hx-text) 50%),
linear-gradient(135deg, var(--hx-text) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 40px;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--hx-primary);
outline: 0;
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
margin-right: .5em;
accent-color: var(--hx-primary);
}
label {
display: inline-block;
margin-bottom: .35em;
}
::placeholder {
color: var(--hx-text);
opacity: .7;
} .hx-button,
.button,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
display: inline-block;
padding: 12px 28px;
background-color: var(--hx-btn-bg);
border: 1px solid transparent;
border-radius: var(--hx-radius-pill);
box-shadow: var(--hx-shadow-button);
color: var(--hx-btn-text);
font-size: var(--hx-text-button);
font-weight: 600;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--hx-t-ui);
}
.hx-button:hover,
.hx-button:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-button--primary {
background-color: var(--hx-primary);
}
.hx-button--primary:hover,
.hx-button--primary:focus {
background-color: var(--hx-primary-hover);
}
.hx-button--cart {
width: 100%;
background-color: var(--hx-btn-cart-bg);
border-radius: var(--hx-radius-plan);
color: var(--hx-btn-cart-text);
padding: 14px 20px;
}
.hx-button--cart:hover,
.hx-button--cart:focus {
background-color: var(--hx-btn-cart-bg);
color: var(--hx-btn-cart-text);
border-color: var(--hx-btn-cart-text);
}
.hx-button--ghost {
background-color: transparent;
border-color: currentColor;
box-shadow: none;
color: var(--hx-text-strong);
}
.hx-button[disabled],
button[disabled],
.button.disabled {
opacity: .55;
cursor: not-allowed;
} .hx-iconbutton {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: 0;
box-shadow: none;
color: inherit;
cursor: pointer;
}
.hx-iconbutton:hover,
.hx-iconbutton:focus {
background: none;
color: var(--hx-primary);
} .hx-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.hx-icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -.125em;
flex: none;
pointer-events: none;
}  .screen-reader-text {
border: 0;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap;
word-wrap: normal;
}
.screen-reader-text:focus {
clip-path: none;
height: auto;
width: auto;
display: block;
top: 5px;
left: 5px;
padding: 15px 23px 14px;
background-color: var(--hx-bg);
border-radius: var(--hx-radius);
box-shadow: var(--hx-shadow-ring-strong);
color: var(--hx-primary);
font-size: var(--hx-text-small);
font-weight: 700;
line-height: normal;
text-decoration: none;
z-index: var(--hx-z-skiplink);
}
.hx-skip-link:focus {
z-index: calc(var(--hx-z-skiplink) + var(--hx-z-offset, 0));
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--hx-primary);
outline-offset: 2px;
} .hx-visually-hidden { border: 0;
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
white-space: nowrap;
}
.hx-text-center { text-align: center; }
.hx-text-left   { text-align: left; }
.hx-text-right  { text-align: right; }
.hx-flow > * + * { margin-top: var(--hx-flow, 1rem); }
.hx-stack {
display: flex;
align-items: center;
gap: var(--hx-stack-gap, 10px);
}
.hx-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .hx-scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
} .hx-hide-lg-down { display: none; }
@media (min-width: 1025px) {
.hx-hide-lg-down { display: revert; }
.hx-hide-lg-up { display: none; }
}
@media (max-width: 767px) {
.hx-hide-sm { display: none; }
} .hx-no-results {
padding: 40px 0;
max-width: 640px;
}
.hx-no-results p {
margin-bottom: 1.5rem;
} .hx-pagination {
margin-top: 40px;
}
.hx-pagination .nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.hx-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 10px;
border: 1px solid var(--hx-border);
color: var(--hx-text-strong);
font-size: var(--hx-text-small);
transition: var(--hx-t-ui);
}
.hx-pagination .page-numbers:hover,
.hx-pagination .page-numbers.current {
background-color: var(--hx-primary);
border-color: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-pagination .page-numbers.dots {
border-color: transparent;
} .hx-entry-media {
display: block;
margin-bottom: 1rem;
overflow: hidden;
}
.hx-entry-media img {
width: 100%;
} .hx-searchform {
display: flex;
gap: 8px;
max-width: 520px;
}
.hx-searchform .hx-searchform__field {
flex: 1 1 auto;
min-width: 0;
}
.hx-searchform .hx-searchform__submit {
flex: none;
} .hx-404 {
padding-block: 60px;
text-align: center;
}
.hx-404__title {
font-size: 48px;
line-height: 1;
margin-bottom: 1rem;
}
.hx-404__tagline {
margin-bottom: 2rem;
}
.hx-404 .hx-searchform {
margin-inline: auto;
} .site-header--fallback {
padding-block: 18px;
border-bottom: 1px solid var(--hx-border);
}
.site-header--fallback .hx-stack {
justify-content: space-between;
gap: 24px;
}
.site-header--fallback .site-header__brand {
font-size: var(--hx-h4);
font-weight: var(--hx-weight-heading);
margin: 0;
}
.site-header--fallback .menu {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: var(--hx-text-nav);
font-weight: 600;
}
.site-footer--fallback {
padding-block: var(--hx-footer-pad-y);
background-color: var(--hx-primary);
color: var(--hx-inverse);
text-align: center;
}
.hx-page-hero--fallback {
padding-block: 40px;
background-color: var(--hx-bg-alt);
text-align: center;
}
.hx-page-hero__title {
margin-bottom: 0;
}   .site-header .container {
width: 100%;
max-width: var(--hx-container-max);
margin-inline: auto;
padding-inline: var(--hx-gutter);
}
@media (min-width: 1200px) {
.site-header .container {
width: var(--hx-container-width);
}
}
.site-header .row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.site-header .col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.site-header .col-6 {
flex: 0 0 50%;
max-width: 50%;
}
.site-header .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.site-header .d-none {
display: none;
}
.site-header .d-flex {
display: flex;
}
.site-header .justify-content-center {
justify-content: center;
}
@media (min-width: 1025px) {
.site-header .d-lg-flex {
display: flex;
}
.site-header .d-lg-none {
display: none;
}
} .site-header {
position: relative;
z-index: var(--hx-z-header);
background-color: var(--hx-bg);
color: var(--hx-text);
}
.site-header a {
color: var(--hx-text-strong);
transition: var(--hx-t-ui);
}
.site-header a:hover,
.site-header a:focus-visible {
color: var(--hx-primary);
}
.site-header ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-header ul li {
margin-bottom: 0;
}
.header-desktop,
.header-mobile {
flex: 0 0 100%;
max-width: 100%;
}
.header-col {
display: flex;
flex-direction: row;
align-items: center;
min-width: 0;
}
.header-col-left {
justify-content: flex-start;
}
.header-col-right {
justify-content: flex-end;
} .header-main .header-col > *,
.header-navigation .header-col > * {
padding-inline: var(--hx-gutter);
}
.header-main .header-col > *:first-child,
.header-navigation .header-col > *:first-child {
padding-inline-start: 0;
}
.header-main .header-col > *:last-child,
.header-navigation .header-col > *:last-child {
padding-inline-end: 0;
} .header-topbar {
max-height: var(--hx-header-topbar-h);
font-size: var(--hx-text-xs);
color: var(--hx-secondary);
background-color: var(--hx-bg);
border-bottom: 1px solid var(--hx-secondary);
}
.header-topbar .header-col > * {
display: inline-flex;
align-items: center;
line-height: var(--hx-header-topbar-line);
padding-inline: var(--hx-gutter);
}
.header-topbar a {
color: var(--hx-secondary);
}
.header-topbar a:hover,
.header-topbar a:focus-visible {
color: var(--hx-primary);
}
.header-topbar .welcome-message {
white-space: nowrap;
} .header-main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
height: var(--hx-header-main-h);
background-color: var(--hx-bg);
border-bottom: 1px solid var(--hx-border);
}
@media (max-width: 1024px) {
.header-main {
height: var(--hx-header-main-h-mobile);
}
}
.header-main > .container,
.header-navigation > .container,
.header-topbar > .container {
height: 100%;
}
.header-main .row,
.header-navigation .row {
height: 100%;
} .header-navigation .row {
flex-wrap: nowrap;
align-content: center;
} .header-logo {
display: flex;
align-items: center;
min-width: 0;
}
.header-logo a {
display: inline-flex;
align-items: center;
padding-block: 5px;
}
.header-logo .logo {
display: block;
width: auto;
max-width: var(--hx-logo-max);
height: auto;
}
.header-logo .logo--text {
font-weight: var(--hx-weight-heading);
font-size: var(--hx-h5);
white-space: nowrap;
} .header-logo__badge {
display: none;
}
@media (min-width: 768px) { .site-header .header-logo__badge {
display: block;
width: auto;
max-width: 132px;
height: auto;
margin-inline-start: 3em;
}
}
@media (max-width: 1199px) {
.site-header .header-logo__badge {
margin-inline-start: 1.25em;
}
} .hx-ajax-search {
position: relative;
width: 100%;
}
.hx-ajax-search .searchform {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius);
background-color: var(--hx-bg);
}
.hx-ajax-search .search-field {
flex: 1 1 auto;
min-width: 0;
height: 44px;
padding-inline-start: 1.5em;
border: none;
border-radius: 0;
background: none;
appearance: none;
font-size: var(--hx-text-small);
color: var(--hx-text);
}
.hx-ajax-search .search-field:focus {
outline: none;
}
.hx-ajax-search .searchform:focus-within {
border-color: var(--hx-primary);
}
.hx-ajax-search .search-submit {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: -1px;
padding: 12px 20px;
border: none;
border-radius: 0;
box-shadow: none;
background-color: var(--hx-btn-bg);
color: var(--hx-btn-text);
cursor: pointer;
transition: var(--hx-t-ui);
}
.hx-ajax-search .search-submit:hover,
.hx-ajax-search .search-submit:focus-visible {
background-color: var(--hx-primary);
}
.hx-ajax-search .search-submit .hx-icon {
font-size: 18px;
} .hx-ajax-search .search-results-wrapper:not(:empty),
.hx-ajax-search .trending-search-wrap {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 98;
max-height: 55vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background-color: var(--hx-bg);
box-shadow: var(--hx-shadow-ring-strong);
}
.hx-ajax-search .trending-search-wrap {
display: none;
}
.hx-ajax-search .trending-search-wrap.is-open {
display: block;
}
.trending-search-wrap ul li a,
.trending-search-wrap .trending-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 8px 20px;
}
.trending-search-wrap .trending-title {
font-weight: var(--hx-weight-heading);
color: #777777;
} .header-myaccount > a,
.header-wishlist > a,
.header-cart > a,
.header-mini-search > .search-icon-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.2;
font-size: var(--hx-text-xs);
white-space: nowrap;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--hx-text-strong);
transition: var(--hx-t-ui);
}
.header-mini-search > .search-icon-text:hover,
.header-mini-search > .search-icon-text:focus-visible {
color: var(--hx-primary);
}
.header-myaccount-icon .hx-icon,
.header-wishlist-icon .hx-icon,
.header-cart-icon .hx-icon,
.header-search-icon .hx-icon {
font-size: 22px;
}
.header-myaccount {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header-mini-search {
position: relative;
} .header-cart-icon,
.header-wishlist-icon {
position: relative;
display: inline-flex;
}
.header-cart-count,
.header-wishlist-count {
position: absolute;
top: -7px;
inset-inline-end: -8px;
display: flex;
align-items: center;
justify-content: center;
width: var(--hx-count-size);
height: var(--hx-count-size);
border-radius: var(--hx-radius-round);
font-size: var(--hx-text-badge);
line-height: 1;
background-color: var(--hx-primary);
color: var(--hx-inverse);
} .language-switcher .hx-dropdown,
.language-switcher .hx-dropdown ul {
margin: 0;
list-style: none;
}
.language-switcher .has-dropdown {
position: relative;
}
.hx-dropdown__toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0;
border: none;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
.hx-dropdown__toggle .hx-dropdown__chevron {
font-size: 7px;
} .hx-dropdown img {
width: auto;
height: 11px;
margin-inline-end: 5px;
} .header-col-right .language-switcher .hx-dropdown__toggle {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 22px auto;
grid-template-areas:
"flag flag"
"name chevron";
place-items: center;
column-gap: 3px;
font-size: var(--hx-text-xs);
line-height: 1.2;
color: var(--hx-text-strong);
}
.header-col-right .language-switcher .hx-dropdown__toggle > img {
grid-area: flag;
height: 15px;
margin: 0;
}
.header-col-right .language-switcher .hx-dropdown__toggle > span {
grid-area: name;
}
.header-col-right .language-switcher .hx-dropdown__toggle > .hx-dropdown__chevron {
grid-area: chevron;
}
.language-switcher .sub-dropdown {
position: absolute;
top: 100%;
inset-inline-start: -10px;
z-index: 98;
min-width: 60px;
max-width: 190px;
width: auto;
padding: 0;
background-color: var(--hx-bg);
box-shadow: var(--hx-shadow-ring);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(15px);
transition: var(--hx-t-drawer);
}
.header-col-right .language-switcher .sub-dropdown {
inset-inline-start: auto;
inset-inline-end: -10px;
} .language-switcher .has-dropdown:hover > .sub-dropdown,
.language-switcher .has-dropdown:focus-within > .sub-dropdown,
.language-switcher .has-dropdown.is-open > .sub-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.language-switcher .sub-dropdown li a {
display: flex;
align-items: center;
padding: 12px;
line-height: 1;
text-transform: none;
} .language-switcher {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.hx-language-options {
display: inline-grid;
grid-template-columns: repeat(2, minmax(34px, 1fr));
align-items: center;
margin: 0;
padding: 3px;
border: 1px solid #dbe2eb;
border-radius: 999px;
list-style: none;
background: #f3f6f9;
box-shadow: inset 0 1px 2px rgba(21, 34, 49, .04);
}
.hx-language-options li {
display: flex;
margin: 0;
padding: 0;
}
.hx-language-options__item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 28px;
padding: 0 8px;
border-radius: 999px;
color: #586575;
font-size: 11px;
font-weight: 750;
line-height: 1;
letter-spacing: .06em;
text-decoration: none;
transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
a.hx-language-options__item:hover {
color: var(--hx-primary);
background: #fff;
}
a.hx-language-options__item:focus-visible {
outline: 2px solid var(--hx-primary);
outline-offset: 2px;
}
.hx-language-options__item.is-current {
color: #fff;
background: var(--hx-primary);
box-shadow: 0 2px 6px rgba(32, 75, 151, .24);
cursor: default;
}
.header-col-right .language-switcher {
margin-inline-start: 4px;
}
.header-topbar .hx-language-options {
padding: 2px;
border-color: #dbe2eb;
background: #f3f6f9;
box-shadow: inset 0 1px 2px rgba(21, 34, 49, .04);
}
.header-topbar .hx-language-options__item {
min-height: 24px;
color: #586575;
font-size: 10px;
}
.header-topbar .hx-language-options__item.is-current {
color: #fff;
background: var(--hx-primary);
box-shadow: 0 1px 4px rgba(32, 75, 151, .2);
}
@media (prefers-reduced-motion: reduce) {
.hx-language-options__item { transition: none; }
} .header-navigation {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--hx-header-nav-h);
background-color: var(--hx-primary);
}
.header-navigation a,
.header-navigation .main-navigation ul.menu > li > a {
color: var(--hx-inverse);
}
.header-navigation a:hover,
.header-navigation a:focus-visible,
.header-navigation .main-navigation ul.menu > li > a:hover {
color: var(--hx-accent-gold);
}
.main-navigation,
.main-navigation > ul.menu,
.main-navigation > ul.menu > li {
display: flex;
align-items: center;
height: 100%;
}
.main-navigation ul.menu {
flex-direction: row;
flex-wrap: wrap;
}
.main-navigation ul.menu > li {
position: relative;
}
.main-navigation ul.menu > li > a {
display: flex;
flex-direction: row;
align-items: center;
height: var(--hx-header-nav-h);
padding-inline: var(--hx-gutter);
font-size: var(--hx-text-nav);
font-weight: var(--hx-weight-heading);
} .main-navigation ul.menu > li.menu-item-has-children > a::after {
content: "";
flex: 0 0 auto;
width: 0;
height: 0;
margin-inline-start: 5px;
border-inline: 3.5px solid transparent;
border-top: 4px solid currentcolor;
} .main-navigation ul.sub-menu {
position: absolute;
top: 100%;
inset-inline-start: 0;
z-index: 98;
width: var(--hx-submenu-w);
padding-block: 10px;
background-color: var(--hx-bg);
box-shadow: var(--hx-shadow-ring-strong);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(15px);
transition: var(--hx-t-drawer);
}
.main-navigation ul.menu > li:hover > ul.sub-menu,
.main-navigation ul.menu > li:focus-within > ul.sub-menu,
.main-navigation ul.menu li li:hover > ul.sub-menu,
.main-navigation ul.menu li li:focus-within > ul.sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
} .main-navigation ul.menu li li > ul.sub-menu {
inset-inline-start: 100%;
top: 0;
}
.main-navigation ul.sub-menu li {
position: relative;
}
.main-navigation ul.sub-menu li a {
display: block;
padding: 8px 14px;
font-size: var(--hx-text-small);
font-weight: var(--hx-weight-body);
color: var(--hx-text-strong);
}
.main-navigation ul.sub-menu li a:hover,
.main-navigation ul.sub-menu li a:focus-visible {
color: var(--hx-primary);
}
.main-navigation ul.sub-menu li.menu-item-has-children > a {
position: relative;
padding-inline-end: 24px;
}
.main-navigation ul.sub-menu li.menu-item-has-children > a::after {
content: "";
position: absolute;
top: 50%;
inset-inline-end: 12px;
width: 0;
height: 0;
margin-top: -3.5px;
border-block: 3.5px solid transparent;
border-inline-start: 4px solid currentcolor;
}
.main-navigation .hx-menu-coming-soon > a,
.hx-mobile-menu .hx-menu-coming-soon > a {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: default;
opacity: .62;
}
.main-navigation .hx-menu-coming-soon > a::after,
.hx-mobile-menu .hx-menu-coming-soon > a::after {
padding: 3px 6px;
border-radius: 999px;
color: var(--hx-primary);
background: var(--hx-bg-alt);
font-size: 8px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
content: "Soon";
} .header-navigation .hx-social {
display: flex;
justify-content: flex-end;
align-items: center;
}
.hx-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-inline-end: 7px;
margin-bottom: 7px;
border-radius: var(--hx-radius);
font-size: 14px;
}
.header-navigation .hx-social a {
margin-bottom: 0;
}
.hx-social a:last-child {
margin-inline-end: 0;
}
.hx-social.icons-shape-circle a {
border-radius: var(--hx-radius-round);
} .mobile-navbar .navbar-toggle {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 0;
border: none;
border-radius: 0;
background: none;
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
line-height: 1.2;
color: var(--hx-text-strong);
cursor: pointer;
}
.mobile-navbar .navbar-icon .hx-icon {
font-size: 22px;
} .hx-header-sentinel {
position: absolute;
top: calc(100% + var(--hx-header-sticky-offset));
inset-inline-start: 0;
width: 1px;
height: 1px;
pointer-events: none;
visibility: hidden;
}
.header-sticky .header-main.header-sticked {
position: fixed;
top: 0;
inset-inline: 0;
z-index: var(--hx-z-header-sticky);
height: var(--hx-header-main-h-sticky);
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
} .site-header.fixed .header-main {
margin-bottom: var(--hx-header-main-h);
}
@media (max-width: 1024px) {
.site-header.fixed .header-main {
margin-bottom: var(--hx-header-main-h-mobile);
}
} .header-sticky .header-main.header-sticked.scroll-down {
transform: translateY(-100%);
transition: transform var(--hx-t-slide);
}
.header-sticky .header-main.header-sticked.scroll-up {
transform: translateY(0);
transition: transform var(--hx-t-slide);
}
.admin-bar .header-sticky .header-main.header-sticked {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .header-sticky .header-main.header-sticked {
top: 46px;
}
}  .pressmart-mask-overaly {
position: fixed;
inset: 0;
z-index: var(--hx-z-mask);
width: 100%;
height: 100%;
padding: 0;
border: none;
background-color: var(--hx-mask-bg);
opacity: 0;
visibility: hidden;
cursor: default;
transition: opacity .5s ease, visibility 0s ease .5s;
}
.pressmart-mask-overaly.opened {
opacity: 1;
visibility: visible;
transition: opacity .25s ease, visibility 0s ease;
} .hx-mobile-menu {
position: fixed;
top: 0;
bottom: 0;
inset-inline-start: 0;
z-index: var(--hx-z-drawer);
display: flex;
flex-direction: column;
width: var(--hx-drawer-w);
max-width: 85vw;
overflow: hidden;
overflow-y: auto;
background-color: var(--hx-bg);
transform: translateX(-100%);
transition: var(--hx-t-slide);
}
.hx-mobile-menu.opened {
transform: translateX(0);
} .rtl .hx-mobile-menu {
transform: translateX(100%);
}
.rtl .hx-mobile-menu.opened {
transform: translateX(0);
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px;
border-bottom: 3px double var(--hx-border);
}
.mobile-menu-header .login-register {
display: inline-flex;
align-items: center;
gap: 15px;
font-size: var(--hx-h5);
font-weight: var(--hx-weight-heading);
text-transform: capitalize;
}
.hx-mobile-menu .mobile-nav-content {
display: none;
}
.hx-mobile-menu .mobile-nav-content.active {
display: block;
}
.hx-mobile-menu ul.mobile-main-menu {
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.hx-mobile-menu ul.mobile-main-menu li {
position: relative;
margin-bottom: 0;
list-style: none;
}
.hx-mobile-menu ul.mobile-main-menu li > a {
display: block;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--hx-heading);
}
.hx-mobile-menu ul.mobile-main-menu li > a:hover,
.hx-mobile-menu ul.mobile-main-menu li > a:focus-visible { color: var(--hx-mobile-link-hover);
}
.hx-mobile-menu ul.mobile-main-menu > li > a {
padding: 15px;
font-weight: var(--hx-weight-heading);
}
.hx-mobile-menu ul.mobile-main-menu ul li a {
display: block;
padding: 15px;
font-size: var(--hx-text-small);
}
.hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > a {
padding-inline-end: 55px;
} .hx-mobile-menu ul.mobile-main-menu ul.sub-menu {
display: none;
}
.hx-mobile-menu ul.mobile-main-menu li.active > ul.sub-menu {
display: block;
} .hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > .menu-toggle {
position: absolute;
top: 0;
inset-inline-end: 0;
z-index: 99;
width: 55px;
height: 53px;
padding: 0;
border: none;
background: none;
cursor: pointer;
color: inherit;
}
.hx-mobile-menu ul.mobile-main-menu li.menu-item-has-children > .menu-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
margin: -5px 0 0 -4px;
border-right: 2px solid currentcolor;
border-bottom: 2px solid currentcolor;
transform: rotate(45deg);
transition: var(--hx-t-fast);
}
.hx-mobile-menu ul.mobile-main-menu li.active > .menu-toggle::after {
margin-top: -1px;
transform: rotate(-135deg);
}
.mobile-topbar {
margin-top: auto;
padding: 15px;
} .hx-search-popup {
position: fixed;
inset: 0;
z-index: var(--hx-z-search);
width: 100vw;
height: 100vh;
background-color: var(--hx-search-popup-bg);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}
.hx-search-popup.opened {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hx-search-popup__wrap {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
padding: 80px;
transform: translateY(-100%);
transition: transform .3s ease-in-out;
}
.hx-search-popup.opened .hx-search-popup__wrap {
transform: translateY(0);
}
.hx-search-popup .hx-ajax-search {
max-width: 600px;
} .hx-search-popup .search-results-wrapper:not(:empty),
.hx-search-popup .trending-search-wrap {
position: static;
}
@media (max-width: 767px) {
.hx-search-popup__wrap {
padding: 70px 20px 20px;
}
} .hx-minicart-slide {
position: fixed;
top: 0;
bottom: 0;
inset-inline-end: 0;
z-index: var(--hx-z-drawer);
display: flex;
flex-direction: column;
width: var(--hx-minicart-w);
max-width: 90vw;
overflow: hidden;
overflow-y: auto;
background-color: var(--hx-bg);
transform: translateX(100%);
transition: var(--hx-t-slide);
}
.hx-minicart-slide.opened {
transform: translateX(0);
}
.rtl .hx-minicart-slide {
transform: translateX(-100%);
}
.rtl .hx-minicart-slide.opened {
transform: translateX(0);
}
.minicart-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 15px;
border-bottom: 1px solid var(--hx-border);
}
.minicart-header .minicart-title {
margin: 0;
font-size: var(--hx-h5);
font-weight: var(--hx-weight-heading);
}
.hx-minicart-slide .widget_shopping_cart,
.hx-minicart-slide .widget_shopping_cart_content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
} .close-sidebar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
padding: 0;
border: none;
background: none;
cursor: pointer;
color: inherit;
transition: var(--hx-t-ui);
}
.close-sidebar:hover,
.close-sidebar:focus-visible {
color: var(--hx-primary);
}
.hx-search-popup .close-sidebar {
position: absolute;
top: 30px;
inset-inline-end: 30px;
color: var(--hx-inverse);
} body.admin-bar .hx-mobile-menu,
body.admin-bar .hx-minicart-slide {
z-index: calc(var(--hx-z-drawer) + var(--hx-z-offset, 0));
}
body.admin-bar .pressmart-mask-overaly {
z-index: calc(var(--hx-z-mask) + var(--hx-z-offset, 0));
}
body.admin-bar .hx-search-popup {
z-index: calc(var(--hx-z-search) + var(--hx-z-offset, 0));
}
@media (min-width: 783px) {
body.admin-bar .hx-mobile-menu,
body.admin-bar .hx-minicart-slide {
top: 32px;
}
} body.hx-no-scroll {
overflow: hidden;
}  .site-footer {
background-color: var(--hx-primary);
color: var(--hx-inverse);
}
.footer-main {
padding-block: var(--hx-footer-pad-y);
} .hx-footer-row {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 576px) {
.hx-footer-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1025px) {
.hx-footer-row {
grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
}
}
.site-footer a {
color: var(--hx-inverse);
transition: color var(--hx-t-ui);
}
.site-footer a:hover,
.site-footer a:focus-visible {
color: var(--hx-accent-gold);
}
.hx-footer__title {
margin-bottom: 20px;
color: #f9f9f9;
font-size: 18px;
line-height: var(--hx-leading-heading);
}
.hx-footer__title--secondary {
margin-top: 34px;
} .hx-footer__subtitle {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
color: rgba(249, 249, 249, .72);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.3;
text-transform: uppercase;
}
.hx-footer__menu + .hx-footer__subtitle,
nav + .hx-footer__subtitle {
margin-top: 22px;
}
.hx-footer-col--shop .hx-footer__menu li {
display: flex;
align-items: center;
gap: 7px;
}
.hx-footer__menu {
margin: 0;
padding: 0;
list-style: none;
}
.hx-footer__logo-wrap {
margin-bottom: 1rem;
}
.hx-footer__logo {
height: auto;
max-width: 150px;
}
.hx-benefit-icon {
display: block;
width: auto;
height: auto;
object-fit: contain;
}
.hx-footer__canada-mark {
width: 58px;
margin: 1rem 0;
}
.hx-footer__canada-mark .hx-benefit-icon {
width: 100%;
height: auto;
}
.hx-footer__contact {
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.hx-footer__contact li {
display: flex;
align-items: center;
gap: 8px;
}
.hx-footer__copyright p {
margin-bottom: 0;
} .hx-social {
display: flex;
flex-wrap: wrap;
margin-block: 1rem;
}
.hx-social__link {
display: inline-flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
margin-right: 7px;
margin-bottom: 7px;
font-size: 14px;
}
.hx-social--circle .hx-social__link {
border-radius: var(--hx-radius-round);
} .hx-newsletter__row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hx-newsletter__input {
flex: 1 1 12rem;
min-width: 0;
padding: 0.5em 1em;
border: 0;
border-radius: var(--hx-radius-pill);
background-color: var(--hx-bg);
color: var(--hx-text);
}
.hx-newsletter__submit {
border-radius: var(--hx-radius-pill);
} .hx-newsletter__hp {
position: absolute !important;
left: -9999px;
height: 1px;
overflow: hidden;
} .hx-newsletter__notice {
margin: 0 0 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: var(--hx-radius-pill);
font-size: 0.875rem;
line-height: 1.35;
}
.hx-newsletter__notice--ok {
color: #fff;
background: var(--hx-success);
}
.hx-newsletter__notice--error {
color: #fff;
background: var(--hx-error);
} #page-title { padding-top: 34px;
padding-bottom: 34px;
background-color: var(--hx-bg-alt);
border-bottom: 1px solid var(--hx-border);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
}
.page-title .entry-header {
margin: 0;
}
.page-title .title {
margin: 0;
color: var(--hx-heading);
font-size: var(--hx-h1);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
}
.page-title .entry-breadcrumbs {
margin-top: 10px;
font-size: var(--hx-text-small);
color: var(--hx-text);
}
.page-title .entry-breadcrumbs a {
color: var(--hx-link);
}
.page-title .entry-breadcrumbs a:hover,
.page-title .entry-breadcrumbs a:focus {
color: var(--hx-link-hover);
}
@media (max-width: 767px) {
#page-title {
padding-top: 24px;
padding-bottom: 24px;
}
} .hx-breadcrumb {
font-size: var(--hx-text-small);
}
.hx-breadcrumb .delimiter-sep {
display: inline-block;
padding-inline: 6px;
}
.hx-breadcrumb .forward-slash::before {
content: "/";
} .hx-notices {
margin-block: 1rem;
} .hx-navbar {
position: fixed;
z-index: calc(var(--hx-z-sticky-cta) + var(--hx-z-offset, 0));
right: 0;
bottom: 0;
left: 0;
display: flex;
background-color: var(--hx-bg);
box-shadow: var(--hx-shadow-sticky);
}
@media (min-width: 1025px) {
.hx-navbar {
display: none;
}
}
.hx-navbar__item {
display: flex;
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 4px;
border: 0;
background: none;
color: var(--hx-heading);
font-size: var(--hx-text-xs);
gap: 2px;
text-align: center;
cursor: pointer;
}
.hx-navbar__icon {
position: relative;
display: inline-flex;
font-size: 18px;
}
.hx-navbar__count {
position: absolute;
top: -6px;
left: 100%;
min-width: 16px;
padding: 0 4px;
border-radius: var(--hx-radius-round);
background-color: var(--hx-primary);
color: var(--hx-inverse);
font-size: 10px;
line-height: 16px;
}
.hx-navbar__label {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} @media (max-width: 1024px) {
.site-footer {
padding-bottom: 60px;
}
} #main-content .container {
width: 100%;
max-width: var(--hx-container-max);
margin-inline: auto;
padding-inline: var(--hx-gutter);
}
@media (min-width: 1200px) {
#main-content .container {
width: var(--hx-container-width);
}
}
#main-content .row {
display: flex;
flex-wrap: wrap;
margin-inline: calc(var(--hx-gutter) * -1);
}
#main-content [class*="col-"] {
position: relative;
width: 100%;
padding-inline: var(--hx-gutter);
} #main-content .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
#main-content .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
#main-content .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
#main-content .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
#main-content .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
#main-content .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
#main-content .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}
@media (min-width: 1025px) {
#main-content .col-lg-3 { flex: 0 0 25%;         max-width: 25%; }
#main-content .col-lg-4 { flex: 0 0 33.333333%;  max-width: 33.333333%; }
#main-content .col-lg-9 { flex: 0 0 75%;         max-width: 75%; }
}
@media (min-width: 1200px) {
#main-content .col-xl-3 { flex: 0 0 25%;  max-width: 25%; }
#main-content .col-xl-9 { flex: 0 0 75%;  max-width: 75%; }
} html { overflow-x: clip; } .header-mobile .navbar-toggle,
.header-mobile .search-icon-text,
.header-mobile .header-cart > a {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 52px;
min-height: 48px;
padding: 4px 6px;
border: 0;
border-radius: 10px;
box-shadow: none;
background: none;
color: var(--hx-text-strong);
font-size: 11px;
font-weight: 600;
line-height: 1.1;
letter-spacing: .01em;
text-decoration: none;
transition: background-color .18s ease, color .18s ease;
} .header-mobile .navbar-toggle:hover,
.header-mobile .navbar-toggle:focus-visible,
.header-mobile .search-icon-text:hover,
.header-mobile .search-icon-text:focus-visible,
.header-mobile .header-cart > a:hover,
.header-mobile .header-cart > a:focus-visible {
background-color: rgba(29, 68, 151, .08);
color: var(--hx-primary);
}
.header-mobile .navbar-toggle:active,
.header-mobile .search-icon-text:active,
.header-mobile .header-cart > a:active {
background-color: rgba(29, 68, 151, .14);
} .header-mobile .navbar-icon .hx-icon,
.header-mobile .header-search-icon .hx-icon,
.header-mobile .header-cart-icon .hx-icon {
display: block;
font-size: 21px;
line-height: 1;
}
.header-mobile .navbar-label,
.header-mobile .header-icon-text {
display: block;
font-size: 11px;
font-weight: 600;
line-height: 1.1;
} .header-mobile .header-col-right {
gap: 2px;
justify-content: flex-end;
}
.header-mobile .header-mini-search { position: relative; display: flex; } .header-mobile .header-cart-icon { position: relative; display: block; } .header-mobile .search-icon-text[aria-expanded="true"],
.header-mobile .navbar-toggle[aria-expanded="true"] {
background-color: rgba(29, 68, 151, .12);
color: var(--hx-primary);
}
@media (max-width: 380px) {
.header-mobile .navbar-toggle,
.header-mobile .search-icon-text,
.header-mobile .header-cart > a {
min-width: 46px;
padding: 4px 3px;
}
} @media (max-width: 1199px) {
.header-topbar .welcome-message {
display: none;
}
} .header-logo__made {
display: none;
}
@media (max-width: 767px) { .header-main .header-logo {
flex-direction: column;
align-items: center;
gap: 1px;
}
.header-logo a {
padding-block: 2px;
}
.header-logo__made {
display: block;
color: #d52b1e;
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
}
@media (max-width: 380px) {
.header-logo__made {
font-size: 9px;
letter-spacing: .04em;
}
} @media (max-width: 767px) {
.site-header .header-mobile {
display: grid;
grid-template-columns: minmax(54px, 1fr) auto minmax(108px, 1fr);
width: 100%;
}
.site-header .header-mobile .header-col {
width: auto;
max-width: none;
}
.header-mobile .header-col-center {
justify-self: center;
}
.header-mobile .header-col-right {
justify-self: end;
}
.header-mobile .header-logo .logo {
max-width: min(var(--hx-logo-max), 118px);
}
} .hx-new-tag {
display: inline-block;
padding: 3px 6px 2px;
border-radius: 999px;
background: #c8102e;
color: #fff;
font-size: .6rem;
font-style: normal;
font-weight: 800;
letter-spacing: .06em;
line-height: 1;
text-transform: uppercase;
}
   .products div.product {
line-height: 1.6;
padding: 0 var(--hx-gutter);
}
.products div.product .product-wrapper {
position: relative;
height: 100%;
padding: var(--hx-gutter);
transition: box-shadow var(--hx-t-ui);
}
.products div.product:hover .product-wrapper {
box-shadow: var(--hx-shadow-card-hover);
z-index: var(--hx-z-card);
} .products .product-image {
position: relative;
overflow: hidden;
margin-bottom: 8px;
}
.products .product-image img {
display: block;
width: 100%;
height: auto;
transition: var(--hx-t-image);
}
.products .product-image .hover-image {
position: absolute;
inset: 0 auto auto 0;
opacity: 0;
visibility: hidden;
}
.products .product-image:hover .hover-image {
opacity: 1;
visibility: visible;
}
.products div.product.outofstock .product-image img {
filter: grayscale(1);
opacity: 0.8;
}
.product-labels {
position: absolute;
top: 1em;
left: 0;
z-index: var(--hx-z-card);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.product-labels > span {
display: block;
color: var(--hx-inverse);
font-size: 10px;
padding: 3px 10px;
margin-top: 8px;
text-transform: uppercase;
}
.product-labels > span:first-child {
margin-top: 0;
}
.product-labels span.new {
background-color: var(--hx-badge-new);
}
.product-labels span.featured {
background-color: var(--hx-badge-featured);
}
.product-labels span.out-of-stock {
background-color: var(--hx-badge-oos);
} .product-labels span.on-sale {
display: flex;
align-items: center;
justify-content: center;
width: 6em;
height: 6em;
background-color: var(--hx-plan-1);
color: var(--hx-btn-cart-text);
border-radius: var(--hx-radius-round);
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
padding: 0;
margin-top: 8px;
}
.products .product-image .quickview-button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: center;
opacity: 0;
visibility: hidden;
transform: translateY(35px);
transition: var(--hx-t-ui);
}
.products .product:hover .product-image .quickview-button,
.products .product:focus-within .product-image .quickview-button {
transform: translateY(0);
opacity: 1;
visibility: visible;
z-index: var(--hx-z-card);
}
.products .product-image .quickview-button a {
display: block;
padding: 0.4rem;
background-color: var(--hx-primary);
color: var(--hx-inverse);
} .products.product-style-1.grid-view .product-info {
text-align: center;
}
.products.product-style-1.grid-view .pressmart-star-rating {
justify-content: center;
}
.products .product-title {
font-size: 15px;
font-weight: var(--hx-weight-body);
line-height: var(--hx-leading-heading);
margin: 0 0 0.4rem;
}
.products .product-title a {
color: var(--hx-heading);
}
.products .pressmart-star-rating {
display: flex;
align-items: center;
margin-bottom: 6px;
} .star-rating {
--hx-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.43 24'%3E%3Cpath d='M12 .587l3.668 7.431 8.332 1.209-6 5.848 1.416 8.263L12 19.446l-7.416 3.892L6 15.075 0 9.227l8.332-1.209z'/%3E%3C/svg%3E");
position: relative;
display: inline-block;
width: 5.715em;
height: 1em;
font-size: 14px;
line-height: 1;
overflow: hidden;
background-color: var(--hx-text);
-webkit-mask-image: var(--hx-star);
mask-image: var(--hx-star);
-webkit-mask-size: 1.143em 1em;
mask-size: 1.143em 1em;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
}
.star-rating > span {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-indent: -9999px;
background-color: var(--hx-accent-gold);
}
.products .rating-counts {
margin-left: 6px;
line-height: 1;
font-size: var(--hx-text-xs);
} .products .woocommerce-product-details__short-description {
display: none;
} .products .product-price {
margin-bottom: 0.3rem;
} .products .product-price span.price {
display: flex;
flex-wrap: wrap;
justify-content: inherit;
font-size: 28px;
font-weight: var(--hx-weight-heading);
color: var(--hx-text-strong);
line-height: 1.2;
}
.products.product-style-1.grid-view .product-price span.price {
justify-content: center;
}
.products .product-price span.price > .woocommerce-Price-amount {
width: 100%;
}
.products .product-price span.price del {
width: 100%;
order: 1;
margin-bottom: -10px;
font-size: var(--hx-text-small);
font-weight: var(--hx-weight-body);
opacity: 1;
}
.products .product-price span.price ins {
width: 100%;
order: 2;
background: none;
padding: 0;
color: inherit;
text-decoration: none;
}  .bos4w-display-options ul {
list-style: none;
margin: 0;
padding: 0;
}
.bos4w-display-options li label {
display: block;
max-width: 290px;
margin: 10px auto;
padding: 3px 5px;
background-color: var(--hx-plan-1);
color: var(--hx-btn-cart-text);
border: 2px solid transparent;
border-radius: var(--hx-radius-plan);
text-align: center;
cursor: pointer;
font-size: var(--hx-text-button);
font-weight: var(--hx-weight-heading);
transition: var(--hx-t-ui);
}
.bos4w-display-options li label.selected {
border-color: transparent;
}
.bos4w-display-options li label input {
display: none;
} .products .ajax-add-to-cart-button {
display: inline-block;
min-width: 145px;
padding: 12px 20px;
border: 0;
border-radius: var(--hx-radius-pill);
box-shadow: var(--hx-shadow-button);
background-color: var(--hx-btn-cart-bg);
color: var(--hx-btn-cart-text);
font-size: var(--hx-text-button);
font-weight: var(--hx-weight-heading);
line-height: 1.2;
cursor: pointer;
transition: var(--hx-t-ui);
}
.products .ajax-add-to-cart-button[aria-busy="true"] {
opacity: 0.6;
pointer-events: none;
}
.products .custom-ajax-add-to-cart {
margin: 0;
} .product-buttons {
display: none;
}
.product-buttons-variations--visible .product-buttons {
display: block;
}
.product-buttons-variations--visible .cart-button .button {
display: inline-block;
min-width: 145px;
padding: 12px 20px;
border: 0;
border-radius: var(--hx-radius-pill);
box-shadow: var(--hx-shadow-button);
background-color: var(--hx-btn-cart-bg);
color: var(--hx-btn-cart-text);
font-size: var(--hx-text-button);
font-weight: var(--hx-weight-heading);
line-height: 1.2;
}
@media (max-width: 768px) {
.bos4w-display-options li label {
max-width: 100%;
width: 100%;
}
}  .hx-archive {
display: block;
}
.hx-archive .content-area {
min-width: 0;
}
@media (min-width: 768px) { #main-content .hx-archive--has-sidebar {
display: grid;
grid-template-columns: 4fr 8fr;
gap: 0 calc(var(--hx-gutter) * 3);
align-items: start;
margin-inline: 0;
}
#main-content .hx-archive--has-sidebar > .content-area {
order: 2;
}
#main-content .hx-archive--has-sidebar > .widget-area {
order: 1;
}
#main-content .hx-archive--has-sidebar > .content-area,
#main-content .hx-archive--has-sidebar > .widget-area {
width: auto;
max-width: none;
padding-inline: 0;
}
}
@media (min-width: 1025px) {
#main-content .hx-archive--has-sidebar {
grid-template-columns: 3fr 9fr;
}
} #page-title {
background-color: rgba(10, 27, 52, 0.38);
background-blend-mode: multiply;
background-size: cover;
background-position: center center;
padding-top: var(--hx-hero-pad-top);
padding-bottom: var(--hx-hero-pad-bottom);
}
.page-title.text-center {
text-align: center;
}
#page-title .entry-header {
margin: 0;
}
#page-title .title {
display: none;
margin: 0;
font-size: var(--hx-h1);
line-height: 1.2;
}
#page-title .entry-breadcrumbs {
display: none;
margin-top: 6px;
}
#page-title .pressmart-breadcrumb {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0 6px;
}
#page-title.color-scheme-dark .title,
#page-title.color-scheme-dark .pressmart-breadcrumb,
#page-title.color-scheme-dark .pressmart-breadcrumb a {
color: var(--hx-inverse);
}
.pressmart-breadcrumb .delimiter-sep.forward-slash::before {
content: "/";
} #page-title.hx-page-title--show-text .title,
#page-title.hx-page-title--show-text .entry-breadcrumbs {
display: block;
}
@media (max-width: 768px) {
#page-title:not(.hx-page-title--show-text) {
display: none;
}
#page-title.hx-page-title--show-text {
padding-block: 72px;
}
} .products-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
margin-bottom: 15px;
padding-bottom: 15px;
}
.products-header-left,
.products-header-right,
.products-header .show-products-number {
display: flex;
align-items: center;
}
.products-header .products-header-left > *,
.products-header .products-header-right > * {
margin: 0;
}
.products-header-right > div:not(:last-child) {
margin-right: 15px;
} .products-header .woocommerce-products-header__title {
font-size: var(--hx-h5);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
margin: 0;
}
.products-header .woocommerce-result-count {
font-size: var(--hx-text-xs);
margin-left: 10px;
}
.products-header .product-show span {
font-weight: var(--hx-weight-heading);
margin-right: 5px;
}
.products-header select {
height: 36px;
} .products-header .products-view a {
display: inline-flex;
align-items: center;
margin-right: 10px;
color: var(--hx-text);
}
.products-header .products-view a:last-child {
margin-right: 0;
}
.products-header .products-view a.active {
color: var(--hx-primary);
}
.products-header .products-view .hx-icon {
font-size: 20px;
}
.products-view__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
} .woocommerce-ordering {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
margin: 0;
text-align: center;
line-height: 30px;
}
.woocommerce-ordering__icon {
font-size: 23px;
color: var(--hx-text);
pointer-events: none;
}
.woocommerce-ordering select {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: transparent;
font-weight: var(--hx-weight-body);
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
@media (max-width: 1024px) {
.products-header .woocommerce-result-count,
.products-header .products-view,
.products-header .product-show {
display: none;
}
} .pressmart-active-filters {
margin-bottom: 15px;
}
.hx-active-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.hx-active-filters__remove {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-pill);
font-size: var(--hx-text-xs);
color: var(--hx-text);
}
.hx-active-filters__item--clear a {
font-size: var(--hx-text-xs);
text-decoration: underline;
} .products.products-wrap {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-inline: calc(var(--hx-gutter) * -1);
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.products.products-wrap {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .pressmart-pagination {
display: block;
padding: 1em 0.5em;
margin: 1em 0 2em;
text-align: center;
}
.pressmart-pagination ul {
list-style: none;
margin: 0;
padding: 0;
}
.pressmart-pagination li {
display: inline-block;
}
.pressmart-pagination li .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0 1px;
border-radius: var(--hx-radius-round);
font-weight: var(--hx-weight-heading);
color: var(--hx-text);
}
.pressmart-pagination .next,
.pressmart-pagination .prev {
width: auto;
padding: 0 15px;
text-transform: uppercase;
}
.pressmart-pagination .current {
background-color: var(--hx-primary);
color: var(--hx-inverse);
} .products.list-view.products-wrap {
grid-template-columns: minmax(0, 1fr);
}
.products.list-view div.product {
padding: 0 15px;
}
.products.list-view div.product .product-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--hx-gutter);
padding: 15px 0;
border-bottom: 1px solid var(--hx-border);
}
.products.list-view div.product:last-child .product-wrapper {
border-bottom: none;
}
.products.list-view div.product:hover .product-wrapper {
box-shadow: none;
}
.products.list-view .product-image {
flex: 0 0 30%;
max-width: 30%;
}
.products.list-view .product-info {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--hx-gutter);
flex: 1 1 auto;
text-align: left;
}
.products.list-view .woocommerce-product-details__short-description {
display: block;
margin-top: 15px;
}
.products.list-view .woocommerce-product-details__short-description ul,
.products.list-view .woocommerce-product-details__short-description ul li {
list-style: inside none disc;
} .custom-responsive-content {
margin-top: var(--hx-content-pad-y);
}
.custom-responsive-content p {
margin: 0;
} .widget-area .sidebar-inner {
padding-top: 1em;
}
.widget-area .widget {
margin-bottom: 30px;
} .widget-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: var(--hx-weight-heading);
color: var(--hx-heading);
margin-bottom: 20px;
cursor: pointer;
list-style: none;
}
.widget-title::-webkit-details-marker {
display: none;
}
details.hx-widget > .widget-title::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: var(--hx-t-fast);
}
details.hx-widget[open] > .widget-title::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.price-filter-list {
list-style: none;
margin: 0;
padding: 0;
}
.price-filter-list li a {
display: block;
padding: 4px 0;
color: var(--hx-text);
}
.price-filter-list li.chosen a {
font-weight: var(--hx-weight-heading);
color: var(--hx-primary);
}
@media (max-width: 767px) {
.has-mobile-canvas-sidebar .widget-area {
position: fixed;
inset: 0 auto 0 0;
display: flex;
flex-direction: column;
width: 300px;
padding-top: 1em;
overflow-y: auto;
background-color: var(--hx-bg);
z-index: calc(var(--hx-z-drawer) + var(--hx-z-offset, 0));
transform: translateX(-100%);
transition: var(--hx-t-drawer);
}
.has-mobile-canvas-sidebar .widget-area.opened {
transform: none;
}
}  .single-product-page .single-product-wrapper {
margin-bottom: 1em; }
@media (min-width: 768px) {
.single-product-wrapper {
align-items: start; }
.single-product-wrapper > .col-md-6:last-child {
position: sticky;
top: 50px;
align-self: start;
}
} .single-product-page .woocommerce-product-gallery {
display: flex;
flex-wrap: wrap;
margin-bottom: 1em;
position: relative;
} .woocommerce div.product div.images.woocommerce-product-gallery {
width: 100%;
float: none;
}
.woocommerce-product-gallery__wrapper {
position: relative;
margin: 0;
}
.woocommerce-product-gallery__wrapper,
.single-product-thumbnails {
flex-basis: 100%;
max-width: 100%;
}
.single-product-gallery {
position: relative;
} .woocommerce-product-gallery__image {
position: absolute;
inset: 0 auto auto 0;
width: 100%;
opacity: 0;
visibility: hidden;
transition: opacity var(--hx-t-image), visibility var(--hx-t-image);
}
.woocommerce-product-gallery__image:first-child {
position: relative;
}
.woocommerce-product-gallery__image > a {
display: block;
width: 100%;
}
.woocommerce-product-gallery__image img {
width: 100%;
height: auto;
} .woocommerce-product-gallery__trigger {
display: none;
} .product-gallery-bottom .single-product-thumbnails {
display: flex;
margin-top: 1em;
margin-left: -0.5em;
margin-right: -0.5em;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.hx-gallery__thumb {
flex: 0 0 25%;
scroll-snap-align: start;
cursor: pointer;
padding-left: 0.5em;
padding-right: 0.5em; opacity: 0.6;
transition: opacity var(--hx-t-ui);
}
.hx-gallery__thumb:hover {
opacity: 1;
}
.hx-gallery__radio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.hx-gallery__thumb:has(.hx-gallery__radio:focus-visible) {
opacity: 1;
outline: 3px solid var(--hx-primary);
outline-offset: 2px;
}
.pressmart-gallery-thumbnail-image img {
display: block;
width: 100%;
height: auto;
} .woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(1) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(1),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(2) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(2),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(3) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(3),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(4) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(4),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(5) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(5),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(6) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(6),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(7) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(7),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(8) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(8),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(9) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(9),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(10) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(10),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(11) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(11),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(12) .hx-gallery__radio:checked) .woocommerce-product-gallery__image:nth-child(12) {
opacity: 1;
visibility: visible;
z-index: var(--hx-z-card);
}
.hx-gallery__thumb:has(.hx-gallery__radio:checked) {
opacity: 1;
}
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(1) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(1),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(2) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(2),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(3) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(3),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(4) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(4),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(5) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(5),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(6) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(6),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(7) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(7),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(8) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(8),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(9) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(9),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(10) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(10),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(11) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(11),
.woocommerce-product-gallery:has(.hx-gallery__thumb:nth-of-type(12) .hx-gallery__radio:checked) .hx-lightbox__figure:nth-child(12) {
display: block;
} .woocommerce-product-gallery .single-product-images-btns {
position: absolute;
bottom: 1.5rem;
right: 1rem;
z-index: var(--hx-z-card);
}
.single-product-images-btns > div {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.woocommerce-product-gallery .single-product-images-btns a {
border-radius: var(--hx-radius-round);
box-sizing: content-box;
box-shadow: var(--hx-shadow-ring);
background: var(--hx-bg);
color: var(--hx-heading);
display: flex;
align-items: center;
justify-content: center;
height: 46px;
width: 46px;
}
.woocommerce-product-gallery .single-product-images-btns a .hx-icon {
width: 20px;
height: 20px;
}
.hx-lightbox {
display: none;
}
.hx-lightbox:target {
display: flex;
position: fixed;
inset: 0;
align-items: center;
justify-content: center;
padding: 2rem;
z-index: calc(var(--hx-z-lightbox) + var(--hx-z-offset, 0));
}
.hx-lightbox__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
}
.hx-lightbox__stage {
position: relative;
max-width: min(1200px, 92vw);
max-height: 88vh;
}
.hx-lightbox__figure {
display: none;
margin: 0;
}
.hx-lightbox__figure img {
max-width: 100%;
max-height: 88vh;
width: auto;
height: auto;
}
.hx-lightbox__close {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: var(--hx-radius-round);
background: var(--hx-bg);
color: var(--hx-heading);
} .woocommerce div.summary .entry-breadcrumbs {
margin-bottom: 0.678rem;
}
.woocommerce div.product .pressmart-breadcrumb {
margin-bottom: 0.3em;
}
.woocommerce div.product .pressmart-breadcrumb,
.woocommerce div.product .pressmart-breadcrumb a {
font-size: var(--hx-text-xs);
}
.woocommerce div.product .pressmart-breadcrumb a,
.woocommerce div.product .pressmart-breadcrumb span:last-child {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
.woocommerce div.product .pressmart-breadcrumb span:last-child {
max-width: 200px;
}
.woocommerce div.product .pressmart-breadcrumb a:hover {
max-width: 180px;
}
.pressmart-breadcrumb .delimiter-sep.forward-slash::before {
content: "/";
padding: 0 0.4em;
} .woocommerce div.product .product_title {
font-size: var(--hx-h2);
margin: 0 0 0.678rem;
padding: 0;
clear: none;
} .woocommerce div.product .entry-breadcrumbs,
.woocommerce div.product .product_title {
margin-right: 15%;
} .product-navigation-share {
display: flex;
align-items: center;
position: absolute;
right: 1em;
top: 0;
}
.product-navigation {
display: flex;
align-items: flex-start;
}
.product-navigation .product-nav-btn {
position: relative;
}
.product-navigation .product-nav-btn > a {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.product-navigation .product-prev > a {
margin-right: 0.5em;
}
.product-navigation .product-info-wrap {
right: -1em;
width: 234px;
}
.product-navigation .product-info {
display: flex;
align-items: flex-start;
flex-direction: row;
}
.product-navigation .product-thumb {
margin-right: 1em;
flex: 0 0 30%;
}
.product-navigation .product-info-wrap {
box-shadow: var(--hx-shadow-ring);
background: var(--hx-bg);
position: absolute;
padding: 4px;
opacity: 0;
visibility: hidden;
right: -3em;
top: 100%;
pointer-events: none;
transform: translateY(20px);
transition: transform var(--hx-t-slide), opacity var(--hx-t-slide), visibility var(--hx-t-slide);
z-index: var(--hx-z-card);
}
.product-navigation .product-nav-btn:hover .product-info-wrap,
.product-navigation .product-nav-btn:focus-within .product-info-wrap {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
} .woocommerce .star-rating span {
color: var(--hx-accent-gold);
} .woocommerce div.summary > p.price,
.woocommerce div.summary > span.price {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
font-size: 28px;
} .woocommerce div.product p.price del,
.woocommerce div.product span.price del {
display: none;
} .woocommerce div.summary .woocommerce-product-details__short-description {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.woocommerce div.summary .woocommerce-product-details__short-description > span,
.woocommerce div.product form.cart .variations th.label {
width: 115px;
font-weight: var(--hx-weight-heading);
padding-right: 0.6781em;
}
.woocommerce div.summary .woocommerce-product-details__short-description .short-description {
flex: 1 1 auto;
}
.woocommerce div.summary .woocommerce-product-details__short-description ul {
list-style: inside;
margin: 0;
} .woocommerce div.product form.cart .variations th.label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.woocommerce div.product form.cart .reset_variations {
display: none;
} .pressmart-product-trust-badge {
width: 70%;
text-align: center;
margin: 0 0 1rem;
padding: 1rem;
}
.pressmart-product-trust-badge img {
max-width: 100%;
height: auto;
} .woocommerce div.product .product_meta > span {
display: block;
font-size: var(--hx-text-small);
} .product-share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
}
.product-share .share-label {
font-weight: var(--hx-weight-heading);
}
.product-share .pressmart-social {
display: flex;
align-items: center;
gap: 0.5em;
}
.product-share .pressmart-social a,
.product-share .pressmart-social button {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-round);
background: none;
color: var(--hx-text);
cursor: pointer;
transition: color var(--hx-t-ui), border-color var(--hx-t-ui);
}
.product-share .pressmart-social a:hover,
.product-share .pressmart-social button:hover {
color: var(--hx-primary);
border-color: var(--hx-primary);
}
.product-share .social-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .single-product-page div.quantity {
display: inline-flex;
align-items: stretch;
vertical-align: middle;
margin-right: 10px;
} .single-product-page div.quantity .minus,
.single-product-page div.quantity .plus {
flex: 0 0 auto;
width: 2.5em;
min-width: 34px;
border: 1px solid var(--hx-border);
background: var(--hx-bg-alt);
cursor: pointer;
line-height: 1;
}
.single-product-page div.quantity .qty {
width: 4em;
text-align: center;
border: 1px solid var(--hx-border);
border-left: 0;
border-right: 0;
-moz-appearance: textfield;
appearance: textfield;
}
.single-product-page div.quantity .qty::-webkit-outer-spin-button,
.single-product-page div.quantity .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} .pressmart-bought-together-products {
margin-bottom: 3em;
}
.single-product-page > .pressmart-bought-together-products .bought-together-title {
margin-bottom: 1.2rem;
} .single-product-page > .pressmart-bought-together-products .row {
margin: 0;
}
#main-content .pressmart-bought-together-products [class*="col-"] {
width: auto;
max-width: none;
padding: 0;
} #main-content .pressmart-bought-together-products > .row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: clamp(20px, 3vw, 44px);
margin: 0;
}
#main-content .pressmart-bought-together-products > .row > .products {
flex: 1 1 auto;
min-width: 0;
}
#main-content .pressmart-bought-together-products > .row > .items-total-price-button {
flex: 0 0 300px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.5rem 1.6rem;
border: 1px solid var(--hx-border-color, #e6e6e6);
border-radius: 14px;
background: var(--hx-bg-alt, #f6f7f9);
}
@media (min-width: 900px) {
#main-content .pressmart-bought-together-products > .row {
flex-wrap: nowrap;
}
}
@media (max-width: 899px) {
#main-content .pressmart-bought-together-products > .row > .items-total-price-button {
flex-basis: 100%;
}
} #main-content .pressmart-bought-together-products .products > .row {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
gap: clamp(20px, 2.6vw, 38px);
margin: 0;
}
.single-product-page > .pressmart-bought-together-products .products div.product {
flex: 1 1 0;
min-width: 0;
position: relative;
text-align: center;
}
.single-product-page > .pressmart-bought-together-products .products div.product + div.product::before {
content: "+";
position: absolute;
left: clamp(-19px, -1.3vw, -10px);
top: 38%;
transform: translateY(-50%);
font-size: 1.48rem;
font-weight: 700;
line-height: 0;
color: var(--hx2-ink, #16202a);
}
.single-product-page > .pressmart-bought-together-products .product-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.single-product-page > .pressmart-bought-together-products .product-image img {
width: 100%;
height: auto;
max-width: 148px;
}
.single-product-page > .pressmart-bought-together-products .product-title {
font-size: 0.82rem;
line-height: 1.3;
margin: 0.6rem 0 0.2rem;
}
.single-product-page > .pressmart-bought-together-products .product-info {
text-align: center;
}
.single-product-page > .pressmart-bought-together-products .product-info .price {
font-weight: 700;
} .single-product-page > .pressmart-bought-together-products .product-checkbox {
margin-top: 0.6rem;
display: flex;
justify-content: center;
}
.single-product-page > .pressmart-bought-together-products .product-checkbox input {
width: 18px;
height: 18px;
accent-color: var(--hx2-blue, #1d4497);
cursor: pointer;
} .single-product-page > .pressmart-bought-together-products .items-total-price > div {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.7rem;
}
.single-product-page > .pressmart-bought-together-products .items-total {
margin-top: 0.2rem;
padding-top: 0.7rem;
border-top: 1px solid var(--hx-border-color, #e0e0e0);
font-weight: 700;
font-size: 1.05rem;
}
.single-product-page > .pressmart-bought-together-products .item-price,
.single-product-page > .pressmart-bought-together-products .items-price,
.single-product-page > .pressmart-bought-together-products .total-price {
font-weight: 700;
white-space: nowrap;
}
.single-product-page > .pressmart-bought-together-products .add-items-to-cart-wrap {
margin-top: 1.1rem;
}
.single-product-page > .pressmart-bought-together-products .add-items-to-cart {
width: 100%;
} .woocommerce-tabs .bought-together-title {
display: none;
}
@media (max-width: 600px) {
.single-product-page > .pressmart-bought-together-products .products > .row {
flex-wrap: wrap;
}
.single-product-page > .pressmart-bought-together-products .products div.product {
flex: 1 1 40%;
}
} .woocommerce-tabs {
margin-bottom: 3em;
}
.accordion-layout .tab-content-wrap a.accordion-title,
.accordion-layout .tab-content-wrap summary.accordion-title {
display: block;
font-size: var(--hx-h4);
font-weight: var(--hx-weight-heading);
padding: 0.6871em 1em;
position: relative;
cursor: pointer;
list-style: none;
}
.accordion-layout .tab-content-wrap summary.accordion-title::-webkit-details-marker {
display: none;
}
.tab-content-wrap .accordion-title::after {
content: "";
position: absolute;
right: 1em;
top: 50%;
width: 10px;
height: 10px;
margin-top: -8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--hx-t-ui);
}
.tab-content-wrap[open] .accordion-title::after {
transform: rotate(-135deg);
}
.accordion-layout .woocommerce-Tabs-panel {
padding: 1em;
} .single-product-page.hx-prelaunch-bar {
--hx-bar-accent: #c94c51;
--hx-bar-wash: #fff3f3;
}
.single-product-page.hx-prelaunch-bar--chocolate { --hx-bar-accent: #794734; --hx-bar-wash: #f8f0ec; }
.single-product-page.hx-prelaunch-bar--caramel { --hx-bar-accent: #d47c28; --hx-bar-wash: #fff5e8; }
#main-content .hx-prelaunch-bar .entry-summary .price { margin-bottom: 18px; }
.hx-bar-launch-state {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
color: var(--hx-bar-accent);
background: var(--hx-bar-wash);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.hx-bar-launch-state::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; }
.hx-bar-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin: 15px 0 21px;
}
.hx-bar-facts > span {
min-width: 0;
padding: 13px 10px;
border: 1px solid #e0e5eb;
border-radius: 10px;
color: #6c7580;
background: #fff;
font-size: 10px;
line-height: 1.3;
text-align: center;
}
.hx-bar-facts strong { display: block; margin-bottom: 3px; color: #1c2938; font-size: 14px; }
.hx-bar-interest {
margin-top: 24px;
padding: clamp(23px, 3vw, 31px);
border: 1px solid color-mix(in srgb, var(--hx-bar-accent) 25%, #dfe4ea);
border-radius: 17px;
background: linear-gradient(135deg, var(--hx-bar-wash), #fff 70%);
}
.hx-bar-interest__eyebrow {
display: block;
margin-bottom: 8px;
color: var(--hx-bar-accent, #1d4497);
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.hx-bar-interest h2 { margin: 0 0 8px; color: #152231; font-size: clamp(20px, 2.19vw, 26px); letter-spacing: -.025em; }
.hx-bar-interest > p { margin: 0 0 17px; color: #5f6b77; font-size: 13px; line-height: 1.55; }
.hx-bar-interest form { position: relative; display: flex; gap: 8px; margin: 0; }
.hx-bar-interest input[type="email"] {
min-width: 0;
min-height: 50px;
flex: 1;
padding: 12px 14px;
border: 1px solid #cbd4de;
border-radius: 9px;
box-shadow: none;
background: #fff;
font-size: 14px;
}
.hx-bar-interest input[type="email"]:focus { border-color: var(--hx-bar-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hx-bar-accent) 14%, transparent); }
.hx-bar-interest button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 19px;
border: 0;
border-radius: 9px;
color: #fff;
background: var(--hx-bar-accent);
font-size: 13px;
font-weight: 750;
cursor: pointer;
transition: filter .18s ease, transform .18s ease;
}
.hx-bar-interest button:hover,
.hx-bar-interest button:focus-visible { filter: brightness(.9); transform: translateY(-1px); }
.hx-bar-interest > small { display: block; margin-top: 10px; color: #77818c; font-size: 10px; }
.hx-bar-interest__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.hx-bar-interest__notice { padding: 11px 13px; border-radius: 8px; font-weight: 650; }
.hx-bar-interest__notice--ok { color: #28623a !important; background: #e9f5ec; }
.hx-bar-interest__notice--error { color: #852f2f !important; background: #faeaea; }
.hx-bar-collection { margin-top: clamp(55px, 7vw, 92px); padding: clamp(58px, 7vw, 90px) 0; background: #f5f7fa; }
.hx-bar-collection > .hx-container { max-width: 1180px; }
.hx-bar-collection h2 { max-width: 680px; margin: 0 0 32px; color: #152231; font-size: clamp(26px, 3.27vw, 38px); letter-spacing: -.04em; }
.hx-bar-collection__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hx-bar-collection__item {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(120px, 1.15fr);
align-items: center;
gap: 10px;
min-height: 210px;
padding: 18px;
border: 1px solid #dde3ea;
border-radius: 16px;
color: #182636;
background: #fff;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-bar-collection__item:hover { border-color: #bcc8d6; box-shadow: 0 16px 35px rgba(20,39,72,.1); color: #182636; transform: translateY(-3px); }
.hx-bar-collection__item.is-current { border-color: var(--hx-primary); box-shadow: inset 0 0 0 1px var(--hx-primary); }
.hx-bar-collection__item img { width: 100%; height: 170px; object-fit: contain; }
.hx-bar-collection__item strong { display: block; margin-bottom: 7px; font-size: 17px; line-height: 1.3; }
.hx-bar-collection__item small { color: #697581; font-size: 11px; font-weight: 650; }
@media (max-width: 900px) {
.hx-bar-collection__grid { grid-template-columns: 1fr; }
.hx-bar-collection__item { grid-template-columns: 140px 1fr; min-height: 0; }
.hx-bar-collection__item img { height: 140px; }
}
@media (max-width: 520px) {
.hx-bar-facts { grid-template-columns: 1fr; }
.hx-bar-facts > span { display: flex; align-items: baseline; justify-content: space-between; text-align: left; }
.hx-bar-facts strong { margin: 0; }
.hx-bar-interest form { flex-direction: column; }
.hx-bar-interest button { width: 100%; }
.hx-bar-collection__item { grid-template-columns: 105px 1fr; }
.hx-bar-collection__item img { height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
.hx-bar-interest button,
.hx-bar-collection__item { transition-duration: .01ms !important; }
} .accordion-layout .tab-content-wrap:not([open]) > .woocommerce-Tabs-panel {
display: none !important;
}
.accordion-layout .tab-content-wrap[open] > .woocommerce-Tabs-panel {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.accordion-layout .tab-content-wrap:not(:last-child) {
border-bottom: 1px solid var(--hx-border);
} .woocommerce #reviews #comments ol.commentlist li {
margin-left: 1em;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
margin: 0 0 0 6em;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p {
display: inline-block;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
font-size: 13px;
}
.woocommerce .woocommerce-Reviews .rating-counts-wrap,
.woocommerce-Reviews .clear {
display: none;
} .single-product-page .tabs-img {
width: 100%;
float: none;
}
.single-product-page .tabs-img img {
border-radius: var(--hx-radius-media);
width: 100%;
}
@media (min-width: 1200px) {
.single-product-page .tabs-img {
max-width: 49.2%;
}
} @media (max-width: 1024px) {
.woocommerce div.product .entry-breadcrumbs,
.woocommerce div.product .product_title {
margin-right: 20%;
}
.product-navigation-share {
right: 0;
}
.single-product-page .woocommerce-product-details__short-description {
margin-bottom: 0;
}
.single-product-page > .pressmart-bought-together-products .items-total-price-button {
margin-top: 1em;
padding: 1em;
}
.single-product-page #reviews {
display: block;
}
.single-product-page #reviews #comments,
.single-product-page #reviews #review_form_wrapper {
width: 100%;
max-width: 100%;
}
}
@media (max-width: 768px) {
.single-product-page div.summary form.cart .button {
width: 100%;
}
.pressmart-product-trust-badge {
width: 100%;
display: flex;
justify-content: center;
margin-left: 0.1em;
}
}
@media (max-width: 767px) {
.single-product-page .col-md-6 {
text-align: center;
}
.entry-breadcrumbs {
display: none;
}
.single-product-page .product_title {
margin-right: 0;
}
.single-product-page .woocommerce-product-rating {
max-width: 265px;
margin: 0 auto;
}
.single-product-page div.quantity {
width: 100%;
display: flex;
justify-content: center;
font-size: 1.3em;
}
.single-product-page div.summary form.cart .button {
width: 100%;
padding: 1.2em;
font-size: 1.3em;
}
.pressmart-product-trust-badge {
display: block;
text-align: center;
margin: 0 auto;
}
.single-product-page .product-share {
justify-content: center;
}
.single-product-page .woocommerce-tabs {
margin-bottom: 30px;
}
}
@media (max-width: 480px) {
.single-product-page .pressmart-product-trust-badge {
width: 100%;
}
}  .hx-bundle {
--hx-bundle-tile-border: rgba(230, 230, 230, 0.8);
--hx-bundle-plus: #ababab;
--hx-bundle-alert-bg: #eeeeee;
--hx-bundle-alert-rule: #222222;
} .hx-bundle__tiles {
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.hx-bundle__tile {
width: 20.5%;
align-self: center;
height: 100%;
margin-bottom: 16px;
}
.hx-bundle__tile-button {
display: flex;
justify-content: center;
width: 100%;
margin: auto;
padding: 0;
background-color: var(--hx-bg);
border: 2px solid var(--hx-bundle-tile-border);
border-radius: var(--hx-radius);
aspect-ratio: 1;
cursor: pointer;
transition: border-color var(--hx-t-ui);
}
.hx-bundle__tile-button:hover,
.hx-bundle__tile-button:focus-visible {
border-color: var(--hx-primary);
}
.hx-bundle__tile-img {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
line-height: 0;
border-radius: var(--hx-radius);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.hx-bundle__plus {
display: flex;
width: 6%;
margin-bottom: 1em;
}
.hx-bundle__plus-icon {
margin: auto;
color: var(--hx-bundle-plus);
} .hx-bundle__table {
width: 100%;
margin-bottom: 0;
border: none;
}
.hx-bundle__slot .bopobb-item-detail-wrap {
display: flex;
}
.hx-bundle__slot-title {
display: -webkit-box;
overflow: hidden;
padding: 0;
background: none;
border: 0;
color: var(--hx-link);
text-align: left;
text-overflow: ellipsis;
cursor: pointer;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hx-bundle__slot-title:hover,
.hx-bundle__slot-title:focus-visible {
color: var(--hx-link-hover);
}
.hx-bundle__slot-edit {
align-self: center;
margin: 0 10px;
padding: 0;
background: none;
border: 0;
font-size: var(--hx-text-small);
color: inherit;
cursor: pointer;
}
.hx-bundle__slot .bopobb-item-right {
display: flex;
justify-content: flex-end;
}
.hx-bundle__qty,
.hx-bundle__qty-input {
width: 27px;
height: 24px;
margin: auto;
padding: 0;
border: none;
background-color: transparent;
box-shadow: none;
text-align: center;
}
.hx-bundle__qty-input {
border-bottom: 1px solid var(--hx-secondary);
}
.hx-bundle__qty-input::-webkit-outer-spin-button,
.hx-bundle__qty-input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.hx-bundle__slot-price {
display: inline-flex;
align-self: center;
margin-left: 15px;
text-align: right;
} .hx-bundle__slot-price[data-placeholder] {
opacity: 0.6;
}
.hx-bundle__alert:not(:empty) {
margin: 10px 0;
padding: 6px 10px 6px 14px;
border-left: 4px solid var(--hx-bundle-alert-rule);
background-color: var(--hx-bundle-alert-bg);
font-size: var(--hx-text-small);
} .hx-bundle-picker {
width: min(960px, 92vw);
max-width: min(960px, 92vw);
height: min(600px, 88vh);
max-height: min(600px, 88vh);
padding: 0;
border: 0;
border-radius: var(--hx-radius);
background-color: var(--hx-bg);
color: var(--hx-text);
overflow: hidden;
}
.hx-bundle-picker::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.hx-bundle-picker__inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
overflow: hidden;
}
.hx-bundle-picker__header {
display: flex;
align-items: center;
flex: 0 0 auto;
box-sizing: border-box;
height: 85px;
padding: 21px 30px;
background-color: var(--hx-bg);
}
.hx-bundle-picker__title {
flex: 1 1 auto;
overflow: hidden;
margin: 0;
font-size: var(--hx-h3);
line-height: 32px;
color: var(--hx-secondary);
text-align: center;
text-transform: uppercase;
white-space: nowrap;
text-overflow: clip;
}
.hx-bundle-picker__close {
flex: 0 0 auto;
font-size: 27px;
color: var(--hx-secondary);
cursor: pointer;
}
.hx-bundle-picker__list {
flex: 1 1 auto;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 27px 30px;
padding: 0 35px 40px;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--hx-bg);
}
.hx-bundle-picker__card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0;
background: none;
border: 0;
color: var(--hx-secondary);
text-align: center;
cursor: pointer;
transition: box-shadow var(--hx-t-ui);
}
.hx-bundle-picker__card:hover,
.hx-bundle-picker__card:focus-visible {
box-shadow: var(--hx-shadow-card-hover);
}
.hx-bundle-picker__card[hidden] {
display: none;
}
.hx-bundle-picker__card--oos {
opacity: 0.5;
cursor: not-allowed;
}
.hx-bundle-picker__card-media img {
display: block;
width: 100%;
height: auto;
}
.hx-bundle-picker__card-price {
font-weight: var(--hx-weight-heading);
}
@media (max-width: 767px) {
.hx-bundle-picker__list {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
padding: 0 16px 24px;
}
.hx-bundle-picker__header {
padding: 16px;
}
}  .hx-purchase-mode {
border: 0;
padding: 0;
margin: 0 0 1rem;
display: grid;
gap: 0.5rem;
}
.hx-purchase-mode__option input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.hx-purchase-mode__pill {
display: block;
background: var(--hx-plan-1);
color: var(--hx-btn-cart-text);
padding: 3px 5px;
max-width: 290px;
text-align: center;
border-radius: var(--hx-radius-plan);
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--hx-t-ui);
}
.hx-purchase-mode__option:nth-of-type(2) .hx-purchase-mode__pill {
background: var(--hx-plan-2);
color: var(--hx-inverse);
}
.hx-purchase-mode__option input:checked + .hx-purchase-mode__pill {
border-color: var(--hx-secondary);
}
.hx-purchase-mode__option input:focus-visible + .hx-purchase-mode__pill {
outline: 3px solid var(--hx-primary);
outline-offset: 2px;
}
@media (max-width: 768px) {
.hx-purchase-mode__pill {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 767px) {
.hx-purchase-mode__pill {
margin: 0 auto;
}
}   .hx-cart-layout {
display: flex;
flex-wrap: wrap;
margin-inline: -15px;
}
.hx-cart-layout > * {
width: 100%;
padding-inline: 15px;
}
@media (min-width: 1025px) {
.hx-cart-form {
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.hx-cart-totals {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
.woocommerce-cart .woocommerce-cart-form table.cart {
box-shadow: var(--hx-shadow-ring);
}
@media (max-width: 1024px) {
.woocommerce-cart .woocommerce-cart-form table.cart {
box-shadow: none;
}
.woocommerce-cart .woocommerce-cart-form {
margin-bottom: 3em;
}
} .woocommerce table.shop_table {
width: 100%;
border-collapse: collapse;
}
.woocommerce table.shop_table td {
padding: 8px 12px;
vertical-align: middle;
}
.woocommerce-cart table.cart th {
padding: 8px 12px;
font-size: var(--hx-h5);
text-align: left;
}
.woocommerce table.shop_table td.product-name {
font-weight: var(--hx-weight-heading);
}
.woocommerce table.shop_table td .amount {
font-weight: var(--hx-weight-heading);
font-size: var(--hx-h5);
}
.woocommerce table.shop_table td.actions {
text-align: right;
} .woocommerce table.shop_table td.product-thumbnail img {
max-width: 80px;
width: inherit;
height: auto;
}
.woocommerce table.shop_table td.product-remove .remove {
display: inline-block;
font-size: 21px;
line-height: 1;
color: var(--hx-text);
text-decoration: none;
transition: var(--hx-t-fast);
}
.woocommerce table.shop_table td.product-remove .remove:hover,
.woocommerce table.shop_table td.product-remove .remove:focus {
color: var(--hx-error);
} .woocommerce-cart .woocommerce-cart-wrapper .actions {
padding: 15px;
}
.woocommerce-cart-wrapper .actions .coupon label {
display: none;
}
@media (min-width: 576px) {
.woocommerce-cart-wrapper .actions .coupon {
display: flex;
float: left;
width: 60%;
gap: 10px;
}
.woocommerce-cart-wrapper .actions .coupon .input-text {
max-width: 240px;
}
}
@media (max-width: 1024px) {
.woocommerce-cart-wrapper .actions .coupon {
width: 75%;
}
} .has-auto-update-cart .actions > button[type="submit"] {
display: none;
} .quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-pill);
overflow: hidden;
}
.quantity .qty {
width: 3.5em;
padding: 8px 0;
border: 0;
border-radius: 0;
text-align: center;
-moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.quantity .minus,
.quantity .plus {
flex: 0 0 auto;
width: 2.25em;
min-width: 30px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--hx-text);
font-size: var(--hx-h5);
line-height: 1;
cursor: pointer;
}
.quantity .minus:hover,
.quantity .plus:hover,
.quantity .minus:focus-visible,
.quantity .plus:focus-visible {
background-color: var(--hx-bg-alt);
color: var(--hx-text);
} .woocommerce-cart-wrapper .cart_totals {
padding: 1em;
box-shadow: var(--hx-shadow-ring);
}
.cart-collaterals .cart_totals h2,
.hx-cart-totals .cart_totals h2 {
font-size: 21px;
margin-bottom: 10px;
}
.woocommerce-cart .cart_totals table th {
text-align: left;
font-weight: var(--hx-weight-heading);
}
.woocommerce-cart .cart_totals table td {
text-align: right;
}
.woocommerce-cart .cart_totals ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
display: block;
margin-bottom: 5px;
font-weight: var(--hx-weight-heading);
font-size: var(--hx-h5);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
}
.woocommerce-shipping-destination {
margin-bottom: 0;
font-size: var(--hx-text-small);
} .woocommerce-shipping-calculator .form-row {
margin-bottom: 10px;
}
.shop_table_responsive td .shipping-calculator-form {
text-align: left;
} .hx-cross-sells {
margin-top: 3em;
}
.hx-cross-sells .hx-carousel__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 10px) / 2);
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.hx-cross-sells .hx-carousel__track > * {
scroll-snap-align: start;
}
@media (min-width: 768px) {
.hx-cross-sells .hx-carousel__track {
grid-auto-columns: calc((100% - 20px) / 3);
}
}
@media (min-width: 1025px) {
.hx-cross-sells .hx-carousel__track {
grid-auto-columns: calc((100% - 30px) / 4);
}
}
@media (min-width: 1200px) {
.hx-cross-sells .hx-carousel__track {
grid-auto-columns: calc((100% - 40px) / 5);
}
} @media (max-width: 1024px) {
.shop_table_responsive thead,
.shop_table_responsive th {
display: none;
}
.shop_table_responsive tr {
display: block;
position: relative;
margin-bottom: 20px;
}
.shop_table_responsive td {
display: block;
padding: 0 0 8px;
margin-bottom: 8px;
border-bottom: none;
text-align: right;
}
.shop_table_responsive td::before {
content: attr(data-title);
float: left;
padding-top: 3px;
color: var(--hx-heading);
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
}
.woocommerce-cart table.cart tr {
display: block;
border: 0;
margin-bottom: 20px;
padding-bottom: 20px;
padding-left: 112px;
}
.woocommerce-cart table.cart .product-thumbnail {
position: absolute;
left: 0;
}
.woocommerce-cart table.cart .product-thumbnail::before {
content: none;
}
.woocommerce-cart table.cart .product-thumbnail img {
max-width: 98px;
}
.woocommerce-cart table.cart td.product-name {
margin-right: 2.5em;
text-align: left;
} .woocommerce-cart.has-mobile-bottom-navbar-single-page .wc-proceed-to-checkout {
position: sticky;
bottom: 0;
z-index: var(--hx-z-sticky-cta);
padding: 0;
border-radius: 0;
box-shadow: var(--hx-shadow-ring-strong);
background-color: var(--hx-bg);
}
.woocommerce-cart.has-mobile-bottom-navbar-single-page .wc-proceed-to-checkout .checkout-button {
border-radius: 0;
}
}  .hx-checkout {
display: grid;
grid-template-columns: 1fr;
gap: 0 20px;
}
@media (min-width: 768px) {
.hx-checkout {
grid-template-columns: 7fr 5fr;
align-items: start;
} .hx-checkout__summary {
position: sticky;
top: 10px;
}
}
.woocommerce-checkout .order-review-inner {
position: relative;
padding: 0.6871em;
box-shadow: var(--hx-shadow-ring);
} .woocommerce-checkout .col2-set:not(.addresses) .col-1,
.woocommerce-checkout .col2-set:not(.addresses) .col-2 {
flex: 1 0 100%;
max-width: 100%;
}
.woocommerce-checkout .woocommerce-billing-fields {
margin-bottom: 3em;
}
.woocommerce-checkout .woocommerce-shipping-fields h3 {
font-size: 18px;
} .woocommerce .form-row {
margin-bottom: 1em;
}
.woocommerce .form-row .woocommerce-input-wrapper {
display: block;
}
.woocommerce .form-row-wide,
.woocommerce .form-row.notes {
width: 100%;
}
@media (min-width: 576px) {
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-EditAccountForm {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 4%;
}
.woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-shipping-fields__field-wrapper > .form-row-wide,
.woocommerce-EditAccountForm > .form-row-wide,
.woocommerce-EditAccountForm > fieldset,
.woocommerce-EditAccountForm > p:not(.form-row) {
grid-column: 1 / -1;
}
.woocommerce .clear {
display: none;
}
}
.woocommerce .required {
color: var(--hx-error);
text-decoration: none;
}
.woocommerce .optional {
color: var(--hx-text);
font-size: var(--hx-text-small);
} .woocommerce-checkout table.shop_table th {
padding: 0 10px;
font-size: var(--hx-text-small);
line-height: 18px;
text-align: left;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
width: auto;
}
.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tbody td:last-child,
.woocommerce-checkout-review-order-table tfoot td:last-child {
text-align: right;
}
.woocommerce-checkout-review-order td.product-name {
display: flex;
align-items: center;
width: 100%;
}
.woocommerce-checkout-review-order .pressmart-product-thumb {
min-width: 40px;
margin-right: 10px;
}
.woocommerce-checkout .order-review-inner .pressmart-product-desc {
font-size: var(--hx-text-small);
line-height: 17px;
}
.woocommerce-checkout ul#shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-checkout ul#shipping_method li label {
font-size: var(--hx-text-small);
}
@media (max-width: 1024px) {
.woocommerce-checkout .pressmart-product-thumb {
display: none;
}
.woocommerce table.shop_table.woocommerce-checkout-review-order-table {
table-layout: fixed;
}
} .woocommerce-checkout .coupon-custom {
display: flex;
}
.woocommerce-checkout .coupon-custom .input-wrap {
width: 66%;
}
.woocommerce-checkout .coupon-custom button#apply-coupon-btn {
height: 41px;
margin-left: 5px;
padding: 0 10px;
font-size: var(--hx-text-small);
}
.woocommerce-checkout .coupon-custom #coupon-error-message {
margin-top: 5px;
color: var(--hx-error);
font-size: var(--hx-text-small);
text-align: left;
} .woocommerce-checkout .coupon-custom #coupon_code.is-error {
border-color: var(--hx-error);
}
.woocommerce-checkout .coupon-custom button.is-loading {
opacity: .6;
pointer-events: none;
} .woocommerce-checkout #payment {
background: none;
}
.woocommerce-checkout #payment ul.payment_methods {
margin: 0 0 1em;
padding: 0;
list-style: none;
}
.woocommerce-checkout #payment div.payment_box {
position: relative;
margin-top: 1em;
padding: 1em;
background: none;
color: inherit;
box-shadow: var(--hx-shadow-ring);
} .woocommerce-checkout .wc_payment_methods li:only-child .input-radio {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.woocommerce-checkout .place-order .button,
.woocommerce-checkout #place_order {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
background-color: var(--hx-btn-checkout-bg);
color: var(--hx-inverse);
}
.woocommerce-privacy-policy-text {
font-size: var(--hx-text-small);
}
@media (max-width: 1024px) {
.woocommerce-page .col2-set .col-1 {
margin-bottom: 2em;
} .woocommerce-checkout.has-mobile-bottom-navbar-single-page .place-order {
position: sticky;
bottom: 0;
z-index: var(--hx-z-sticky-cta);
background-color: var(--hx-bg);
box-shadow: var(--hx-shadow-ring-strong);
}
.woocommerce-checkout.has-mobile-bottom-navbar-single-page #place_order {
border-radius: 0;
}
}  .hx-login-card {
--hx-login-shadow: 0 0 3px rgba(0, 0, 0, .2);
max-width: 695px;
margin: 1em auto 0;
box-shadow: var(--hx-login-shadow);
}
.woocommerce-account .hx-login-card {
margin-top: 2rem;
margin-bottom: 2rem;
}
.hx-login-card .customer-login {
display: none;
flex-direction: row;
}
.hx-login-card .customer-login.active {
display: flex;
}
.customer-login-left {
flex: 40%;
padding: 40px 35px;
background-color: var(--hx-primary);
color: var(--hx-inverse);
font-size: var(--hx-h5);
}
.customer-login-left h2 {
margin-bottom: 10px;
color: var(--hx-inverse);
}
.customer-login-right {
flex: 60%;
padding: 40px 35px;
}
.woocommerce .form-row.woocommerce-rememberme-lost_password {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.woocommerce .woocommerce-rememberme-lost_password label {
margin: 0;
}
.woocommerce form .woocommerce-rememberme-lost_password label,
.woocommerce form .woocommerce-rememberme-lost_password a {
font-weight: var(--hx-weight-heading);
color: var(--hx-primary);
}
.hx-login-card .button {
width: 100%;
text-align: center;
}
.hx-login-card .button.loading {
position: relative;
color: rgba(255, 255, 255, .05);
pointer-events: none;
}
.hx-login-card .signin-up-error-message {
color: var(--hx-badge-oos);
}
.hx-login-card .signin-up-success-message {
color: var(--hx-discount);
}
@media (max-width: 767px) {
.hx-login-card .customer-login {
flex-wrap: wrap;
} .customer-login-left,
.customer-login-right {
flex: 100%;
}
.customer-login-right {
padding: 30px 20px;
}
.woocommerce .form-row.woocommerce-rememberme-lost_password {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
} .hx-account {
display: flex;
flex-flow: row;
}
.hx-account .MyAccount-navigation-wrapper {
flex: 0 0 25%;
max-width: 25%;
}
.hx-account .woocommerce-MyAccount-content {
flex: 0 0 75%;
max-width: 75%;
padding-left: 2em;
}
@media (max-width: 767px) {
.hx-account {
flex-flow: column;
}
.hx-account .MyAccount-navigation-wrapper,
.hx-account .woocommerce-MyAccount-content {
flex: 0 0 100%;
max-width: 100%;
padding: 0;
}
.hx-account .MyAccount-navigation-wrapper {
margin-bottom: 2em;
}
} .hx-user-profile {
padding: 2em 1em;
background-color: var(--hx-primary);
border: 1px solid var(--hx-primary);
border-radius: 0;
text-align: center;
}
.hx-user-profile .user-avatar img {
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid var(--hx-inverse);
border-radius: var(--hx-radius-round);
vertical-align: middle;
}
.hx-user-profile .user-info .display-name {
margin-top: 10px;
margin-bottom: 0;
color: var(--hx-inverse);
}
.woocommerce-MyAccount-navigation ul {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--hx-border);
border-radius: 0;
}
.woocommerce-MyAccount-navigation ul li {
margin-bottom: 0;
}
.woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: .8em;
padding: 1rem 1rem 1rem 1.7rem;
text-decoration: none;
transition: var(--hx-t-fast);
}
.woocommerce-MyAccount-navigation li:not(:last-child) a {
border-bottom: 1px solid var(--hx-border);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li:hover a,
.woocommerce-MyAccount-navigation li a:focus-visible {
background-color: var(--hx-bg-alt);
} .hx-account-nav__icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--hx-primary);
} .hx-section-title {
margin-bottom: 1.5em;
}
.hx-section-title h2 {
margin-bottom: .25em;
}
.hx-section-title p {
margin-bottom: 0;
} .woocommerce table.my_account_orders {
font-size: var(--hx-text-small);
}
.woocommerce table.my_account_orders th {
text-align: left;
}
.woocommerce table.my_account_orders .button {
padding: 10px 14px;
font-size: var(--hx-text-xs);
line-height: 16px;
}
.woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-number a {
font-weight: var(--hx-weight-heading);
color: var(--hx-primary);
}
.woocommerce-Pagination a.button {
background: none;
box-shadow: none;
font-weight: var(--hx-weight-heading);
color: var(--hx-primary);
} .woocommerce-account .addresses .title .edit {
font-weight: var(--hx-weight-heading);
color: var(--hx-primary);
}
.woocommerce-MyAccount-content .woocommerce-Addresses {
display: grid;
grid-template-columns: 1fr;
gap: 2em;
}
@media (min-width: 768px) {
.woocommerce-MyAccount-content .woocommerce-Addresses {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.woocommerce-Address-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1em;
} .ddwcaf-affiliate-statistics-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
@media (min-width: 768px) {
.ddwcaf-affiliate-statistics-container {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1025px) {
.ddwcaf-affiliate-statistics-container {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.ddwcaf-analytics-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 1025px) {
.ddwcaf-analytics-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ddwcaf-dashboard-navigation {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 1.5rem;
padding: 0;
list-style: none;
}
.ddwcaf-dashboard-navigation-item a {
display: block;
padding: .6rem 1rem;
border: 1px solid var(--hx-border);
text-decoration: none;
}
.ddwcaf-dashboard-navigation-item.ddwcaf-active a {
background: var(--hx-primary);
border-color: var(--hx-primary);
color: var(--hx-inverse);
}   .woocommerce-error,
.woocommerce-info,
.woocommerce-message {
margin: 0 0 2em;
padding: 1em 2em 1em 3.5em;
background: var(--hx-notice-bg);
color: var(--hx-notice-text);
border-top: 3px solid;
list-style: none;
}
.woocommerce-message {
border-top-color: var(--hx-success);
}
.woocommerce-info {
border-top-color: var(--hx-info);
}
.woocommerce-error {
border-top-color: var(--hx-error);
}
.woocommerce-error li {
list-style: none;
}
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
margin-left: 1em;
} .woocommerce-order .woocommerce-notice {
font-size: 1.26rem;
text-align: center;
}
.woocommerce-order .woocommerce-notice--success {
color: var(--hx-discount);
}
.woocommerce ul.order_details {
display: flex;
align-items: center;
justify-content: space-around;
padding: 2rem;
margin: 0 0 2em;
border: 2px dashed var(--hx-border);
border-radius: var(--hx-radius);
list-style: none;
}
.woocommerce ul.order_details li {
padding-right: 3em;
margin-bottom: 0;
border-right: 2px dashed var(--hx-border);
list-style-type: none;
text-align: center;
} .woocommerce ul.order_details li:last-child {
padding-right: 0;
border-right: none;
}
.woocommerce ul.order_details li strong {
display: block;
color: var(--hx-link);
text-align: center;
} .woocommerce-order .order_details + p {
font-size: var(--hx-h5);
}
@media (max-width: 1024px) {
.woocommerce-order .woocommerce-notice {
font-size: var(--hx-h5);
}
.woocommerce ul.order_details {
flex-direction: column;
align-items: inherit;
padding: 1rem;
}
.woocommerce ul.order_details li {
padding: 0;
border: none;
text-align: inherit;
}
.woocommerce ul.order_details li:not(:last-child) {
margin-bottom: 1.5em;
}
.woocommerce ul.order_details li strong {
display: initial;
margin-left: .5rem;
}
} @media (min-width: 768px) {
#main-content .single-product-wrapper > .col-md-6:first-child {
flex: 0 0 34%;
max-width: 34%;
}
#main-content .single-product-wrapper > .col-md-6:last-child {
flex: 0 0 66%;
max-width: 66%;
}
} .woocommerce div.product .summary.entry-summary {
width: 100%;
float: none;
margin: 0;
} .single-product-page .single-product-images-wrapper.single-product-gallery,
.single-product-page .single-product-thumbnails,
.single-product-page .hx-reassure,
.single-product-page .pressmart-product-trust-badge {
max-width: 420px;
margin-inline: auto;
}
.single-product-page .pressmart-product-trust-badge {
margin-top: 1.6rem;
}
.single-product-page .pressmart-product-trust-badge img {
width: 100%;
height: auto;
} #main-content .single-product-page .product_title {
font-size: clamp(1.33rem, 1.55vw, 1.59rem);
line-height: 1.18;
margin: 0 0 .4rem;
}
#main-content .single-product-page .entry-summary .woocommerce-product-rating {
margin: 0 0 .5rem;
}
#main-content .single-product-page .entry-summary .price {
margin: .2rem 0 .55rem;
}
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: .9rem;
} .hx-reassure {
display: grid;
gap: .9rem;
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--hx-border-color, #e6e6e6);
}
.hx-reassure__item {
display: flex;
align-items: center;
gap: .8rem;
font-size: .95rem;
font-weight: 600;
color: var(--hx-text, #1b2733);
}
.hx-reassure__item svg {
flex: 0 0 auto;
width: 26px;
height: 26px;
color: var(--hx2-blue, #1d4497);
}
@media (max-width: 767px) { #main-content .single-product-wrapper {
flex-direction: column;
flex-wrap: nowrap;
}
#main-content .single-product-wrapper > .col-md-6:first-child {
display: contents;
}
#main-content .single-product-wrapper > .col-md-6:first-child > .woocommerce-product-gallery {
order: 1;
}
#main-content .single-product-wrapper > .col-md-6:first-child > .yith-wcwl-add-to-wishlist {
order: 2;
}
#main-content .single-product-wrapper > .col-md-6:last-child {
order: 3;
}
#main-content .single-product-page .hx-reassure {
order: 4;
}
#main-content .single-product-page .pressmart-product-trust-badge {
order: 5;
}
.single-product-page .single-product-images-wrapper.single-product-gallery,
.single-product-page .single-product-thumbnails,
.single-product-page .hx-reassure {
max-width: 460px;
}
} .hx-shop {
padding-block: 0;
background: #fff;
}
.hx-shop__titlebar {
padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 48px);
border-bottom: 1px solid var(--hx-border-color, #e3e6e9);
background: #fff;
}
.hx-shop__titlebar-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px 60px;
}
.hx-shop__titlebar-copy { max-width: 620px; }
.hx-shop__titlebar .hx-shop__eyebrow { margin-bottom: 12px; }
.hx-shop__titlebar h1 {
margin: 0 0 10px;
font-size: clamp(2.38rem, 4vw, 3.75rem);
line-height: .95;
letter-spacing: -.055em;
}
.hx-shop__titlebar-copy > p:last-child {
margin: 0;
color: #596570;
font-size: 1rem;
line-height: 1.6;
}
.hx-shop__titlebar .hx-shop__proof {
justify-content: flex-end;
margin: 0;
}
.hx-shop__titlebar .hx-shop__proof li {
min-height: 40px;
padding: 6px 11px;
border: 1px solid #dfe5ed;
border-radius: 8px;
background: #f7f9fc;
}
.hx-shop__hero {
position: relative;
padding: clamp(58px, 7vw, 96px) 0 clamp(72px, 8vw, 112px);
overflow: hidden;
background: linear-gradient(135deg, #f5f2eb 0%, #fbfbf8 55%, #edf2fb 100%);
}
.hx-shop__hero::after {
position: absolute;
right: -12vw;
bottom: -40%;
width: min(62vw, 900px);
aspect-ratio: 1;
border: 1px solid rgba(29, 68, 151, .11);
border-radius: 50%;
content: "";
pointer-events: none;
}
.hx-shop__hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
align-items: center;
gap: clamp(44px, 6vw, 92px);
}
.hx-shop__hero-copy { max-width: 680px; }
.hx-shop__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--hx2-blue, #1d4497);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.hx-shop__eyebrow::before {
width: 30px;
height: 2px;
background: currentColor;
content: "";
}
.hx-shop__hero h1 {
max-width: 760px;
margin: 0 0 22px;
font-size: clamp(2.31rem, 3.5vw, 3.5rem);
line-height: .99;
letter-spacing: -.055em;
}
.hx-shop__lede {
max-width: 620px;
margin: 0;
color: #505d68;
font-size: clamp(1.02rem, 1.39vw, 1.16rem);
line-height: 1.72;
}
.hx-shop__hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 24px;
margin-top: 30px;
}
.hx-shop__primary-cta {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 28px;
min-height: 54px;
padding: 14px 22px 14px 26px;
border-radius: 999px;
background: var(--hx2-blue, #1d4497);
box-shadow: 0 12px 28px rgba(29, 68, 151, .2);
color: #fff;
font-size: .92rem;
font-weight: 800;
text-decoration: none;
transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-shop__primary-cta span { font-size: 1.1rem; }
.hx-shop__primary-cta:hover,
.hx-shop__primary-cta:focus-visible {
background: var(--hx2-ink, #16202a);
box-shadow: 0 16px 32px rgba(22, 32, 42, .22);
color: #fff;
transform: translateY(-2px);
}
.hx-shop__secondary-cta {
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
color: var(--hx2-ink, #16202a);
font-size: .88rem;
font-weight: 750;
text-decoration: none;
}
.hx-shop__secondary-cta:hover,
.hx-shop__secondary-cta:focus-visible { color: var(--hx2-blue, #1d4497); }
.hx-shop__proof {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
margin: 28px 0 0;
padding: 0;
color: #394651;
font-size: .78rem;
font-weight: 700;
list-style: none;
}
.hx-shop__proof li { display: flex; align-items: center; gap: 7px; }
.hx-shop__proof .hx-benefit-icon { width: auto; max-width: 29px; height: 29px; }
.hx-shop__hero-visual {
position: relative;
margin: 0;
}
.hx-shop__product-stage {
position: relative;
display: grid;
place-items: center;
max-width: 610px;
margin-left: auto;
padding: clamp(18px, 3vw, 36px);
border: 1px solid rgba(29, 68, 151, .12);
border-radius: 42% 42% 24px 24px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 30px 70px rgba(22, 39, 57, .12);
}
.hx-shop__product-stage::before {
position: absolute;
top: 12%;
right: 8%;
left: 8%;
height: 52%;
border-radius: 50%;
background: #e8eefb;
content: "";
}
.hx-shop__product-stage img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
mix-blend-mode: multiply;
}
.hx-shop__flavour-note {
position: absolute;
z-index: 2;
right: -14px;
bottom: 28px;
display: flex;
min-width: 174px;
padding: 17px 20px;
border-radius: 16px;
background: var(--hx2-ink, #16202a);
box-shadow: 0 18px 40px rgba(22, 32, 42, .2);
color: #fff;
flex-direction: column;
}
.hx-shop__flavour-note strong { font-size: 1rem; }
.hx-shop__flavour-note span { margin-top: 3px; color: #cbd3da; font-size: .7rem; }
.hx-shop__notices { margin-bottom: 22px; } .hx-shop-nav {
position: relative;
z-index: 3;
margin: 24px 0 10px;
}
.hx-shop-nav ul {
display: grid;
grid-template-columns: repeat(var(--hx-shop-nav-count, 2), minmax(0, 1fr));
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--hx-border-color, #e3e6e9);
border-radius: 10px;
background: #fff;
box-shadow: none;
list-style: none;
}
.hx-shop-nav li + li {
border-left: 1px solid var(--hx-border-color, #e3e6e9);
}
.hx-shop-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 62px;
padding: 15px 24px;
color: var(--hx2-ink, #16202a);
font-size: .9rem;
font-weight: 700;
letter-spacing: .03em;
text-decoration: none;
transition: color .2s ease, background-color .2s ease;
}
.hx-shop-nav a span:last-child {
color: var(--hx2-blue, #1d4497);
font-size: 1.14rem;
transition: transform .2s ease;
}
.hx-shop-nav a:hover,
.hx-shop-nav a:focus-visible {
background: var(--hx2-blue, #1d4497);
color: #fff;
}
.hx-shop-nav a:hover span:last-child,
.hx-shop-nav a:focus-visible span:last-child {
color: #fff;
transform: translateY(3px);
} .hx-shop-cat { padding: clamp(52px, 6vw, 78px) 0; border-top: 1px solid var(--hx-border-color, #ececec); scroll-margin-top: 110px; }
.hx-shop-cat:first-of-type { border-top: 0; padding-top: 32px; }
.hx-shop-cat__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 34px; }
.hx-shop-cat__intro { flex: 1 1 420px; min-width: 0; }
.hx-shop-cat__intro h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: clamp(1.71rem, 2.65vw, 2.28rem); letter-spacing: -.035em; margin: 0 0 .55rem; }
.hx-shop-cat__badge { padding: 4px 11px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-shop-cat__desc { max-width: 640px; margin: 0; color: var(--hx-text-muted, #5a6470); line-height: 1.6; } .hx-shop-cat__addall { margin: 0; flex: 0 0 auto; }
.hx-shop-addall-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--hx2-ink, #16202a); color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.hx-shop-addall-btn:hover { background: var(--hx2-blue, #1d4497); transform: translateY(-1px); }
.hx-shop-addall-btn span { font-size: 1.15em; line-height: 0; } .hx-shop-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: clamp(18px, 2.3vw, 28px); }
.hx-shop-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e7ec; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(16, 24, 32, .045); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.hx-shop-card:hover { border-color: rgba(29, 68, 151, .3); box-shadow: 0 20px 44px rgba(16, 24, 32, .11); transform: translateY(-5px); }
.hx-shop-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(145deg, #f7f8fb, #edf1f7); }
.hx-shop-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; transition: transform .35s ease; }
.hx-shop-card:hover .hx-shop-card__media img { transform: scale(1.035); }
.hx-shop-card__flag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hx-shop-card__body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.hx-shop-card__title { font-size: 1.06rem; line-height: 1.35; margin: 0; }
.hx-shop-card__title a { color: var(--hx2-ink, #16202a); text-decoration: none; }
.hx-shop-card__title a:hover { color: var(--hx2-blue, #1d4497); }
.hx-shop-card__excerpt { margin: 0; color: var(--hx-text-muted, #6b7580); font-size: .85rem; line-height: 1.5; }
.hx-shop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.hx-shop-card__price { font-size: 1.14rem; font-weight: 700; color: var(--hx2-ink, #16202a); }
.hx-shop-card__price del { color: var(--hx-text-muted, #9aa3ab); font-weight: 500; font-size: .9em; margin-right: 4px; }
.hx-shop .hx-shop-card__foot a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 17px; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .82rem; font-weight: 700; white-space: nowrap; border: 0; }
.hx-shop .hx-shop-card__foot a.button:hover { background: var(--hx2-ink, #16202a); color: #fff; }
.hx-shop-card__foot .added_to_cart { display: none; } .hx-shop-cat__soonbox { display: flex; align-items: center; gap: 16px; padding: 28px; border: 1px dashed var(--hx-border-color, #d4d9de); border-radius: 16px; background: var(--hx-bg-alt, #f7f8fa); }
.hx-shop-cat__soonicon { font-size: 1.71rem; line-height: 1; }
.hx-shop-cat__soonbox p { margin: 0; color: var(--hx-text-muted, #5a6470); } .hx-shop-brand { margin-top: 32px; padding: 78px 0; background: var(--hx2-cream, #f6f2ea); text-align: center; }
.hx-shop-brand .hx2-eyebrow { justify-content: center; }
.hx-shop-brand h2 { font-size: clamp(1.71rem, 2.78vw, 2.38rem); letter-spacing: -.02em; max-width: 760px; margin: .4rem auto .9rem; }
.hx-shop-brand p { max-width: 680px; margin: 0 auto 1rem; color: var(--hx-text, #3a444e); line-height: 1.75; font-size: 1.05rem; }
@media (max-width: 900px) {
.hx-shop__titlebar-inner { align-items: flex-start; flex-direction: column; }
.hx-shop__titlebar .hx-shop__proof { justify-content: flex-start; }
.hx-shop__hero-grid { grid-template-columns: 1fr; }
.hx-shop__hero-copy { max-width: 720px; }
.hx-shop__hero-visual { max-width: 610px; }
.hx-shop__product-stage { margin-left: 0; }
}
@media (max-width: 600px) {
.hx-shop__hero { padding: 46px 0 74px; }
.hx-shop__hero-grid { gap: 38px; }
.hx-shop__hero h1 { font-size: clamp(2.09rem, 9.51vw, 2.66rem); }
.hx-shop__hero-actions { align-items: stretch; flex-direction: column; }
.hx-shop__primary-cta { width: 100%; }
.hx-shop__secondary-cta { align-self: flex-start; }
.hx-shop__proof { gap: 11px 16px; }
.hx-shop__product-stage { padding: 14px; border-radius: 38% 38% 18px 18px; }
.hx-shop__flavour-note { right: 4px; bottom: 10px; min-width: 156px; padding: 14px 17px; }
.hx-shop-nav { margin: 18px 0 8px; }
.hx-shop-nav .hx2-wrap { width: calc(100% - 24px); }
.hx-shop-nav ul {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hx-shop-nav ul::-webkit-scrollbar { display: none; }
.hx-shop-nav li {
flex: 1 0 min(72vw, 280px);
scroll-snap-align: start;
}
.hx-shop-nav a { min-height: 56px; padding-inline: 18px; }
.hx-shop-cat { padding: 34px 0; }
.hx-shop-cat__head { align-items: flex-start; }
.hx-shop-cat__addall { width: 100%; }
.hx-shop-addall-btn { width: 100%; justify-content: center; }
.hx-shop-brand { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
.hx-shop__primary-cta,
.hx-shop-card,
.hx-shop-card__media img { transition: none; }
} .hx-sticky-cart {
position: fixed;
left: 0;
right: 0;
bottom: 56px;
z-index: var(--hx-z-sticky-cta, 99);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
background: #fff;
box-sizing: border-box;
border-top: 1px solid var(--hx-border-color, #e6e6e6);
box-shadow: 0 -6px 22px rgba(16, 24, 32, .12);
transform: translateY(135%);
transition: transform .28s ease;
}
.hx-sticky-cart.is-visible { transform: translateY(0); }
.hx-sticky-cart__info { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.hx-sticky-cart__thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: var(--hx-bg-alt, #f6f7f9); }
.hx-sticky-cart__thumb img { width: 100%; height: 100%; object-fit: contain; }
.hx-sticky-cart__price { font-size: 1.1rem; font-weight: 700; color: var(--hx2-ink, #16202a); white-space: nowrap; }
.hx-sticky-cart__price del { color: var(--hx-text-muted, #9aa3ab); font-weight: 500; font-size: .85em; margin-right: 3px; }
.hx-sticky-cart__btn { flex: 1 1 auto; min-width: 0; text-align: center; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--hx2-blue, #1d4497); color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hx-sticky-cart__btn:active { transform: scale(.98); }
@media (min-width: 768px) {
.hx-sticky-cart { display: none; }
} .hx-amazon-buy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
max-width: 320px;
margin-top: 14px;
padding: 13px 22px;
border-radius: 999px;
background: #232f3e;
color: #fff;
font-size: .95rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background .2s ease, transform .2s ease;
}
.hx-amazon-buy:hover,
.hx-amazon-buy:focus-visible { background: #131a22; color: #fff; transform: translateY(-1px); }
.hx-amazon-buy__smile { flex: 0 0 auto; margin-top: 5px; } body.single-product #main-content {
background: linear-gradient(180deg, #fff 0, #fff 760px, #f8f8f5 760px, #f8f8f5 100%);
}
#main-content .single-product-page {
padding-top: clamp(22px, 3vw, 42px);
}
#main-content .single-product-page .single-product-wrapper {
align-items: start;
gap: clamp(30px, 5vw, 76px);
margin: 0 0 clamp(62px, 8vw, 110px);
}
@media (min-width: 768px) {
#main-content .single-product-page .single-product-wrapper {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}
#main-content .single-product-wrapper > .col-md-6:first-child {
width: 100%;
max-width: none;
}
#main-content .single-product-wrapper > .col-md-6:last-child {
position: static;
width: 100%;
max-width: none;
}
}
.woocommerce div.product .summary.entry-summary {
box-sizing: border-box;
max-width: 100%;
padding: clamp(24px, 3.4vw, 48px);
border: 1px solid #e4e7e9;
border-radius: 24px;
background: #fff;
box-shadow: 0 18px 55px rgba(16, 32, 48, .08);
}
#main-content .single-product-page .entry-breadcrumbs {
margin: 0 0 18px;
}
#main-content .single-product-page .product_title {
max-width: 680px;
margin: 0 0 12px;
font-size: clamp(1.63rem, 2.5vw, 2.25rem);
line-height: 1.08;
letter-spacing: -.035em;
}
#main-content .single-product-page .entry-summary .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
}
#main-content .single-product-page .entry-summary .price {
display: block;
margin: 0 0 18px;
color: var(--hx2-ink, #16202a);
font-size: clamp(1.56rem, 2.43vw, 2rem);
font-weight: 700;
}
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
display: block;
max-width: 650px;
margin: 0 0 24px;
overflow: visible;
color: #4f5b66;
font-size: 1.03rem;
line-height: 1.7;
-webkit-line-clamp: unset;
}
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description p {
margin: 0;
}
.single-product-page .summary form.cart {
width: 100%;
margin: 0;
padding: 22px 0 14px;
border-top: 1px solid #e4e7e9;
}
.single-product-page.product-type-simple .summary form.cart {
display: flex;
align-items: stretch;
gap: 12px;
}
.single-product-page .summary form.cart::before {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
content: "Order directly from Helixx Foods";
}
.single-product-page.product-type-simple div.quantity {
display: flex;
flex: 0 0 132px;
margin: 0;
}
.single-product-page div.quantity .minus,
.single-product-page div.quantity .plus,
.single-product-page div.quantity .qty {
height: 52px;
}
#main-content .single-product-page div.summary form.cart .single_add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
margin: 0;
padding: 13px 24px;
border: 0;
border-radius: 999px;
background: var(--hx2-blue, #1d4497);
color: #fff;
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
transition: transform .2s ease, background-color .2s ease;
}
#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
flex: 1 1 auto;
}
#main-content .single-product-page div.summary form.cart .single_add_to_cart_button:hover,
#main-content .single-product-page div.summary form.cart .single_add_to_cart_button:focus-visible {
background: var(--hx2-ink, #16202a);
transform: translateY(-1px);
}
.single-product-page .hx-amazon-buy {
width: 100%;
max-width: none;
min-height: 52px;
margin: 0;
border: 1px solid #cfd5da;
background: #fff;
color: var(--hx2-ink, #16202a);
}
.single-product-page .hx-amazon-buy:hover,
.single-product-page .hx-amazon-buy:focus-visible {
border-color: var(--hx2-ink, #16202a);
background: var(--hx2-ink, #16202a);
color: #fff;
}
.single-product-page .summary > .hx-amazon-buy::before {
content: "Or";
position: absolute;
left: 50%;
margin-top: -38px;
padding: 0 10px;
transform: translateX(-50%);
background: #fff;
color: #7a848d;
font-size: .72rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.single-product-page .summary > .hx-amazon-buy {
position: relative;
margin-top: 22px;
} .single-product-page .yith-wcwl-add-to-wishlist,
.single-product-page > .pressmart-bought-together-products,
.single-product-page + .hx-sticky-cart {
display: none !important;
}
.single-product-page .hx-reassure {
box-sizing: border-box;
grid-template-columns: 1fr;
gap: 12px;
max-width: 460px;
margin-top: 24px;
padding: 20px 22px;
border: 1px solid #e4e7e9;
border-radius: 18px;
background: #fff;
}
.single-product-page .hx-reassure__item {
font-size: .9rem;
}
.hx-product-recipes {
margin: 0 0 clamp(62px, 8vw, 104px);
padding: clamp(34px, 5vw, 64px);
border-radius: 28px;
background: #f1eee6;
}
.hx-product-recipes__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.hx-product-recipes__eyebrow {
display: block;
margin-bottom: 8px;
color: var(--hx2-blue, #1d4497);
font-size: .72rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.hx-product-recipes h2 {
margin: 0 0 8px;
font-size: clamp(1.59rem, 2.52vw, 2.19rem);
letter-spacing: -.03em;
}
.hx-product-recipes__head p {
margin: 0;
color: #5c6670;
}
.hx-product-recipes__all {
flex: 0 0 auto;
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
color: var(--hx2-blue, #1d4497);
font-weight: 700;
text-decoration: none;
}
.hx-product-recipes__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.hx-product-recipes .hx2-recipe {
position: relative;
display: block;
min-height: 330px;
overflow: hidden;
border-radius: 18px;
background: var(--hx2-ink, #16202a);
color: #fff;
text-decoration: none;
}
.hx-product-recipes .hx2-recipe::after {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(7, 13, 18, .02) 25%, rgba(7, 13, 18, .88) 100%);
content: "";
}
.hx-product-recipes .hx2-recipe > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease, opacity .25s ease;
}
.hx-product-recipes .hx2-recipe > span {
position: absolute;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 2;
display: grid;
gap: 9px;
}
.hx-product-recipes .hx2-recipe strong {
display: -webkit-box;
overflow: hidden;
color: #fff;
font-size: clamp(1.05rem, 1.49vw, 1.29rem);
line-height: 1.2;
letter-spacing: -.02em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.hx-product-recipes .hx2-recipe__stats {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.hx-product-recipes .hx2-recipe__stat {
display: inline-flex;
align-items: center;
gap: 5px;
width: auto;
padding: 5px 9px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
color: #fff;
font-size: .72rem;
font-weight: 650;
line-height: 1;
backdrop-filter: blur(4px);
}
.hx-product-recipes .hx2-recipe__stat svg {
display: block;
flex: 0 0 14px;
width: 14px;
height: 14px;
max-width: 14px;
max-height: 14px;
}
.hx-product-recipes .hx2-recipe > i {
position: absolute;
top: 15px;
right: 15px;
z-index: 2;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
color: var(--hx2-ink, #16202a);
font-size: 17px;
font-style: normal;
line-height: 1;
transition: transform .25s ease;
}
.hx-product-recipes .hx2-recipe:hover > img,
.hx-product-recipes .hx2-recipe:focus-visible > img {
transform: scale(1.04);
}
.hx-product-recipes .hx2-recipe:hover > i,
.hx-product-recipes .hx2-recipe:focus-visible > i {
transform: translate(2px, -2px);
}
.hx-product-recipes .hx2-recipe:focus-visible {
outline: 3px solid var(--hx2-blue, #1d4497);
outline-offset: 3px;
}
.single-product-page .woocommerce-tabs {
max-width: 940px;
margin: 0 auto clamp(64px, 8vw, 110px);
padding: 10px 24px;
border: 1px solid #e1e5e8;
border-radius: 20px;
background: #fff;
}
.single-product-page .woocommerce-tabs .tabs {
display: none;
}
.single-product-page .accordion-layout .tab-content-wrap summary.accordion-title {
padding: 20px 42px 20px 4px;
font-size: 1.05rem;
}
.single-product-page .accordion-layout .woocommerce-Tabs-panel {
padding: 0 4px 24px;
}
@media (max-width: 900px) {
.hx-product-recipes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hx-product-recipes__grid .hx2-recipe:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
body.single-product #main-content {
background: #fff;
}
#main-content .single-product-page {
padding-top: 24px;
}
#main-content .single-product-page .single-product-wrapper {
gap: 22px;
margin-bottom: 56px;
}
#main-content .single-product-wrapper > [class*="col-"] {
width: 100%;
max-width: 100%;
min-width: 0;
padding-inline: 0;
}
.woocommerce div.product .summary.entry-summary {
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
padding: 22px;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(16, 32, 48, .07);
}
#main-content .single-product-page .product_title {
max-width: 100%;
margin-right: 0;
font-size: clamp(1.52rem, 7.05vw, 1.89rem);
overflow-wrap: anywhere;
}
#main-content .single-product-page .entry-summary,
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
text-align: left;
}
#main-content .single-product-page .entry-summary .woocommerce-product-rating {
justify-content: flex-start;
text-align: left;
}
#main-content .single-product-wrapper > .col-md-6:first-child > .yith-wcwl-add-to-wishlist {
display: none;
}
#main-content .single-product-page .hx-reassure {
order: 4;
width: calc(100vw - 40px);
max-width: calc(100vw - 40px);
margin-top: 0;
}
.hx-product-recipes {
margin-inline: -10px;
padding: 34px 20px;
border-radius: 20px;
}
.hx-product-recipes__head {
align-items: flex-start;
flex-direction: column;
}
.hx-product-recipes__grid {
grid-template-columns: 1fr;
}
.hx-product-recipes__grid .hx2-recipe:last-child:nth-child(odd) {
grid-column: auto;
}
.hx-product-recipes .hx2-recipe {
min-height: 330px;
}
}
@media (max-width: 430px) {
.single-product-page.product-type-simple .summary form.cart {
flex-wrap: wrap;
}
.single-product-page.product-type-simple div.quantity {
flex-basis: 100%;
}
.single-product-page.product-type-simple div.quantity .qty {
flex: 1 1 auto;
}
#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
flex-basis: 100%;
}
}
@media print {
body.single-product #main-content {
background: #fff;
}
.single-product-page .summary form.cart,
.single-product-page .hx-amazon-buy,
.single-product-page .hx-reassure,
.single-product-page .yith-wcwl-add-to-wishlist,
.hx-product-recipes__all {
display: none !important;
}
.woocommerce div.product .summary.entry-summary,
.single-product-page .woocommerce-tabs,
.hx-product-recipes {
border: 0;
box-shadow: none;
}
} .hx-amazon-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-top: 16px;
}
.hx-amazon-block .hx-amazon-buy { margin-top: 0; }
.hx-amz-badge {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-size: .9rem;
line-height: 1;
color: #232f3e;
} .hx-product-value {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
margin: -10px 0 16px;
color: #53606b;
font-size: .92rem;
font-weight: 650;
}
.hx-product-value .woocommerce-Price-amount {
color: var(--hx2-blue, #1d4497);
font-weight: 800;
}
.hx-flavours {
margin: 0 0 17px;
}
.hx-flavours__label {
display: block;
margin-bottom: 9px;
color: var(--hx2-ink, #16202a);
font-size: .84rem;
font-weight: 750;
}
.hx-flavours__options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hx-flavours__option {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 38px;
padding: 8px 11px;
border: 1px solid #d9dee2;
border-radius: 999px;
background: #fff;
color: #35414b;
font-size: .78rem;
font-weight: 650;
line-height: 1.1;
text-decoration: none;
}
.hx-flavours__option i {
width: 11px;
height: 11px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--flavour-tone);
box-shadow: 0 0 0 1px rgba(22, 32, 42, .2);
}
.hx-flavours__option:hover,
.hx-flavours__option:focus-visible,
.hx-flavours__option.is-active {
border-color: var(--hx2-blue, #1d4497);
background: #f3f6fc;
color: var(--hx2-blue, #1d4497);
}
.hx-product-benefits {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.hx-product-benefits li {
display: inline-flex;
align-items: center;
gap: 6px;
color: #35414b;
font-size: .86rem;
font-weight: 650;
}
.hx-product-benefits .hx-benefit-icon { width: auto; max-width: 25px; height: 25px; }
.single-product-page .summary form.cart {
margin-top: 18px;
}
.single-product-page .hx-amazon-block {
align-items: stretch;
gap: 10px;
margin-top: 12px;
}
.single-product-page .hx-amz-badge { align-self: flex-start; }
.single-product-page .hx-amazon-block .hx-amazon-buy {
display: grid;
grid-template-columns: minmax(150px, .72fr) minmax(150px, 1fr) 32px;
align-items: center;
gap: 15px;
width: 100%;
max-width: none;
min-height: 82px;
margin: 0;
padding: 12px 15px;
border: 1px solid #202a33;
border-radius: 14px;
background: #0f1111;
box-shadow: 0 10px 24px rgba(15, 17, 17, .14);
color: #fff;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.single-product-page .hx-amazon-block .hx-amazon-buy:hover,
.single-product-page .hx-amazon-block .hx-amazon-buy:focus-visible {
border-color: #ff9900;
background: #0f1111;
box-shadow: 0 14px 30px rgba(15, 17, 17, .22);
color: #fff;
transform: translateY(-2px);
}
.single-product-page .hx-amazon-buy:focus-visible {
outline: 3px solid rgba(255, 153, 0, .3);
outline-offset: 3px;
}
.hx-amazon-buy__brand {
display: flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding-right: 18px;
border-right: 1px solid #353d43;
}
.hx-amazon-buy__brand img {
display: block;
width: 150px;
height: auto;
}
.hx-amazon-buy__offer {
display: flex;
min-width: 0;
flex-direction: column;
}
.hx-amazon-buy__offer strong {
color: #fff;
font-size: .93rem;
font-weight: 800;
letter-spacing: -.01em;
}
.hx-amazon-buy__offer small {
margin-top: 4px;
color: #b9c0c5;
font-size: .7rem;
font-weight: 500;
}
.hx-amazon-buy__go {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid #424a50;
border-radius: 50%;
color: #ff9900;
font-size: 1.05rem;
transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.hx-amazon-buy:hover .hx-amazon-buy__go,
.hx-amazon-buy:focus-visible .hx-amazon-buy__go {
background: #ff9900;
color: #0f1111;
transform: translate(2px, -2px);
}
@media (max-width: 460px) {
.single-product-page .hx-amazon-block .hx-amazon-buy {
grid-template-columns: minmax(0, 1fr) 32px;
gap: 10px 14px;
padding: 15px 16px;
}
.hx-amazon-buy__brand {
justify-content: flex-start;
min-height: 0;
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid #353d43;
}
.hx-amazon-buy__brand img { width: 145px; }
.hx-amazon-buy__offer { grid-column: 1; }
.hx-amazon-buy__go { grid-column: 2; grid-row: 1 / 3; }
}
.single-product-page .hx-reassure {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 18px;
max-width: none;
margin: 12px 0 0;
padding: 15px 0 0;
border: 0;
border-top: 1px solid #e4e7e9;
border-radius: 0;
}
.single-product-page .hx-reassure__item {
gap: 7px;
font-size: .78rem;
font-weight: 650;
}
.single-product-page .hx-reassure__item svg {
width: 19px;
height: 19px;
}
.hx-flavour-set {
display: grid;
grid-template-columns: minmax(210px, .8fr) minmax(360px, 1.35fr) minmax(230px, .8fr);
align-items: center;
gap: clamp(24px, 4vw, 56px);
margin: 0 0 clamp(42px, 6vw, 76px);
padding: clamp(28px, 4vw, 48px);
border: 1px solid #dce3e8;
border-radius: 24px;
background: #fff;
box-shadow: 0 14px 42px rgba(16, 32, 48, .06);
}
.hx-flavour-set__eyebrow {
display: block;
margin-bottom: 7px;
color: var(--hx2-blue, #1d4497);
font-size: .7rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.hx-flavour-set h2 {
margin: 0 0 7px;
font-size: clamp(1.44rem, 2.19vw, 1.93rem);
letter-spacing: -.03em;
}
.hx-flavour-set__copy p {
margin: 0;
color: #626d76;
font-size: .92rem;
}
.hx-flavour-set__products {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.hx-flavour-set__product {
min-width: 0;
text-align: center;
}
.hx-flavour-set__product a {
display: block;
margin-bottom: 8px;
padding: 8px;
border-radius: 14px;
background: #f7f7f3;
}
.hx-flavour-set__product img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.hx-flavour-set__product span {
display: block;
overflow: hidden;
color: #35414b;
font-size: .72rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.hx-flavour-set__form button {
width: 100%;
min-height: 52px;
padding: 13px 20px;
border: 0;
border-radius: 999px;
background: var(--hx2-blue, #1d4497);
color: #fff;
font-size: .9rem;
font-weight: 750;
cursor: pointer;
}
.hx-flavour-set__form button:hover,
.hx-flavour-set__form button:focus-visible {
background: var(--hx2-ink, #16202a);
} .hx-product-recipes--count-1 {
display: grid;
grid-template-columns: minmax(250px, .8fr) minmax(360px, 1.2fr);
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
.hx-product-recipes--count-1 .hx-product-recipes__head {
align-items: flex-start;
flex-direction: column;
margin-bottom: 0;
}
.hx-product-recipes--count-1 .hx-product-recipes__grid {
grid-template-columns: 1fr;
}
@media (max-width: 980px) {
.hx-flavour-set {
grid-template-columns: 1fr 1.35fr;
}
.hx-flavour-set__form {
grid-column: 1 / -1;
max-width: 420px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 767px) {
body.single-product {
overflow-x: clip;
}
#main-content .single-product-page,
#main-content .single-product-page .single-product-wrapper,
#main-content .single-product-wrapper > [class*="col-"],
#main-content .single-product-page .entry-summary,
#main-content .single-product-page .entry-summary > * {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
#main-content .single-product-page .single-product-wrapper.row {
width: 100%;
margin-right: 0;
margin-left: 0;
}
#main-content .single-product-page .summary.entry-summary {
width: 100%;
max-width: 100%;
padding: 20px;
}
.single-product-page .single-product-images-wrapper.single-product-gallery {
width: min(100%, 340px);
max-width: 340px;
}
.single-product-page .single-product-thumbnails {
width: min(82%, 290px);
max-width: 290px;
}
#main-content .single-product-page .single-product-wrapper {
gap: 14px;
margin-bottom: 42px;
}
#main-content .single-product-page .product_title {
font-size: clamp(1.44rem, 6.68vw, 1.78rem);
line-height: 1.08;
}
#main-content .single-product-page .entry-summary .woocommerce-product-details__short-description {
font-size: .94rem;
line-height: 1.55;
}
.single-product-page.product-type-simple .summary form.cart {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
.single-product-page.product-type-simple div.quantity {
flex: 0 0 104px;
}
#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
flex: 1 1 auto;
min-width: 0;
padding-inline: 12px;
font-size: .9rem;
}
.hx-flavours__options {
gap: 6px;
}
.hx-flavours__option {
padding: 7px 9px;
font-size: .72rem;
}
.single-product-page .hx-reassure {
width: 100%;
max-width: 100%;
margin-top: 10px;
padding-top: 13px;
}
.single-product-page + .hx-sticky-cart {
display: flex !important;
}
.hx-sticky-cart__btn {
font-size: .82rem;
}
.hx-flavour-set {
grid-template-columns: 1fr;
gap: 22px;
margin-bottom: 42px;
padding: 26px 20px;
border-radius: 18px;
}
.hx-flavour-set__form {
grid-column: auto;
}
.single-product-page .woocommerce-tabs {
margin-bottom: 42px;
}
.hx-product-recipes {
margin-bottom: 48px;
}
.hx-product-recipes--count-1 {
display: block;
}
.hx-product-recipes--count-1 .hx-product-recipes__head {
margin-bottom: 28px;
}
}
@media (max-width: 350px) {
.single-product-page.product-type-simple .summary form.cart {
flex-wrap: wrap;
}
.single-product-page.product-type-simple div.quantity,
#main-content .single-product-page.product-type-simple div.summary form.cart .single_add_to_cart_button {
flex-basis: 100%;
}
.hx-sticky-cart__thumb {
display: none;
}
} .hx-amazon-card {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 40px;
padding: 9px 14px;
border: 1px solid #c8cfd5;
border-radius: 999px;
background: #fff;
color: #17212b;
font-size: .78rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
}
.hx-amazon-card:hover,
.hx-amazon-card:focus-visible { border-color: #ff9900; color: #111; background: #fffaf2; }
.products .product-price-buttons .hx-amazon-card { width: 100%; margin-top: 7px; }
.hx-shop-card__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.hx-shop .hx-shop-card__actions .hx-amazon-card { min-height: 40px; }
.hx-cat-buybox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 4px 0 22px;
padding: 18px 20px;
border: 1px solid #d9e2f1;
border-radius: 16px;
background: #f3f6fb;
}
.hx-cat-buybox > div { display: grid; gap: 3px; }
.hx-cat-buybox strong { color: #16202a; font-size: 1rem; }
.hx-cat-buybox span { color: #5f6b77; font-size: .82rem; }
.hx-cat-buybox form { flex: 0 0 auto; margin: 0; }
.hx-cat-buybox button {
min-height: 48px;
padding: 12px 22px;
border: 0;
border-radius: 999px;
background: var(--hx2-blue, #1d4497);
color: #fff;
font-weight: 750;
cursor: pointer;
}
.hx-cat-buybox button .woocommerce-Price-amount { color: inherit !important; }
.hx-sticky-cart__actions { display: flex; flex: 1 1 auto; justify-content: flex-end; gap: 7px; min-width: 0; }
.hx-sticky-cart__btn,
.hx-sticky-cart__amazon {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 15px;
border-radius: 999px;
font-size: .82rem;
font-weight: 750;
line-height: 1;
white-space: nowrap;
}
.hx-sticky-cart__amazon { border: 1px solid #ff9900; background: #fff8e8; color: #17212b; text-decoration: none; }
@media (max-width: 767px) {
.single-product-page .single-product-images-wrapper.single-product-gallery { width: min(100%, 295px); max-width: 295px; }
.single-product-page .single-product-thumbnails { width: min(76%, 245px); max-width: 245px; }
.hx-cat-buybox { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; }
.hx-cat-buybox form,
.hx-cat-buybox button { width: 100%; }
.tax-product_cat .hx-cat-benefits {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 12px 0;
margin-bottom: 18px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.tax-product_cat .hx-cat-benefits::-webkit-scrollbar { display: none; }
.tax-product_cat .hx-cat-benefits li {
min-width: min(70vw, 245px);
padding: 10px 12px;
border-radius: 10px;
background: #f7f8fa;
scroll-snap-align: start;
}
.hx-sticky-cart { padding: 8px 10px; }
.hx-sticky-cart__thumb { display: none; }
.hx-sticky-cart__actions { width: 100%; }
.hx-sticky-cart__btn,
.hx-sticky-cart__amazon { flex: 1 1 0; }
}
@media (max-width: 420px) {
.hx-sticky-cart__info { display: none; }
}
.hx-amz-stars {
--pct: calc(var(--rating, 0) / 5 * 100%);
position: relative;
display: inline-block;
font-size: 1rem;
line-height: 1;
letter-spacing: 1px;
font-family: Arial, "Segoe UI Symbol", sans-serif;
}
.hx-amz-stars::before { content: "\2605\2605\2605\2605\2605"; color: #d5d9d9; }
.hx-amz-stars::after {
content: "\2605\2605\2605\2605\2605";
color: #ffa41c;
position: absolute;
inset: 0;
width: var(--pct);
overflow: hidden;
white-space: nowrap;
}
.hx-amz-badge__num { font-weight: 700; color: #232f3e; }
.hx-amz-badge__count { color: #007185; }
.hx-amz-badge:hover .hx-amz-badge__count,
.hx-amz-badge:focus-visible .hx-amz-badge__count { text-decoration: underline; }
.hx-amz-badge__arrow { color: #007185; font-weight: 700; } .hx-nft-wrap { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; }
.hx-nft {
flex: 0 0 auto;
box-sizing: border-box;
width: 100%;
max-width: 380px;
padding: 12px 15px 14px;
border: 2px solid #111;
background: #fff;
color: #111;
font-family: Arial, Helvetica, sans-serif;
}
.hx-nft__title { margin: 0; font-size: 1.56rem; font-weight: 800; line-height: 1.05; letter-spacing: .2px; }
.hx-nft__serving {
margin: 3px 0 0;
padding-bottom: 7px;
font-size: .82rem;
border-bottom: 9px solid #111;
}
.hx-nft__table { width: 100%; border-collapse: collapse; }
.hx-nft__table th,
.hx-nft__table td {
padding: 4px 0;
font-size: .9rem;
font-weight: 400;
text-align: left;
vertical-align: baseline;
border-bottom: 1px solid #111;
}
.hx-nft__table td { text-align: right; white-space: nowrap; padding-left: 8px; }
.hx-nft__table th strong { font-weight: 700; }
.hx-nft__cal th,
.hx-nft__cal td { font-size: 1.37rem; font-weight: 800; border-bottom: 5px solid #111; padding-top: 2px; }
.hx-nft__dv th,
.hx-nft__dv td { border-bottom: none; padding: 0 0 3px; font-size: .72rem; }
.hx-nft__row.is-sub th { padding-left: 20px; }
.hx-nft__row.is-major th,
.hx-nft__row.is-major td { border-top: 5px solid #111; }
.hx-nft__note { margin: 8px 0 0; font-size: .72rem; line-height: 1.35; }
.hx-nft__ingredients { flex: 1 1 240px; margin: 0; align-self: flex-start; font-size: .95rem; line-height: 1.6; color: var(--hx-ink, #1a1a2e); }
.hx-compare-wrap {
width: 100%;
max-width: 680px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.hx-compare__title { margin: 0 0 4px; font-size: 1.29rem; font-weight: 700; color: var(--hx-ink, #0d1b3e); }
.hx-compare__intro { margin: 0 0 16px; font-size: .95rem; color: #5a6172; }
.hx-compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hx-compare th,
.hx-compare td { padding: 12px 14px; text-align: center; border-bottom: 1px solid #e6e9f2; }
.hx-compare thead th { font-weight: 700; color: var(--hx-ink, #0d1b3e); border-bottom: 2px solid #d3d9ea; vertical-align: bottom; }
.hx-compare tbody th { text-align: left; font-weight: 600; color: var(--hx-ink, #0d1b3e); }
.hx-compare .is-brand { background: var(--hx2-blue, #2b50c8); color: #fff; }
.hx-compare thead .is-brand { border-radius: 10px 10px 0 0; font-weight: 800; }
.hx-compare tbody .is-brand { font-weight: 700; }
.hx-compare tbody tr:last-child .is-brand { border-radius: 0 0 10px 10px; }
.hx-compare .is-yes { color: #1a7f43; font-weight: 700; }
.hx-compare .is-no { color: #c0392b; font-weight: 700; }
.hx-compare .is-brand.is-yes { color: #fff; }
.hx-compare__sub { display: block; margin-top: 2px; font-size: .7rem; font-weight: 400; opacity: .8; }
@media (max-width: 480px) {
.hx-compare {
min-width: 520px;
}
.hx-compare th,
.hx-compare td { padding: 10px 8px; font-size: .85rem; }
}
@media (max-width: 767px) {
.single-product-page .woocommerce-tabs {
padding-inline: 16px;
}
.single-product-page .accordion-layout .woocommerce-Tabs-panel {
max-width: 100%;
overflow: visible;
}
.woocommerce #reviews #comments ol.commentlist {
margin: 0;
padding: 0;
}
.woocommerce #reviews #comments ol.commentlist li {
margin-left: 0;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
margin-left: 0;
padding: 14px;
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
position: static;
float: none;
margin-bottom: 10px;
}
} .hx-flavour-set.hx-bar-collection {
display: block;
margin: 0 0 clamp(48px, 7vw, 84px);
padding: clamp(42px, 6vw, 68px);
border: 0;
border-radius: 26px;
background: #f5f7fa;
box-shadow: none;
}
.hx-flavour-set > .hx-container {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
.hx-flavour-set h2 {
max-width: 760px;
margin: 0 0 12px;
color: #152231;
font-size: clamp(26px, 3.27vw, 38px);
line-height: 1.08;
letter-spacing: -.04em;
}
.hx-flavour-set__intro {
max-width: 650px;
margin: 0 0 30px;
color: #64717e;
font-size: .96rem;
line-height: 1.65;
}
.hx-flavour-set .hx-bar-collection__item {
min-height: 220px;
}
.hx-flavour-set .hx-bar-collection__item small .woocommerce-Price-amount {
color: inherit;
font-size: inherit;
font-weight: 750;
}
.hx-flavour-set__purchase {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 22px;
padding: 20px 22px;
border: 1px solid #d9e1e9;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 26px rgba(20, 39, 72, .06);
}
.hx-flavour-set__purchase > div {
display: grid;
gap: 4px;
}
.hx-flavour-set__purchase > div strong {
color: #172536;
font-size: 1rem;
line-height: 1.3;
}
.hx-flavour-set__purchase > div span {
color: #6a7682;
font-size: .8rem;
line-height: 1.45;
}
.hx-flavour-set__form {
flex: 0 0 auto;
margin: 0;
}
.hx-flavour-set__form button {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 275px;
min-height: 52px;
padding: 13px 22px;
border: 0;
border-radius: 10px;
color: #fff;
background: var(--hx-primary, #1d4497);
font-size: .86rem;
font-weight: 780;
line-height: 1.2;
cursor: pointer;
transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hx-flavour-set__form button:hover,
.hx-flavour-set__form button:focus-visible {
background: #162c5d;
box-shadow: 0 8px 18px rgba(29, 68, 151, .2);
transform: translateY(-1px);
}
@media (max-width: 767px) {
.hx-flavour-set.hx-bar-collection {
display: block;
margin-bottom: 46px;
padding: 34px 20px 24px;
border-radius: 20px;
}
.hx-flavour-set__purchase {
align-items: stretch;
flex-direction: column;
padding: 18px;
}
.hx-flavour-set__form {
width: 100%;
max-width: none;
}
.hx-flavour-set__form button {
width: 100%;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hx-flavour-set__form button { transition-duration: .01ms !important; }
} .hx-cat-lede {
max-width: 72ch;
margin: 4px 0 22px;
}
.hx-cat-lede p {
margin: 0;
color: #4d5966;
font-size: 17px;
line-height: 1.65;
}
.hx-cat-content {
margin-top: clamp(40px, 5vw, 68px);
padding-top: clamp(32px, 4vw, 52px);
border-top: 1px solid var(--hx-border, #e2e8f0);
}
.hx-cat-content__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 42px);
}
.hx-cat-section h3 {
margin: 0 0 10px;
font-size: 19px;
letter-spacing: -.015em;
}
.hx-cat-section p {
margin: 0 0 12px;
color: #56616e;
font-size: 15px;
line-height: 1.7;
}
.hx-cat-section p:last-child { margin-bottom: 0; }
.hx-cat-section strong { color: var(--hx-text-strong, #14212d); }
.hx-cat-section a {
color: var(--hx-primary, #1d4497);
text-decoration: underline;
text-underline-offset: 3px;
}
.hx-cat-faq {
margin-top: clamp(32px, 4vw, 52px);
}
.hx-cat-faq > h3 {
margin: 0 0 14px;
font-size: 21px;
letter-spacing: -.02em;
}
.hx-cat-faq__list {
border-top: 1px solid var(--hx-border, #e2e8f0);
max-width: 80ch;
}
.hx-cat-faq details {
border-bottom: 1px solid var(--hx-border, #e2e8f0);
}
.hx-cat-faq summary {
position: relative;
padding: 16px 44px 16px 0;
font-size: 16px;
font-weight: 650;
cursor: pointer;
list-style: none;
}
.hx-cat-faq summary::-webkit-details-marker { display: none; }
.hx-cat-faq summary::after {
position: absolute;
top: 50%;
right: 8px;
content: "+";
font-size: 21px;
font-weight: 400;
transform: translateY(-50%);
}
.hx-cat-faq details[open] summary::after { content: "\2212"; }
.hx-cat-faq details p {
max-width: 72ch;
padding: 0 44px 18px 0;
margin: 0;
color: #56616e;
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 780px) {
.hx-cat-content__grid { grid-template-columns: minmax(0, 1fr); }
} .hx-cat-benefits {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
padding: 18px 0 4px;
margin: 0 0 26px;
border-top: 1px solid var(--hx-border, #e2e8f0);
border-bottom: 1px solid var(--hx-border, #e2e8f0);
list-style: none;
}
.hx-cat-benefits li { padding: 6px 0; }
.hx-cat-benefits .hx-benefit-icon {
width: auto;
max-width: 44px;
height: 42px;
margin-bottom: 10px;
}
.hx-cat-benefits .hx-benefit-icon--vegan { height: 32px; margin-top: 5px; margin-bottom: 15px; }
.hx-cat-benefits strong {
display: block;
margin-bottom: 3px;
color: var(--hx-text-strong, #14212d);
font-size: 14px;
letter-spacing: -.01em;
}
.hx-cat-benefits span {
display: block;
color: #67727f;
font-size: 12.5px;
line-height: 1.5;
} .hx-cat-recipes { margin-top: clamp(32px, 4vw, 52px); }
.hx-cat-recipes__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 16px;
}
.hx-cat-recipes__head h3 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.hx-cat-recipes__head a {
color: var(--hx-primary, #1d4497);
font-size: 14px;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 3px;
}
.hx-cat-recipes__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 0;
margin: 0;
list-style: none;
}
.hx-cat-recipes__grid a {
display: block;
overflow: hidden;
border: 1px solid var(--hx-border, #e2e8f0);
border-radius: 12px;
background: #fff;
color: inherit;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-cat-recipes__grid a:hover {
border-color: #c4d2ea;
box-shadow: 0 14px 30px rgba(20, 33, 45, .1);
transform: translateY(-2px);
}
.hx-cat-recipes__grid img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
}
.hx-cat-recipes__grid span {
display: block;
padding: 14px 16px 16px;
font-size: 15px;
font-weight: 650;
line-height: 1.4;
}
@media (max-width: 900px) {
.hx-cat-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-cat-recipes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.hx-cat-benefits { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.hx-cat-recipes__grid { grid-template-columns: minmax(0, 1fr); }
} .tax-product_cat .products-header {
align-items: flex-start;
margin-bottom: 6px;
padding-bottom: 0;
}
.tax-product_cat .products-header-left {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.tax-product_cat .products-header .woocommerce-products-header__title {
font-size: clamp(27px, 2.99vw, 36px);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.05;
}
.tax-product_cat .products-header .woocommerce-result-count {
margin-left: 0;
color: #6b7683;
} .tax-product_cat #page-title .entry-header {
display: none;
} .tax-product_cat #page-title {
padding-top: 14px;
padding-bottom: 14px;
background-color: transparent;
border-bottom: 1px solid var(--hx-border);
}
.tax-product_cat #page-title.text-center,
.tax-product_cat #page-title .entry-breadcrumbs {
margin-top: 0;
text-align: left;
} .tax-product_cat #page-title .pressmart-breadcrumb {
justify-content: flex-start;
} .tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb {
color: #6b7683;
}
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a {
color: #4a5563;
}
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a:hover,
.tax-product_cat #page-title.color-scheme-dark .pressmart-breadcrumb a:focus {
color: var(--hx-primary, #1d4497);
}  .woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
display: block;
width: 100%;
} .woocommerce div.product div.images .woocommerce-product-gallery__image img {
aspect-ratio: 1;
object-fit: contain;
background: #fff;
} .hx-product-benefits {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 4px 0 0;
}
.hx-product-benefits li {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: .76rem;
line-height: 1.2;
text-align: center;
}
.hx-product-benefits .hx-benefit-icon { max-width: 30px; height: 30px; } .hx-sizes__option strong { font-weight: 800; }
.hx-sizes__price { color: #5b6772; font-weight: 600; }
.hx-sizes__option.is-active .hx-sizes__price { color: inherit; } .hx-shop-size { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 26px 0 12px; scroll-margin-top: 150px; }
.hx-shop-size:first-of-type { margin-top: 6px; }
.hx-shop-size h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.hx-shop-size p { margin: 0; color: #5b6772; font-size: .88rem; }
.hx-shop-card__flag--new { background: #c8102e; }
.hx-shop-nav .hx-new-tag { margin-left: 6px; vertical-align: 2px; } .hx-shop__titlebar .hx-shop__proof {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
min-width: min(100%, 520px);
}
.hx-shop__titlebar .hx-shop__proof li {
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 10px 6px;
font-size: .72rem;
line-height: 1.2;
text-align: center;
} .summary .dlvr-waitlist,
.summary .hx-coming-soon {
margin: 18px 0 6px;
padding: 18px 18px 16px;
border: 1px solid #dbe3ef;
border-radius: 14px;
background: #f5f8fd;
}
.summary .dlvr-waitlist .dlvr-waitlist-h,
.summary .hx-coming-soon__h {
margin: 0 0 4px;
color: var(--hx2-blue, #1d4497) !important;
font-size: 1.2rem !important; font-weight: 800;
letter-spacing: -.01em;
}
.summary .dlvr-waitlist-note,
.summary .hx-coming-soon p:not(.hx-coming-soon__h) { margin: 0 0 12px; color: #4a5563; font-size: .9rem; line-height: 1.5; }
.summary .dlvr-waitlist-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.summary .dlvr-waitlist-row input[type="email"] {
flex: 1 1 auto;
width: auto; min-width: 0;
min-height: 48px;
padding: 0 18px;
border: 1px solid #cdd6e2;
border-radius: 999px;
background: #fff;
}
.summary .dlvr-waitlist .dlvr-waitlist-btn {
flex: 0 0 auto;
min-height: 48px;
padding: 0 24px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--hx2-blue, #1d4497) !important;
color: #fff !important;
font-weight: 700;
}
.summary .dlvr-waitlist .dlvr-waitlist-btn:hover,
.summary .dlvr-waitlist .dlvr-waitlist-btn:focus-visible { background: #163a82 !important; }
.summary .dlvr-waitlist-msg { margin: 10px 0 0; color: #1f6f43; font-weight: 600; }
.summary .hx-coming-soon__link { font-weight: 700; }
@media (max-width: 480px) {
.summary .dlvr-waitlist-row { flex-direction: column; }
} .hx-shop-card__flag--soon { background: #c8102e; } .hx-shop-banner { background: #1d4497; }
.hx-shop-banner img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: left center; }
  .hx-prose {
color: var(--hx-text);
font-size: var(--hx-text-base);
line-height: var(--hx-leading);
} .hx-partner {
--hx-partner-ink: #14212d;
--hx-partner-blue: #1d4497;
--hx-partner-blue-deep: #112d6c;
--hx-partner-cream: #f4f0e7;
--hx-partner-line: #dce2e8;
padding-block: 0;
overflow: clip;
color: var(--hx-partner-ink);
background: #fff;
}
.hx-partner h1,
.hx-partner h2,
.hx-partner h3,
.hx-partner p {
margin-top: 0;
}
.hx-partner h1,
.hx-partner h2,
.hx-partner h3 {
color: inherit;
line-height: 1.08;
}
.hx-partner p {
line-height: 1.7;
}
.hx-partner-hero {
position: relative;
padding: clamp(54px, 7vw, 112px) 0;
background: linear-gradient(125deg, #f7f4ed 0%, #fff 58%, #edf3ff 100%);
}
.hx-partner-hero::after {
position: absolute;
right: -80px;
bottom: -110px;
width: 360px;
height: 360px;
border: 70px solid rgba(29, 68, 151, .06);
border-radius: 50%;
content: "";
pointer-events: none;
}
.hx-partner-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(380px, .8fr);
align-items: center;
gap: clamp(42px, 7vw, 112px);
max-width: 1280px;
}
.hx-partner-hero__copy,
.hx-partner-section,
.hx-partner-application,
.hx-dlivr__layout > *,
.hx-persona > * {
min-width: 0;
}
.hx-partner-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 17px;
color: var(--hx-partner-blue);
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
line-height: 1.3;
text-transform: uppercase;
}
.hx-partner-eyebrow::before {
content: none;
}
.hx-partner-hero h1 {
max-width: 760px;
margin-bottom: 24px;
font-size: clamp(35px, 4.16vw, 57px);
font-weight: 700;
letter-spacing: -.045em;
}
.hx-partner-hero__copy > p {
max-width: 690px;
margin-bottom: 28px;
color: #43515f;
font-size: clamp(17px, 1.74vw, 20px);
}
.hx-partner-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 30px;
}
.hx-partner .hx-button {
min-height: 50px;
padding: 13px 25px;
border-radius: 6px;
}
.hx-partner .hx-button--quiet {
border-color: var(--hx-partner-ink);
box-shadow: none;
color: var(--hx-partner-ink);
background: transparent;
}
.hx-partner .hx-button--quiet:hover,
.hx-partner .hx-button--quiet:focus {
border-color: var(--hx-partner-blue);
color: var(--hx-partner-blue);
background: #fff;
}
.hx-partner-proof,
.hx-partner-checks {
display: flex;
flex-wrap: wrap;
gap: 10px 23px;
padding: 0;
margin: 0;
list-style: none;
}
.hx-partner-proof li,
.hx-partner-checks li {
position: relative;
padding-left: 21px;
font-size: 13px;
font-weight: 600;
}
.hx-partner-proof li::before,
.hx-partner-checks li::before {
position: absolute;
top: .45em;
left: 0;
width: 9px;
height: 9px;
border: 2px solid var(--hx-partner-blue);
border-radius: 50%;
content: "";
}
.hx-partner-hero__media {
position: relative;
min-width: 0;
}
.hx-partner-hero__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 22px 22px 90px 22px;
box-shadow: 0 28px 70px rgba(20, 33, 45, .18);
object-fit: cover;
}
.hx-partner-hero__media--product img {
aspect-ratio: 1;
border-radius: 22px 70px 22px 70px;
}
.hx-partner-hero__note {
position: absolute;
right: -22px;
bottom: 28px;
max-width: 280px;
padding: 18px 22px;
border-left: 4px solid #8fb0f8;
box-shadow: 0 14px 34px rgba(20, 33, 45, .2);
color: #fff;
background: var(--hx-partner-blue-deep);
font-size: 13px;
font-weight: 600;
line-height: 1.5;
}
.hx-partner-section,
.hx-partner-application,
.hx-partner-faq {
max-width: 1200px;
padding-top: clamp(68px, 8vw, 112px);
padding-bottom: clamp(68px, 8vw, 112px);
}
.hx-section-heading {
max-width: 720px;
margin-bottom: 38px;
}
.hx-section-heading h2,
.hx-partner-application__intro h2 {
margin-bottom: 17px;
font-size: clamp(28px, 3.19vw, 42px);
letter-spacing: -.035em;
}
.hx-section-heading > p,
.hx-partner-application__intro > p {
margin-bottom: 0;
color: #596673;
font-size: 17px;
}
.hx-persona {
display: grid;
grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr);
gap: 26px;
}
.hx-persona__tabs {
display: flex;
flex-direction: column;
gap: 8px;
}
.hx-persona__tabs button {
position: relative;
width: 100%;
padding: 18px 45px 18px 20px;
border: 1px solid var(--hx-partner-line);
border-radius: 8px;
box-shadow: none;
color: var(--hx-partner-ink);
background: #fff;
text-align: left;
}
.hx-persona__tabs button::after {
position: absolute;
top: 50%;
right: 20px;
content: "\2192";
transform: translateY(-50%);
}
.hx-persona__tabs button[aria-selected="true"] {
border-color: var(--hx-partner-blue);
color: #fff;
background: var(--hx-partner-blue);
}
.hx-persona__panels {
display: grid;
min-height: 270px;
padding: clamp(32px, 5vw, 64px);
background: var(--hx-partner-cream);
border-radius: 8px 70px 8px 8px;
place-items: center start;
}
.hx-persona__panels > div {
max-width: 650px;
}
.hx-persona__panels h3 {
margin-bottom: 18px;
font-size: clamp(24px, 2.55vw, 34px);
}
.hx-persona__panels p {
margin-bottom: 0;
font-size: 17px;
}
.hx-partner-band {
padding: clamp(68px, 8vw, 105px) 0;
color: #fff;
background: var(--hx-partner-blue-deep);
}
.hx-partner-band > .hx-container {
max-width: 1200px;
}
.hx-section-heading--light,
.hx-section-heading--light h2,
.hx-section-heading--light p,
.hx-section-heading--light .hx-partner-eyebrow {
color: #fff;
}
.hx-value-grid,
.hx-benefit-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.hx-value-grid article,
.hx-benefit-cards article {
padding: 30px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 8px;
background: rgba(255, 255, 255, .06);
}
.hx-value-grid article > span {
display: grid;
width: 36px;
height: 36px;
margin-bottom: 25px;
border-radius: 50%;
color: var(--hx-partner-blue-deep);
background: #fff;
font-weight: 700;
place-items: center;
}
.hx-value-grid h3,
.hx-benefit-cards h3 {
margin-bottom: 12px;
font-size: 20px;
}
.hx-value-grid p,
.hx-benefit-cards p {
margin-bottom: 0;
color: rgba(255, 255, 255, .78);
font-size: 14px;
}
.hx-benefit-cards article {
border-color: var(--hx-partner-line);
color: var(--hx-partner-ink);
background: #fff;
}
.hx-benefit-cards article::before {
content: none;
}
.hx-benefit-cards p {
color: #596673;
}
.hx-benefit-cards__icons {
display: flex;
min-height: 54px;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.hx-benefit-cards__icons .hx-benefit-icon {
width: auto;
height: 48px;
}
.hx-benefit-cards__icons .hx-benefit-icon--vegan { height: 36px; }
.hx-partner-application {
display: grid;
grid-template-columns: minmax(250px, .38fr) minmax(0, .62fr);
gap: clamp(40px, 7vw, 90px);
align-items: start;
}
.hx-partner-application__intro {
position: sticky;
top: 120px;
}
.hx-application-steps {
padding: 0;
margin: 32px 0 0;
list-style: none;
counter-reset: hx-application;
}
.hx-application-steps li {
position: relative;
display: grid;
grid-template-columns: 12px 1fr;
column-gap: 16px;
padding-bottom: 24px;
counter-increment: hx-application;
}
.hx-application-steps li::before {
width: 12px;
height: 12px;
margin-top: 5px;
border-radius: 50%;
background: var(--hx-partner-blue);
content: "";
}
.hx-application-steps li:not(:last-child)::after {
position: absolute;
top: 18px;
bottom: 2px;
left: 5px;
width: 2px;
background: #d8e0ef;
content: "";
}
.hx-application-steps strong,
.hx-application-steps span {
grid-column: 2;
}
.hx-application-steps span {
color: #5d6771;
font-size: 13px;
}
.hx-partner-form {
min-width: 0;
padding: clamp(24px, 4vw, 46px);
border: 1px solid var(--hx-partner-line);
border-radius: 12px;
box-shadow: 0 20px 55px rgba(20, 33, 45, .08);
background: #fff;
}
.hx-partner-form form > h2:first-child,
.hx-partner-form--ambassador .u-column2 > h2,
.hx-partner-form--ambassador .u-column1,
.hx-partner-form--ambassador .woocommerce-form-login {
display: none;
}
.hx-partner-form--ambassador input[type="radio"] {
display: inline-block;
width: 18px !important;
height: 18px;
margin: 3px 6px 0 0;
vertical-align: top;
}
.hx-partner-form--ambassador label.radio {
display: inline-flex;
align-items: center;
margin: 0 22px 10px 0;
font-weight: 500;
}
.hx-partner-form--ambassador .description {
display: block;
margin-top: 5px;
color: #68747f;
font-size: 12px;
font-style: normal;
}
.hx-partner-form--ambassador .u-columns,
.hx-partner-form--ambassador .u-column2,
.hx-partner-form--ambassador .col-2 {
float: none;
width: 100%;
max-width: none;
margin: 0;
}
.hx-partner-form p {
margin: 0 0 20px;
}
.hx-partner-form label,
.hx-wholesale-form__choices legend {
display: block;
margin-bottom: 8px;
color: var(--hx-partner-ink);
font-size: 13px;
font-weight: 700;
}
.hx-partner-form input[type="text"],
.hx-partner-form input[type="email"],
.hx-partner-form input[type="url"],
.hx-partner-form input[type="tel"],
.hx-partner-form input[type="number"],
.hx-partner-form textarea,
.hx-partner-form select {
min-height: 52px;
padding: 12px 15px;
border-color: #cfd7df;
border-radius: 6px;
color: var(--hx-partner-ink);
background-color: #fff;
}
.hx-partner-form textarea {
min-height: 120px;
}
.hx-partner-form input:focus,
.hx-partner-form textarea:focus,
.hx-partner-form select:focus {
border-color: var(--hx-partner-blue);
box-shadow: 0 0 0 3px rgba(29, 68, 151, .12);
}
.hx-partner-form button,
.hx-partner-form input[type="submit"] {
width: 100%;
min-height: 54px;
border-radius: 6px;
background: var(--hx-partner-blue);
}
.hx-partner-form button:hover,
.hx-partner-form button:focus,
.hx-partner-form input[type="submit"]:hover,
.hx-partner-form input[type="submit"]:focus {
background: var(--hx-primary-hover);
}
.hx-partner-form--ambassador .woocommerce-form-register__submit {
color: #fff !important;
background: var(--hx-partner-blue) !important;
opacity: 1;
}
.hx-partner-form--ambassador .woocommerce-form-register__submit:hover,
.hx-partner-form--ambassador .woocommerce-form-register__submit:focus {
background: var(--hx-primary-hover) !important;
}
.hx-wholesale-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
}
.hx-wholesale-form__choices {
padding: 0;
margin: 4px 0 24px;
border: 0;
}
.hx-wholesale-form__choices .wpcf7-checkbox {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.hx-wholesale-form__choices .wpcf7-list-item {
margin: 0;
}
.hx-wholesale-form__choices label {
display: flex;
align-items: flex-start;
gap: 4px;
height: 100%;
padding: 13px;
border: 1px solid #d7dee5;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
}
.hx-wholesale-form__choices label:has(input:checked) {
border-color: var(--hx-partner-blue);
background: #f0f5ff;
}
.hx-wholesale-form__consent label {
display: flex;
align-items: flex-start;
gap: 8px;
font-weight: 500;
line-height: 1.5;
}
.hx-wholesale-form__submit {
display: flex;
align-items: center;
gap: 18px;
}
.hx-wholesale-form__submit .wpcf7-spinner {
position: absolute;
}
.hx-wholesale-form__submit span:last-child {
flex: 0 0 auto;
color: #64717d;
font-size: 12px;
}
.hx-partner-checks {
display: grid;
gap: 11px;
}
.hx-partner-faq {
padding-top: 0;
}
.hx-partner-faq__list {
border-top: 1px solid var(--hx-partner-line);
}
.hx-partner-faq details {
border-bottom: 1px solid var(--hx-partner-line);
}
.hx-partner-faq summary {
position: relative;
padding: 24px 52px 24px 0;
font-size: 17px;
font-weight: 700;
cursor: pointer;
list-style: none;
}
.hx-partner-faq summary::-webkit-details-marker {
display: none;
}
.hx-partner-faq summary::after {
position: absolute;
top: 50%;
right: 12px;
content: "+";
font-size: 24px;
font-weight: 400;
transform: translateY(-50%);
}
.hx-partner-faq details[open] summary::after {
content: "\2212";
}
.hx-partner-faq details p {
max-width: 760px;
padding: 0 52px 22px 0;
margin: 0;
color: #5b6772;
}
@media (max-width: 1024px) {
.hx-partner-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(310px, .75fr);
gap: 38px;
}
.hx-partner-hero__note {
right: -6px;
}
.hx-partner-application {
grid-template-columns: minmax(220px, .35fr) minmax(0, .65fr);
gap: 34px;
}
}
@media (max-width: 767px) {
.hx-partner-hero {
padding: 48px 0 58px;
}
.hx-partner-hero__grid,
.hx-persona,
.hx-partner-application,
.hx-dlivr__layout {
grid-template-columns: 1fr;
}
.hx-partner-hero__grid {
gap: 36px;
}
.hx-partner-hero h1 {
font-size: clamp(34px, 9.97vw, 46px);
}
.hx-partner-actions .hx-button {
width: 100%;
}
.hx-partner-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hx-partner-proof {
display: grid;
}
.hx-partner-hero__media {
max-width: 560px;
}
.hx-partner-hero__media img {
aspect-ratio: 5 / 4;
border-radius: 16px 16px 58px 16px;
}
.hx-partner-hero__media--product img {
aspect-ratio: 1;
}
.hx-partner-hero__note {
right: 10px;
bottom: -20px;
max-width: calc(100% - 36px);
}
.hx-persona__tabs {
flex-direction: row;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.hx-persona__tabs button {
flex: 0 0 auto;
width: auto;
padding: 13px 18px;
white-space: nowrap;
}
.hx-persona__tabs button::after {
display: none;
}
.hx-persona__panels {
min-height: 300px;
border-radius: 8px 48px 8px 8px;
}
.hx-value-grid,
.hx-benefit-cards {
grid-template-columns: 1fr;
}
.hx-partner-application__intro {
position: static;
}
.hx-wholesale-form__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.hx-partner-actions {
grid-template-columns: 1fr;
}
.hx-partner-form {
padding: 22px 16px;
}
.hx-wholesale-form__choices .wpcf7-checkbox {
grid-template-columns: 1fr;
}
.hx-wholesale-form__submit {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
}
@media print {
.hx-partner-actions,
.hx-partner-form,
.hx-partner-hero__note {
display: none !important;
}
.hx-partner-hero,
.hx-partner-band {
padding: 24pt 0;
color: #000;
background: #fff !important;
}
}
.hx-prose > *:last-child {
margin-bottom: 0;
}
.hx-prose p {
margin-bottom: 1rem;
}
.hx-prose h1,
.hx-prose h2,
.hx-prose h3,
.hx-prose h4,
.hx-prose h5,
.hx-prose h6 {
color: var(--hx-heading);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
margin: 1.75em 0 var(--hx-heading-mb);
}
.hx-prose > h1:first-child,
.hx-prose > h2:first-child,
.hx-prose > h3:first-child {
margin-top: 0;
}
.hx-prose a {
color: var(--hx-link);
text-decoration: underline;
text-underline-offset: .18em;
}
.hx-prose a:hover,
.hx-prose a:focus {
color: var(--hx-link-hover);
} .hx-prose ul,
.hx-prose ol,
.hx-prose ul.wp-block-list,
.hx-prose ol.wp-block-list {
margin: 0 0 1rem;
padding-left: 1.25em;
}
.hx-prose ul,
.hx-prose ul.wp-block-list {
list-style: disc;
}
.hx-prose ol,
.hx-prose ol.wp-block-list {
list-style: decimal;
}
.hx-prose li {
margin-bottom: .35em;
}
.hx-prose li > ul,
.hx-prose li > ol {
margin-top: .35em;
margin-bottom: 0;
}
.hx-prose ul ul { list-style: circle; } .hx-prose hr,
.hx-prose .wp-block-separator {
border: 0;
border-top: 1px solid var(--hx-border);
margin: 2rem 0;
height: 0;
opacity: 1;
}
.hx-prose .wp-block-separator.has-alpha-channel-opacity {
opacity: .6;
}
.hx-prose .wp-block-separator.is-style-wide {
width: 100%;
}
.hx-prose .wp-block-separator.is-style-dots {
border: 0;
text-align: center;
}
.hx-prose blockquote,
.hx-prose .wp-block-quote {
border-left: 3px solid var(--hx-primary);
margin: 1.5rem 0;
padding-left: 1.25rem;
font-style: italic;
}
.hx-prose .wp-block-quote cite {
display: block;
margin-top: .5rem;
font-size: var(--hx-text-small);
font-style: normal;
color: var(--hx-heading);
}
.hx-prose figure,
.hx-prose .wp-block-image {
margin: 1.5rem 0;
}
.hx-prose img {
height: auto;
} .hx-prose .wp-caption-text,
.hx-prose figcaption {
display: none;
}
.hx-prose table,
.hx-prose .wp-block-table table {
width: 100%;
margin-bottom: 1.5rem;
border: 1px solid var(--hx-border);
font-size: var(--hx-text-small);
}
.hx-prose th,
.hx-prose td {
padding: 10px 14px;
border: 1px solid var(--hx-border);
text-align: left;
vertical-align: top;
}
.hx-prose th {
background-color: var(--hx-bg-alt);
color: var(--hx-heading);
font-weight: 600;
} .hx-prose .wp-block-table {
overflow-x: auto;
}
.hx-prose pre,
.hx-prose .wp-block-code {
background: var(--hx-bg-alt);
margin-bottom: 1.5rem;
overflow-x: auto;
padding: 1rem;
}
.hx-prose .wp-block-button__link {
display: inline-block;
padding: 12px 28px;
background-color: var(--hx-primary);
border-radius: var(--hx-radius-pill);
color: var(--hx-inverse);
font-weight: 600;
text-decoration: none;
}
.hx-prose .aligncenter {
margin-inline: auto;
text-align: center;
}
.hx-prose .alignright {
float: right;
margin: 0 0 1rem 1.5rem;
}
.hx-prose .alignleft {
float: left;
margin: 0 1.5rem 1rem 0;
}
.hx-prose .wp-block-embed,
.hx-prose iframe {
max-width: 100%;
}
.hx-prose embed,
.hx-prose iframe,
.hx-prose object {
margin-bottom: 1.5rem;
} .hx-prose [id^="aioseo-"] {
scroll-margin-top: 110px;
}   .hx-hero {
position: relative;
min-height: 518px; margin-top: -35px;
margin-bottom: 0;
overflow: hidden; animation: hx-fade-in-up .6s var(--hx-ease-overshoot) both;
}
.hx-hero__track {
display: flex;
height: 518px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hx-hero__track::-webkit-scrollbar {
display: none;
}
.hx-hero__slide {
flex: 0 0 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
display: block;
position: relative;
background-color: #833ca3;
}
.hx-hero__bg,
.hx-hero__bg img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@keyframes hx-fade-in-up {
from {
opacity: 0;
transform: translate3d(0, 30px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.hx-hero__nav {
position: absolute;
top: 50%;
z-index: var(--hx-z-card);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--hx-radius-round);
background: rgba(255, 255, 255, .8);
color: var(--hx-secondary);
cursor: pointer;
transform: translateY(-50%);
transition: var(--hx-t-ui);
}
.hx-hero__nav:hover,
.hx-hero__nav:focus-visible {
background: var(--hx-inverse);
}
.hx-hero__nav--prev {
left: 15px;
}
.hx-hero__nav--next {
right: 15px;
}
.hx-hero__dots {
position: absolute;
inset: auto 0 18px 0;
z-index: var(--hx-z-card);
display: flex;
gap: 8px;
justify-content: center;
} .hx-hero__dots button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: var(--hx-radius-round);
background: rgba(255, 255, 255, .55);
cursor: pointer;
transition: var(--hx-t-ui);
}
.hx-hero__dots button[aria-selected="true"] {
background: var(--hx-inverse);
} .hx-hero__dots:empty {
display: none;
}
@media (max-width: 1024px) {
.hx-hero,
.hx-hero__track {
min-height: 498px;
height: 498px;
}
}
@media (max-width: 767px) {
.hx-hero,
.hx-hero__track {
min-height: 441px;
height: 441px;
}
.hx-hero__nav {
width: 36px;
height: 36px;
}
} .hx-announce {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 9vh;
background: var(--hx-primary);
}
.hx-announce__text {
display: flex;
align-items: center;
justify-content: center;
column-gap: 0;
margin: 0;
color: var(--hx-inverse);
font-size: 22px;
font-weight: 500;
text-align: center;
}
.hx-announce__icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
fill: currentColor;
}
@media (max-width: 767px) {
.hx-announce {
display: none;
}
} .hx-benefits__head {
max-width: var(--hx-container-boxed);
margin-inline: auto;
padding: var(--hx-gutter); padding-top: 30px;
} .hx-benefits__title {
margin: 0 0 var(--hx-heading-mb);
color: #000; font-size: var(--hx-h2);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
text-align: center;
}
.hx-benefits__body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: var(--hx-container-boxed);
margin-inline: auto;
padding: var(--hx-gutter);
} .hx-benefits__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 20px;
width: 100%; margin-bottom: 2.5em;
color: inherit;
text-decoration: none;
}
.hx-benefit {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
}
.hx-benefit__icon {
display: inline-block;
line-height: 0;
}
.hx-benefit__icon svg {
width: 48px;
height: 48px;
fill: var(--hx-primary);
color: var(--hx-primary);
}
.hx-benefit__icon svg.hx-benefit-icon--outline {
fill: none;
}
.hx-benefit__title {
margin: 0;
font-size: var(--hx-h5);
line-height: var(--hx-leading-heading);
}
@media (max-width: 1024px) {
.hx-benefits__grid {
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
}
@media (max-width: 767px) {
.hx-benefits__head,
.hx-benefits__body {
padding: 0;
}
.hx-benefits__grid {
grid-template-columns: repeat(3, 1fr);
margin-bottom: .1em;
} .hx-benefit:last-child {
grid-column: 2;
}
} .hx-featured {
max-width: var(--hx-container-boxed);
margin-inline: auto; margin-block: -1em;
padding: var(--hx-gutter);
}
.hx-featured__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (min-width: 1025px) {
.hx-featured__grid {
grid-template-columns: repeat(3, 1fr);
}
} .hx-featured .product-wrapper,
.hx-bundles .product-wrapper {
position: relative;
border-radius: 2px;
transition: box-shadow .3s ease-in-out;
}
.hx-featured .product:hover .product-wrapper,
.hx-bundles .product:hover .product-wrapper {
box-shadow: var(--hx-shadow-card-hover);
z-index: 91;
}
.hx-featured .product-image,
.hx-bundles .product-image {
position: relative;
margin-bottom: 8px;
overflow: hidden;
}
.hx-featured .product-image img,
.hx-bundles .product-image img {
width: 100%;
height: auto;
transition: var(--hx-t-image);
}
.hx-featured .product-image .hover-image {
position: absolute;
inset: 0 auto auto 0;
opacity: 0;
visibility: hidden;
}
.hx-featured .product-image:hover .hover-image {
opacity: 1;
visibility: visible;
}
.hx-featured .quickview-button,
.hx-bundles .quickview-button {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
text-align: center;
opacity: 0;
visibility: hidden;
transform: translateY(35px);
transition: all 200ms ease-out;
}
.hx-featured .product:hover .quickview-button,
.hx-bundles .product:hover .quickview-button {
z-index: var(--hx-z-card);
opacity: 1;
visibility: visible;
transform: none;
} .hx-featured .price del,
.hx-bundles .price del {
display: none;
}
.hx-featured .custom-ajax-add-to-cart {
margin-top: 1em;
}
.hx-featured .bos4w-display-options li:nth-child(2) label {
display: none;
}
.hx-featured .ajax-add-to-cart-button {
width: 100%;
padding: 14px 20px;
border: 2px solid transparent;
border-radius: var(--hx-radius-plan);
background: var(--hx-btn-cart-bg);
color: var(--hx-btn-cart-text);
text-align: center;
cursor: pointer;
} .hx-bundles {
max-width: var(--hx-container-boxed);
margin-inline: auto;
padding: var(--hx-gutter);
}
.hx-bundles__row {
display: flex;
flex-direction: row;
gap: 0;
align-items: center;
}
.hx-bundles__col {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.hx-bundles__col--product {
width: 25%;
}
.hx-bundles__col--chart {
width: 50%;
align-self: center;
}
.hx-bundles__chart {
margin: 0;
}
.hx-bundles__chart-img {
display: block;
width: 100%;
height: auto;
} .hx-bundles .product-buttons {
display: none;
} .hx-feature {
display: flex;
flex-direction: row;
gap: 0;
max-width: var(--hx-container-boxed);
margin-inline: auto;
background: var(--hx-surface-grey);
}
.hx-feature--padded {
padding: 1em 0;
}
.hx-feature--text-first {
flex-direction: row-reverse;
}
.hx-feature__media {
width: 50%;
}
.hx-feature__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--hx-radius-media);
}
.hx-feature__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 50%;
margin: 2em 0;
padding: 0 1em;
border-radius: 35px;
background: var(--hx-bg);
}
.hx-feature__title {
align-self: center;
margin: 0 0 var(--hx-heading-mb);
text-align: center;
}
.hx-feature__body {
padding: 0 10px;
text-align: center;
}
.hx-feature__body p {
margin: 0;
} @media (min-width: 1025px) {
.hx-feature--below-desktop { display: none; }
}
@media (max-width: 1024px) {
.hx-feature--desktop-only { display: none; }
} @media (min-width: 768px) {
.hx-feature--overlap-right .hx-feature__card {
z-index: 10;
left: 50%;
transform: translateX(-105%);
}
.hx-feature--overlap-left .hx-feature__card {
z-index: 10;
right: 50%;
transform: translateX(105%);
}
}
@media (max-width: 767px) {
.hx-feature,
.hx-feature--text-first {
flex-direction: column;
padding: 0;
}
.hx-feature__media,
.hx-feature__card {
width: 100%;
}
} #page-reviews {
width: 100vw;
margin-top: 0; margin-bottom: -35px;
margin-inline: calc(50% - 50vw);
padding: 6% 0;
background: var(--hx-bg-alt);
}
.hx-reviews__inner {
display: flex;
flex-wrap: wrap;
gap: 20px;
max-width: var(--hx-container-max);
margin-inline: auto;
padding-inline: var(--hx-gutter);
}
.hx-reviews__aside,
.hx-reviews__list {
flex: 1 1 100%;
}
@media (min-width: 768px) {
.hx-reviews__aside {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.hx-reviews__list {
flex: 0 0 calc(66.6667% - 20px);
max-width: calc(66.6667% - 20px);
}
}
.hx-reviews__aside .hx-heading__title {
width: 100%;
max-width: 100%;
margin: 0 0 var(--hx-heading-mb);
font-size: var(--hx-h4);
}
.hx-reviews__intro p:last-child {
margin-bottom: 0;
}
.hx-testimonials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1024px) {
.hx-testimonials {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.hx-testimonials {
grid-template-columns: 1fr;
}
}
#page-reviews .hx-testimonial {
display: flex;
flex-direction: column;
gap: 15px;
}
#page-reviews .hx-testimonial__quote {
margin: 0;
padding: 20px;
background: var(--hx-bg);
color: var(--hx-text);
font-size: var(--hx-text-small);
line-height: var(--hx-leading);
quotes: none;
}
#page-reviews .hx-testimonial__meta {
display: flex;
align-items: center;
gap: 15px;
}
#page-reviews .hx-testimonial__avatar {
flex: 0 0 auto;
width: 80px;
height: 80px;
border-radius: var(--hx-radius-round);
object-fit: cover;
}
#page-reviews .hx-testimonial__person {
display: flex;
flex-direction: column;
gap: 2px;
}
#page-reviews .hx-testimonial__name {
color: var(--hx-heading);
font-style: normal;
font-weight: var(--hx-weight-heading);
}
#page-reviews .hx-testimonial__role {
font-size: var(--hx-text-xs);
} #page-reviews .hx-testimonial__rating {
position: relative;
display: block;
overflow: hidden;
width: 5.4em;
height: 1em;
color: var(--hx-accent-gold);
font-size: var(--hx-text-xs);
line-height: 1;
}
#page-reviews .hx-testimonial__rating::before,
#page-reviews .hx-testimonial__rating-fill::before {
content: "\2605\2605\2605\2605\2605";
position: absolute;
top: 0;
left: 0;
letter-spacing: .1em;
}
#page-reviews .hx-testimonial__rating::before {
opacity: .25;
}
#page-reviews .hx-testimonial__rating-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
height: 1em;
white-space: nowrap;
} .hx-trust__head {
max-width: var(--hx-container-boxed);
margin-inline: auto;
padding: var(--hx-gutter);
}
.hx-trust__title {
margin: 0 0 var(--hx-heading-mb); font-weight: 700;
text-align: center;
}
.hx-badges {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0;
max-width: var(--hx-container-boxed);
margin-inline: auto;
}
.hx-badge {
display: flex;
flex-direction: column;
padding: var(--hx-gutter);
}
@media (min-width: 768px) {
.hx-badge {
width: 30%;
}
} .hx-badge:nth-child(1) {
border-right: 1px solid #000;
}
.hx-badge:nth-child(3) {
border-left: 1px solid #000;
}
.hx-badge__img {
margin-inline: auto;
margin-bottom: 15px;
}
.hx-badge__image {
display: block;
width: 100%;
height: auto;
transition-duration: .3s;
}
.hx-badge__title {
margin: 0 0 var(--hx-heading-mb);
font-size: var(--hx-text-base);
font-weight: 700;
}
.hx-badge__desc {
margin: 0;
} @media (prefers-reduced-motion: reduce) {
.hx-hero {
animation: none;
}
.hx-hero__track {
scroll-behavior: auto;
}
}  .hx-layout--blog {
gap: 30px 20px;
}
@media (min-width: 768px) {
.hx-layout--blog {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}
@media (min-width: 1025px) {
.hx-layout--blog {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
}  .articles-list {
display: grid;
grid-template-columns: 1fr;
gap: 3rem 20px;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.articles-list {
grid-template-columns: repeat(3, 1fr);
}
} .blog-post-loop .entry-thumbnail-wrapper,
.related-post .entry-thumbnail-wrapper {
position: relative;
margin-bottom: 1rem;
}
.blog-post-loop .entry-content-wrapper,
.related-post .entry-content-wrapper {
position: relative;
} .entry-date {
position: absolute;
top: 1em;
left: 1em;
z-index: var(--hx-z-card);
display: flex;
flex-direction: column;
justify-content: center;
width: 50px;
height: 55px;
padding: 5px 0;
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
line-height: 1;
text-align: center;
text-transform: uppercase;
color: var(--hx-inverse);
background-color: var(--hx-primary);
border-radius: var(--hx-radius);
box-shadow: var(--hx-shadow-ring);
}
.entry-date .date-day {
font-size: var(--hx-h3);
margin-bottom: 5px;
} .post:not(.has-post-thumbnail) .entry-date {
position: static;
} .post-thumbnail {
position: relative;
overflow: hidden;
}
.post-thumbnail img {
display: block;
width: 100%;
height: auto;
}
.post-thumbnail a img {
transition: transform var(--hx-t-image) var(--hx-ease-overshoot);
}
.entry-post:hover .post-thumbnail a img {
transform: scale(1.1);
}
.post-thumbnail a::after {
content: "";
position: absolute;
inset: 0;
transition: background-color var(--hx-t-image) var(--hx-ease-overshoot);
}
.entry-post:hover .post-thumbnail a::after {
background-color: rgba(0, 0, 0, .3);
} .blog-post-loop .entry-header,
.related-post .entry-header {
margin-bottom: 1rem;
}
.blog-post-loop .entry-title,
.related-post .entry-title {
margin-bottom: var(--hx-heading-mb);
overflow-wrap: break-word;
hyphens: auto;
}
.blog-post-loop .entry-title:last-child,
.related-post .entry-title:last-child {
margin-bottom: 0;
} .blog-grid .entry-header .entry-title {
font-size: var(--hx-h4);
}
.blog-post-loop .entry-content p:last-child {
margin-bottom: 0;
} .entry-footer {
margin-top: 1.2rem;
}
.read-more-btn {
margin: 0;
}
.read-more-btn,
.read-more-btn .more-link {
display: inline-block;
font-weight: var(--hx-weight-heading);
}
.read-more-btn .more-link {
color: var(--hx-primary);
} .blog-post-loop .post-share,
.related-post .post-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.post-meta-label {
font-size: var(--hx-text-small);
}
.pressmart-social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
} .pressmart-social .social-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.pressmart-social a,
.pressmart-social button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: none;
border: 0;
color: inherit;
cursor: pointer;
transition: color var(--hx-t-ui), background-color var(--hx-t-ui), border-color var(--hx-t-ui);
}
.pressmart-social.icons-colour a:hover,
.pressmart-social.icons-colour button:hover {
color: var(--hx-primary);
}
.pressmart-social.icons-shape-circle a,
.pressmart-social.icons-shape-circle button {
border-radius: var(--hx-radius-round);
}
.pressmart-social.icons-bordered a,
.pressmart-social.icons-bordered button {
width: 36px;
height: 36px;
border: 1px solid var(--hx-border);
}
.pressmart-social.icons-bordered a:hover,
.pressmart-social.icons-bordered button:hover {
color: var(--hx-inverse);
background-color: var(--hx-primary);
border-color: var(--hx-primary);
}
.pressmart-social.icons-size-small a,
.pressmart-social.icons-size-small button {
width: 30px;
height: 30px;
font-size: var(--hx-text-small);
}
.pressmart-social.icons-theme-colour a,
.pressmart-social.icons-theme-colour button {
color: var(--hx-inverse);
background-color: var(--hx-primary);
} .pressmart-pagination {
padding: 1em .5em;
margin-top: 1em;
margin-bottom: 2em;
text-align: center;
}
.pressmart-pagination ul {
margin: 0;
padding: 0;
list-style: none;
}
.pressmart-pagination li {
display: inline-block;
}
.pressmart-pagination li .page-numbers {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0 1px;
border-radius: var(--hx-radius-round);
font-weight: var(--hx-weight-heading);
}
.pressmart-pagination .page-numbers.current {
color: var(--hx-inverse);
background-color: var(--hx-primary);
}
.pressmart-pagination li .next,
.pressmart-pagination li .prev {
width: auto;
padding: 0 15px;
text-transform: uppercase;
color: var(--hx-primary);
} .single-post-page {
margin-bottom: 50px;
}
.single-post-page .entry-header {
text-align: center;
margin-bottom: 2rem;
} .single-post-page .entry-title {
font-size: 28px;
}
.single-post-page .entry-thumbnail-wrapper {
position: relative;
}
.single-post-page .entry-content-wrapper {
border: none;
padding-top: 1rem;
text-align: left;
}
.single-post-page .post-thumbnail img {
width: 100%;
height: auto;
} .tag-social-share {
padding: 1rem 0;
margin-bottom: 3rem;
}
@media (min-width: 768px) {
.tag-social-share {
display: flex;
flex-direction: row;
align-items: center;
}
.tag-social-share .single-tags,
.tag-social-share .pressmart-social {
flex-basis: 100%;
align-items: center;
}
.tag-social-share .pressmart-social {
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.tag-social-share {
text-align: center;
margin-bottom: 2em;
}
.tag-social-share .single-tags {
margin-bottom: 2em;
}
.tag-social-share .pressmart-social {
justify-content: center;
}
}
.tag-social-share .single-tags a {
display: inline-block;
padding: 7px 12px;
line-height: 1;
margin-right: 5px;
margin-bottom: 5px;
color: var(--hx-primary);
background-color: var(--hx-bg-alt);
border-radius: var(--hx-radius);
transition: color var(--hx-t-ui), background-color var(--hx-t-ui);
}
.tag-social-share .single-tags a:hover,
.tag-social-share .single-tags a:focus {
color: var(--hx-inverse);
background-color: var(--hx-primary);
} .post-navigation {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em 0;
margin-bottom: 4em;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
flex: 0 1 50%;
max-width: 50%;
}
.post-navigation .nav-next {
text-align: right;
}
.nav-previous a,
.nav-next a {
display: block;
position: relative;
overflow-wrap: break-word;
hyphens: auto;
}
.nav-previous a {
padding-left: 3em;
padding-right: 2em;
}
.nav-next a {
padding-right: 3em;
padding-left: 2em;
}
.nav-subtitle {
display: block;
color: #999999;
font-size: var(--hx-h5);
margin-bottom: .2em;
}
.nav-title {
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
} .nav-arrow {
position: absolute;
top: 15px;
opacity: .2;
transition: opacity var(--hx-t-ui);
}
.nav-arrow .hx-icon {
width: 36px;
height: 36px;
}
.nav-previous .nav-arrow {
left: -8px;
}
.nav-next .nav-arrow {
right: -8px;
}
.nav-archive a {
display: inline-flex;
opacity: .2;
transition: opacity var(--hx-t-ui);
}
.nav-archive .hx-icon {
width: 28px;
height: 28px;
}
.nav-previous a:hover .nav-arrow,
.nav-next a:hover .nav-arrow,
.nav-previous a:focus-visible .nav-arrow,
.nav-next a:focus-visible .nav-arrow {
opacity: 1;
}
.nav-archive:hover a,
.nav-archive a:focus-visible {
opacity: 1;
}
@media (max-width: 767px) { .post-navigation .nav-title {
display: none;
}
.nav-arrow {
top: 0;
}
.nav-arrow .hx-icon {
width: 30px;
height: 30px;
}
.nav-subtitle {
font-weight: var(--hx-weight-heading);
}
} .related.posts {
position: relative;
margin-bottom: 4em;
}
.related.posts > h2 {
position: relative;
font-size: var(--hx-h4);
padding-bottom: .5em;
margin-bottom: 1em;
}
.related.posts > h2::after {
content: none;
position: absolute;
left: 0;
bottom: -1px;
width: 70px;
height: 2px;
background-color: var(--hx-primary);
}
.related.posts .entry-title {
font-size: 21px;
}
@media (max-width: 1024px) {
.related.posts .entry-title {
font-size: 18px;
}
}
.related.posts .related-post {
margin-bottom: 0;
} .hx-related__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc(50% - 15px);
gap: 30px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hx-related__track::-webkit-scrollbar {
display: none;
}
.hx-related__track > * {
scroll-snap-align: start;
}
@media (max-width: 575px) {
.hx-related__track {
grid-auto-columns: 100%;
}
} .hx-related__track:not(.is-overflowing) {
overflow-x: visible;
}
.hx-related__nav {
display: none;
gap: 8px;
justify-content: flex-end;
margin-top: 1em;
}
.hx-related:has(.hx-related__track.is-overflowing) .hx-related__nav {
display: flex;
} .comments-area {
margin-bottom: 4em;
}
.comments-area > h2,
.comment-respond > h2 {
position: relative;
font-size: var(--hx-h4);
padding-bottom: .5em;
margin-bottom: 1em;
}
.comments-area > h2::after,
.comment-respond > h2::after {
content: none;
position: absolute;
left: 0;
bottom: -1px;
width: 70px;
height: 2px;
background-color: var(--hx-primary);
}
.comment-list {
margin: 0 0 2em;
padding: 0;
list-style: none;
}
.comment-list .children {
margin-left: 1.5rem;
padding: 0;
list-style: none;
}
@media (max-width: 767px) {
.comment-meta {
padding: 1em;
text-align: left;
}
} .widget-area .widget:not(:last-child) {
margin-bottom: 2rem;
}
.widget-title {
position: relative;
font-size: 18px;
margin-bottom: 20px;
}
.widget-title a {
color: inherit;
} .widget-title__toggle {
all: unset;
display: block;
width: 100%;
font: inherit;
color: inherit;
cursor: pointer;
}
.widget.closed > *:not(.widget-title) {
display: none;
}
.pressmart-widget-recent-posts .widget-post-item {
display: flex;
flex-direction: row;
align-items: stretch;
}
.pressmart-recent-posts .widget-post-item:not(:last-child) {
margin-bottom: 1rem;
}
.pressmart-widget-recent-posts .widget-post-thumbnail {
flex: 0 0 auto;
margin-right: 15px;
overflow: hidden;
}
.pressmart-widget-recent-posts .widget-post-thumbnail img {
display: block;
max-width: 70px;
height: auto;
}
.pressmart-widget-recent-posts .widget-post-body {
flex: 1 1 auto;
}
.pressmart-recent-posts .post-title {
margin-bottom: 5px;
line-height: 1.5;
}
.pressmart-recent-posts .post-date {
font-size: var(--hx-text-small);
} .hx-archive-description {
margin-bottom: 2rem;
} .hx-guide-hub {
--hx-guide-ink: #14212d;
--hx-guide-blue: #1d4497;
--hx-guide-cream: #f3efe6;
--hx-guide-line: #dfe4e8;
padding-block: 0;
color: var(--hx-guide-ink);
}
.hx-guide-hero {
padding: clamp(66px, 8vw, 118px) 0;
background: linear-gradient(135deg, #f5f2eb 0%, #fbfbf8 58%, #eef3fb 100%);
}
.hx-guide-hero .hx-container {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
align-items: center;
gap: clamp(44px, 6vw, 88px);
}
.hx-guide-eyebrow {
display: block;
margin-bottom: 12px;
color: var(--hx-guide-blue);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.hx-guide-hero h1 {
max-width: 820px;
margin: 0 0 22px;
font-size: clamp(2.22rem, 3.58vw, 3.61rem);
line-height: .99;
letter-spacing: -.055em;
}
.hx-guide-hero__lede {
max-width: 720px;
margin: 0;
color: #4c5964;
font-size: clamp(1.05rem, 1.47vw, 1.2rem);
line-height: 1.75;
}
.hx-guide-hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 26px;
margin-top: 32px;
}
.hx-guide-hero__media {
position: relative;
margin: 0;
isolation: isolate;
}
.hx-guide-hero__media::before {
position: absolute;
z-index: -1;
top: -18px;
right: -18px;
width: 54%;
height: 54%;
border-radius: 28px;
background: var(--hx-guide-blue);
content: "";
}
.hx-guide-hero__media img {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
border-radius: 28px;
box-shadow: 0 30px 70px rgba(20, 33, 45, .16);
object-fit: cover;
}
.hx-guide-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 13px 24px;
border-radius: 999px;
background: var(--hx-guide-blue);
color: #fff;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, background-color .2s ease;
}
.hx-guide-button:hover,
.hx-guide-button:focus-visible {
background: var(--hx-guide-ink);
color: #fff;
transform: translateY(-2px);
}
.hx-guide-text-link {
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
color: var(--hx-guide-blue);
font-weight: 700;
text-decoration: none;
}
.hx-guide-ratio,
.hx-recipe-hero__ideas {
padding: clamp(28px, 4vw, 44px);
border: 1px solid rgba(29, 68, 151, .15);
border-radius: 26px;
background: rgba(255, 255, 255, .85);
box-shadow: 0 24px 65px rgba(22, 39, 57, .1);
}
.hx-guide-ratio > span,
.hx-recipe-hero__ideas > span {
display: block;
margin-bottom: 24px;
color: var(--hx-guide-blue);
font-size: .7rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.hx-guide-ratio strong {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
padding: 10px 0;
font-size: clamp(1.78rem, 2.92vw, 2.44rem);
letter-spacing: -.04em;
}
.hx-guide-ratio strong small {
color: #65717b;
font-size: .82rem;
font-weight: 600;
letter-spacing: 0;
}
.hx-guide-ratio > i {
display: block;
color: var(--hx-guide-blue);
font-size: 1.41rem;
font-style: normal;
}
.hx-guide-ratio p {
margin: 20px 0 0;
padding-top: 20px;
border-top: 1px solid var(--hx-guide-line);
color: #65717b;
font-size: .88rem;
line-height: 1.65;
}
.hx-guide-hero__media .hx-guide-ratio {
position: absolute;
bottom: -28px;
left: -28px;
display: grid;
grid-template-columns: auto auto auto;
align-items: center;
gap: 8px 12px;
width: min(390px, calc(100% - 28px));
padding: 20px 24px;
border: 0;
border-radius: 20px;
background: #fff;
box-shadow: 0 20px 45px rgba(20, 33, 45, .18);
}
.hx-guide-hero__media .hx-guide-ratio > span {
grid-column: 1 / -1;
margin: 0 0 2px;
}
.hx-guide-hero__media .hx-guide-ratio strong {
display: block;
padding: 0;
font-size: 1.29rem;
white-space: nowrap;
}
.hx-guide-hero__media .hx-guide-ratio strong small {
display: block;
margin-top: 2px;
font-size: .67rem;
}
.hx-guide-hero__media .hx-guide-ratio > i {
font-size: 1.14rem;
}
.hx-guide-methods,
.hx-recipe-collection {
padding: clamp(70px, 9vw, 126px) 0;
scroll-margin-top: 110px;
}
.hx-guide-section-head {
max-width: 760px;
margin-bottom: 40px;
}
.hx-guide-section-head h2,
.hx-guide-how h2,
.hx-recipe-notes h2 {
margin: 0 0 14px;
font-size: clamp(1.78rem, 2.96vw, 2.8rem);
line-height: 1.08;
letter-spacing: -.04em;
}
.hx-guide-section-head p,
.hx-guide-how__intro > p {
margin: 0;
color: #5b6771;
font-size: 1rem;
line-height: 1.72;
}
.hx-guide-method-picker {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
align-items: center;
gap: clamp(42px, 8vw, 110px);
padding: clamp(34px, 5vw, 64px);
border: 1px solid var(--hx-guide-line);
border-radius: 28px;
background: #f7f8fb;
}
.hx-guide-method-picker__copy h2 {
margin: 0 0 14px;
font-size: clamp(1.78rem, 2.91vw, 2.75rem);
line-height: 1.08;
letter-spacing: -.04em;
}
.hx-guide-method-picker__copy p {
max-width: 580px;
margin: 0;
color: #5e6972;
line-height: 1.72;
}
.hx-guide-method-picker__buttons {
display: grid;
gap: 12px;
}
.hx-guide-method-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 62px;
padding: 15px 20px 15px 24px;
border: 1px solid #d5dce5;
border-radius: 999px;
background: #fff;
color: var(--hx-guide-ink);
font-size: 1rem;
font-weight: 750;
text-decoration: none;
transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.hx-guide-method-button i {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #eef2fa;
color: var(--hx-guide-blue);
font-style: normal;
transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.hx-guide-method-button:hover,
.hx-guide-method-button:focus-visible {
border-color: var(--hx-guide-blue);
background: var(--hx-guide-blue);
color: #fff;
transform: translateX(4px);
}
.hx-guide-method-button:hover i,
.hx-guide-method-button:focus-visible i {
background: #fff;
color: var(--hx-guide-blue);
transform: translateX(2px);
}
.hx-guide-section-head--center {
margin-right: auto;
margin-left: auto;
text-align: center;
}
.hx-guide-section-head--center p {
margin-right: auto;
margin-left: auto;
}
.hx-guide-method-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 2.5vw, 32px);
}
.hx-guide-method-card {
position: relative;
display: flex;
min-height: 390px;
padding: clamp(26px, 3vw, 38px);
overflow: hidden;
border: 1px solid var(--hx-guide-line);
border-radius: 26px;
background: #fff;
color: var(--hx-guide-ink);
flex-direction: column;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-guide-method-card::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 6px;
background: var(--hx-guide-blue);
content: "";
}
.hx-guide-method-card:nth-child(2)::before { background: #df8b45; }
.hx-guide-method-card:nth-child(3)::before { background: #6a8b73; }
.hx-guide-method-card:hover,
.hx-guide-method-card:focus-visible {
border-color: rgba(29, 68, 151, .45);
box-shadow: 0 22px 54px rgba(20, 33, 45, .12);
color: var(--hx-guide-ink);
transform: translateY(-6px);
}
.hx-guide-method-card:focus-visible {
outline: 3px solid rgba(29, 68, 151, .25);
outline-offset: 4px;
}
.hx-guide-method-card__icon {
display: grid;
place-items: center;
width: 76px;
height: 76px;
margin-bottom: 26px;
border-radius: 22px;
background: #eef2fa;
color: var(--hx-guide-blue);
}
.hx-guide-method-card:nth-child(2) .hx-guide-method-card__icon { background: #fcf0e6; color: #a95517; }
.hx-guide-method-card:nth-child(3) .hx-guide-method-card__icon { background: #edf3ef; color: #446d50; }
.hx-guide-method-card__icon svg {
width: 48px;
height: 48px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.hx-guide-method-card__eyebrow {
margin-bottom: 9px;
color: var(--hx-guide-blue);
font-size: .7rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.hx-guide-method-card:nth-child(2) .hx-guide-method-card__eyebrow { color: #95501d; }
.hx-guide-method-card:nth-child(3) .hx-guide-method-card__eyebrow { color: #446d50; }
.hx-guide-method-card h3 {
margin: 0 0 14px;
font-size: clamp(1.26rem, 1.65vw, 1.54rem);
line-height: 1.24;
letter-spacing: -.025em;
}
.hx-guide-method-card p {
margin: 0 0 26px;
color: #5d6871;
font-size: .92rem;
line-height: 1.65;
}
.hx-guide-method-card__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--hx-guide-line);
color: var(--hx-guide-blue);
font-size: .86rem;
font-weight: 800;
}
.hx-guide-method-card__link i {
font-size: 1.22rem;
font-style: normal;
transition: transform .2s ease;
}
.hx-guide-method-card:hover .hx-guide-method-card__link i,
.hx-guide-method-card:focus-visible .hx-guide-method-card__link i {
transform: translateX(4px);
}
.hx-guide-how {
padding: clamp(70px, 9vw, 126px) 0;
background: var(--hx-guide-cream);
}
.hx-guide-how .hx-container {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(50px, 9vw, 130px);
}
.hx-guide-steps { margin: 0; padding: 0; list-style: none; }
.hx-guide-steps li { padding: 28px 0; border-top: 1px solid #d8d2c7; }
.hx-guide-steps li:last-child { border-bottom: 1px solid #d8d2c7; }
.hx-guide-steps h3 { margin: 2px 0 7px; font-size: 1.14rem; }
.hx-guide-steps p { margin: 0; color: #626b70; font-size: .92rem; line-height: 1.7; }
.hx-guide-fixes { padding: clamp(70px, 9vw, 126px) 0; }
.hx-guide-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid article { padding: 32px 34px 34px 0; border-bottom: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid article:nth-child(even) { padding-right: 0; padding-left: 34px; border-left: 1px solid var(--hx-guide-line); }
.hx-guide-faq-grid h3 { margin: 0 0 12px; font-size: 1.18rem; }
.hx-guide-faq-grid p { margin: 0; color: #5d6871; line-height: 1.75; }
.hx-guide-cta {
position: relative;
padding: clamp(70px, 8vw, 108px) 0;
overflow: hidden;
background: #111d27;
color: #fff;
}
.hx-guide-cta::before {
position: absolute;
top: 0;
right: 0;
width: min(42vw, 620px);
height: 100%;
background: radial-gradient(circle at 70% 42%, rgba(72, 110, 188, .3), transparent 58%);
content: "";
pointer-events: none;
}
.hx-guide-cta .hx-container {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr);
align-items: end;
gap: clamp(48px, 8vw, 120px);
}
.hx-guide-cta .hx-guide-eyebrow { color: #b9c9ee; }
.hx-guide-cta h2 {
max-width: 760px;
margin: 0;
color: #fff;
font-size: clamp(1.97rem, 3.25vw, 3.25rem);
line-height: 1.02;
letter-spacing: -.05em;
}
.hx-guide-cta__copy p {
max-width: 600px;
margin: 24px 0 0;
color: #bec7ce;
font-size: 1rem;
line-height: 1.7;
}
.hx-guide-cta__action {
position: relative;
display: flex;
align-items: stretch;
flex-direction: column;
}
.hx-guide-cta__ratio {
display: block;
margin-bottom: -12px;
color: rgba(255, 255, 255, .1);
font-size: clamp(3.72rem, 5.74vw, 4.88rem);
font-weight: 800;
line-height: .8;
letter-spacing: -.08em;
text-align: right;
}
.hx-guide-cta__ratio small {
margin-left: 5px;
font-size: .27em;
letter-spacing: 0;
}
.hx-guide-button--light {
position: relative;
justify-content: space-between;
width: 100%;
min-height: 58px;
padding-inline: 26px;
background: #fff;
color: var(--hx-guide-ink);
}
.hx-guide-button--light:hover,
.hx-guide-button--light:focus-visible {
background: #dfe7f8;
color: var(--hx-guide-ink);
}
.hx-guide-cta__action > small {
margin-top: 13px;
color: #99a5ae;
font-size: .72rem;
letter-spacing: .04em;
text-align: center;
} .hx-recipe-hero__ideas ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hx-recipe-hero__ideas li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--hx-guide-line); }
.hx-recipe-hero__ideas li:last-child { border-bottom: 1px solid var(--hx-guide-line); }
.hx-recipe-hero__ideas strong { color: var(--hx-guide-ink); }
.hx-recipe-hero__ideas small { color: #65717b; line-height: 1.5; }
.hx-recipe-collection .hx-guide-section-head { margin-inline: auto; text-align: center; }
.hx-recipe-collection .hx-recipes-archive { width: 100%; margin: 42px 0 10px; }
.hx-recipe-notes { padding: clamp(70px, 9vw, 126px) 0; background: var(--hx-guide-cream); }
.hx-recipe-notes .hx-container { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(50px, 8vw, 110px); }
.hx-recipe-notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #d7d1c7; }
.hx-recipe-notes__grid article { padding: 28px 22px; border-left: 1px solid #d7d1c7; }
.hx-recipe-notes__grid article:first-child { border-left: 0; padding-left: 0; }
.hx-recipe-notes__grid article:last-child { padding-right: 0; }
.hx-recipe-notes__grid span { display: block; margin-bottom: 50px; color: var(--hx-guide-blue); font-size: .72rem; font-weight: 800; }
.hx-recipe-notes__grid h3 { margin: 0 0 12px; font-size: 1.1rem; }
.hx-recipe-notes__grid p { margin: 0; color: #606970; font-size: .86rem; line-height: 1.72; }
@media (max-width: 900px) {
.hx-guide-hero .hx-container,
.hx-guide-how .hx-container,
.hx-recipe-notes .hx-container,
.hx-guide-method-picker { grid-template-columns: 1fr; }
.hx-guide-ratio,
.hx-recipe-hero__ideas { max-width: 620px; }
.hx-guide-hero__media { max-width: 720px; }
.hx-guide-method-grid { grid-template-columns: 1fr; }
.hx-guide-method-card { min-height: 0; }
.hx-guide-cta .hx-container { grid-template-columns: 1fr; gap: 38px; }
.hx-guide-cta__action { max-width: 440px; }
.hx-recipe-notes__grid { max-width: 760px; }
}
@media (max-width: 680px) {
.hx-guide-hero { padding: 52px 0; }
.hx-guide-hero .hx-container { gap: 36px; }
.hx-guide-hero h1 { font-size: clamp(2.09rem, 9.97vw, 2.88rem); }
.hx-guide-hero__media::before { top: -10px; right: -10px; border-radius: 20px; }
.hx-guide-hero__media img { border-radius: 20px; }
.hx-guide-hero__media .hx-guide-ratio {
position: relative;
bottom: auto;
left: auto;
width: calc(100% - 24px);
margin: -34px auto 0;
}
.hx-guide-hero__actions { align-items: stretch; flex-direction: column; }
.hx-guide-button { width: 100%; }
.hx-guide-text-link { align-self: flex-start; }
.hx-guide-method-picker { gap: 30px; padding: 28px 20px; border-radius: 20px; }
.hx-guide-method-button { min-height: 58px; }
.hx-guide-faq-grid { grid-template-columns: 1fr; }
.hx-guide-faq-grid article,
.hx-guide-faq-grid article:nth-child(even) { padding: 28px 0; border-left: 0; }
.hx-guide-cta__action { max-width: none; }
.hx-guide-button--light { width: 100%; }
.hx-recipe-notes__grid { grid-template-columns: 1fr; }
.hx-recipe-notes__grid article,
.hx-recipe-notes__grid article:first-child,
.hx-recipe-notes__grid article:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid #d7d1c7; }
.hx-recipe-notes__grid span { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.hx-guide-method-card,
.hx-guide-method-card__link i { transition: none; }
}
@media print {
.hx-guide-hero,
.hx-guide-how,
.hx-guide-fixes,
.hx-recipe-notes { padding-block: 28px; background: #fff; }
.hx-guide-hero .hx-container,
.hx-guide-how .hx-container,
.hx-recipe-notes .hx-container { display: block; }
.hx-guide-hero__actions,
.hx-guide-cta { display: none; }
} .hx-404__code {
display: block;
} body.single-post {
--hx-story-ink: #101820;
--hx-story-muted: #66707a;
--hx-story-wash: #f4f6fb;
}
.hx-reading-progress {
position: fixed;
z-index: calc(var(--hx-z-header-sticky) + 1);
top: var(--hx-admin-bar, 0px);
left: 0;
width: 100%;
height: 3px;
pointer-events: none;
}
.hx-reading-progress span {
display: block;
width: 100%;
height: 100%;
background: var(--hx-primary);
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
.hx-single-story {
padding-top: 0;
padding-bottom: 80px;
overflow: clip;
}
.hx-single-story > .hx-container {
width: 100%;
max-width: 1380px;
padding-inline: clamp(18px, 4vw, 64px);
}
.single-post-page {
margin-bottom: 0;
}
.hx-story-opening {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
align-items: stretch;
gap: clamp(36px, 5vw, 76px);
max-width: 1240px;
margin: 0 auto clamp(28px, 4vw, 46px);
padding-top: clamp(28px, 4vw, 54px);
}
.single-post-page .hx-story-header {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 0;
text-align: left;
}
.hx-story-header__crumbs {
margin-bottom: clamp(28px, 4vw, 48px);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
color: var(--hx-story-muted);
}
.hx-story-header__crumbs .hx-breadcrumb {
font-size: inherit;
}
.hx-story-header__crumbs a {
color: var(--hx-story-muted);
}
.hx-story-header__category {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
font-size: 12px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--hx-primary);
}
.hx-story-header__category::before {
content: none;
}
.single-post-page .hx-story-header .entry-title {
max-width: 720px;
margin: 0;
color: var(--hx-story-ink);
font-size: clamp(33px, 3.26vw, 45px);
font-weight: 650;
letter-spacing: -.04em;
line-height: 1.06;
text-wrap: balance;
}
.hx-story-header__dek {
max-width: 660px;
margin: 22px 0 0;
color: var(--hx-story-muted);
font-size: clamp(18px, 1.56vw, 22px);
line-height: 1.55;
text-wrap: balance;
}
.hx-story-meta {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 9px;
margin-top: 28px;
font-size: 13px;
line-height: 1.4;
color: var(--hx-story-muted);
}
.hx-story-meta__author {
font-weight: 700;
color: var(--hx-story-ink);
}
.hx-story-opening > .entry-thumbnail-wrapper {
position: relative;
min-height: 390px;
margin: 0;
}
.hx-story-opening > .entry-thumbnail-wrapper::after {
content: "";
position: absolute;
z-index: -1;
right: -18px;
bottom: -18px;
width: 72%;
height: 54%;
background: var(--hx-story-wash);
}
.hx-story-opening > .entry-thumbnail-wrapper:not(:has(.post-thumbnail)) {
display: none;
}
.hx-story-opening:not(:has(.post-thumbnail)) {
grid-template-columns: minmax(0, 820px);
}
.single-post-page .entry-thumbnail-wrapper .post-thumbnail {
height: 100%;
overflow: hidden;
background: var(--hx-story-wash);
border-radius: 22px;
box-shadow: 0 18px 45px rgba(16, 24, 32, .11);
}
.single-post-page .entry-thumbnail-wrapper .post-thumbnail img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.hx-story-utility {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
gap: 0;
max-width: 1220px;
margin: 0 auto clamp(44px, 6vw, 72px);
border: 1px solid #dfe4ee;
border-radius: 18px;
background: #fff;
box-shadow: 0 14px 38px rgba(16, 24, 32, .06);
}
.hx-story-answer,
.hx-ai-summary {
padding: clamp(24px, 3vw, 34px);
}
.hx-story-answer {
display: flex;
flex-direction: column;
justify-content: center;
}
.hx-ai-summary {
border-left: 1px solid #dfe4ee;
background: var(--hx-story-wash);
border-radius: 0 18px 18px 0;
}
.hx-story-utility__eyebrow {
margin: 0 0 12px;
color: var(--hx-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: .13em;
line-height: 1.3;
text-transform: uppercase;
}
.hx-story-answer > p:last-child {
margin: 0;
color: var(--hx-story-ink);
font-size: clamp(17px, 1.32vw, 20px);
font-weight: 520;
line-height: 1.65;
}
.hx-ai-summary__links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.hx-ai-summary__link {
display: grid;
grid-template-columns: 25px minmax(0, 1fr) auto;
align-items: center;
gap: 7px;
min-height: 42px;
padding: 7px 10px;
border: 1px solid #d7deea;
border-radius: 10px;
background: #fff;
color: var(--hx-story-ink);
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-ai-summary__link:hover,
.hx-ai-summary__link:focus-visible {
border-color: var(--hx-primary);
box-shadow: 0 7px 16px rgba(16, 24, 32, .08);
color: var(--hx-primary);
transform: translateY(-1px);
}
.hx-ai-summary__mark {
display: grid;
place-items: center;
width: 25px;
height: 25px;
border-radius: 7px;
background: #edf1f8;
color: var(--hx-primary);
font-size: 11px;
font-weight: 800;
}
.hx-ai-summary__arrow { color: #8a94a0; }
.hx-ai-summary__note {
margin: 11px 0 0;
color: var(--hx-story-muted);
font-size: 10px;
line-height: 1.4;
}
.hx-story-layout {
display: grid;
grid-template-columns: minmax(0, 790px) 280px;
justify-content: center;
align-items: start;
gap: clamp(50px, 7vw, 110px);
max-width: 1220px;
margin-inline: auto;
}
.hx-story-layout__article {
min-width: 0;
}
.single-post-page .entry-content-wrapper {
padding-top: 0;
}
.single-post-page .hx-prose {
color: #39434d;
font-size: clamp(17px, 1.2vw, 18px);
line-height: 1.85;
}
.single-post-page .hx-prose > p:first-child {
color: var(--hx-story-ink);
font-size: clamp(20px, 1.56vw, 22px);
line-height: 1.65;
}
.single-post-page .hx-prose h2 {
margin-top: 2.3em;
font-size: clamp(26px, 2.55vw, 34px);
letter-spacing: -.03em;
line-height: 1.16;
}
.single-post-page .hx-prose h3 {
margin-top: 2em;
font-size: clamp(21px, 1.82vw, 26px);
letter-spacing: -.02em;
}
.single-post-page .hx-prose p,
.single-post-page .hx-prose ul,
.single-post-page .hx-prose ol {
margin-bottom: 1.35rem;
}
.single-post-page .hx-prose li {
margin-bottom: .7em;
padding-left: .35em;
}
.single-post-page .hx-prose li::marker {
color: var(--hx-primary);
font-weight: 700;
} .single-post-page .hx-prose > ol > li[style*="list-style-type: none"],
.single-post-page .hx-prose > ul > li[style*="list-style-type: none"] {
margin: 0;
padding: 0;
list-style: none;
}
.single-post-page .hx-prose > ol > li[style*="list-style-type: none"] > ol,
.single-post-page .hx-prose > ul > li[style*="list-style-type: none"] > ul {
margin-left: 0;
}
.single-post-page .hx-prose > ol:has(> li:only-child > ol:empty),
.single-post-page .hx-prose > ul:has(> li:only-child > ul:empty) {
display: none;
}
.single-post-page .hx-prose blockquote {
position: relative;
margin: clamp(34px, 5vw, 58px) 0;
padding: clamp(28px, 4vw, 44px);
border: 0;
background: var(--hx-story-wash);
color: var(--hx-story-ink);
font-size: clamp(20px, 1.83vw, 25px);
font-style: normal;
font-weight: 600;
line-height: 1.55;
}
.single-post-page .hx-prose blockquote::before {
content: "“";
display: block;
height: 30px;
color: var(--hx-primary);
font-size: 45px;
line-height: .8;
}
.single-post-page .hx-prose figure,
.single-post-page .hx-prose .wp-block-image {
margin-block: clamp(32px, 5vw, 56px);
}
.single-post-page .hx-prose figure img,
.single-post-page .hx-prose .wp-block-image img {
width: 100%;
}
.hx-story-rail__sticky {
position: sticky;
top: calc(var(--hx-header-main-h-sticky) + 34px);
}
.hx-story-toc,
.hx-story-share {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid var(--hx-border);
}
.hx-story-rail__eyebrow {
margin: 0 0 16px;
color: var(--hx-story-ink);
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
line-height: 1.3;
text-transform: uppercase;
}
.hx-story-toc ol {
display: grid;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.hx-story-toc li a {
display: block;
color: var(--hx-story-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.45;
}
.hx-story-toc li.is-subsection {
margin-left: 30px;
}
.hx-story-toc a:hover,
.hx-story-toc a:focus,
.hx-story-toc a.is-current {
color: var(--hx-story-ink);
}
.hx-story-share .pressmart-social {
gap: 8px;
}
.hx-story-share .pressmart-social a,
.hx-story-share .pressmart-social button {
width: 34px;
height: 34px;
}
.hx-story-cta {
position: relative;
overflow: hidden;
padding: 28px 24px;
background: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-story-cta::after {
content: "";
position: absolute;
right: -42px;
bottom: -52px;
width: 130px;
height: 130px;
border: 24px solid rgba(255, 255, 255, .08);
border-radius: 50%;
}
.hx-story-cta__kicker {
display: block;
margin-bottom: 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
opacity: .8;
}
.hx-story-cta__title {
position: relative;
z-index: 1;
margin: 0 0 22px;
color: inherit;
font-size: 20px;
font-weight: 600;
line-height: 1.35;
}
.hx-story-cta .hx-story-cta__button {
position: relative;
z-index: 1;
padding: 10px 18px;
background: var(--hx-inverse);
border-radius: 0;
box-shadow: none;
color: var(--hx-story-ink);
font-size: 12px;
}
.hx-story-cta .hx-story-cta__button:hover,
.hx-story-cta .hx-story-cta__button:focus {
background: var(--hx-secondary);
color: var(--hx-inverse);
}
.single-post-page .author-info,
.single-post-page .tag-social-share {
margin-top: 42px;
}
.single-post-page .tag-social-share {
padding: 26px 0 0;
border-top: 1px solid var(--hx-border);
}
.hx-story-footer {
max-width: 1220px;
margin-inline: auto;
}
.hx-story-footer .post-navigation {
gap: 16px;
padding: 30px 0;
margin: 76px 0 86px;
border-top: 1px solid var(--hx-border);
border-bottom: 1px solid var(--hx-border);
}
.hx-story-footer .nav-previous a,
.hx-story-footer .nav-next a {
min-height: 84px;
padding-block: 10px;
}
.hx-story-footer .nav-subtitle {
color: var(--hx-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.hx-story-footer .nav-title {
display: inline-block;
max-width: 380px;
color: var(--hx-story-ink);
font-size: 17px;
}
.hx-story-footer .nav-archive a {
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid var(--hx-border);
opacity: 1;
}
.hx-story-footer .related.posts > h2,
.hx-story-footer .comments-area > h2,
.hx-story-footer .comment-respond > h2 {
font-size: clamp(26px, 2.55vw, 34px);
letter-spacing: -.03em;
}
.hx-story-footer .related.posts > h2::after,
.hx-story-footer .comments-area > h2::after,
.hx-story-footer .comment-respond > h2::after {
width: 48px;
height: 3px;
}
.hx-story-footer .related-post .post-thumbnail img {
aspect-ratio: 16 / 10;
object-fit: cover;
} .hx-story-footer .hx-related {
margin: 0 0 clamp(70px, 9vw, 118px);
padding: clamp(34px, 5vw, 62px);
border-radius: 28px;
background: #f3f0e8;
}
.hx-related__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 30px;
}
.hx-related__eyebrow {
display: block;
margin-bottom: 8px;
color: var(--hx-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.hx-story-footer .hx-related__head h2 {
margin: 0;
font-size: clamp(1.78rem, 2.8vw, 2.56rem);
line-height: 1.05;
letter-spacing: -.04em;
}
.hx-related__all {
flex: 0 0 auto;
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
color: var(--hx-primary);
font-weight: 700;
text-decoration: none;
}
.hx-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.hx-related-card {
display: flex;
min-width: 0;
overflow: hidden;
flex-direction: column;
border: 1px solid rgba(20, 33, 45, .1);
border-radius: 18px;
background: #fff;
transition: transform .25s ease, box-shadow .25s ease;
}
.hx-related-card:hover,
.hx-related-card:focus-within {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(20, 33, 45, .12);
}
.hx-related-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #dfe6f2;
}
.hx-related-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.hx-related-card:hover .hx-related-card__media img,
.hx-related-card:focus-within .hx-related-card__media img {
transform: scale(1.035);
}
.hx-related-card__fallback {
display: grid;
place-items: end start;
width: 100%;
height: 100%;
padding: 24px;
background: linear-gradient(145deg, var(--hx-primary), #102b65);
color: #fff;
font-size: 1.1rem;
font-weight: 750;
}
.hx-related-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 22px;
}
.hx-related-card__category {
display: block;
margin-bottom: 9px;
color: var(--hx-primary);
font-size: 10px;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
}
.hx-related-card h3 {
margin: 0 0 12px;
font-size: clamp(1.08rem, 1.54vw, 1.27rem);
line-height: 1.28;
letter-spacing: -.02em;
}
.hx-related-card h3 a {
color: var(--hx-story-ink);
text-decoration: none;
}
.hx-related-card p {
display: -webkit-box;
overflow: hidden;
margin: 0 0 20px;
color: #65707a;
font-size: .88rem;
line-height: 1.65;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.hx-related-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-start;
margin-top: auto;
color: var(--hx-primary);
font-size: .88rem;
font-weight: 750;
text-decoration: none;
}
.hx-related-card__link span {
transition: transform .2s ease;
}
.hx-related-card__link:hover span,
.hx-related-card__link:focus-visible span {
transform: translateX(4px);
}
@media (max-width: 900px) {
.hx-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hx-related-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.hx-story-footer .hx-related {
margin-inline: -4px;
padding: 30px 18px;
border-radius: 20px;
}
.hx-related__head {
align-items: flex-start;
flex-direction: column;
}
.hx-related__grid {
grid-template-columns: 1fr;
}
.hx-related-card:last-child:nth-child(odd) {
grid-column: auto;
}
.hx-related-card__body {
padding: 20px;
}
}
@media (max-width: 1024px) {
.hx-story-utility {
grid-template-columns: minmax(0, 1fr) 360px;
}
.hx-story-layout {
grid-template-columns: minmax(0, 1fr);
max-width: 760px;
}
.hx-story-rail {
grid-row: 1;
}
.hx-story-rail__sticky {
position: static;
}
.hx-story-toc {
padding: 22px;
background: var(--hx-story-wash);
border: 0;
}
.hx-story-share,
.hx-story-cta {
display: none;
}
.hx-story-toc ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
}
}
@media (max-width: 767px) {
.hx-single-story {
padding-bottom: 48px;
}
.hx-single-story > .hx-container {
box-sizing: border-box;
width: 100%;
max-width: 100vw;
padding-inline: 18px;
}
.single-post-page,
.single-post-page > .entry-post,
.single-post-page .hx-story-header,
.hx-story-opening {
width: 100%;
max-width: 100%;
min-width: 0;
}
.single-post-page > .entry-post {
display: flex;
flex-direction: column;
}
.hx-story-opening {
display: contents;
}
.single-post-page .hx-story-header {
order: 1;
margin-bottom: 26px;
padding-top: 24px;
}
.hx-story-header__crumbs {
margin-bottom: 32px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.single-post-page .hx-story-header .entry-title {
font-size: clamp(28px, 7.99vw, 34px);
overflow-wrap: anywhere;
text-wrap: wrap;
}
.hx-story-header__dek {
font-size: 18px;
overflow-wrap: anywhere;
text-wrap: wrap;
}
.hx-story-opening > .entry-thumbnail-wrapper {
order: 3;
width: 100%;
min-height: 0;
margin: 0 0 40px;
}
.hx-story-opening > .entry-thumbnail-wrapper::after {
display: none;
}
.single-post-page .entry-thumbnail-wrapper .post-thumbnail {
border-radius: 14px;
}
.single-post-page .entry-thumbnail-wrapper .post-thumbnail img {
height: auto;
aspect-ratio: 16 / 10;
}
.hx-story-utility {
order: 2;
grid-template-columns: 1fr;
margin-bottom: 26px;
border-radius: 14px;
}
.hx-story-layout {
order: 4;
}
.hx-ai-summary {
border-top: 1px solid #dfe4ee;
border-left: 0;
border-radius: 0 0 14px 14px;
}
.hx-story-toc ol {
grid-template-columns: 1fr;
}
.hx-story-toc li.is-subsection {
margin-left: 24px;
}
.single-post-page .tag-social-share .pressmart-social {
display: none;
}
.hx-story-footer .post-navigation {
margin-block: 50px 64px;
}
.hx-story-footer .nav-previous a {
padding-left: 34px;
padding-right: 6px;
}
.hx-story-footer .nav-next a {
padding-right: 34px;
padding-left: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.hx-reading-progress span {
will-change: auto;
}
}  .hx-heading--left { text-align: left; }
.hx-heading__subtitle {
margin: 0 0 .5em;
color: var(--hx-primary);
font-size: var(--hx-text-small);
font-weight: var(--hx-weight-heading);
letter-spacing: .04em;
text-transform: uppercase;
} .hx-heading--step .hx-heading__title {
display: flex;
align-items: center;
gap: .6em;
}
.hx-heading__step {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.9em;
height: 1.9em;
background: var(--hx-primary);
border-radius: var(--hx-radius-round);
color: var(--hx-inverse);
font-size: .75em;
line-height: 1;
} .hx-button-wrap {
display: block;
}
.hx-button-wrap--left   { text-align: left; }
.hx-button-wrap--center { text-align: center; }
.hx-button-wrap--right  { text-align: right; }
.hx-button__inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
}
.hx-button__icon {
flex: none;
} .hx-button--sm {
padding: 8px 20px;
font-size: var(--hx-text-small);
}
.hx-button--lg {
padding: 16px 36px;
}
.hx-button--block {
display: block;
width: 100%;
} .hx-tile--icon-top {
flex-direction: column;
align-items: center;
padding-bottom: 0;
border-bottom: 0;
}
.hx-tile--icon-top .hx-tile__icon {
margin-right: 0;
margin-bottom: 15px;
}
.hx-tile--align-left   { text-align: left; }
.hx-tile--align-center { text-align: center; }
.hx-tile--align-right  { text-align: right; } .hx-icon-box--top {
display: block;
}
.hx-icon-box--left,
.hx-icon-box--right {
display: flex;
align-items: flex-start;
gap: 1em;
}
.hx-icon-box--right {
flex-direction: row-reverse;
}
.hx-icon-box--align-left   { text-align: left; }
.hx-icon-box--align-center { text-align: center; }
.hx-icon-box--align-right  { text-align: right; }
.hx-icon-box__icon {
color: var(--hx-primary);
font-size: 34px;
line-height: 1;
}
.hx-icon-box__icon .hx-icon {
fill: currentColor;
}
.hx-icon-box--top .hx-icon-box__icon {
margin-bottom: 15px;
}
.hx-icon-box--left .hx-icon-box__icon,
.hx-icon-box--right .hx-icon-box__icon {
flex: none;
}
.hx-icon-box__icon-link {
display: inline-block;
color: inherit;
line-height: 0;
}
.hx-icon-box__content {
min-width: 0;
}
.hx-icon-box__title {
margin: 0 0 var(--hx-heading-mb);
color: var(--hx-heading);
font-size: var(--hx-h4);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
}
.hx-icon-box__title a {
color: inherit;
text-decoration: none;
transition: var(--hx-t-ui);
}
.hx-icon-box__title a:hover,
.hx-icon-box__title a:focus {
color: var(--hx-primary);
}
.hx-icon-box__desc {
color: var(--hx-text);
line-height: var(--hx-leading);
}
.hx-icon-box__desc > *:last-child {
margin-bottom: 0;
} .hx-media-text--top {
flex-direction: column;
align-items: stretch;
}
.hx-media-text--top .hx-media-text__media,
.hx-media-text--top .hx-media-text__body {
flex: 1 1 100%;
max-width: 100%;
}
.hx-media-text--rounded .hx-media-text__media img {
border-radius: var(--hx-radius-media);
}
.hx-media-text--align-left   { text-align: left; }
.hx-media-text--align-center { text-align: center; }
.hx-media-text--align-right  { text-align: right; }
.hx-media-text--vstart  { align-items: flex-start; }
.hx-media-text--vcenter { align-items: center; }
.hx-media-text--vend    { align-items: flex-end; }
.hx-media-text__desc {
color: var(--hx-text);
line-height: var(--hx-leading);
}
.hx-media-text__desc > *:last-child,
.hx-media-text__content > *:last-child {
margin-bottom: 0;
} .hx-list {
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.hx-list__item {
display: flex;
align-items: flex-start;
gap: .5em;
color: var(--hx-text);
line-height: var(--hx-leading);
}
.hx-list--traditional > .hx-list__item + .hx-list__item {
margin-top: .35em;
}
.hx-list__icon {
display: inline-flex;
flex: none;
align-items: center;
height: calc(var(--hx-leading) * 1em);
color: var(--hx-primary);
}
.hx-list__icon .hx-icon {
fill: currentColor;
}
.hx-list__link {
display: flex;
align-items: flex-start;
gap: .5em;
width: 100%;
color: inherit;
text-decoration: none;
}
.hx-list__link:hover,
.hx-list__link:focus {
color: var(--hx-link-hover);
} .hx-list--inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5em 1em;
}
.hx-list--inline > .hx-list__item {
margin: 0;
}
.hx-list--align-center { justify-content: center; text-align: center; }
.hx-list--align-right  { justify-content: flex-end; text-align: right; }
.hx-list--align-center:not(.hx-list--inline) > .hx-list__item { justify-content: center; }
.hx-list--align-right:not(.hx-list--inline) > .hx-list__item  { justify-content: flex-end; } .hx-divider {
width: var(--hx-divider-w, 100%);
margin-block: var(--hx-divider-gap, 15px);
border: 0;
border-top: 1px solid var(--hx-border);
height: 0;
opacity: 1;
}
.hx-divider--left   { margin-inline: 0 auto; }
.hx-divider--center { margin-inline: auto; }
.hx-divider--right  { margin-inline: auto 0; } .hx-section {
position: relative;
}
.hx-section--pad-none { padding-block: 0; }
.hx-section--pad-sm   { padding-block: 20px; }
.hx-section--pad-md   { padding-block: var(--hx-content-pad-y); }
.hx-section--pad-lg   { padding-block: var(--hx-footer-pad-y); }
.hx-section--bg-alt {
background-color: var(--hx-bg-alt);
}
.hx-section--bg-primary {
background-color: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-section--bg-secondary {
background-color: var(--hx-secondary);
color: var(--hx-inverse);
}
.hx-section--bg-primary .hx-heading__title,
.hx-section--bg-secondary .hx-heading__title,
.hx-section--bg-primary .hx-heading__tagline,
.hx-section--bg-secondary .hx-heading__tagline {
color: inherit;
} .hx-products__grid {
display: grid;
gap: var(--hx-products-gap, var(--hx-gutter));
grid-template-columns: repeat(var(--hx-products-sm, 2), minmax(0, 1fr));
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.hx-products__grid {
grid-template-columns: repeat(var(--hx-products-md, 3), minmax(0, 1fr));
}
}
@media (min-width: 1025px) {
.hx-products__grid {
grid-template-columns: repeat(var(--hx-products-lg, 3), minmax(0, 1fr));
}
}
.hx-products__grid > .product {
min-width: 0;
list-style: none;
} .hx-products--carousel .hx-products__grid {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hx-products--carousel .hx-products__grid::-webkit-scrollbar {
display: none;
}
.hx-products--carousel .hx-products__grid > .product {
flex: 0 0 calc(
(100% - (var(--hx-products-sm, 2) - 1) * var(--hx-products-gap, var(--hx-gutter)))
/ var(--hx-products-sm, 2)
);
scroll-snap-align: start;
}
@media (min-width: 768px) {
.hx-products--carousel .hx-products__grid > .product {
flex-basis: calc(
(100% - (var(--hx-products-md, 3) - 1) * var(--hx-products-gap, var(--hx-gutter)))
/ var(--hx-products-md, 3)
);
}
}
@media (min-width: 1025px) {
.hx-products--carousel .hx-products__grid > .product {
flex-basis: calc(
(100% - (var(--hx-products-lg, 3) - 1) * var(--hx-products-gap, var(--hx-gutter)))
/ var(--hx-products-lg, 3)
);
}
} .hx-carousel {
position: relative;
}
.hx-carousel__viewport {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.hx-carousel__viewport::-webkit-scrollbar {
display: none;
}
.hx-carousel__track {
display: flex;
gap: var(--hx-carousel-gap, var(--hx-gutter));
margin: 0;
padding: 0;
list-style: none;
}
.hx-carousel__slide {
flex: 0 0 calc(
(100% - (var(--hx-slides-xs, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
/ var(--hx-slides-xs, 1)
);
min-width: 0;
scroll-snap-align: start;
}
@media (min-width: 576px) {
.hx-carousel__slide {
flex-basis: calc(
(100% - (var(--hx-slides-sm, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
/ var(--hx-slides-sm, 1)
);
}
}
@media (min-width: 768px) {
.hx-carousel__slide {
flex-basis: calc(
(100% - (var(--hx-slides-md, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
/ var(--hx-slides-md, 1)
);
}
}
@media (min-width: 1025px) {
.hx-carousel__slide {
flex-basis: calc(
(100% - (var(--hx-slides-lg, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
/ var(--hx-slides-lg, 1)
);
}
}
@media (min-width: 1200px) {
.hx-carousel__slide {
flex-basis: calc(
(100% - (var(--hx-slides-xl, 1) - 1) * var(--hx-carousel-gap, var(--hx-gutter)))
/ var(--hx-slides-xl, 1)
);
}
}
.hx-carousel__nav {
position: absolute;
top: 50%;
z-index: var(--hx-z-card);
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
transform: translateY(-50%);
background: var(--hx-bg);
border: 0;
border-radius: var(--hx-radius-round);
box-shadow: var(--hx-shadow-ring-strong);
color: var(--hx-text-strong);
cursor: pointer;
transition: var(--hx-t-ui);
}
.hx-carousel__nav:hover,
.hx-carousel__nav:focus {
background: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-carousel__nav[hidden] {
display: none;
}
.hx-carousel__nav[disabled] {
opacity: .4;
cursor: default;
}
.hx-carousel__nav--prev { left: 10px; }
.hx-carousel__nav--next { right: 10px; }
.hx-carousel__dots {
display: flex;
justify-content: center;
gap: 0;
margin-top: 15px;
}
.hx-carousel__dots:empty {
display: none;
} .hx-carousel__dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: 0;
box-shadow: none;
cursor: pointer;
}
.hx-carousel__dot::before {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: var(--hx-radius-round);
background: var(--hx-border);
content: "";
transform: translate(-50%, -50%);
transition: var(--hx-t-ui);
}
.hx-carousel__dot:hover,
.hx-carousel__dot:focus {
background: none;
}
.hx-carousel__dot[aria-selected="true"]::before {
background: var(--hx-primary);
}
@media (prefers-reduced-motion: reduce) {
.hx-carousel__viewport {
scroll-behavior: auto;
}
}  .hx-block {
margin-bottom: 2rem;
}
.hx-block:last-child {
margin-bottom: 0;
} .hx-check-list {
list-style: none;
margin: 1.5rem 0;
padding: 0;
}
.hx-check-list li {
display: flex;
align-items: flex-start;
gap: 5px;
margin-bottom: 10px;
color: #303030;
font-size: var(--hx-text-base);
}
.hx-check-list li::before {
content: "";
flex: 0 0 auto;
width: 15px;
height: 15px;
margin-top: .45em;
background-color: var(--hx-primary);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20transform='translate(0,960)%20scale(1,-1)'%20d='M1011%20796c-17%2017%20-44%2017%20-61%200l-609%20-605%20-268%20264c-17%2017%20-44%2017%20-61%200s-17%20-44%200%20-60l298%20-294c17%20-16%2044%20-16%2061%200l639%20635c17%2017%2017%2044%200%2060%20-17%2017%2017%20-17%200%200z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20transform='translate(0,960)%20scale(1,-1)'%20d='M1011%20796c-17%2017%20-44%2017%20-61%200l-609%20-605%20-268%20264c-17%2017%20-44%2017%20-61%200s-17%20-44%200%20-60l298%20-294c17%20-16%2044%20-16%2061%200l639%20635c17%2017%2017%2044%200%2060%20-17%2017%2017%20-17%200%200z'/%3E%3C/svg%3E") no-repeat center / contain;
} .hx-tile-row {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.hx-tile-row--card {
background: var(--hx-bg-alt);
padding: 2rem;
}
@media (min-width: 768px) {
.hx-tile-row--2 { grid-template-columns: repeat(2, 1fr); }
.hx-tile-row--3 { grid-template-columns: repeat(3, 1fr); }
.hx-tile-row--4 { grid-template-columns: repeat(4, 1fr); }
} .hx-icon-cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.hx-icon-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
.hx-icon-cards { grid-template-columns: repeat(3, 1fr); }
}
.hx-icon-card {
display: flex;
flex-direction: column;
gap: 15px;
padding: 2rem;
background: var(--hx-bg);
border-radius: var(--hx-radius-media);
text-align: center;
} .hx-icon-card > .hx-button-wrap:last-child { margin-top: auto; } .hx-contact {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.hx-contact__main,
.hx-contact__aside {
flex: 1 1 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.hx-contact__main,
.hx-contact__aside { flex: 0 0 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
.hx-contact__main  { margin-right: 1rem; }
}
@media (min-width: 1025px) {
.hx-contact__main,
.hx-contact__aside { flex: 0 0 calc(50% - 1.5rem); max-width: calc(50% - 1.5rem); }
.hx-contact__main  { margin-right: 3rem; }
}
.hx-contact__aside {
background: var(--hx-bg-alt);
padding: 2rem;
} .hx-contact__aside .hx-tile-row--card { background: none; padding: 0; } .hx-faq-columns {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.hx-faq-columns__col {
flex: 1 1 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.hx-faq-columns__col { flex: 0 0 50%; max-width: 50%; }
.hx-faq-columns__col + .hx-faq-columns__col { padding-left: 1rem; }
} .hx-testimonials-band {
background: var(--hx-bg-alt);
padding: 6% 0;
margin-bottom: calc(-1 * var(--hx-content-pad-y));
} .hx-embed__body > * { max-width: 100%; } .hx-recipe {
--hx-recipe-blue: #204597;
--hx-recipe-step-blue: #2f3e8f;
--hx-recipe-surface: #f0f5fa;
} .hx-recipe-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1200px;
}
@media (min-width: 768px) {
.hx-recipe-grid { grid-template-columns: repeat(3, 1fr); }
}
.hx-recipe-card__media {
display: block;
margin-bottom: 15px;
}
.hx-recipe-card__media img {
display: block;
width: 100%;
height: auto;
transition: transform var(--hx-t-image);
}
.hx-recipe-card__body { text-align: center; }
.hx-recipe-card__title {
margin: 0 0 .25em;
font-family: var(--hx-font);
font-size: 21px;
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
color: var(--hx-heading);
}
.hx-recipe-card__title a {
color: inherit;
text-decoration: none;
} .hx-recipe-card:hover .hx-recipe-card__title,
.hx-recipe-card:focus-within .hx-recipe-card__title {
color: var(--hx-primary);
}
.hx-recipe-card__meta {
margin: 0;
font-size: var(--hx-text-base);
color: var(--hx-text);
} .hx-recipe-intro { padding-bottom: 20px; }
.hx-recipe-pills {
display: flex;
flex-wrap: wrap;
gap: 0 16px;
list-style: none;
margin: 0;
padding: 0 0 20px;
font-size: var(--hx-text-small);
} .hx-button--jump {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: 19px;
padding: 12px 24px;
background: var(--hx-recipe-blue, #204597);
color: var(--hx-inverse);
border: 1px solid var(--hx-recipe-blue, #204597);
border-radius: 8px;
font-weight: var(--hx-weight-heading);
text-decoration: none;
transition: background-color var(--hx-t-ui), color var(--hx-t-ui);
}
.hx-button--jump .hx-icon { fill: currentColor; }
.hx-button--jump:hover,
.hx-button--jump:focus {
background: var(--hx-bg);
color: var(--hx-recipe-blue, #204597);
}
.hx-recipe-lede { margin: 20px 0 0; } #recipe-ingredients { scroll-margin-top: 110px; } .hx-recipe-hero {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.hx-recipe-hero__text,
.hx-recipe-hero__media {
flex: 1 1 100%;
max-width: 100%;
background: var(--hx-recipe-surface, #f0f5fa);
}
.hx-recipe-hero__text { padding: 20px; }
@media (min-width: 768px) {
.hx-recipe-hero__text,
.hx-recipe-hero__media { flex: 0 0 50%; max-width: 50%; }
}
.hx-recipe-hero__media img {
display: block;
width: 100%;
height: auto;
}
.hx-rule {
border: 0;
border-top: 1px solid #cccccc;
margin: 15px 0;
} .hx-recipe-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: end;
margin: 0;
padding: 10px;
background: var(--hx-recipe-surface, #f0f5fa);
font-size: 13px;
}
.hx-recipe-meta__item:nth-child(2),
.hx-recipe-meta__item:nth-child(3) { text-align: center; }
.hx-recipe-meta dt { display: inline; font-weight: var(--hx-weight-body); }
.hx-recipe-meta dd { display: inline; margin: 0; font-weight: 700; }
@media (max-width: 767px) {
.hx-recipe-meta { grid-template-columns: 1fr; }
} .hx-recipe-ingredients {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
background: var(--hx-recipe-surface, #f0f5fa);
padding: 20px;
}
@media (max-width: 767px) {
.hx-recipe-ingredients { grid-template-columns: 1fr; }
}
.hx-ingredient-list {
list-style: none;
margin: 0;
padding: 0;
}
.hx-ingredient-list li {
display: flex;
align-items: center;
color: var(--hx-recipe-blue, #204597);
}
.hx-ingredient-list li + li { margin-top: .4em; }
.hx-icon--check {
flex: 0 0 auto;
width: 14px;
height: 14px;
margin-right: 3.5px;
fill: var(--hx-recipe-blue, #204597);
}
.hx-ingredient__note { opacity: .8; } .hx-recipe-ingredients__scale {
display: flex;
align-items: center;
justify-content: flex-end;
align-self: flex-start;
min-height: 309px;
margin: 0 20px;
}
.hx-recipe-ingredients__scale label {
margin: 0 6px;
font-size: .83333em;
letter-spacing: .5px;
}
.hx-servings-input {
width: 90px;
height: 50px;
padding: 10px 15px;
background: var(--hx-bg);
color: var(--hx-secondary);
border: 1px solid rgba(45, 182, 141, .35);
border-radius: 3px;
} .hx-recipe-instructions {
background: var(--hx-recipe-surface, #f0f5fa);
padding: 20px;
}
.hx-steps {
list-style: none;
margin: 0;
padding: 0;
counter-reset: step;
}
.hx-step { counter-increment: step; }
.hx-step + .hx-step { margin-top: 1.5rem; }
.hx-step__title {
display: flex;
align-items: center;
margin: 0 0 .4em;
font-size: 17px;
font-weight: var(--hx-weight-heading); line-height: var(--hx-leading-heading);
}
.hx-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
margin-right: 10px;
background: var(--hx-recipe-step-blue, #2f3e8f);
color: var(--hx-inverse);
border-radius: var(--hx-radius-round);
font-size: var(--hx-text-small);
font-weight: var(--hx-weight-heading);
} .hx-step__num::before { content: counter(step); }
.hx-recipe-nutrition { margin: 2rem 0; }
.hx-recipe-nutrition img {
display: block;
width: 100%;
height: auto;
}
.hx-recipe-note-title {
margin: 0;
padding: 50px;
background: var(--hx-bg);
}
.hx-recipe-note { padding-left: 10px; } .hx-concept {
--concept-ink: #101820;
--concept-blue: #1d4497;
--concept-blue-bright: #255bd1;
--concept-cream: #f3eee3;
--concept-oat: #ddd1bd;
--concept-lime: #d8ef65;
--concept-line: rgba(16, 24, 32, .16);
background: #fff;
color: var(--concept-ink);
overflow: hidden;
}
.hx-concept-shell {
width: min(100% - 48px, 1380px);
margin-inline: auto;
}
.hx-concept h1,
.hx-concept h2,
.hx-concept h3,
.hx-concept p {
margin-top: 0;
}
.hx-concept h1,
.hx-concept h2 {
color: inherit;
font-weight: 700;
letter-spacing: -.055em;
line-height: .96;
}
.hx-concept h2 {
font-size: clamp(2.44rem, 3.49vw, 4.12rem);
}
.hx-kicker {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.2;
text-transform: uppercase;
}
.hx-kicker::before {
content: none;
}
.hx-concept-button {
display: inline-flex;
min-height: 58px;
align-items: center;
justify-content: center;
gap: 28px;
padding: 15px 24px;
border: 1px solid var(--concept-ink);
border-radius: 100px;
font-size: 14px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1;
text-decoration: none;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.hx-concept-button:hover {
transform: translateY(-3px);
}
.hx-concept-button--dark {
background: var(--concept-ink);
color: #fff;
}
.hx-concept-button--dark:hover {
background: var(--concept-blue);
color: #fff;
}
.hx-concept-link {
display: inline-flex;
align-items: center;
gap: 15px;
padding-block: 8px;
border-bottom: 1px solid currentColor;
color: inherit;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
transition: gap .2s ease;
}
.hx-concept-link:hover {
gap: 22px;
color: var(--concept-blue-bright);
}
.hx-concept-link--light:hover { color: var(--concept-lime); } .hx-concept-hero {
position: relative;
background: var(--concept-cream);
}
.hx-concept-hero::before {
position: absolute;
inset: 0 0 0 58%;
background: var(--concept-blue);
content: "";
}
.hx-concept-hero__grid {
display: grid;
min-height: min(790px, calc(100vh - 115px));
grid-template-columns: 1.05fr .95fr;
align-items: center;
}
.hx-concept-hero__copy {
position: relative;
z-index: 2;
max-width: 730px;
padding: 95px 9vw 85px 0;
}
.hx-concept-hero h1 {
max-width: 760px;
margin-bottom: 32px;
font-size: clamp(3rem, 4.22vw, 4.69rem);
}
.hx-concept-hero__lede {
max-width: 620px;
margin-bottom: 36px;
font-size: clamp(18px, 1.45vw, 22px);
font-weight: 450;
line-height: 1.55;
}
.hx-concept-actions {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 58px;
}
.hx-concept-proof {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.hx-concept-proof li {
display: grid;
min-width: 112px;
padding: 0 22px;
border-left: 1px solid var(--concept-line);
}
.hx-concept-proof li:first-child { padding-left: 0; border-left: 0; }
.hx-concept-proof strong { font-size: 26px; line-height: 1; }
.hx-concept-proof span { margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.hx-concept-hero__visual {
position: relative;
z-index: 1;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
padding: 70px 0 50px 7%;
}
.hx-concept-hero__visual::before {
position: absolute;
width: min(40vw, 610px);
aspect-ratio: 1;
border: 1px solid rgba(255,255,255,.26);
border-radius: 50%;
content: "";
}
.hx-concept-hero__visual img {
position: relative;
z-index: 1;
width: min(55vw, 820px);
max-width: none;
filter: drop-shadow(0 30px 25px rgba(0,0,0,.2));
transform: rotate(-2deg);
}
.hx-concept-hero__stamp {
position: absolute;
top: 12%;
right: 3%;
z-index: 2;
display: grid;
width: 105px;
aspect-ratio: 1;
place-items: center;
padding: 18px;
border-radius: 50%;
background: var(--concept-lime);
color: var(--concept-ink);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.35;
text-align: center;
text-transform: uppercase;
transform: rotate(9deg);
}
.hx-concept-hero__note {
position: absolute;
right: 0;
bottom: 40px;
margin: 0;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
writing-mode: vertical-rl;
} .hx-concept-ticker {
overflow: hidden;
background: var(--concept-ink);
color: #fff;
}
.hx-concept-ticker > div {
display: flex;
min-width: max-content;
align-items: center;
justify-content: center;
gap: 34px;
padding: 18px 28px;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.hx-concept-ticker i { color: var(--concept-lime); font-style: normal; } .hx-concept-intro { padding: 150px 0 140px; }
.hx-concept-intro .hx-concept-shell { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; }
.hx-concept-intro h2 { max-width: 600px; margin: 0; }
.hx-concept-intro__body { max-width: 700px; padding-top: 58px; }
.hx-concept-intro__body p { max-width: 630px; margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
.hx-concept-intro__body .hx-concept-intro__lead { margin-bottom: 28px; font-size: clamp(21px, 1.94vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.35; } .hx-concept-education { display: grid; min-height: 760px; grid-template-columns: 1fr 1fr; background: var(--concept-blue); color: #fff; }
.hx-concept-education__image { min-height: 680px; overflow: hidden; }
.hx-concept-education__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.hx-concept-education:hover .hx-concept-education__image img { transform: scale(1.025); }
.hx-concept-education__content { display: flex; flex-direction: column; justify-content: center; padding: 85px clamp(40px, 7vw, 120px); }
.hx-concept-education__content h2 { max-width: 720px; margin-bottom: 55px; }
.hx-concept-reasons { margin: 0 0 38px; padding: 0; list-style: none; }
.hx-concept-reasons li { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 23px 0; border-top: 1px solid rgba(255,255,255,.3); }
.hx-concept-reasons li:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
.hx-concept-reasons li > span { color: var(--concept-lime); font-size: 11px; font-weight: 700; }
.hx-concept-reasons h3 { margin-bottom: 5px; color: #fff; font-size: 18px; font-weight: 650; }
.hx-concept-reasons p { margin-bottom: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.6; } .hx-concept-shop { padding: 145px 0; background: #f6f4ef; }
.hx-concept-section-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 68px; }
.hx-concept-section-head h2 { margin: 0; }
.hx-concept-shop .hx-featured { margin: 0; padding: 0; }
.hx-concept-shop .hx-featured__grid { gap: 18px; }
.hx-concept-shop .hx-featured .product-wrapper { height: 100%; padding: 0 0 28px; border: 1px solid rgba(16,24,32,.11); border-radius: 0; background: #fff; box-shadow: none; transition: transform .3s ease, box-shadow .3s ease; }
.hx-concept-shop .hx-featured .product:hover .product-wrapper { box-shadow: 0 20px 45px rgba(16,24,32,.09); transform: translateY(-7px); }
.hx-concept-shop .hx-featured .product-image { margin: 0 0 25px; padding: 28px; background: #eeece6; }
.hx-concept-shop .hx-featured .product-image img { width: 100%; height: 420px; object-fit: contain; }
.hx-concept-shop .hx-featured .product-info { padding-inline: 25px; }
.hx-concept-shop .hx-featured .product-title { margin-bottom: 12px; font-size: 18px; letter-spacing: -.025em; }
.hx-concept-shop .hx-featured .product-title a { color: var(--concept-ink); }
.hx-concept-shop .hx-featured .price { color: var(--concept-blue); font-size: 15px; font-weight: 700; }
.hx-concept-shop .hx-featured .quickview-button { display: none; }
.hx-concept-shop .hx-featured .woocommerce-product-details__short-description { display: none; } .hx-concept-how { padding: 130px 0; background: var(--concept-lime); }
.hx-concept-how .hx-concept-shell { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; }
.hx-concept-how__intro h2 { max-width: 610px; margin-bottom: 0; }
.hx-concept-how__steps { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: 20px; padding-top: 45px; }
.hx-concept-how__steps article { padding-top: 24px; border-top: 2px solid var(--concept-ink); }
.hx-concept-how__steps b { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 50px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.hx-concept-how__steps h3 { margin-bottom: 12px; font-size: 22px; letter-spacing: -.03em; }
.hx-concept-how__steps p { margin-bottom: 0; font-size: 14px; line-height: 1.65; } .hx-concept-recipes { padding: 145px 0; }
.hx-concept-recipes__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; }
.hx-recipe-tile { position: relative; min-height: 550px; overflow: hidden; background: var(--concept-ink); color: #fff; }
.hx-recipe-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: transform .6s ease, opacity .3s ease; }
.hx-recipe-tile::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); content: ""; }
.hx-recipe-tile > span { position: absolute; right: 28px; bottom: 28px; left: 28px; z-index: 1; display: grid; gap: 7px; }
.hx-recipe-tile small { color: var(--concept-lime); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-recipe-tile strong { color: #fff; font-size: clamp(20px, 1.8vw, 27px); letter-spacing: -.035em; line-height: 1.15; }
.hx-recipe-tile:hover img { opacity: .95; transform: scale(1.04); } .hx-concept-quote { padding: 135px 0; background: var(--concept-blue); color: #fff; text-align: center; }
.hx-concept-quote .hx-concept-shell { max-width: 1050px; }
.hx-concept-quote__stars { margin-bottom: 35px; color: var(--concept-lime); font-size: 18px; letter-spacing: .35em; }
.hx-concept-quote blockquote { margin: 0 0 30px; font-size: clamp(26px, 3.1vw, 45px); font-weight: 650; letter-spacing: -.045em; line-height: 1.18; }
.hx-concept-quote cite { font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-concept-final { padding: 160px 0; background: var(--concept-cream); text-align: center; }
.hx-concept-final .hx-kicker { justify-content: center; }
.hx-concept-final h2 { max-width: 950px; margin: 0 auto 50px; }
@media (max-width: 1180px) {
.hx-concept-hero::before { left: 55%; }
.hx-concept-hero__grid { grid-template-columns: 1fr 1fr; }
.hx-concept-hero__copy { padding-right: 5vw; }
.hx-concept-hero__visual img { width: 60vw; }
.hx-concept-shop .hx-featured .product-image img { height: 330px; }
.hx-concept-how .hx-concept-shell { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.hx-concept-shell { width: min(100% - 36px, 1380px); }
.hx-concept-hero::before { inset: auto 0 0; height: 45%; }
.hx-concept-hero__grid { min-height: auto; grid-template-columns: 1fr; }
.hx-concept-hero__copy { max-width: 800px; padding: 85px 0 65px; }
.hx-concept-hero__visual { min-height: 510px; padding: 25px 0 10px; }
.hx-concept-hero__visual img { width: min(105vw, 790px); }
.hx-concept-hero__visual::before { width: 480px; }
.hx-concept-hero__stamp { top: 4%; right: 3%; }
.hx-concept-hero__note { display: none; }
.hx-concept-intro { padding: 105px 0; }
.hx-concept-intro .hx-concept-shell { grid-template-columns: 1fr; gap: 20px; }
.hx-concept-intro__body { padding-top: 25px; }
.hx-concept-education { grid-template-columns: 1fr; }
.hx-concept-education__image { min-height: 620px; }
.hx-concept-education__content { padding: 80px 36px; }
.hx-concept-shop,
.hx-concept-recipes { padding: 105px 0; }
.hx-concept-how { padding: 100px 0; }
.hx-concept-recipes__grid { grid-template-columns: 1.35fr 1fr; }
.hx-recipe-tile:last-child { display: none; }
}
@media (max-width: 767px) {
.hx-concept-shell { width: min(100% - 28px, 1380px); }
.hx-concept h2 { font-size: clamp(2.28rem, 10.29vw, 3.12rem); }
.hx-concept-hero h1 { font-size: clamp(2.9rem, 11.28vw, 3.85rem); }
.hx-concept-hero__copy { padding: 65px 0 50px; }
.hx-concept-hero__lede { font-size: 17px; }
.hx-concept-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 45px; }
.hx-concept-button { min-height: 54px; }
.hx-concept-proof li { min-width: 0; padding: 0 15px; }
.hx-concept-proof strong { font-size: 22px; }
.hx-concept-proof span { font-size: 9px; }
.hx-concept-hero__visual { min-height: 380px; margin-inline: -14px; }
.hx-concept-hero__visual::before { width: 330px; }
.hx-concept-hero__visual img { width: 125vw; }
.hx-concept-hero__stamp { width: 82px; padding: 12px; font-size: 9px; }
.hx-concept-ticker > div { justify-content: flex-start; gap: 18px; overflow-x: auto; }
.hx-concept-intro { padding: 85px 0; }
.hx-concept-intro__body .hx-concept-intro__lead { font-size: 21px; }
.hx-concept-education__image { min-height: 470px; }
.hx-concept-education__content { padding: 70px 22px; }
.hx-concept-education__content h2 { margin-bottom: 40px; }
.hx-concept-section-head { align-items: flex-start; flex-direction: column; margin-bottom: 45px; }
.hx-concept-shop,
.hx-concept-recipes { padding: 85px 0; }
.hx-concept-shop .hx-featured__grid { grid-template-columns: 1fr; gap: 15px; }
.hx-concept-shop .hx-featured .product-image img { height: 350px; }
.hx-concept-how { padding: 80px 0; }
.hx-concept-how__steps { grid-template-columns: 1fr; gap: 42px; }
.hx-concept-how__steps b { margin-bottom: 26px; }
.hx-concept-recipes__grid { grid-template-columns: 1fr; }
.hx-recipe-tile { min-height: 480px; }
.hx-recipe-tile:not(:first-child) { display: none; }
.hx-concept-quote { padding: 95px 0; }
.hx-concept-final { padding: 100px 0; }
} .hx2 {
--hx2-ink: #101820;
--hx2-blue: #1d4497;
--hx2-blue-dark: #14326f;
--hx2-cream: #f5f1e8;
--hx2-sand: #e6dece;
--hx2-pale-blue: #dbe5f6;
--hx2-line: rgba(16, 24, 32, .16);
background: #fff;
color: var(--hx2-ink);
overflow: hidden;
}
.hx2-wrap { width: min(100% - 56px, 1320px); margin-inline: auto; }
.hx2 h1, .hx2 h2, .hx2 h3, .hx2 p { margin-top: 0; }
.hx2 h1, .hx2 h2 { color: inherit; font-weight: 650; letter-spacing: -.045em; line-height: 1.02; }
.hx2 h2 { font-size: clamp(2.28rem, 3.27vw, 3.54rem); }
.hx2-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.3;
text-transform: uppercase;
}
.hx2-eyebrow::before { content: none; }
.hx2-btn {
display: inline-flex;
min-height: 54px;
align-items: center;
justify-content: center;
padding: 14px 25px;
border: 1px solid transparent;
border-radius: 3px;
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hx2-btn:hover { transform: translateY(-2px); }
.hx2-btn--blue { background: var(--hx2-blue); color: #fff; }
.hx2-btn--blue:hover { background: var(--hx2-blue-dark); color: #fff; }
.hx2-btn--outline { border-color: var(--hx2-ink); color: var(--hx2-ink); }
.hx2-btn--outline:hover { background: var(--hx2-ink); color: #fff; }
.hx2-btn--white { background: #fff; color: var(--hx2-blue-dark); }
.hx2-btn--white:hover { background: var(--hx2-cream); color: var(--hx2-blue-dark); }
.hx2-text-link {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid currentColor;
color: inherit;
font-size: 13px;
font-weight: 650;
line-height: 1.3;
text-decoration: none;
}
.hx2-text-link span { transition: transform .2s ease; }
.hx2-text-link:hover { color: var(--hx2-blue); }
.hx2-text-link:hover span { transform: translateX(4px); } .hx2-hero { position: relative; min-height: 720px; background: var(--hx2-cream); }
.hx2-hero::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.86) 28%, rgba(245,241,232,0) 54%); content: ""; }
.hx2-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hx2-hero__inner { position: relative; z-index: 1; display: flex; min-height: 720px; align-items: center; }
.hx2-hero__copy { width: min(48%, 600px); padding-block: 80px; }
.hx2-hero h1 { max-width: 590px; margin-bottom: 28px; font-size: clamp(2.85rem, 3.54vw, 3.94rem); }
.hx2-hero__copy > p:not(.hx2-eyebrow):not(.hx2-hero__shipping) { max-width: 520px; margin-bottom: 34px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.62; }
.hx2-actions { display: flex; align-items: center; gap: 26px; }
.hx2-hero__shipping { margin: 30px 0 0; color: rgba(16,24,32,.7); font-size: 11px; font-weight: 650; letter-spacing: .06em; } .hx2-proof { border-top: 1px solid var(--hx2-line); border-bottom: 1px solid var(--hx2-line); background: #fff; }
.hx2-proof .hx2-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hx2-proof .hx2-wrap > div { display: grid; gap: 5px; padding: 27px 30px; border-left: 1px solid var(--hx2-line); }
.hx2-proof .hx2-wrap > div:first-child { border-left: 0; }
.hx2-proof strong { font-size: 14px; letter-spacing: -.01em; }
.hx2-proof span { color: #73777a; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; } .hx2-intro { padding: 135px 0; background: #f5f7fb; }
.hx2-intro__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: clamp(55px, 8vw, 115px); }
.hx2-intro__media { position: relative; margin: 0; padding: clamp(18px, 2.2vw, 30px); border: 1px solid #dbe2ee; border-radius: 24px; background: #fff; box-shadow: 0 28px 65px rgba(30, 56, 105, .11); }
.hx2-intro__media::before { content: ""; position: absolute; inset: -12px auto auto -12px; width: 76px; height: 76px; border-top: 3px solid var(--hx2-blue); border-left: 3px solid var(--hx2-blue); border-radius: 16px 0 0; pointer-events: none; }
.hx2-intro__media img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hx2-intro__media figcaption { margin-top: 15px; color: #5f6773; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.hx2-intro__copy { max-width: 610px; padding-top: 0; }
.hx2-intro__copy h2 { margin: 0 0 25px; font-size: clamp(31px, 3.05vw, 46px); line-height: 1.08; letter-spacing: -.045em; }
.hx2-intro__canada { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 8px 13px; border: 1px solid #d4deee; border-radius: 20px; background: #fff; color: var(--hx2-blue); font-size: 11px; font-weight: 750; letter-spacing: .11em; line-height: 1; text-transform: uppercase; }
.hx2-intro__canada img { display: block; width: 15px; height: 15px; object-fit: contain; }
.hx2-intro__copy .hx2-lead { margin-bottom: 20px; color: #253248; font-size: clamp(19px, 1.53vw, 23px); font-weight: 600; letter-spacing: -.02em; line-height: 1.48; }
.hx2-intro__copy > p:not(.hx2-lead):not(.hx2-intro__canada) { margin-bottom: 27px; color: #555f6c; font-size: 15px; line-height: 1.8; }
.hx2-intro__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 31px; }
.hx2-intro__facts span { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 5px; background: #e7edf9; color: #244278; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.hx2-intro__facts .hx-benefit-icon { width: auto; max-width: 21px; height: 20px; flex: 0 0 auto; }
.hx2-intro__facts .hx-benefit-icon--vegan { max-width: 25px; height: 16px; } .hx2-section-head { display: grid; grid-template-columns: 1.45fr .55fr; align-items: end; gap: 80px; margin-bottom: 68px; }
.hx2-section-head h2 { max-width: 820px; margin-bottom: 0; }
.hx2-section-head > p { max-width: 410px; margin-bottom: 5px; color: #5d6266; font-size: 15px; line-height: 1.75; } .hx2-flavours { padding: 130px 0 140px; background: var(--hx2-cream); }
.hx2-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hx2-product__media { position: relative; display: grid; min-height: 530px; place-items: center; overflow: hidden; }
.hx2-product--blue .hx2-product__media { background: #dfe7f5; }
.hx2-product--cocoa .hx2-product__media { background: #e8ddd7; }
.hx2-product--oat .hx2-product__media { background: #eae4d6; }
.hx2-product__media img { width: 88%; height: 455px; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s cubic-bezier(.2,.65,.3,1); }
.hx2-product__media:hover img { transform: scale(1.035) translateY(-6px); }
.hx2-product__media > span { position: absolute; top: 18px; left: 18px; padding: 8px 11px; background: #fff; color: var(--hx2-ink); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx2-product__info { display: flex; align-items: start; justify-content: space-between; gap: 25px; padding: 24px 4px 0; }
.hx2-product__info p { margin-bottom: 7px; color: #5c6063; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx2-product__info h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.hx2-product__info h3 a { color: var(--hx2-ink); text-decoration: none; }
.hx2-product__info > strong { padding-top: 18px; color: var(--hx2-blue); font-size: 14px; white-space: nowrap; }
.hx2-product__info > strong ins { text-decoration: none; } .hx2-product__frame { position: relative; overflow: hidden; }
.hx2-amazon {
display: flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 10px;
padding: 14px 20px;
border: 1px solid transparent;
border-radius: 3px;
background: #ff9900;
color: #17212b;
font-size: 13px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.hx2-amazon:hover,
.hx2-amazon:focus-visible { background: var(--hx2-ink); color: #fff; }
.hx2-amazon__go { font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
.hx2-amazon {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
margin-top: 0;
opacity: 0;
pointer-events: none;
transform: translateY(calc(100% + 16px));
transition: opacity .3s ease, transform .35s cubic-bezier(.2,.65,.3,1), background .2s ease, color .2s ease;
}
.hx2-product:hover .hx2-amazon,
.hx2-product:focus-within .hx2-amazon { opacity: 1; pointer-events: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hx2-amazon { transition: opacity .01ms linear, background .2s ease, color .2s ease; transform: none; }
}
.hx2-flavours__footer { display: flex; align-items: center; justify-content: center; gap: 30px; padding-top: 65px; } .hx2-routine { display: grid; min-height: 790px; grid-template-columns: 1fr 1fr; background: var(--hx2-blue); color: #fff; }
.hx2-routine__image { overflow: hidden; }
.hx2-routine__image img { width: 100%; height: 100%; object-fit: cover; }
.hx2-routine__copy { display: flex; flex-direction: column; justify-content: center; padding: 90px clamp(50px, 7vw, 120px); }
.hx2-routine__copy h2 { max-width: 650px; margin-bottom: 30px; }
.hx2-routine__copy > p:not(.hx2-eyebrow) { max-width: 660px; margin-bottom: 34px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.8; }
.hx2-routine__methods { max-width: 700px; margin-bottom: 24px; }
.hx2-routine__methods h3 { margin-bottom: 15px; color: #fff; font-size: 16px; }
.hx2-routine__methods nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hx2-routine__methods a { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; color: #fff; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.hx2-routine__methods a span { font-size: 17px; transition: transform .2s ease; }
.hx2-routine__methods a:hover, .hx2-routine__methods a:focus { color: var(--hx2-blue-dark); background: #fff; transform: translateY(-2px); }
.hx2-routine__methods a:hover span, .hx2-routine__methods a:focus span { transform: translateX(3px); }
.hx2-routine__inspiration { display: flex; max-width: 700px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-radius: 10px; color: var(--hx2-ink); background: #dfe7f5; }
.hx2-routine__inspiration > div { display: grid; gap: 5px; }
.hx2-routine__inspiration strong { font-size: 14px; }
.hx2-routine__inspiration > div > span { color: #536273; font-size: 12px; line-height: 1.5; }
.hx2-routine__inspiration .hx2-btn { flex: 0 0 auto; min-height: 48px; padding: 12px 17px; color: var(--hx2-blue-dark); }
.hx2-routine__inspiration .hx2-btn span { margin-left: 7px; } .hx2-why { padding: 140px 0; }
.hx2-why__heading { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 50px; margin-bottom: 72px; }
.hx2-why__heading .hx2-eyebrow { margin-bottom: 8px; }
.hx2-why__heading h2 { max-width: 780px; margin-bottom: 0; }
.hx2-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hx2-line); border-bottom: 1px solid var(--hx2-line); }
.hx2-why__grid article { min-height: 290px; padding: 28px 30px 34px; border-left: 1px solid var(--hx2-line); }
.hx2-why__grid article:first-child { border-left: 0; }
.hx2-why__icon {
display: flex;
width: 64px;
height: 64px;
margin-bottom: 45px;
align-items: center;
justify-content: center;
}
.hx2-why__icon img { display: block; width: auto; max-width: 64px; height: 58px; object-fit: contain; }
.hx2-why__icon .hx-benefit-icon--vegan { height: 42px; }
.hx2-why__grid h3 { margin-bottom: 16px; font-size: 20px; letter-spacing: -.02em; }
.hx2-why__grid p { margin-bottom: 0; color: #5b6063; font-size: 13px; line-height: 1.75; } .hx2-recipes { padding: 135px 0; background: #f7f7f4; }
.hx2-recipes__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; margin-bottom: 48px; }
.hx2-recipe { position: relative; display: block; min-height: 400px; overflow: hidden; border-radius: 16px; background: var(--hx2-ink); color: #fff; }
.hx2-recipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .5s ease, opacity .3s ease; } .hx2-recipe::after { position: absolute; inset: 0; background: linear-gradient(rgba(7,13,18,.05) 6%, transparent 28%, rgba(7,13,18,.5) 62%, rgba(7,13,18,.92)); content: ""; }
.hx2-recipe > span { position: absolute; right: 22px; bottom: 20px; left: 22px; z-index: 1; display: grid; gap: 9px; }
.hx2-recipe small { color: #d7e3f8; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx2-recipe strong { color: #fff; font-size: clamp(19px, 1.58vw, 23px); letter-spacing: -.02em; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hx2-recipe__stats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 2px; }
.hx2-recipe__stat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255,255,255,.17); backdrop-filter: blur(3px); color: #fff; font-size: 12px; font-weight: 600; }
.hx2-recipe__stat svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .95; } .hx2-recipe > i { position: absolute; top: 15px; right: 15px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--hx2-ink); font-style: normal; font-size: 17px; line-height: 1; transition: transform .3s ease, background .3s ease; }
.hx2-recipe:hover > i { transform: translate(2px, -2px); background: #fff; }
.hx2-recipe:hover img { opacity: 1; transform: scale(1.04); } .hx-recipes-archive { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: min(100% - 40px, 1240px); margin: 58px auto 34px; }
.hx-recipes-archive .hx2-recipe { min-height: 360px; }
@media (max-width: 900px) {
.hx-recipes-archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.hx-recipes-archive { grid-template-columns: 1fr; gap: 15px; }
.hx-recipes-archive .hx2-recipe { min-height: 280px; }
} .hx2-reviews {
position: relative;
padding: 125px 0;
overflow: hidden;
background: #f6f2e9;
}
.hx2-reviews::after {
position: absolute;
right: -130px;
bottom: -190px;
width: 430px;
height: 430px;
border-radius: 50%;
background: rgba(29, 68, 151, .07);
content: "";
pointer-events: none;
}
.hx2-reviews .hx2-wrap {
position: relative;
z-index: 1;
}
.hx2-reviews__intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 36px;
margin-bottom: 48px;
}
.hx2-reviews__intro .hx2-eyebrow {
margin-bottom: 17px;
}
.hx2-reviews__intro h2 {
max-width: 720px;
margin-bottom: 0;
}
.hx2-reviews__rating {
flex: 0 0 auto;
padding: 17px 21px;
border: 1px solid rgba(29, 68, 151, .14);
border-radius: 14px;
background: rgba(255, 255, 255, .64);
}
.hx2-stars,
.hx2-review-card__stars {
color: var(--hx2-blue);
font-family: Arial, sans-serif;
letter-spacing: .14em;
}
.hx2-stars {
margin-bottom: 5px;
font-size: 17px;
}
.hx2-reviews__rating > span {
color: #5f666b;
font-size: 11px;
font-weight: 650;
}
.hx2-review-carousel {
--hx-carousel-gap: 18px;
--hx-slides-xs: 1.08;
--hx-slides-sm: 1.18;
--hx-slides-md: 2;
--hx-slides-lg: 3;
--hx-slides-xl: 3;
}
.hx2-review-list {
padding: 2px;
overscroll-behavior-inline: contain;
}
.hx2-review-list .hx-carousel__track {
align-items: stretch;
}
.hx2-review-card {
position: relative;
display: flex;
min-height: 345px;
flex-direction: column;
justify-content: space-between;
padding: clamp(28px, 3vw, 40px);
margin: 0;
border: 0;
border-radius: 22px;
box-shadow: 0 14px 34px rgba(25, 38, 51, .07);
color: var(--hx2-ink);
font-style: normal;
}
.hx2-review-card::before {
position: absolute;
top: 25px;
right: 29px;
color: rgba(29, 68, 151, .12);
content: "\201C";
font-family: Georgia, serif;
font-size: 59px;
line-height: 1;
pointer-events: none;
}
.hx2-review-card--blue { background: #e4ecfa; }
.hx2-review-card--cocoa { background: #eee2dc; }
.hx2-review-card--cream { background: #fff; }
.hx2-review-card__stars {
position: relative;
z-index: 1;
margin-bottom: 45px;
font-size: 14px;
}
.hx2-review-card p {
position: relative;
z-index: 1;
margin-bottom: 38px;
font-size: clamp(19px, 1.55vw, 22px);
font-weight: 600;
font-style: normal;
letter-spacing: -.025em;
line-height: 1.46;
}
.hx2-review-card footer {
display: flex;
align-items: center;
gap: 12px;
color: var(--hx2-ink);
font-style: normal;
}
.hx2-review-card__avatar {
display: grid;
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 50%;
color: #fff;
background: var(--hx2-blue);
font-size: 11px;
font-weight: 750;
letter-spacing: .04em;
place-items: center;
}
.hx2-review-card footer > span:last-child {
display: grid;
gap: 3px;
}
.hx2-review-card footer strong {
font-size: 13px;
}
.hx2-review-card footer small {
color: #616a70;
font-size: 10px;
font-weight: 650;
letter-spacing: .07em;
text-transform: uppercase;
}
.hx2-review-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 28px;
}
.hx2-review-controls > div:last-child {
display: flex;
gap: 8px;
}
.hx2-review-controls .hx-carousel__nav {
position: static;
display: grid;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(16, 24, 32, .18);
border-radius: 50%;
box-shadow: none;
color: var(--hx2-ink);
background: rgba(255, 255, 255, .72);
transform: none;
place-items: center;
}
.hx2-review-controls .hx-carousel__nav:hover,
.hx2-review-controls .hx-carousel__nav:focus {
border-color: var(--hx2-blue);
color: #fff;
background: var(--hx2-blue);
}
.hx2-review-controls .hx-carousel__nav[hidden] {
display: none;
}
.hx2-review-controls .hx-carousel__dots {
position: static;
justify-content: flex-start;
padding: 0;
} .hx2-review-controls .hx-carousel__dot {
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
}
.hx2-review-controls .hx-carousel__dot::before {
width: 8px;
height: 8px;
background: rgba(29, 68, 151, .24);
}
.hx2-review-controls .hx-carousel__dot[aria-selected="true"]::before {
width: 20px;
border-radius: 20px;
background: var(--hx2-blue);
}
@media (min-width: 1025px) {
.hx2-review-controls {
display: none;
}
} .hx2-close { padding: 140px 0; background: var(--hx2-blue-dark); color: #fff; text-align: center; }
.hx2-close .hx2-eyebrow { justify-content: center; }
.hx2-close h2 { max-width: 950px; margin: 0 auto 26px; }
.hx2-close > .hx2-wrap > p:not(.hx2-eyebrow) { max-width: 620px; margin: 0 auto 38px; color: rgba(255,255,255,.73); font-size: 17px; line-height: 1.7; }
@media (max-width: 1080px) {
.hx2-hero { min-height: 660px; }
.hx2-hero__inner { min-height: 660px; }
.hx2-hero__copy { width: 52%; }
.hx2-product__media { min-height: 430px; }
.hx2-product__media img { height: 375px; }
.hx2-routine { min-height: 700px; }
.hx2-why__grid { grid-template-columns: repeat(2, 1fr); }
.hx2-why__grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--hx2-line); }
.hx2-why__grid article:nth-child(4) { border-top: 1px solid var(--hx2-line); }
}
@media (max-width: 800px) {
.hx2-wrap { width: min(100% - 36px, 1320px); }
.hx2 h2 { font-size: clamp(2.22rem, 6.59vw, 3.15rem); }
.hx2-hero { display: grid; min-height: auto; grid-template-rows: auto auto; }
.hx2-hero::after { display: none; }
.hx2-hero__image { position: relative; grid-row: 2; height: 62vw; min-height: 420px; object-position: 72% center; }
.hx2-hero__inner { min-height: 0; grid-row: 1; padding: 70px 0 62px; }
.hx2-hero__copy { width: 100%; padding: 0; }
.hx2-hero h1 { max-width: 700px; font-size: clamp(2.69rem, 7.49vw, 3.68rem); }
.hx2-proof .hx2-wrap { grid-template-columns: repeat(2, 1fr); }
.hx2-proof .hx2-wrap > div:nth-child(3) { border-top: 1px solid var(--hx2-line); border-left: 0; }
.hx2-proof .hx2-wrap > div:nth-child(4) { border-top: 1px solid var(--hx2-line); }
.hx2-intro { padding: 100px 0; }
.hx2-intro__grid, .hx2-section-head { grid-template-columns: 1fr; gap: 35px; }
.hx2-intro__copy { padding-top: 0; }
.hx2-products { grid-template-columns: 1fr 1fr; }
.hx2-product:last-child { grid-column: 1 / -1; width: calc(50% - 9px); }
.hx2-routine { grid-template-columns: 1fr; }
.hx2-routine__image { min-height: 600px; }
.hx2-routine__copy { padding: 85px 36px; }
.hx2-why__heading { grid-template-columns: 1fr; gap: 20px; }
.hx2-recipes__grid { grid-template-columns: 1fr 1fr; }
.hx2-recipe:last-child { grid-column: 1 / -1; min-height: 320px; }
.hx2-reviews .hx2-wrap { grid-template-columns: 1fr; gap: 60px; }
.hx2-reviews__intro { position: static; align-items: flex-start; flex-direction: column; gap: 24px; margin-bottom: 38px; }
}
@media (max-width: 600px) {
.hx2-wrap { width: min(100% - 28px, 1320px); }
.hx2 h2 { font-size: 2.22rem; }
.hx2-hero__inner { padding: 58px 0 54px; }
.hx2-hero h1 { font-size: 2.78rem; }
.hx2-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
.hx2-hero__image { height: 100vw; min-height: 390px; object-position: 68% center; }
.hx2-proof .hx2-wrap > div { padding: 21px 14px; }
.hx2-intro, .hx2-flavours, .hx2-why, .hx2-recipes, .hx2-reviews { padding: 82px 0; }
.hx2-section-head { margin-bottom: 48px; }
.hx2-products { grid-template-columns: 1fr; gap: 48px; }
.hx2-product:last-child { grid-column: auto; width: auto; }
.hx2-product__media { min-height: 430px; }
.hx2-product__media img { height: 390px; }
.hx2-flavours__footer { align-items: flex-start; flex-direction: column; gap: 18px; padding-top: 55px; }
.hx2-routine__image { min-height: 440px; }
.hx2-routine__copy { padding: 72px 22px; }
.hx2-routine__methods nav { grid-template-columns: 1fr; }
.hx2-routine__inspiration { align-items: stretch; flex-direction: column; }
.hx2-routine__inspiration .hx2-btn { width: 100%; }
.hx2-why__heading { margin-bottom: 48px; }
.hx2-why__grid { grid-template-columns: 1fr; }
.hx2-why__grid article { min-height: 0; padding: 25px 0 30px; border-top: 1px solid var(--hx2-line); border-left: 0; }
.hx2-why__grid article:first-child { border-top: 0; }
.hx2-why__icon { margin-bottom: 28px; }
.hx2-recipes__grid { grid-template-columns: 1fr; }
.hx2-recipe { min-height: 290px; }
.hx2-recipe:last-child { grid-column: auto; min-height: 290px; }
.hx2-review-list blockquote p { font-size: 21px; }
.hx2-reviews__rating { padding: 14px 17px; }
.hx2-review-card { min-height: 330px; }
.hx2-close { padding: 90px 0; }
} .hx2-hero { min-height: 760px; }
.hx2-hero__inner { min-height: 760px; }
.hx2-hero::after { background: linear-gradient(90deg, rgba(245,241,232,.98) 0%, rgba(245,241,232,.9) 29%, rgba(245,241,232,.25) 46%, rgba(245,241,232,0) 57%); }
.hx2-hero__image { object-position: center top; }
.hx2-hero__copy { width: min(44%, 540px); padding-block: 68px; }
.hx2-hero h1 { max-width: 520px; margin-bottom: 24px; font-size: clamp(2.88rem, 3.41vw, 3.65rem); line-height: .98; }
.hx2-hero__copy > p:not(.hx2-eyebrow) { max-width: 470px; }
.hx2-hero__rating { margin-top: 27px; color: #5f6468; font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.hx2-hero__rating span { margin-right: 8px; color: #1d4497; font-size: 12px; letter-spacing: .1em; }
.hx2-proof .hx2-wrap { max-width: 1120px; }
.hx2-proof .hx2-wrap > div {
display: flex;
min-height: 86px;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 13px;
padding: 20px;
}
.hx2-proof img {
width: auto;
max-width: 48px;
height: 48px;
object-fit: contain;
}
.hx2-proof strong { font-size: 12px; font-weight: 700; letter-spacing: .015em; }
@media (max-width: 1024px) {
.hx2-hero { min-height: 700px; }
.hx2-hero__inner { min-height: 700px; }
}
@media (max-width: 800px) {
.hx2-hero { min-height: auto; }
.hx2-hero__inner { min-height: 0; padding: 64px 0 56px; }
.hx2-hero__copy { width: 100%; padding: 0; }
.hx2-hero h1 { max-width: 570px; font-size: clamp(2.59rem, 7.79vw, 3.4rem); }
.hx2-hero__image { height: 72vw; min-height: 440px; object-position: 68% 34%; }
.hx2-proof .hx2-wrap > div { min-height: 76px; justify-content: flex-start; }
}
@media (max-width: 600px) {
.hx2-hero__inner { padding: 54px 0 50px; }
.hx2-hero h1 { font-size: 2.66rem; }
.hx2-hero__copy > p:not(.hx2-eyebrow) { font-size: 16px; }
.hx2-hero__image { height: 94vw; min-height: 390px; }
.hx2-proof .hx2-wrap > div { min-height: 72px; padding: 16px 12px; }
.hx2-proof img { max-width: 38px; height: 38px; }
.hx2-proof strong { font-size: 10px; }
}  .hx-prose .hx-recipe-grid { margin: 2rem auto; }
.hx-prose .hx-recipe-card__media { margin: 0 0 15px; text-decoration: none; }
.hx-prose .hx-recipe-card__media img { margin: 0; }
.hx-prose .hx-recipe-card__title { margin: 0 0 .25em; }
.hx-prose .hx-recipe-card__meta { margin: 0; } .hx-prose details {
margin: 0 0 12px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-media);
background: var(--hx-bg);
overflow: hidden;
}
.hx-prose summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 18px 22px;
color: var(--hx-heading);
font-weight: var(--hx-weight-heading);
line-height: var(--hx-leading-heading);
list-style: none; cursor: pointer;
transition: color var(--hx-t-ui), background-color var(--hx-t-ui);
}
.hx-prose summary::-webkit-details-marker { display: none; } .hx-prose summary:hover,
.hx-prose summary:focus-visible {
color: var(--hx-primary);
background: var(--hx-bg-alt);
} .hx-prose summary::after {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
margin-right: 2px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--hx-t-ui);
}
.hx-prose details[open] > summary {
color: var(--hx-primary);
border-bottom: 1px solid var(--hx-border);
}
.hx-prose details[open] > summary::after {
transform: rotate(-135deg); } .hx-prose details > :not(summary) { padding-inline: 22px; }
.hx-prose details > summary + * { margin-top: 18px; }
.hx-prose details > :last-child { margin-bottom: 18px; } .hx-prose .hx-linkcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin: 2rem 0 0;
}
.hx-prose .hx-linkcard {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 28px 26px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-media);
background: var(--hx-bg);
transition: transform .25s ease, box-shadow .25s ease;
}
.hx-prose .hx-linkcard:hover,
.hx-prose .hx-linkcard:focus-within {
transform: translateY(-4px);
box-shadow: var(--hx-shadow-card-hover);
}
.hx-prose .hx-linkcard h3 {
margin: 0 0 10px;
font-size: var(--hx-h4);
color: var(--hx-heading);
}
.hx-prose .hx-linkcard p {
margin: 0 0 22px;
color: var(--hx-text);
font-size: var(--hx-text-small);
line-height: var(--hx-leading);
} .hx-prose .hx-linkcard > :last-child {
margin-top: auto;
margin-bottom: 0;
} .hx-prose .hx-button,
.hx-prose .hx-button:visited {
color: var(--hx-btn-text);
text-decoration: none;
}
.hx-prose .hx-button:hover,
.hx-prose .hx-button:focus {
color: var(--hx-inverse);
} .hx-faq-page {
--hx-faq-ink: #13223a;
--hx-faq-muted: #617086;
--hx-faq-wash: #f3f6fb;
--hx-faq-line: #dfe6f0;
color: var(--hx-faq-ink);
background: var(--hx-bg);
}
.hx-faq-hero {
position: relative;
overflow: hidden;
padding: clamp(72px, 8vw, 124px) 0 clamp(64px, 7vw, 105px);
background:
radial-gradient(circle at 12% 15%, rgba(80, 125, 225, .32), transparent 27%),
linear-gradient(128deg, #0b2d72 0%, #173f93 54%, #2458b3 100%);
color: var(--hx-inverse);
}
.hx-faq-hero::after {
content: "";
position: absolute;
right: -12vw;
bottom: -24vw;
width: 54vw;
height: 54vw;
border: clamp(42px, 7vw, 110px) solid rgba(255, 255, 255, .055);
border-radius: 50%;
pointer-events: none;
}
.hx-faq-hero__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, .75fr);
align-items: center;
gap: clamp(48px, 8vw, 130px);
max-width: 1260px;
}
.hx-faq-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 42px;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
color: rgba(255, 255, 255, .68);
}
.hx-faq-breadcrumb a { color: var(--hx-inverse); text-decoration: none; }
.hx-faq-breadcrumb a:hover { text-decoration: underline; }
.hx-faq-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 15px;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.hx-faq-eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: #8fb1ff;
}
.hx-faq-hero h1 {
max-width: 720px;
margin: 0;
color: var(--hx-inverse);
font-size: clamp(2.22rem, 3.64vw, 3.5rem);
font-weight: 650;
line-height: 1.04;
letter-spacing: -.045em;
}
.hx-faq-hero__lead {
max-width: 640px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .78);
font-size: clamp(16px, 1.28vw, 19px);
line-height: 1.65;
}
.hx-faq-search {
position: relative;
display: flex;
align-items: center;
max-width: 650px;
margin-top: 34px;
color: var(--hx-faq-ink);
}
.hx-faq-search__icon {
position: absolute;
left: 21px;
z-index: 1;
color: var(--hx-primary);
}
.hx-faq-search input[type="search"] {
width: 100%;
height: 62px;
margin: 0;
padding: 0 56px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 12px;
background: var(--hx-bg);
box-shadow: 0 20px 50px rgba(1, 19, 58, .24);
color: var(--hx-faq-ink);
font: inherit;
font-size: 14px;
}
.hx-faq-search input[type="search"]:focus {
border-color: #9db9ff;
box-shadow: 0 0 0 4px rgba(157, 185, 255, .24), 0 20px 50px rgba(1, 19, 58, .24);
outline: 0;
}
.hx-faq-search__clear {
position: absolute;
right: 13px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--hx-faq-wash);
color: var(--hx-faq-muted);
cursor: pointer;
}
.hx-faq-hero__jump {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 22px;
color: var(--hx-inverse);
font-size: 13px;
font-weight: 650;
text-decoration: none;
}
.hx-faq-hero__media {
position: relative;
margin: 0;
padding: 14px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 28px;
background: rgba(255, 255, 255, .09);
box-shadow: 0 30px 70px rgba(1, 16, 47, .35);
transform: rotate(1.5deg);
}
.hx-faq-hero__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 4.35;
border-radius: 18px;
object-fit: cover;
}
.hx-faq-hero__media figcaption {
position: absolute;
right: -24px;
bottom: 34px;
display: flex;
flex-direction: column;
min-width: 148px;
padding: 17px 22px;
border-radius: 12px;
background: var(--hx-bg);
box-shadow: 0 16px 42px rgba(1, 16, 47, .25);
color: var(--hx-faq-ink);
transform: rotate(-1.5deg);
}
.hx-faq-hero__media figcaption strong { font-size: 23px; line-height: 1; }
.hx-faq-hero__media figcaption span { margin-top: 5px; color: var(--hx-faq-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.hx-faq-intro { border-bottom: 1px solid var(--hx-faq-line); background: var(--hx-faq-wash); }
.hx-faq-intro__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; max-width: 1120px; padding-top: 31px; padding-bottom: 31px; }
.hx-faq-intro p { margin: 0; color: var(--hx-faq-muted); font-size: 13px; line-height: 1.72; }
.hx-faq-ai {
position: relative;
padding: clamp(58px, 6.5vw, 88px) 0;
border-bottom: 1px solid var(--hx-faq-line);
background: var(--hx-bg);
}
.hx-faq-ai__inner { max-width: 1260px; }
.hx-faq-ai__header {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
align-items: end;
gap: clamp(40px, 8vw, 130px);
margin-bottom: 30px;
}
.hx-faq-ai .hx-faq-eyebrow { color: var(--hx-primary); }
.hx-faq-ai__header h2 {
max-width: 650px;
margin: 0;
color: var(--hx-faq-ink);
font-size: clamp(23px, 2.59vw, 33px);
line-height: 1.2;
letter-spacing: -.035em;
}
.hx-faq-ai__header > p {
margin: 0;
color: var(--hx-faq-muted);
font-size: 13px;
line-height: 1.75;
}
.hx-faq-ai__providers {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.hx-faq-ai-card {
--hx-ai-colour: var(--hx-primary);
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 20px;
align-items: center;
gap: 13px;
min-height: 82px;
padding: 16px 17px;
border: 1px solid var(--hx-faq-line);
border-radius: 15px;
background: var(--hx-bg);
box-shadow: 0 10px 28px rgba(24, 47, 87, .05);
color: var(--hx-faq-ink);
text-decoration: none;
transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hx-faq-ai-card--chatgpt { --hx-ai-colour: #087f6c; }
.hx-faq-ai-card--gemini  { --hx-ai-colour: #386bd8; }
.hx-faq-ai-card--grok    { --hx-ai-colour: #171717; }
.hx-faq-ai-card--claude  { --hx-ai-colour: #b75d3c; }
.hx-faq-ai-card:hover,
.hx-faq-ai-card:focus-visible {
border-color: color-mix(in srgb, var(--hx-ai-colour) 46%, var(--hx-faq-line));
box-shadow: 0 16px 35px rgba(24, 47, 87, .12);
color: var(--hx-faq-ink);
transform: translateY(-3px);
}
.hx-faq-ai-card:focus-visible { outline: 2px solid var(--hx-ai-colour); outline-offset: 3px; }
.hx-faq-ai-card__mark {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 13px;
background: color-mix(in srgb, var(--hx-ai-colour) 10%, white);
color: var(--hx-ai-colour);
font-size: 16px;
font-weight: 750;
}
.hx-faq-ai-card__text { display: flex; flex-direction: column; line-height: 1.2; }
.hx-faq-ai-card__text small { margin-bottom: 4px; color: var(--hx-faq-muted); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.hx-faq-ai-card__text strong { font-size: 14px; }
.hx-faq-ai-card__arrow { justify-self: end; color: var(--hx-ai-colour); transition: transform .2s ease; }
.hx-faq-ai-card:hover .hx-faq-ai-card__arrow { transform: translateX(3px); }
.hx-faq-ai__note {
display: flex;
align-items: center;
gap: 9px;
margin: 17px 0 0;
color: #616f80;
font-size: 10px;
line-height: 1.55;
}
.hx-faq-ai__note span {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 17px;
height: 17px;
border: 1px solid #b8c2d0;
border-radius: 50%;
font-family: Georgia, serif;
font-size: 11px;
font-weight: 700;
} .hx-faq-ai--hero {
max-width: 650px;
margin-top: 14px;
padding: 0;
border: 0;
background: transparent;
}
.hx-faq-ai--hero .hx-faq-ai__compact-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 8px;
color: rgba(255, 255, 255, .68);
}
.hx-faq-ai--hero .hx-faq-ai__compact-head h2 {
margin: 0;
color: #fff;
font-size: 10px;
font-weight: 750;
letter-spacing: .12em;
line-height: 1.2;
text-transform: uppercase;
}
.hx-faq-ai--hero .hx-faq-ai__compact-head span {
overflow: hidden;
font-size: 10px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.hx-faq-ai--hero .hx-faq-ai__providers {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.hx-faq-ai--hero .hx-faq-ai-card {
grid-template-columns: 24px auto;
gap: 7px;
min-height: 34px;
padding: 5px 10px 5px 6px;
border-color: rgba(255, 255, 255, .2);
border-radius: 18px;
background: rgba(255, 255, 255, .09);
box-shadow: none;
color: rgba(255, 255, 255, .9);
backdrop-filter: blur(5px);
}
.hx-faq-ai--hero .hx-faq-ai-card:hover,
.hx-faq-ai--hero .hx-faq-ai-card:focus-visible {
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .16);
box-shadow: none;
color: #fff;
transform: translateY(-1px);
}
.hx-faq-ai--hero .hx-faq-ai-card__mark {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
font-size: 10px;
}
.hx-faq-ai--hero .hx-faq-ai-card__text { display: block; }
.hx-faq-ai--hero .hx-faq-ai-card__text small,
.hx-faq-ai--hero .hx-faq-ai-card__arrow { display: none; }
.hx-faq-ai--hero .hx-faq-ai-card__text strong { color: inherit; font-size: 11px; }
.hx-faq-layout {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: clamp(45px, 7vw, 105px);
max-width: 1260px;
padding-top: clamp(60px, 7vw, 100px);
padding-bottom: clamp(75px, 9vw, 130px);
}
.hx-faq-sidebar__sticky { position: sticky; top: 115px; }
.hx-faq-sidebar__title { margin: 0 0 16px; color: var(--hx-faq-muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx-faq-topic-nav { display: grid; }
.hx-faq-topic-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 13px 0;
border-bottom: 1px solid var(--hx-faq-line);
color: var(--hx-faq-muted);
font-size: 13px;
font-weight: 550;
line-height: 1.45;
text-decoration: none;
}
.hx-faq-topic-nav a::before { content: ""; width: 0; height: 1px; margin-right: -15px; background: var(--hx-primary); transition: width .2s ease; }
.hx-faq-topic-nav a span { display: grid; flex: 0 0 auto; place-items: center; min-width: 27px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--hx-faq-wash); font-size: 10px; }
.hx-faq-topic-nav a:hover,
.hx-faq-topic-nav a.is-current { color: var(--hx-primary); }
.hx-faq-topic-nav a:hover::before,
.hx-faq-topic-nav a.is-current::before { width: 16px; }
.hx-faq-sidebar__help { margin-top: 34px; padding: 22px; border-radius: 14px; background: var(--hx-primary); color: var(--hx-inverse); }
.hx-faq-sidebar__help > .hx-icon { color: #a9c3ff; }
.hx-faq-sidebar__help p { margin: 10px 0 8px; color: var(--hx-inverse); font-size: 14px; font-weight: 650; }
.hx-faq-sidebar__help a { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, .78); font-size: 11px; font-weight: 600; text-decoration: none; }
.hx-faq-sidebar__help a:hover { color: var(--hx-inverse); }
.hx-faq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 33px; padding-bottom: 17px; border-bottom: 1px solid var(--hx-faq-line); }
.hx-faq-toolbar p { margin: 0; color: var(--hx-faq-muted); font-size: 12px; }
.hx-faq-toolbar div { display: flex; align-items: center; gap: 9px; }
.hx-faq-toolbar button { padding: 0; border: 0; background: transparent; color: var(--hx-primary); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.hx-faq-toolbar button:hover { text-decoration: underline; }
.hx-faq-section { scroll-margin-top: 115px; }
.hx-faq-section + .hx-faq-section { margin-top: clamp(54px, 7vw, 86px); }
.hx-faq-section__header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 20px; }
.hx-faq-section__header > span { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; background: #e8efff; color: var(--hx-primary); font-size: 11px; font-weight: 700; }
.hx-faq-section__header h2 { margin: 0; color: var(--hx-faq-ink); font-size: clamp(20px, 1.82vw, 26px); letter-spacing: -.025em; line-height: 1.25; }
.hx-faq-section__header p { margin: 4px 0 0; color: var(--hx-faq-muted); font-size: 11px; }
.hx-faq-list { border-top: 1px solid var(--hx-faq-line); }
.hx-faq-item,
.hx-prose .hx-faq-item { margin: 0; border: 0; border-bottom: 1px solid var(--hx-faq-line); border-radius: 0; background: transparent; overflow: visible; }
.hx-faq-item[hidden],
.hx-faq-section[hidden] { display: none; }
.hx-faq-item summary,
.hx-prose .hx-faq-item summary {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 38px;
align-items: center;
gap: 13px;
min-height: 82px;
padding: 16px 0;
border: 0;
background: transparent;
color: var(--hx-faq-ink);
list-style: none;
cursor: pointer;
}
.hx-faq-item summary::-webkit-details-marker { display: none; }
.hx-faq-item summary::after { content: none; }
.hx-faq-item summary:hover,
.hx-faq-item summary:focus-visible { color: var(--hx-primary); background: transparent; }
.hx-faq-item__number { color: #66738a; font-size: 10px; font-weight: 650; letter-spacing: .06em; }
.hx-faq-item__question { font-size: 14px; font-weight: 650; line-height: 1.5; }
.hx-faq-item__toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hx-faq-line); border-radius: 50%; color: var(--hx-primary); transition: color .2s ease, background-color .2s ease, transform .25s ease; }
.hx-faq-item[open] .hx-faq-item__toggle { background: var(--hx-primary); color: var(--hx-inverse); transform: rotate(45deg); }
.hx-faq-item[open] > summary { color: var(--hx-primary); border-bottom: 0; }
.hx-faq-item__answer,
.hx-prose .hx-faq-item__answer { padding: 0 52px 27px 47px; color: var(--hx-faq-muted); font-size: 13px; line-height: 1.78; }
.hx-prose .hx-faq-item__answer > :first-child { margin-top: 0; }
.hx-prose .hx-faq-item__answer > :last-child { margin-bottom: 0; }
.hx-prose .hx-faq-item__answer a { font-weight: 600; }
.hx-faq-empty { padding: 70px 25px; border: 1px dashed #cad5e5; border-radius: 18px; background: var(--hx-faq-wash); text-align: center; }
.hx-faq-empty > .hx-icon { color: var(--hx-primary); }
.hx-faq-empty h2 { margin: 14px 0 7px; color: var(--hx-faq-ink); font-size: 19px; }
.hx-faq-empty p { margin: 0; color: var(--hx-faq-muted); font-size: 13px; }
.hx-faq-empty button { margin-top: 18px; padding: 10px 18px; border: 1px solid var(--hx-primary); border-radius: 20px; background: transparent; color: var(--hx-primary); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.hx-faq-cta { padding: clamp(55px, 6vw, 82px) 0; background: #0d2f72; color: var(--hx-inverse); }
.hx-faq-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; max-width: 1260px; }
.hx-faq-cta h2 { margin: 0; color: var(--hx-inverse); font-size: clamp(25px, 2.59vw, 33px); letter-spacing: -.03em; }
.hx-faq-cta p:not(.hx-faq-eyebrow) { max-width: 680px; margin: 12px 0 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.7; }
.hx-faq-cta__actions { display: flex; flex: 0 0 auto; gap: 12px; }
.hx-faq-cta .hx-button { padding: 14px 24px; border: 1px solid var(--hx-inverse); border-radius: 24px; background: var(--hx-inverse); color: var(--hx-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.hx-faq-cta .hx-button:hover { background: #e9efff; color: var(--hx-primary); }
.hx-faq-cta .hx-button--outline { background: transparent; color: var(--hx-inverse); }
.hx-faq-cta .hx-button--outline:hover { background: rgba(255, 255, 255, .1); color: var(--hx-inverse); }
@media (max-width: 1024px) {
.hx-faq-hero__grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 45px; }
.hx-faq-ai__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-faq-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 45px; }
}
@media (max-width: 767px) {
.hx-faq-hero { padding: 54px 0 62px; }
.hx-faq-hero__grid { display: block; }
.hx-faq-breadcrumb { margin-bottom: 32px; }
.hx-faq-hero h1 { font-size: clamp(2.12rem, 9.24vw, 2.85rem); }
.hx-faq-hero__media { display: none; }
.hx-faq-search input[type="search"] { height: 58px; font-size: 12px; }
.hx-faq-ai--hero .hx-faq-ai__compact-head span { display: none; }
.hx-faq-intro__inner { grid-template-columns: 1fr; gap: 13px; }
.hx-faq-ai__header { grid-template-columns: 1fr; gap: 14px; }
.hx-faq-ai__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-faq-layout { display: block; padding-top: 50px; }
.hx-faq-sidebar { margin-bottom: 35px; }
.hx-faq-sidebar__sticky { position: static; }
.hx-faq-sidebar__help { display: none; }
.hx-faq-topic-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.hx-faq-topic-nav a { flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--hx-faq-line); border-radius: 20px; }
.hx-faq-topic-nav a::before,
.hx-faq-topic-nav a span { display: none; }
.hx-faq-topic-nav a.is-current { border-color: var(--hx-primary); background: var(--hx-primary); color: var(--hx-inverse); }
.hx-faq-item summary,
.hx-prose .hx-faq-item summary { grid-template-columns: 25px minmax(0, 1fr) 34px; gap: 9px; min-height: 74px; }
.hx-faq-item__question { font-size: 13px; }
.hx-faq-item__answer,
.hx-prose .hx-faq-item__answer { padding: 0 0 25px 34px; }
.hx-faq-cta__inner { display: block; }
.hx-faq-cta__actions { margin-top: 28px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
.hx-faq-ai__providers { grid-template-columns: 1fr; }
.hx-faq-ai-card { min-height: 74px; }
.hx-faq-ai--hero .hx-faq-ai__providers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-faq-ai--hero .hx-faq-ai-card { min-height: 34px; }
.hx-faq-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
.hx-faq-cta__actions { display: grid; }
.hx-faq-cta .hx-button { text-align: center; }
} .hx-prose .hx-events {
display: grid;
gap: 18px;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.hx-prose .hx-event {
display: grid;
grid-template-columns: 210px 1fr;
gap: 24px;
margin: 0;
padding: 18px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-media);
background: var(--hx-bg);
}
.hx-prose .hx-event__media {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: calc(var(--hx-radius-media) - 8px);
background: var(--hx-bg-alt);
}
.hx-prose .hx-event__media img {
width: 100%;
height: 100%;
margin: 0;
object-fit: contain; }
.hx-prose .hx-event__body {
display: flex;
flex-direction: column;
justify-content: center;
}
.hx-prose .hx-event__date {
margin-bottom: 8px;
color: var(--hx-primary);
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
letter-spacing: .08em;
text-transform: uppercase;
}
.hx-prose .hx-event__title {
margin: 0 0 12px;
font-size: var(--hx-h3);
color: var(--hx-heading);
}
.hx-prose .hx-event__meta {
margin: 0 0 6px;
font-size: var(--hx-text-small);
line-height: var(--hx-leading-heading);
color: var(--hx-text);
}
.hx-prose .hx-event__meta:last-child { margin-bottom: 0; }
.hx-prose .hx-event__meta strong { color: var(--hx-heading); }
@media (max-width: 600px) {
.hx-prose .hx-event { grid-template-columns: 1fr; gap: 14px; }
.hx-prose .hx-event__media { aspect-ratio: 16 / 9; }
} .hx-prose .hx-events-section { margin-top: 2.5rem; }
.hx-prose .hx-events-section:first-of-type { margin-top: 2rem; }
.hx-prose .hx-events-section__title {
margin: 0 0 1.1rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--hx-primary);
font-size: var(--hx-h4);
color: var(--hx-heading);
}
.hx-prose .hx-events-section--past { opacity: .92; }
.hx-prose .hx-event__media { text-decoration: none; }
.hx-prose .hx-event--nomedia { grid-template-columns: 1fr; }
.hx-prose .hx-event__title { margin: 0 0 12px; }
.hx-prose .hx-event__title a { color: var(--hx-heading); text-decoration: none; }
.hx-prose .hx-event__title a:hover,
.hx-prose .hx-event__title a:focus { color: var(--hx-primary); }
.hx-prose .hx-event__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.hx-prose .hx-event__action {
display: inline-flex;
align-items: center;
padding: 7px 16px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-pill);
background: var(--hx-bg);
color: var(--hx-heading);
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
text-decoration: none;
transition: color var(--hx-t-ui), background-color var(--hx-t-ui), border-color var(--hx-t-ui);
}
.hx-prose .hx-event__action:hover,
.hx-prose .hx-event__action:focus {
color: var(--hx-inverse);
background: var(--hx-primary);
border-color: var(--hx-primary);
}
.hx-prose .hx-event__action--primary {
color: var(--hx-inverse);
background: var(--hx-secondary);
border-color: var(--hx-secondary);
} .hx-event-single__media { margin: 0 0 1.75rem; }
.hx-event-single__media img { width: 100%; height: auto; border-radius: var(--hx-radius-media); }
.hx-event-single__meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px 24px;
margin: 0 0 1.5rem;
padding: 22px 24px;
border: 1px solid var(--hx-border);
border-radius: var(--hx-radius-media);
background: var(--hx-bg-alt);
}
.hx-event-single__meta div { margin: 0; }
.hx-event-single__meta dt {
margin: 0 0 2px;
color: var(--hx-primary);
font-size: var(--hx-text-xs);
font-weight: var(--hx-weight-heading);
letter-spacing: .06em;
text-transform: uppercase;
}
.hx-event-single__meta dd { margin: 0; color: var(--hx-heading); }
.hx-event-single__back { margin-top: 2rem; } .hx2-events { padding: 130px 0; background: #fff; }
.hx2-events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 46px; }
.hx2-event { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.hx2-event__media {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
margin-bottom: 20px;
overflow: hidden;
background: var(--hx2-cream);
}
.hx2-event__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2,.65,.3,1); }
.hx2-event:hover .hx2-event__media img { transform: scale(1.04); }
.hx2-event__date { margin-bottom: 9px; color: var(--hx2-blue); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx2-event h3 { margin: 0 0 6px; min-height: 2.4em; font-size: 20px; letter-spacing: -.025em; line-height: 1.2; }
.hx2-event p { margin: 0; color: #5c6063; font-size: 13px; }
@media (max-width: 800px) {
.hx2-events { padding: 90px 0; }
.hx2-events__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 600px) {
.hx2-events { padding: 72px 0; }
.hx2-events__grid { grid-template-columns: 1fr; gap: 42px; }
} .hx-events-page,
.hx-event-detail { background: #f7f9fc; }
.hx-events-kicker {
margin: 0 0 9px;
color: var(--hx-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.hx-event-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 17px;
border: 1px solid #ccd5e3;
border-radius: 999px;
background: #fff;
color: #172033;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.hx-event-button:hover,
.hx-event-button:focus-visible {
border-color: var(--hx-primary);
color: var(--hx-primary);
transform: translateY(-1px);
}
.hx-event-button--primary {
border-color: var(--hx-primary);
background: var(--hx-primary);
color: #fff;
}
.hx-event-button--primary:hover,
.hx-event-button--primary:focus-visible {
border-color: #173b80;
background: #173b80;
color: #fff;
}
.hx-event-button--light { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.1); color: #fff; }
.hx-event-button--light:hover,
.hx-event-button--light:focus-visible { border-color: #fff; background: #fff; color: var(--hx-primary); }
.hx-event-button--text { border-color: transparent; background: transparent; }
.hx-events-hero .hx-event-button--primary { border-color: #fff; background: #fff; color: var(--hx-primary); }
.hx-events-hero .hx-event-button--primary:hover,
.hx-events-hero .hx-event-button--primary:focus-visible { border-color: #dfe9ff; background: #dfe9ff; color: #153b82; } .hx-events-hero {
position: relative;
overflow: hidden;
padding: clamp(68px, 9vw, 118px) 0;
background:
radial-gradient(circle at 85% 20%, rgba(255,255,255,.15), transparent 28%),
linear-gradient(125deg, #153b82 0%, var(--hx-primary) 60%, #2f67c4 100%);
color: #fff;
}
.hx-events-hero::after {
content: "";
position: absolute;
right: -80px;
bottom: -150px;
width: 430px;
height: 430px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025);
}
.hx-events-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(400px, 500px); align-items: center; gap: clamp(44px, 7vw, 100px); }
.hx-events-hero__copy { max-width: 680px; }
.hx-events-hero .hx-events-kicker { color: #bcd1ff; }
.hx-events-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(39px, 4.81vw, 58px); line-height: .95; letter-spacing: -.055em; }
.hx-events-hero__copy > p:not(.hx-events-kicker) { max-width: 680px; margin: 0; color: rgba(255,255,255,.85); font-size: clamp(17px, 1.93vw, 20px); line-height: 1.65; }
.hx-events-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.hx-events-hero__calendar { min-width: 0; }
.hx-events-hero__calendar-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.hx-events-hero__calendar-head h2 { margin: 0; color: #fff; font-size: 23px; letter-spacing: -.03em; }
.hx-events-hero__calendar-head > span { max-width: 110px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 700; line-height: 1.35; text-align: right; text-transform: uppercase; }
.hx-events-hero__calendar .hx-event-calendar { padding: 24px; border: 0; box-shadow: 0 28px 70px rgba(7,25,61,.26); }
.hx-events-hero__calendar .hx-event-calendar__nav { margin-bottom: 18px; }
.hx-events-hero__calendar .hx-event-calendar__day,
.hx-events-hero__calendar .hx-event-calendar__blank { font-size: 12px; }
.hx-events-hero__calendar .hx-events-filterbar { margin: 12px 0 0; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); }
.hx-events-hero__calendar .hx-events-filterbar p,
.hx-events-hero__calendar .hx-events-filterbar button { color: #fff; }
.hx-events-page__editor { max-width: 860px; margin: 54px auto 0; } .hx-events-explorer {
display: grid;
grid-template-columns: minmax(240px, .75fr) minmax(380px, 1.25fr);
gap: clamp(36px, 7vw, 90px);
align-items: center;
max-width: 1120px;
margin: clamp(64px, 8vw, 105px) auto;
}
.hx-events-explorer__intro h2 { margin: 0 0 16px; color: var(--hx-heading); font-size: clamp(30px, 3.19vw, 42px); letter-spacing: -.04em; }
.hx-events-explorer__intro > p:last-child { margin: 0; color: #5d6878; font-size: 16px; line-height: 1.7; }
.hx-event-calendar { padding: clamp(22px, 4vw, 36px); border: 1px solid #dbe2ed; border-radius: 24px; background: #fff; box-shadow: 0 22px 65px rgba(26,48,86,.09); }
.hx-event-calendar__nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; margin-bottom: 24px; }
.hx-event-calendar__nav h3 { margin: 0; color: #172033; font-size: 20px; text-align: center; }
.hx-event-calendar__nav button { width: 40px; height: 40px; padding: 0; border: 1px solid #dbe2ed; border-radius: 50%; background: #fff; color: #172033; font-size: 18px; cursor: pointer; }
.hx-event-calendar__nav button:hover,
.hx-event-calendar__nav button:focus-visible { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-event-calendar__weekdays,
.hx-event-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hx-event-calendar__weekdays { margin-bottom: 8px; color: #8791a0; font-size: 10px; font-weight: 800; text-align: center; text-transform: uppercase; }
.hx-event-calendar__day,
.hx-event-calendar__blank { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: #596475; font: inherit; font-size: 13px; }
button.hx-event-calendar__day { cursor: pointer; }
.hx-event-calendar__day.has-events { position: relative; background: #edf3ff; color: var(--hx-primary); font-weight: 800; }
.hx-event-calendar__day.has-events::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.hx-event-calendar__day.has-events:hover,
.hx-event-calendar__day.has-events:focus-visible,
.hx-event-calendar__day.is-selected { outline: none; background: var(--hx-primary); color: #fff; }
.hx-events-filterbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: -48px; padding: 14px 18px; border: 1px solid #dbe2ed; border-radius: 12px; background: #fff; }
.hx-events-filterbar[hidden] { display: none; }
.hx-events-filterbar p { margin: 0; color: #364154; font-weight: 700; }
.hx-events-filterbar button { padding: 0; border: 0; background: none; color: var(--hx-primary); font-weight: 700; text-decoration: underline; cursor: pointer; } .hx-events-lineup { padding: clamp(70px, 8vw, 105px) 0 clamp(80px, 10vw, 140px); scroll-margin-top: 90px; }
.hx-events-section + .hx-events-section { margin-top: clamp(70px, 9vw, 110px); }
.hx-events-section[hidden] { display: none; }
.hx-events-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; padding-bottom: 17px; border-bottom: 1px solid #d9e0ea; }
.hx-events-section__head h2 { margin: 0; color: var(--hx-heading); font-size: clamp(28px, 3.25vw, 39px); letter-spacing: -.04em; }
.hx-events-section__head > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #eaf1ff; color: var(--hx-primary); font-weight: 800; }
.hx-events-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.hx-event-card {
display: grid;
grid-template-columns: 82px minmax(0, 1fr) 210px;
gap: clamp(20px, 3vw, 34px);
align-items: center;
margin: 0;
padding: 20px;
border: 1px solid #dde4ee;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 30px rgba(22,42,76,.045);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hx-event-card[hidden] { display: none; }
.hx-event-card:hover { border-color: #bdcbe1; box-shadow: 0 15px 38px rgba(22,42,76,.08); transform: translateY(-2px); }
.hx-event-card__date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 96px; border-radius: 14px; background: #edf3ff; color: var(--hx-primary); text-align: center; }
.hx-event-card__month { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hx-event-card__day { font-size: 31px; line-height: 1; letter-spacing: -.05em; }
.hx-event-card__year { margin-top: 3px; color: #60708a; font-size: 10px; }
.hx-event-card__eyebrow { margin: 0 0 6px; color: var(--hx-primary); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hx-event-card__title { margin: 0 0 8px; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.2; letter-spacing: -.025em; }
.hx-event-card__title a { color: var(--hx-heading); text-decoration: none; }
.hx-event-card__title a:hover,
.hx-event-card__title a:focus-visible { color: var(--hx-primary); }
.hx-event-card__location { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 0; color: #647083; font-size: 13px; }
.hx-event-card__location strong { color: #343f51; }
.hx-event-card__location strong + span::before { content: "· "; }
.hx-event-card__excerpt { margin: 9px 0 0; color: #5d6878; font-size: 13px; line-height: 1.55; }
.hx-event-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #f1f4f8; }
.hx-event-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.hx-event-card:hover .hx-event-card__media img { transform: scale(1.025); }
.hx-event-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hx-event-card__actions .hx-event-button { min-height: 36px; padding: 7px 13px; font-size: 11px; }
.hx-event-menu { position: relative; }
.hx-event-menu > summary { list-style: none; }
.hx-event-menu > summary::-webkit-details-marker { display: none; }
.hx-event-menu > summary::after { content: "⌄"; margin-left: 7px; font-size: 12px; }
.hx-event-menu[open] > summary { border-color: var(--hx-primary); color: var(--hx-primary); }
.hx-event-menu__items { position: absolute; z-index: 8; top: calc(100% + 7px); left: 0; display: grid; min-width: 185px; overflow: hidden; border: 1px solid #d8e0eb; border-radius: 11px; background: #fff; box-shadow: 0 14px 35px rgba(20,38,68,.16); }
.hx-event-menu__items a { padding: 11px 14px; color: #2c3748; font-size: 12px; font-weight: 700; text-decoration: none; }
.hx-event-menu__items a + a { border-top: 1px solid #edf0f5; }
.hx-event-menu__items a:hover,
.hx-event-menu__items a:focus-visible { background: #edf3ff; color: var(--hx-primary); }
.hx-events-empty { max-width: 680px; margin: 90px auto; padding: 45px; border: 1px solid #dbe2ed; border-radius: 20px; background: #fff; text-align: center; } .hx-event-detail { padding: 34px 0 clamp(80px, 9vw, 130px); }
.hx-event-detail__breadcrumb { margin-bottom: 28px; }
.hx-event-detail__breadcrumb a { color: var(--hx-primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.hx-event-detail__hero { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); overflow: hidden; border: 1px solid #dbe2ed; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(20,41,78,.09); }
.hx-event-detail__hero--no-media { grid-template-columns: 1fr; }
.hx-event-detail__media { display: grid; place-items: center; min-height: 540px; padding: clamp(24px, 4vw, 55px); background: #f0f4fa; }
.hx-event-detail__media img { width: 100%; max-height: 580px; object-fit: contain; }
.hx-event-detail__summary { align-self: center; padding: clamp(34px, 6vw, 80px); }
.hx-event-detail__summary h1 { margin: 0 0 30px; color: var(--hx-heading); font-size: clamp(32px, 3.79vw, 47px); line-height: 1.02; letter-spacing: -.05em; }
.hx-event-detail__facts { display: grid; gap: 16px; }
.hx-event-detail__facts > div { display: grid; grid-template-columns: 82px 1fr; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #e4e9f1; }
.hx-event-detail__facts span { color: #7b8697; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hx-event-detail__facts strong { color: #293446; font-size: 15px; }
.hx-event-detail__facts small { grid-column: 2; margin-top: -11px; color: #687386; }
.hx-event-detail__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.hx-event-detail__body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(40px, 7vw, 90px); margin-top: clamp(55px, 8vw, 95px); }
.hx-event-detail__content { max-width: 800px; }
.hx-event-detail__content h2,
.hx-event-detail__aside h2 { margin-top: 0; color: var(--hx-heading); font-size: clamp(26px, 2.55vw, 34px); letter-spacing: -.035em; }
.hx-event-detail__aside { align-self: start; padding: 27px; border: 1px solid #dbe2ed; border-radius: 17px; background: #fff; }
@media (max-width: 980px) {
.hx-events-hero__inner { grid-template-columns: minmax(0, .85fr) minmax(370px, 1.15fr); gap: 38px; }
.hx-events-explorer { grid-template-columns: 1fr; max-width: 680px; }
.hx-events-filterbar { margin-top: -50px; }
.hx-event-card { grid-template-columns: 76px minmax(0, 1fr) 160px; }
.hx-event-detail__hero { grid-template-columns: 1fr 1.1fr; }
.hx-event-detail__body { grid-template-columns: 1fr 270px; }
}
@media (max-width: 760px) {
.hx-events-hero { padding-block: 60px; }
.hx-events-hero__inner { display: grid; grid-template-columns: 1fr; }
.hx-events-hero__actions { align-items: stretch; flex-direction: column; }
.hx-events-hero__actions .hx-event-button { width: 100%; }
.hx-events-hero__calendar-head { margin-top: 8px; }
.hx-events-hero__calendar .hx-event-calendar { padding: 20px 16px; }
.hx-events-explorer { margin-block: 58px 76px; }
.hx-events-filterbar { align-items: flex-start; flex-direction: column; margin-top: -42px; }
.hx-event-card { grid-template-columns: 68px minmax(0, 1fr); align-items: start; padding: 15px; }
.hx-event-card__date { min-height: 78px; }
.hx-event-card__day { font-size: 26px; }
.hx-event-card__media { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; aspect-ratio: 16 / 8; }
.hx-event-card__content { grid-column: 2; }
.hx-event-card__actions { margin-left: -88px; }
.hx-event-card__actions .hx-event-button,
.hx-event-card__actions .hx-event-menu { flex: 1 1 auto; }
.hx-event-card__actions .hx-event-menu > .hx-event-button { width: 100%; }
.hx-event-menu__items { right: 0; left: auto; }
.hx-event-detail__hero { grid-template-columns: 1fr; }
.hx-event-detail__media { min-height: 0; padding: 25px; }
.hx-event-detail__media img { max-height: 420px; }
.hx-event-detail__body { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.hx-event-calendar { padding: 17px 12px; border-radius: 16px; }
.hx-event-calendar__weekdays,
.hx-event-calendar__days { gap: 2px; }
.hx-event-calendar__day.has-events::after { bottom: 3px; }
.hx-event-card__location span { flex-basis: 100%; }
.hx-event-card__location strong + span::before { content: ""; }
.hx-event-detail__summary { padding: 27px 20px 32px; }
.hx-event-detail__facts > div { grid-template-columns: 70px 1fr; }
.hx-event-detail__actions .hx-event-button { flex: 1 1 100%; }
} .hx2-hero { position: relative; overflow: hidden; min-height: 0; background: none; }
.hx2-hero::after { content: none; } .hx2-hero__track {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hx2-hero__track::-webkit-scrollbar { display: none; }
.hx2-hero__slide {
position: relative;
display: flex;
flex: 0 0 100%;
min-width: 0; align-items: center;
min-height: 660px;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.hx2-hero__slide--blue  { background: #dbe5f6; }
.hx2-hero__slide--cocoa { background: #e8ddd7; }
.hx2-hero__slide--oat   { background: #ece5d6; }
.hx2-hero__panel {
display: grid;
grid-template-columns: .82fr 1.18fr;
align-items: center;
gap: clamp(18px, 2.5vw, 42px);
width: min(100% - 40px, 1380px);
margin-inline: auto;
padding-block: 64px;
} .hx2-hero__panel > * { min-width: 0; }
.hx2-hero__copy { max-width: 560px; }
.hx2-hero__slide .hx2-eyebrow { margin-bottom: 0; }
.hx2-hero__slide h1,
.hx2-hero__slide h2 {
margin: 18px 0 20px;
color: var(--hx2-ink);
font-weight: 650;
font-size: clamp(2.44rem, 3.22vw, 3.5rem);
letter-spacing: -.045em;
line-height: .98;
}
.hx2-hero__lede {
max-width: 460px;
margin-bottom: 32px;
color: #3a3f43;
font-size: clamp(17px, 1.32vw, 20px);
line-height: 1.6;
}
.hx2-hero__rating { margin-top: 26px; }
.hx2-hero__visual {
position: relative;
display: grid;
place-items: center;
min-height: 440px;
} .hx2-hero__visual picture {
display: contents;
}
.hx2-hero__visual img {
position: relative;
z-index: 1;
width: auto;
max-width: 100%;
max-height: 560px;
object-fit: contain; filter: drop-shadow(0 20px 22px rgba(16, 24, 32, .18));
} .hx2-hero__visual::before {
content: "";
position: absolute;
width: 68%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
} .hx2-hero__nav {
position: absolute;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .82);
color: var(--hx2-ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: background .2s ease, transform .2s ease;
}
.hx2-hero__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hx2-hero__nav[hidden] { display: none; }
.hx2-hero__nav--prev { left: clamp(12px, 2vw, 28px); }
.hx2-hero__nav--next { right: clamp(12px, 2vw, 28px); } .hx2-hero__dots {
position: absolute;
bottom: 22px;
left: 50%;
z-index: 3;
display: flex;
gap: 0;
transform: translateX(-50%);
}
.hx2-hero__dots:empty { display: none; } .hx2-hero__dots .hx-carousel__dot {
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.hx2-hero__dots .hx-carousel__dot::before {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(16, 24, 32, .28);
transition: background .2s ease, transform .2s ease;
}
.hx2-hero__dots .hx-carousel__dot[aria-selected="true"]::before {
background: var(--hx2-blue);
transform: translate(-50%, -50%) scale(1.3);
}
@media (max-width: 900px) {
.hx2-hero__slide { min-height: 0; }
.hx2-hero__panel { grid-template-columns: 1fr; gap: 8px; padding-block: 44px 52px; text-align: center; }
.hx2-hero__copy { max-width: 640px; margin-inline: auto; }
.hx2-hero__lede { margin-inline: auto; }
.hx2-hero__slide .hx2-eyebrow { justify-content: center; }
.hx2-hero .hx2-actions { justify-content: center; }
.hx2-hero__visual { order: -1; min-height: 280px; }
.hx2-hero__visual img { max-height: 320px; }
.hx2-hero__slide h1,
.hx2-hero__slide h2 { font-size: clamp(2.06rem, 4.8vw, 2.56rem); }
.hx2-hero__slide h1,
.hx2-hero__slide h2,
.hx2-hero__lede { max-width: 100%; overflow-wrap: break-word; }
}
@media (max-width: 600px) {
.hx2-hero__slide h1,
.hx2-hero__slide h2 { font-size: clamp(1.78rem, 6.39vw, 2.19rem); letter-spacing: -.03em; }
.hx2-hero__slide .hx2-eyebrow { font-size: 10px; letter-spacing: .1em; }
.hx2-hero__nav { width: 38px; height: 38px; font-size: 20px; }
} .hx2-hero__slide {
background-image: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
background-blend-mode: normal;
}
.hx2-hero__slide--blue  { background-color: #dbe5f6; }
.hx2-hero__slide--cocoa { background-color: #e9ded7; }
.hx2-hero__slide--oat   { background-color: #ece5d6; }
.hx2-hero__visual img { max-height: 600px; }
.hx2-hero__visual::before { width: 74%; } .hx2-hero__visual::after {
content: "";
position: absolute;
bottom: 8%;
width: 46%;
height: 26px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(16, 24, 32, .22), rgba(16, 24, 32, 0));
} .hx2-hero__slide { min-height: calc(100vh - 254px); }
.hx2-hero__panel { padding-block: clamp(18px, 3vh, 46px); }
.hx2-hero__visual img { max-height: min(510px, calc(100vh - 348px)); } .hx2-hero__slide h1,
.hx2-hero__slide h2 { font-size: clamp(2rem, 2.8vw, 2.95rem); margin: 10px 0 16px; line-height: 1; }
.hx2-hero__lede { margin-bottom: 22px; }
.hx2-hero__rating { margin-top: 16px; } .hx2-hero__slide--all { background-color: #eef1f5; }
@media (max-width: 900px) {
.hx2-hero__slide { min-height: 0; } }
@media (max-width: 600px) {
.hx2-hero__panel { width: min(100% - 20px, 1380px); }
} .hx-recipe-single {
--hx-recipe-ink: #101820;
--hx-recipe-muted: #65707b;
--hx-recipe-line: #dfe4e8;
--hx-recipe-cream: #f5f1e8;
--hx-recipe-blue-wash: #edf3fb;
padding: 0 0 clamp(64px, 8vw, 110px);
background: #fbfbfa;
}
.hx-recipe-shell {
width: min(100% - 40px, 1280px);
margin-inline: auto;
}
.hx-recipe-breadcrumbs {
padding: 24px 0;
color: var(--hx-recipe-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
}
.hx-recipe-breadcrumbs a {
color: inherit;
}
.hx-recipe-header {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
min-height: 570px;
background: var(--hx-recipe-cream);
}
.hx-recipe-header__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(42px, 6vw, 86px);
}
.hx-recipe-kicker {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--hx-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: .15em;
line-height: 1.2;
text-transform: uppercase;
}
.hx-recipe-kicker::before {
content: none;
}
.hx-recipe-header h1 {
margin: 0;
color: var(--hx-recipe-ink);
font-size: clamp(35px, 3.42vw, 51px);
font-weight: 600;
letter-spacing: -.05em;
line-height: 1.02;
text-wrap: balance;
}
.hx-recipe-header__lede {
margin: 24px 0 0;
color: var(--hx-recipe-ink);
font-size: clamp(18px, 1.45vw, 20px);
font-weight: 500;
line-height: 1.55;
}
.hx-recipe-header__description {
margin-top: 18px;
color: var(--hx-recipe-muted);
font-size: 15px;
line-height: 1.75;
}
.hx-recipe-header__description p {
margin-bottom: .8em;
}
.hx-recipe-header__media {
min-width: 0;
margin: 0;
background: var(--hx-recipe-blue-wash);
}
.hx-recipe-header__media img {
width: 100%;
height: 100%;
min-height: 570px;
object-fit: cover;
}
.hx-recipe-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.hx-recipe-actions .hx-button--jump,
.hx-recipe-print {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 11px 20px;
border: 1px solid var(--hx-primary);
border-radius: 0;
box-shadow: none;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
.hx-recipe-actions .hx-button--jump {
flex-direction: row;
background: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-recipe-actions .hx-button--jump:hover,
.hx-recipe-actions .hx-button--jump:focus {
background: var(--hx-primary-deep);
color: var(--hx-inverse);
}
.hx-recipe-print {
background: transparent;
color: var(--hx-primary);
}
.hx-recipe-print:hover,
.hx-recipe-print:focus {
background: var(--hx-inverse);
color: var(--hx-primary-deep);
}
.hx-recipe-actions .hx-icon,
.hx-recipe-print .hx-icon {
width: 17px;
height: 17px;
}
.hx-recipe-single .hx-recipe-meta {
display: grid;
grid-template-columns: repeat(var(--hx-recipe-meta-count, 6), minmax(0, 1fr));
align-items: stretch;
padding: 0;
margin: 0 0 clamp(40px, 6vw, 76px);
background: var(--hx-primary);
color: var(--hx-inverse);
}
.hx-recipe-single .hx-recipe-meta__item {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 92px;
padding: 18px 20px;
text-align: left;
border-right: 1px solid rgba(255, 255, 255, .22);
}
.hx-recipe-single .hx-recipe-meta__item:last-child {
border-right: 0;
}
.hx-recipe-single .hx-recipe-meta dt,
.hx-recipe-single .hx-recipe-meta dd {
display: block;
}
.hx-recipe-single .hx-recipe-meta dt {
margin-bottom: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: .13em;
line-height: 1.2;
text-transform: uppercase;
opacity: .72;
}
.hx-recipe-single .hx-recipe-meta dd {
color: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
}
.hx-recipe-sheet {
display: grid;
grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
align-items: start;
gap: clamp(40px, 6vw, 78px);
max-width: 1140px;
margin-inline: auto;
}
.hx-recipe-sheet__aside {
position: sticky;
top: calc(var(--hx-header-main-h-sticky) + 28px);
}
.hx-recipe-single .hx-recipe-ingredients {
display: block;
padding: clamp(26px, 3vw, 38px);
background: var(--hx-recipe-blue-wash);
}
.hx-recipe-ingredients__header {
display: block;
padding-bottom: 20px;
margin-bottom: 22px;
border-bottom: 1px solid #ced9e7;
}
.hx-recipe-section-heading > span {
display: block;
margin-bottom: 7px;
color: var(--hx-primary);
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.2;
text-transform: uppercase;
}
.hx-recipe-section-heading h2,
.hx-recipe-instructions > .hx-recipe-section-heading h2 {
margin: 0;
color: var(--hx-recipe-ink);
font-size: clamp(26px, 2.55vw, 34px);
font-weight: 600;
letter-spacing: -.035em;
line-height: 1.1;
}
.hx-recipe-single .hx-recipe-ingredients__scale {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 0;
padding: 13px;
margin: 20px 0 0;
border-radius: 8px;
background: rgba(255, 255, 255, .82);
}
.hx-recipe-single .hx-recipe-ingredients__scale label {
flex: 1 0 100%;
margin: 0;
color: var(--hx-recipe-ink);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.hx-servings-control {
display: grid;
grid-template-columns: 38px 46px 38px;
align-items: stretch;
border: 1px solid #bdc9d7;
border-radius: 7px;
overflow: hidden;
background: #fff;
}
.hx-recipe-single .hx-servings-control__button {
display: grid;
width: 38px;
height: 40px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--hx-primary);
background: #fff;
font-size: 20px;
font-weight: 600;
line-height: 1;
place-items: center;
}
.hx-recipe-single .hx-servings-control__button:hover,
.hx-recipe-single .hx-servings-control__button:focus {
color: #fff;
background: var(--hx-primary);
}
.hx-recipe-single .hx-servings-control__button:disabled {
color: #9da7b0;
background: #f4f6f8;
cursor: not-allowed;
}
.hx-recipe-single .hx-servings-input {
width: 46px;
height: 40px;
padding: 5px 2px;
border: 0;
border-right: 1px solid #d8dfe6;
border-left: 1px solid #d8dfe6;
border-radius: 0;
color: var(--hx-recipe-ink);
background: #fff;
font-weight: 700;
text-align: center;
-moz-appearance: textfield;
}
.hx-recipe-single .hx-servings-input::-webkit-inner-spin-button,
.hx-recipe-single .hx-servings-input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
.hx-servings-person {
color: var(--hx-recipe-muted);
font-size: 12px;
font-weight: 600;
}
.hx-recipe-single .hx-ingredient-list li {
align-items: flex-start;
gap: 10px;
padding-block: 10px;
color: #34404c;
font-size: 14px;
line-height: 1.6;
border-bottom: 1px solid rgba(29, 68, 151, .12);
}
.hx-recipe-single .hx-ingredient-list li + li {
margin-top: 0;
}
.hx-recipe-single .hx-icon--check {
width: 15px;
height: 15px;
margin: 4px 0 0;
}
.hx-recipe-single .hx-ingredient__qty {
color: var(--hx-recipe-ink);
}
.hx-recipe-single .hx-ingredient__note {
display: block;
color: var(--hx-recipe-muted);
font-size: 12px;
}
.hx-recipe-product {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 18px;
margin-top: 20px;
padding: 20px;
background: var(--hx-recipe-ink);
color: var(--hx-inverse);
}
.hx-recipe-product__media {
align-self: center;
background: var(--hx-inverse);
}
.hx-recipe-product__media img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
}
.hx-recipe-product__eyebrow {
display: block;
margin-bottom: 7px;
font-size: 8px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
opacity: .62;
}
.hx-recipe-product__title {
margin: 0 0 7px;
font-size: 14px;
line-height: 1.35;
}
.hx-recipe-product__title a {
color: var(--hx-inverse);
}
.hx-recipe-product__price {
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
}
.hx-recipe-product__form {
margin: 0;
}
.hx-recipe-product .hx-recipe-product__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 9px 12px;
background: var(--hx-primary);
border: 0;
border-radius: 0;
box-shadow: none;
color: var(--hx-inverse);
font-size: 11px;
font-weight: 700;
line-height: 1.25;
text-decoration: none;
}
.hx-recipe-product .hx-recipe-product__button:hover,
.hx-recipe-product .hx-recipe-product__button:focus {
background: var(--hx-inverse);
color: var(--hx-recipe-ink);
}
.hx-recipe-single .hx-recipe-instructions {
padding: 0;
background: transparent;
}
.hx-recipe-instructions > .hx-recipe-section-heading {
padding-bottom: 24px;
margin-bottom: 8px;
border-bottom: 1px solid var(--hx-recipe-line);
}
.hx-recipe-single .hx-step {
position: relative;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
padding: 26px 0;
border-bottom: 1px solid var(--hx-recipe-line);
}
.hx-recipe-single .hx-step + .hx-step {
margin-top: 0;
}
.hx-recipe-single .hx-step__title,
.hx-recipe-single .hx-step__body {
grid-column: 2;
}
.hx-recipe-single .hx-step__title {
display: block;
margin: 0 0 8px;
font-size: 20px;
letter-spacing: -.02em;
}
.hx-recipe-single .hx-step__num {
position: absolute;
top: 24px;
left: 0;
width: 36px;
height: 36px;
margin: 0;
background: var(--hx-primary);
border-radius: 0;
font-size: 13px;
}
.hx-recipe-single .hx-step__body {
color: #46515c;
font-size: 16px;
line-height: 1.8;
}
.hx-recipe-single .hx-step__body p:last-child {
margin-bottom: 0;
}
.hx-recipe-notes,
.hx-recipe-nutrition-panel {
margin-top: 36px;
}
.hx-recipe-notes {
padding: 30px;
background: var(--hx-recipe-cream);
}
.hx-recipe-notes h2,
.hx-recipe-nutrition-panel h2 {
margin: 0 0 16px;
color: var(--hx-recipe-ink);
font-size: 22px;
letter-spacing: -.02em;
}
.hx-recipe-single .hx-recipe-note {
padding: 0;
}
.hx-recipe-single .hx-recipe-keywords {
margin-top: 18px;
color: var(--hx-recipe-muted);
font-size: 12px;
}
.hx-recipe-single .hx-recipe-nutrition {
margin: 0;
}
.hx-recipe-single .hx-recipe-nutrition img {
max-width: 720px;
}
.hx-recipe-single > .hx-recipe > .hx-recipe-shell > .entry-content {
max-width: 760px;
margin: 60px auto 0;
}
.hx-recipe-more {
margin-top: clamp(72px, 9vw, 120px);
padding: clamp(68px, 8vw, 105px) 0;
background: var(--hx-recipe-cream);
}
.hx-recipe-more__inner {
width: min(100% - 40px, 1200px);
margin-inline: auto;
}
.hx-recipe-more__header {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
align-items: end;
gap: 50px;
margin-bottom: 38px;
}
.hx-recipe-more__header span {
display: block;
margin-bottom: 12px;
color: var(--hx-primary);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.hx-recipe-more__header h2 {
max-width: 760px;
margin: 0;
color: var(--hx-recipe-ink);
font-size: clamp(30px, 3.17vw, 43px);
letter-spacing: -.04em;
line-height: 1.08;
overflow-wrap: anywhere;
text-wrap: balance;
}
.hx-recipe-more__header p {
margin: 0 0 4px;
color: var(--hx-recipe-muted);
font-size: 15px;
line-height: 1.7;
}
.hx-recipe-more__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.hx-recipe-more__grid .hx2-recipe {
min-height: 360px;
}
.hx-recipe-more__link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 32px;
padding: 14px 20px;
border-radius: 4px;
color: #fff;
background: var(--hx-primary);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.hx-recipe-more__link span {
font-size: 18px;
transition: transform .2s ease;
}
.hx-recipe-more__link:hover,
.hx-recipe-more__link:focus {
color: #fff;
background: var(--hx-primary-deep);
}
.hx-recipe-more__link:hover span,
.hx-recipe-more__link:focus span {
transform: translateX(3px);
}
@media (max-width: 1024px) {
.hx-recipe-header {
min-height: 520px;
}
.hx-recipe-header__content {
padding: 44px;
}
.hx-recipe-header__media img {
min-height: 520px;
}
.hx-recipe-single .hx-recipe-meta {
grid-template-columns: repeat(3, 1fr);
}
.hx-recipe-single .hx-recipe-meta__item:nth-child(3n) {
border-right: 0;
}
.hx-recipe-single .hx-recipe-meta__item:nth-child(-n+3) {
border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.hx-recipe-sheet {
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
gap: 42px;
}
.hx-recipe-product {
grid-template-columns: 86px minmax(0, 1fr);
padding: 16px;
}
}
@media (max-width: 820px) {
.hx-recipe-shell {
width: min(100% - 32px, 720px);
}
.hx-recipe-header {
grid-template-columns: 1fr;
}
.hx-recipe-header__media {
grid-row: 1;
}
.hx-recipe-header__media img {
min-height: 0;
aspect-ratio: 16 / 10;
}
.hx-recipe-header__content {
padding: clamp(34px, 7vw, 54px);
}
.hx-recipe-sheet {
grid-template-columns: 1fr;
max-width: 700px;
}
.hx-recipe-sheet__aside {
position: static;
}
.hx-recipe-product {
grid-template-columns: 110px minmax(0, 1fr);
}
.hx-recipe-more__header {
grid-template-columns: 1fr;
gap: 18px;
}
.hx-recipe-more__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hx-recipe-more__grid .hx2-recipe:last-child {
grid-column: 1 / -1;
min-height: 300px;
}
}
@media (max-width: 560px) {
.hx-recipe-shell {
width: 100%;
}
.hx-recipe-breadcrumbs {
padding: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hx-recipe-header__media img {
aspect-ratio: 4 / 3;
}
.hx-recipe-header__content {
padding: 34px 20px 38px;
}
.hx-recipe-header h1 {
font-size: clamp(33px, 9.58vw, 42px);
overflow-wrap: anywhere;
text-wrap: wrap;
}
.hx-recipe-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.hx-recipe-actions .hx-button--jump,
.hx-recipe-print {
width: 100%;
padding-inline: 12px;
}
.hx-recipe-single .hx-recipe-meta {
grid-template-columns: repeat(2, 1fr);
margin-bottom: 32px;
}
.hx-recipe-single .hx-recipe-meta__item,
.hx-recipe-single .hx-recipe-meta__item:nth-child(3n) {
min-height: 78px;
padding: 14px 18px;
border-right: 1px solid rgba(255, 255, 255, .22);
border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.hx-recipe-single .hx-recipe-meta__item:nth-child(2n) {
border-right: 0;
}
.hx-recipe-sheet {
width: calc(100% - 32px);
gap: 28px;
margin-inline: 16px;
}
.hx-recipe-single .hx-recipe-ingredients {
padding: 26px 20px;
}
.hx-recipe-ingredients__header {
align-items: center;
}
.hx-recipe-section-heading h2,
.hx-recipe-instructions > .hx-recipe-section-heading h2 {
font-size: 27px;
}
.hx-recipe-product {
grid-template-columns: 92px minmax(0, 1fr);
margin-inline: 0;
}
.hx-recipe-sheet__main {
padding-inline: 0;
}
.hx-recipe-single .hx-step {
grid-template-columns: 44px minmax(0, 1fr);
}
.hx-recipe-single .hx-step__title,
.hx-recipe-single .hx-step__body {
grid-column: 2;
}
.hx-recipe-notes {
padding: 24px;
}
.hx-recipe-more {
margin-top: 68px;
padding: 60px 0 66px;
}
.hx-recipe-more__inner {
width: 100%;
}
.hx-recipe-more__header,
.hx-recipe-more__link {
margin-right: 16px;
margin-left: 16px;
}
.hx-recipe-more__grid {
display: flex;
gap: 12px;
padding: 0 16px 8px;
overflow-x: auto;
scroll-padding-inline: 16px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hx-recipe-more__grid::-webkit-scrollbar {
display: none;
}
.hx-recipe-more__grid .hx2-recipe,
.hx-recipe-more__grid .hx2-recipe:last-child {
flex: 0 0 82%;
min-height: 315px;
grid-column: auto;
scroll-snap-align: start;
}
.hx-recipe-more__link {
justify-content: center;
width: calc(100% - 32px);
margin-top: 24px;
white-space: normal;
}
}
@media print {
@page {
margin: .5in;
}
body.single-recipe {
background: #fff !important;
color: #000;
font-size: 10pt;
}
body.single-recipe .site-header,
body.single-recipe .site-footer,
body.single-recipe .hx-navbar,
body.single-recipe .hx-recipe-breadcrumbs,
body.single-recipe .hx-recipe-actions,
body.single-recipe .hx-recipe-product,
body.single-recipe .hx-recipe-more,
body.single-recipe .pressmart-mask-overaly,
body.single-recipe .tawk-min-container {
display: none !important;
}
body.single-recipe .site-wrapper,
body.single-recipe .hx-recipe-single,
body.single-recipe .hx-recipe-shell,
body.single-recipe .hx-recipe {
display: block;
width: 100%;
max-width: none;
padding: 0;
margin: 0;
background: #fff !important;
}
body.single-recipe .hx-recipe-header {
display: grid;
grid-template-columns: 1fr 220px;
min-height: 0;
margin-bottom: 12pt;
background: #fff !important;
border-bottom: 2px solid #1d4497;
}
body.single-recipe .hx-recipe-header__content {
display: block;
padding: 0 18pt 12pt 0;
}
body.single-recipe .hx-recipe-header h1 {
font-size: 28pt;
line-height: 1.05;
}
body.single-recipe .hx-recipe-header__lede {
margin-top: 8pt;
font-size: 12pt;
}
body.single-recipe .hx-recipe-header__description {
margin-top: 6pt;
font-size: 9pt;
line-height: 1.4;
}
body.single-recipe .hx-recipe-header__media img {
height: 170px;
min-height: 0;
object-fit: cover;
}
body.single-recipe .hx-recipe-meta {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin: 0 0 16pt;
background: #fff !important;
color: #000;
border: 1px solid #999;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body.single-recipe .hx-recipe-meta__item {
min-height: 0;
padding: 7pt;
border-right: 1px solid #bbb;
border-bottom: 0;
}
body.single-recipe .hx-recipe-meta dt {
font-size: 6.5pt;
opacity: 1;
}
body.single-recipe .hx-recipe-meta dd {
font-size: 9pt;
}
body.single-recipe .hx-recipe-sheet {
display: grid;
grid-template-columns: 34% 1fr;
gap: 22pt;
max-width: none;
}
body.single-recipe .hx-recipe-sheet__aside {
position: static;
}
body.single-recipe .hx-recipe-ingredients {
padding: 14pt;
background: #f1f4f8 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body.single-recipe .hx-recipe-ingredients__header {
padding-bottom: 8pt;
margin-bottom: 8pt;
}
body.single-recipe .hx-recipe-section-heading h2,
body.single-recipe .hx-recipe-instructions > .hx-recipe-section-heading h2 {
font-size: 18pt;
}
body.single-recipe .hx-recipe-ingredients__scale {
display: none;
}
body.single-recipe .hx-ingredient-list li {
padding-block: 4pt;
font-size: 8.5pt;
line-height: 1.35;
break-inside: avoid;
}
body.single-recipe .hx-step {
grid-template-columns: 30px 1fr;
padding: 10pt 0;
break-inside: avoid;
}
body.single-recipe .hx-step__num {
top: 9pt;
width: 22px;
height: 22px;
font-size: 8pt;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body.single-recipe .hx-step__title,
body.single-recipe .hx-step__body {
grid-column: 2;
}
body.single-recipe .hx-step__title {
font-size: 12pt;
}
body.single-recipe .hx-step__body {
font-size: 9pt;
line-height: 1.45;
}
body.single-recipe .hx-recipe-notes,
body.single-recipe .hx-recipe-nutrition-panel {
margin-top: 16pt;
break-inside: avoid;
}
body.single-recipe .hx-recipe-notes {
padding: 12pt;
background: #f7f3ea !important;
}
body.single-recipe .hx-recipe-nutrition img {
max-height: 320px;
width: auto;
}
} .hx-partner-hero--apply .hx-partner-hero__grid {
grid-template-columns: minmax(0, .82fr) minmax(430px, 1fr);
align-items: start;
}
.hx-partner-hero__form {
min-width: 0;
}
.hx-partner-hero--apply .hx-partner-hero__copy {
padding-top: 8px;
} .hx-partner-form__head {
margin-bottom: 20px;
}
.hx-partner-form__head .hx-partner-eyebrow {
margin-bottom: 10px;
}
.hx-partner-form__head h2 {
margin: 0 0 9px;
font-size: clamp(21px, 2vw, 26px);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
}
.hx-partner-form__head p {
margin: 0;
color: #56626f;
font-size: 14.5px;
line-height: 1.6;
} .hx-partner-hero--apply .hx-wholesale-form__grid {
grid-template-columns: 1fr;
} .hx-partner-checks--card,
.hx-application-steps--card {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--hx-partner-line);
}
.hx-application-steps--card {
margin-bottom: 0;
}
.hx-application-steps--card li:last-child {
padding-bottom: 0;
}
@media (max-width: 1024px) {
.hx-partner-hero--apply .hx-partner-hero__grid {
grid-template-columns: minmax(0, .82fr) minmax(340px, 1fr);
gap: 34px;
}
}
@media (max-width: 767px) { .hx-partner-hero--apply .hx-partner-hero__grid {
grid-template-columns: minmax(0, 1fr);
}
.hx-partner-hero--apply .hx-partner-hero__copy,
.hx-partner-hero--apply .hx-partner-hero__form {
min-width: 0;
max-width: 100%;
} .hx-partner-hero--apply {
padding: 34px 0 44px;
}
.hx-partner-hero--apply h1 {
margin-bottom: 16px;
font-size: clamp(28px, 7.8vw, 38px);
}
.hx-partner-hero--apply .hx-partner-hero__copy > p {
margin-bottom: 18px;
font-size: 16px;
}
.hx-partner-hero--apply .hx-partner-hero__grid {
gap: 26px;
}
} .hx-login { display: flex; justify-content: center; padding: clamp(20px, 4vw, 56px) 0; }
.hx-login__card {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
width: 100%;
max-width: 940px;
overflow: hidden;
border-radius: 22px;
box-shadow: 0 30px 80px rgba(20, 33, 45, .16);
background: #fff;
}
.hx-login__aside {
display: flex;
flex-direction: column;
padding: clamp(28px, 3.2vw, 46px);
color: #fff;
background: linear-gradient(160deg, var(--hx-partner-blue-deep, #10245f) 0%, var(--hx2-blue, #1d4497) 100%);
}
.hx-login .hx-login__logo { width: auto !important; max-width: 148px; height: auto; margin-bottom: 24px; }
.hx-login__aside-title { margin: 0 0 8px; color: #fff !important; font-size: clamp(22px, 2.08vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.hx-login__aside-sub { margin: 0 0 28px; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.6; }
.hx-login__benefits { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.hx-login__benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.hx-login__benefits svg { flex: 0 0 auto; width: 22px; height: 22px; color: #cfe0ff; }
.hx-login__benefits span { padding-top: 1px; }
.hx-login__main { position: relative; padding: clamp(26px, 3vw, 44px); } .hx-login__main form.login,
.hx-login__main form.register { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.hx-auth__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hx-auth__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 26px;
padding: 5px;
border-radius: 999px;
background: #eef1f6;
}
.hx-auth__tab {
padding: 10px;
border-radius: 999px;
color: #5a6472;
font-size: 14px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.hx-auth__radio--login:checked ~ .hx-auth__tabs .hx-auth__tab[for="hx-auth-login"],
.hx-auth__radio--register:checked ~ .hx-auth__tabs .hx-auth__tab[for="hx-auth-register"] {
color: var(--hx2-blue, #1d4497);
background: #fff;
box-shadow: 0 2px 7px rgba(20, 33, 45, .13);
}
.hx-auth__panel--register { display: none; }
.hx-auth__radio--register:checked ~ .hx-auth__panel--register { display: block; }
.hx-auth__radio--register:checked ~ .hx-auth__panel--login { display: none; }
.hx-auth__head h1 { margin: 0 0 6px; font-size: clamp(20px, 1.94vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.hx-auth__head p { margin: 0 0 22px; color: #5a6472; font-size: 14.5px; }
.hx-login .form-row { display: block; margin: 0 0 15px; }
.hx-login .form-row > label { display: block; margin-bottom: 7px; color: #28313c; font-size: 13px; font-weight: 600; }
.hx-login input[type="text"],
.hx-login input[type="email"],
.hx-login input[type="password"] {
width: 100%;
min-height: 52px;
padding: 12px 15px;
border: 1px solid #cfd7df;
border-radius: 10px;
font-size: 15px;
color: #1a2230;
background: #fff;
}
.hx-login input:focus { border-color: var(--hx2-blue, #1d4497); box-shadow: 0 0 0 3px rgba(29, 68, 151, .12); outline: none; }
.hx-auth__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.hx-auth__remember { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: #3a434e; cursor: pointer; }
.hx-auth__remember input { width: auto !important; min-height: 0 !important; margin: 0; }
.hx-auth__lost { font-size: 13px; color: var(--hx2-blue, #1d4497); text-decoration: none; white-space: nowrap; }
.hx-auth__lost:hover { text-decoration: underline; }
.hx-login .hx-auth__submit {
width: 100%;
min-height: 54px;
margin-top: 18px;
border: 0 !important;
border-radius: 10px;
color: #fff !important;
font-size: 15.5px;
font-weight: 700;
background: var(--hx2-blue, #1d4497) !important;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.hx-login .hx-auth__submit:hover,
.hx-login .hx-auth__submit:focus { background: var(--hx-primary-hover, #16367a) !important; transform: translateY(-1px); }
.hx-auth__note { margin: 0 0 6px; color: #5a6472; font-size: 13.5px; }
.hx-auth__switch { margin: 18px 0 0; color: #5a6472; font-size: 14px; text-align: center; }
.hx-auth__switch label { color: var(--hx2-blue, #1d4497); font-weight: 600; cursor: pointer; }
.hx-auth__switch label:hover { text-decoration: underline; } .hx-login .woocommerce-password-hint { display: block; margin-top: 6px; font-size: 12px; color: #7a828d; }
.hx-login .password-input { display: block; position: relative; }
.hx-login .show-password-input { position: absolute; top: 15px; right: 14px; }
@media (max-width: 767px) {
.hx-login__card { grid-template-columns: 1fr; max-width: 460px; border-radius: 18px; }
.hx-login__aside { padding: 24px 22px 22px; }
.hx-login .hx-login__logo { max-width: 104px; margin-bottom: 14px; }
.hx-login__aside-sub { margin-bottom: 18px; }
.hx-login__benefits { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.hx-login__benefits li { font-size: 12.5px; }
}
@media (max-width: 420px) {
.hx-login__benefits { grid-template-columns: 1fr; }
} .hx2-why__grid { --hx2-spot: 13s; --hx2-spot-dim: .88; }
.hx2-why__grid article {
opacity: var(--hx2-spot-dim);
transition: opacity .45s ease, background-color .45s ease;
animation: hx2-why-spot var(--hx2-spot) ease-in-out infinite both;
}
.hx2-why__grid .hx2-why__icon {
animation: hx2-why-icon var(--hx2-spot) ease-in-out infinite both;
}
.hx2-why__grid article:nth-child(1),
.hx2-why__grid article:nth-child(1) .hx2-why__icon { animation-delay: 0s; }
.hx2-why__grid article:nth-child(2),
.hx2-why__grid article:nth-child(2) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) / -4); }
.hx2-why__grid article:nth-child(3),
.hx2-why__grid article:nth-child(3) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) / -2); }
.hx2-why__grid article:nth-child(4),
.hx2-why__grid article:nth-child(4) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -0.75); }
@keyframes hx2-why-spot {
0%   { opacity: 1; background-color: rgba(29, 68, 151, .08); }
21%  { opacity: 1; background-color: rgba(29, 68, 151, .08); }
27%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
94%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
100% { opacity: 1; background-color: rgba(29, 68, 151, .08); }
}
@keyframes hx2-why-icon {
0%   { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
21%  { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
27%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
94%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
100% { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
} .hx2-why__grid:hover article,
.hx2-why__grid:hover article .hx2-why__icon { animation-play-state: paused; }
.hx2-why__grid:hover article { opacity: var(--hx2-spot-dim) !important; background-color: transparent !important; }
.hx2-why__grid:hover article .hx2-why__icon { border-color: #dbe4f4 !important; background-color: #f4f7fc !important; transform: none !important; }
.hx2-why__grid article:hover { opacity: 1 !important; background-color: rgba(29, 68, 151, .08) !important; }
.hx2-why__grid article:hover .hx2-why__icon { border-color: #9fb6e2 !important; background-color: #e7eefb !important; transform: translateY(-3px) scale(1.06) !important; }
@media (prefers-reduced-motion: reduce) {
.hx2-why__grid article,
.hx2-why__grid .hx2-why__icon { animation: none; }
.hx2-why__grid article { opacity: 1; }
} .hx-ship { --ship-blue: var(--hx2-blue, #1d4497); --ship-ink: #16202a; --ship-line: #e5e9f2; --ship-mut: #5a6472; color: var(--ship-ink); padding-bottom: 0; } .hx-ship .hx-ship-cta:last-child { margin-bottom: 0; }
.hx-ship-hero { padding: clamp(34px, 5vw, 66px) 0 clamp(26px, 3vw, 38px); background: linear-gradient(160deg, #f6f8fd 0%, #fff 70%); border-bottom: 1px solid var(--ship-line); }
.hx-ship-crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13px; color: var(--ship-mut); }
.hx-ship-crumbs a { color: var(--ship-blue); text-decoration: none; }
.hx-ship-crumbs a:hover { text-decoration: underline; }
.hx-ship-eyebrow { margin: 0 0 10px; color: var(--ship-blue); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hx-ship-hero h1 { margin: 0 0 12px; font-size: clamp(27px, 3.58vw, 39px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.hx-ship-lede { max-width: 640px; margin: 0 0 12px; color: var(--ship-mut); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; }
.hx-ship-updated { margin: 0; font-size: 13px; color: #8a929c; }
.hx-ship-facts { margin-top: clamp(-26px, -2vw, -18px); position: relative; z-index: 1; padding-bottom: clamp(24px, 3vw, 40px); }
.hx-ship-facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hx-ship-fact { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid var(--ship-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 36px rgba(20, 33, 45, .06); }
.hx-ship-fact__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; color: var(--ship-blue); background: rgba(29, 68, 151, .08); }
.hx-ship-fact__icon svg { width: 23px; height: 23px; stroke-width: 1.85; }
.hx-ship-fact strong { display: block; font-size: 15px; line-height: 1.25; }
.hx-ship-fact span { display: block; margin-top: 3px; color: var(--ship-mut); font-size: 13px; }
.hx-ship-body { padding: clamp(8px, 2vw, 20px) 0 clamp(48px, 6vw, 88px); }
.hx-ship-section-head { margin-bottom: 20px; }
.hx-ship-section-head h2 { margin: 6px 0 0; font-size: clamp(20px, 2.02vw, 25px); font-weight: 700; letter-spacing: -.015em; }
.hx-ship-rates { margin-bottom: clamp(34px, 4vw, 56px); }
.hx-ship-table-wrap { overflow-x: auto; border: 1px solid var(--ship-line); border-radius: 14px; }
.hx-ship-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.hx-ship-table th, .hx-ship-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--ship-line); }
.hx-ship-table thead th { background: #f6f8fd; color: var(--ship-ink); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.hx-ship-table tbody tr:last-child th, .hx-ship-table tbody tr:last-child td { border-bottom: 0; }
.hx-ship-table tbody th { font-weight: 600; color: var(--ship-ink); }
.hx-ship-table tbody td:nth-child(2) { font-weight: 700; }
.hx-ship-note { margin: 12px 2px 0; color: var(--ship-mut); font-size: 13px; line-height: 1.6; }
.hx-ship-layout { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hx-ship-toc__sticky { position: sticky; top: 96px; }
.hx-ship-toc__title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ship-mut); }
.hx-ship-toc__nav { display: flex; flex-direction: column; border-left: 2px solid var(--ship-line); }
.hx-ship-toc__nav a { padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ship-mut); font-size: 13.5px; line-height: 1.35; text-decoration: none; transition: color .15s, border-color .15s; }
.hx-ship-toc__nav a:hover { color: var(--ship-blue); border-left-color: var(--ship-blue); }
.hx-ship-toc__help { margin-top: 22px; padding: 16px; border-radius: 12px; background: #f6f8fd; }
.hx-ship-toc__help p { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.hx-ship-toc__help a { color: var(--ship-blue); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.hx-ship-toc__help a:hover { text-decoration: underline; }
.hx-ship-item { border: 1px solid var(--ship-line); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.hx-ship-item > summary { display: flex; align-items: center; gap: 16px; padding: 17px 20px; list-style: none; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ship-ink); }
.hx-ship-item > summary::-webkit-details-marker { display: none; }
.hx-ship-item__q { flex: 1 1 auto; }
.hx-ship-item__toggle { flex: 0 0 auto; position: relative; width: 20px; height: 20px; }
.hx-ship-item__toggle::before, .hx-ship-item__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--ship-blue); transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease; }
.hx-ship-item__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.hx-ship-item[open] .hx-ship-item__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.hx-ship-item[open] > summary { border-bottom: 1px solid var(--ship-line); }
.hx-ship-item__a { padding: 4px 20px 20px; color: var(--ship-mut); font-size: 15px; line-height: 1.7; }
.hx-ship-item__a p { margin: 12px 0 0; }
.hx-ship-item__a a { color: var(--ship-blue); }
.hx-ship-cta { margin-top: 6px; padding: clamp(34px, 4vw, 56px) 0; background: linear-gradient(155deg, var(--hx-partner-blue-deep, #10245f) 0%, var(--hx2-blue, #1d4497) 100%); color: #fff; }
.hx-ship-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.hx-ship-cta h2 { margin: 6px 0 8px; color: #fff; font-size: clamp(21px, 2.19vw, 26px); font-weight: 700; }
.hx-ship-cta p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 15px; }
.hx-ship-eyebrow--light { color: #bcd0ff; }
.hx-ship-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hx-ship-cta .hx-button--primary { background: #fff; color: var(--hx2-blue, #1d4497); border-color: #fff; }
.hx-ship-cta .hx-button--primary:hover { background: #eef2fb; }
.hx-ship-cta .hx-button--quiet { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.hx-ship-cta .hx-button--quiet:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 900px) {
.hx-ship-facts__grid { grid-template-columns: repeat(2, 1fr); }
.hx-ship-layout { grid-template-columns: 1fr; }
.hx-ship-toc { display: none; }
}
@media (max-width: 520px) {
.hx-ship-facts__grid { grid-template-columns: 1fr; }
.hx-ship-cta__inner { flex-direction: column; align-items: flex-start; }
} .hx-learn { --learn-blue: var(--hx2-blue, #1d4497); --learn-ink: #16202a; --learn-line: #e5e9f2; --learn-mut: #5a6472; color: var(--learn-ink); padding-bottom: 0; }
.hx-learn-hero { padding: clamp(34px, 5vw, 64px) 0 clamp(20px, 3vw, 30px); background: linear-gradient(160deg, #f6f8fd 0%, #fff 70%); }
.hx-learn-lede { max-width: 680px; margin: 0 0 12px; color: var(--learn-mut); font-size: clamp(16px, 1.48vw, 19px); line-height: 1.6; }
.hx-learn-media { margin: clamp(6px, 2vw, 20px) auto clamp(20px, 3vw, 36px); }
.hx-learn-media img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; }
.hx-learn-body { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(30px, 4vw, 60px); align-items: start; padding-bottom: clamp(40px, 5vw, 72px); }
.hx-learn-content { max-width: 760px; font-size: 17px; line-height: 1.75; color: #2a323c; }
.hx-learn-content h2 { margin: 1.9em 0 .5em; font-size: clamp(21px, 2vw, 26px); font-weight: 700; letter-spacing: -.015em; scroll-margin-top: 90px; color: var(--learn-ink); }
.hx-learn-content h3 { margin: 1.5em 0 .4em; font-size: 1.18rem; font-weight: 700; }
.hx-learn-content p { margin: 0 0 1.1em; }
.hx-learn-content ul, .hx-learn-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.hx-learn-content li { margin-bottom: .5em; }
.hx-learn-content a { color: var(--learn-blue); }
.hx-learn-content > p:first-of-type { font-size: 1.12em; color: #1c2430; }
.hx-learn-content .hx-key-takeaway { margin: 0 0 1.6em; padding: 18px 22px; border-left: 4px solid var(--learn-blue); border-radius: 0 12px 12px 0; background: #f2f6fe; font-size: 1.02em; }
.hx-learn-content .hx-key-takeaway strong { color: var(--learn-ink); }
.hx-learn-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .96rem; }
.hx-learn-content th, .hx-learn-content td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--learn-line); }
.hx-learn-content thead th { background: #f6f8fd; font-size: .85rem; }
.hx-learn-content details { margin: 0 0 12px; padding: 0; border: 1px solid var(--learn-line); border-radius: 12px; background: #fff; }
.hx-learn-content details > summary { padding: 15px 18px; font-weight: 600; cursor: pointer; list-style: none; }
.hx-learn-content details > summary::-webkit-details-marker { display: none; }
.hx-learn-content details[open] > summary { border-bottom: 1px solid var(--learn-line); }
.hx-learn-content details > *:not(summary) { padding: 0 18px; }
.hx-learn-content details > p { padding: 14px 18px; margin: 0; color: var(--learn-mut); }
.hx-learn-products, .hx-learn-recipes { padding: clamp(34px, 4vw, 56px) 0; border-top: 1px solid var(--learn-line); }
.hx-learn-products { background: #f7f9fc; }
.hx-learn-products__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hx-learn-product { padding: 18px; border: 1px solid var(--learn-line); border-radius: 16px; background: #fff; text-align: center; }
.hx-learn-product__media img { width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
.hx-learn-product h3 { margin: 10px 0 4px; font-size: 15px; }
.hx-learn-product h3 a { color: var(--learn-ink); text-decoration: none; }
.hx-learn-product__price { margin: 0 0 12px; font-weight: 700; color: var(--learn-ink); }
.hx-learn-product__price del { color: #9aa2ac; font-weight: 400; }
.hx-learn-product__btn { width: 100%; }
.hx-learn-recipes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hx-learn-archive__body { padding: clamp(24px, 3vw, 44px) 0 clamp(48px, 6vw, 80px); }
.hx-learn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hx-learn-card { display: flex; flex-direction: column; border: 1px solid var(--learn-line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .2s ease, transform .2s ease; }
.hx-learn-card:hover { box-shadow: 0 18px 44px rgba(20, 33, 45, .1); transform: translateY(-3px); }
.hx-learn-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f7; }
.hx-learn-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hx-learn-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e8eef9, #f4f7fc); }
.hx-learn-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.hx-learn-card__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.hx-learn-card__title a { color: var(--learn-ink); text-decoration: none; }
.hx-learn-card__title a:hover { color: var(--learn-blue); }
.hx-learn-card__ex { margin: 0; color: var(--learn-mut); font-size: 14px; line-height: 1.55; }
.hx-learn-card__more { margin-top: auto; color: var(--learn-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
@media (max-width: 900px) {
.hx-learn-body { grid-template-columns: 1fr; }
.hx-learn-toc { display: none; }
.hx-learn-products__grid, .hx-learn-recipes__grid, .hx-learn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.hx-learn-products__grid, .hx-learn-recipes__grid, .hx-learn-grid { grid-template-columns: 1fr; }
} .hx-blog {
--blog-navy: #10295f;
--blog-blue: #1d4497;
--blog-ink: #15213a;
--blog-muted: #647087;
--blog-line: #dfe5ef;
--blog-cream: #f7f3e9;
background: #fff;
color: var(--blog-ink);
}
.hx-blog-hero {
position: relative;
overflow: hidden;
padding: clamp(48px, 7vw, 96px) 0;
background:
radial-gradient(circle at 13% 5%, rgba(75, 125, 225, .44), transparent 30%),
radial-gradient(circle at 91% 100%, rgba(241, 151, 65, .18), transparent 31%),
var(--blog-navy);
color: #fff;
}
.hx-blog-hero::before {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 54px 54px;
content: "";
-webkit-mask-image: linear-gradient(to right, #000, transparent 78%);
mask-image: linear-gradient(to right, #000, transparent 78%);
}
.hx-blog-hero__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
align-items: center;
gap: clamp(38px, 6vw, 90px);
}
.hx-blog-kicker,
.hx-blog-feature-label {
margin: 0 0 12px;
color: #f2a058;
font-size: 12px;
font-weight: 800;
letter-spacing: .16em;
line-height: 1.3;
text-transform: uppercase;
}
.hx-blog-hero h1 {
max-width: 690px;
margin: 0;
color: #fff;
font-size: clamp(35px, 3.84vw, 54px);
font-weight: 750;
letter-spacing: -.052em;
line-height: .98;
}
.hx-blog-hero__lede {
max-width: 600px;
margin: 24px 0 30px;
color: rgba(255,255,255,.76);
font-size: clamp(17px, 1.46vw, 20px);
line-height: 1.65;
}
.hx-blog-search {
display: flex;
max-width: 560px;
padding: 5px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 14px;
background: rgba(255,255,255,.1);
box-shadow: 0 16px 44px rgba(0,0,0,.13);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hx-blog-search input[type="search"] {
min-width: 0;
flex: 1;
padding: 12px 14px;
border: 0;
outline: 0;
background: transparent;
color: #fff;
font-size: 14px;
}
.hx-blog-search input[type="search"]::placeholder { color: rgba(255,255,255,.6); }
.hx-blog-search button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 18px;
border: 0;
border-radius: 10px;
background: #fff;
color: var(--blog-navy);
font-size: 13px;
font-weight: 750;
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.hx-blog-search button:hover { background: #f7d8bc; transform: translateY(-1px); }
.hx-blog-feature-label { margin-left: 2px; color: rgba(255,255,255,.65); }
.hx-blog-card {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--blog-line);
border-radius: 20px;
background: #fff;
box-shadow: 0 5px 22px rgba(18, 38, 77, .06);
transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.hx-blog-card:hover {
border-color: #c6d1e4;
box-shadow: 0 20px 48px rgba(18, 38, 77, .13);
transform: translateY(-5px);
}
.hx-blog-card__media {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #e9eef7;
}
.hx-blog-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s cubic-bezier(.2,.75,.25,1);
}
.hx-blog-card:hover .hx-blog-card__media img { transform: scale(1.045); }
.hx-blog-card__placeholder {
display: grid;
width: 100%;
height: 100%;
place-items: center;
background:
radial-gradient(circle at 76% 20%, rgba(243,151,66,.65), transparent 25%),
linear-gradient(135deg, #163477, #2659bc);
}
.hx-blog-card__placeholder span {
padding: 9px 13px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.hx-blog-card__body {
display: flex;
min-height: 250px;
flex: 1;
flex-direction: column;
padding: 23px 24px 21px;
}
.hx-blog-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 13px;
color: var(--blog-muted);
font-size: 11px;
font-weight: 650;
letter-spacing: .035em;
}
.hx-blog-card__topic {
position: relative;
z-index: 2;
color: var(--blog-blue);
font-weight: 800;
letter-spacing: .08em;
text-decoration: none;
text-transform: uppercase;
}
.hx-blog-card__topic:hover { text-decoration: underline; text-underline-offset: 3px; }
.hx-blog-card__title {
margin: 0;
font-size: clamp(18px, 1.38vw, 21px);
font-weight: 750;
letter-spacing: -.025em;
line-height: 1.25;
}
.hx-blog-card__title a { color: var(--blog-ink); text-decoration: none; }
.hx-blog-card__title a::after { position: absolute; inset: 0; content: ""; }
.hx-blog-card__title a:focus-visible::after { outline: 3px solid #f2a058; outline-offset: -4px; }
.hx-blog-card__excerpt {
display: -webkit-box;
overflow: hidden;
margin: 12px 0 22px;
color: var(--blog-muted);
font-size: 14px;
line-height: 1.65;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.hx-blog-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #edf0f5;
color: #818a9a;
font-size: 11px;
}
.hx-blog-card__read {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--blog-blue);
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.hx-blog-card__read span { font-size: 17px; transition: transform .2s ease; }
.hx-blog-card:hover .hx-blog-card__read span { transform: translateX(4px); }
.hx-blog-card--featured {
display: grid;
grid-template-columns: 1.06fr .94fr;
border: 1px solid rgba(255,255,255,.18);
border-radius: 24px;
background: #fff;
box-shadow: 0 28px 70px rgba(0,0,0,.26);
color: var(--blog-ink);
}
.hx-blog-card--featured .hx-blog-card__media { height: 100%; aspect-ratio: auto; }
.hx-blog-card--featured .hx-blog-card__body { min-height: 360px; padding: 27px; }
.hx-blog-card--featured .hx-blog-card__title { font-size: clamp(20px, 1.82vw, 26px); }
.hx-blog-card--featured .hx-blog-card__excerpt { -webkit-line-clamp: 4; }
.hx-blog-hero__page {
padding: 36px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 22px;
background: rgba(255,255,255,.08);
}
.hx-blog-hero__page span { color: #f2a058; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.hx-blog-hero__page p { max-width: 430px; margin: 14px 0 0; color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.55; }
.hx-blog-topics {
position: relative;
z-index: 3;
border-bottom: 1px solid var(--blog-line);
background: rgba(255,255,255,.96);
}
.hx-blog-topics__inner {
display: flex;
align-items: center;
gap: 8px;
overflow-x: auto;
padding-top: 15px;
padding-bottom: 15px;
scrollbar-width: none;
}
.hx-blog-topics__inner::-webkit-scrollbar { display: none; }
.hx-blog-topics__label { margin-right: 7px; color: var(--blog-muted); font-size: 12px; font-weight: 750; white-space: nowrap; }
.hx-blog-topics a {
padding: 8px 13px;
border: 1px solid transparent;
border-radius: 999px;
color: #4d586e;
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hx-blog-topics a:hover,
.hx-blog-topics a.is-current { border-color: #d9e1ef; background: #eff4fc; color: var(--blog-blue); }
.hx-blog-feed { padding: clamp(62px, 7vw, 100px) 0; }
.hx-blog-section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
margin-bottom: clamp(28px, 4vw, 46px);
}
.hx-blog-section-head .hx-blog-kicker { color: var(--blog-blue); }
.hx-blog-section-head h2 {
margin: 0;
color: var(--blog-ink);
font-size: clamp(28px, 3.19vw, 42px);
font-weight: 750;
letter-spacing: -.045em;
line-height: 1.05;
}
.hx-blog-section-head > p {
max-width: 440px;
margin: 0;
color: var(--blog-muted);
font-size: 15px;
line-height: 1.65;
}
.hx-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hx-blog .pressmart-pagination { margin-top: 50px; }
.hx-blog .pressmart-pagination ul { display: flex; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hx-blog .pressmart-pagination a,
.hx-blog .pressmart-pagination span {
display: grid;
min-width: 42px;
height: 42px;
padding: 0 12px;
place-items: center;
border: 1px solid var(--blog-line);
border-radius: 10px;
color: var(--blog-ink);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.hx-blog .pressmart-pagination a:hover,
.hx-blog .pressmart-pagination .current { border-color: var(--blog-blue); background: var(--blog-blue); color: #fff; }
.hx-blog-paths {
padding: clamp(58px, 7vw, 96px) 0;
background: #f4f7fb;
}
.hx-blog-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hx-blog-path {
position: relative;
display: flex;
min-height: 235px;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding: 28px;
border-radius: 20px;
color: var(--blog-ink);
text-decoration: none;
transition: box-shadow .25s ease, transform .25s ease;
}
.hx-blog-path::after {
position: absolute;
top: -34px;
right: -34px;
width: 132px;
height: 132px;
border: 24px solid currentColor;
border-radius: 50%;
content: "";
opacity: .08;
transition: transform .35s ease;
}
.hx-blog-path:hover { box-shadow: 0 18px 44px rgba(18,38,77,.15); transform: translateY(-4px); }
.hx-blog-path:hover::after { transform: scale(1.15) rotate(8deg); }
.hx-blog-path--blue { background: var(--blog-blue); color: #fff; }
.hx-blog-path--cream { background: #f0e9da; }
.hx-blog-path--orange { background: #ef9d56; color: #18233b; }
.hx-blog-path__number { position: absolute; top: 25px; left: 28px; font-size: 12px; font-weight: 800; letter-spacing: .15em; opacity: .65; }
.hx-blog-path strong { display: block; max-width: 280px; margin-bottom: 11px; font-size: clamp(20px, 1.85vw, 24px); line-height: 1.18; }
.hx-blog-path > span:last-child { font-size: 13px; font-weight: 700; opacity: .82; }
.hx-blog.is-reveal-ready [data-hx-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1);
}
.hx-blog.is-reveal-ready [data-hx-reveal].is-visible { opacity: 1; transform: none; }
.hx-blog-grid [data-hx-reveal]:nth-child(3n + 2) { transition-delay: .07s; }
.hx-blog-grid [data-hx-reveal]:nth-child(3n + 3) { transition-delay: .14s; }
.hx-blog-paths__grid [data-hx-reveal]:nth-child(2) { transition-delay: .08s; }
.hx-blog-paths__grid [data-hx-reveal]:nth-child(3) { transition-delay: .16s; }
@media (max-width: 1080px) {
.hx-blog-hero__grid { grid-template-columns: minmax(0, .8fr) minmax(440px, 1.2fr); gap: 36px; }
.hx-blog-card--featured { grid-template-columns: 1fr; }
.hx-blog-card--featured .hx-blog-card__media { aspect-ratio: 16 / 8; }
.hx-blog-card--featured .hx-blog-card__body { min-height: 0; }
.hx-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-blog-grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
.hx-blog-grid [data-hx-reveal]:nth-child(even) { transition-delay: .07s; }
}
@media (max-width: 780px) {
.hx-blog-hero__grid { grid-template-columns: 1fr; }
.hx-blog-hero__intro { max-width: 650px; }
.hx-blog-feature-label { margin-top: 8px; }
.hx-blog-card--featured { grid-template-columns: 1.05fr .95fr; }
.hx-blog-section-head { align-items: start; flex-direction: column; gap: 16px; }
.hx-blog-paths__grid { grid-template-columns: 1fr; }
.hx-blog-path { min-height: 190px; }
.hx-blog-paths__grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
}
@media (max-width: 580px) {
.hx-blog-hero { padding: 48px 0 54px; }
.hx-blog-hero h1 { font-size: clamp(34px, 10.09vw, 45px); }
.hx-blog-search button { padding-right: 14px; padding-left: 14px; }
.hx-blog-search button span { display: none; }
.hx-blog-card--featured { grid-template-columns: 1fr; }
.hx-blog-card--featured .hx-blog-card__media { aspect-ratio: 16 / 9; }
.hx-blog-card--featured .hx-blog-card__body { padding: 23px; }
.hx-blog-grid { grid-template-columns: 1fr; }
.hx-blog-grid [data-hx-reveal]:nth-child(n) { transition-delay: 0s; }
.hx-blog-card__body { min-height: 225px; }
.hx-blog-topics__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hx-blog *,
.hx-blog *::before,
.hx-blog *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
.hx-blog.is-reveal-ready [data-hx-reveal] { opacity: 1; transform: none; }
} .hx-partner--ambassador .hx-partner-actions { margin: 28px 0 0; }
.hx-partner--ambassador .hx-button--primary {
border-color: var(--hx-partner-blue);
color: #fff;
background: var(--hx-partner-blue);
}
.hx-partner--ambassador .hx-button--primary:hover,
.hx-partner--ambassador .hx-button--primary:focus-visible {
border-color: var(--hx-partner-blue-deep);
color: #fff;
background: var(--hx-partner-blue-deep);
}
.hx-ambassador-overview {
position: relative;
overflow: hidden;
padding: clamp(30px, 4.2vw, 50px);
border-radius: 10px 60px 10px 10px;
box-shadow: 0 28px 70px rgba(17, 45, 108, .22);
color: #fff;
background:
radial-gradient(circle at 105% -5%, rgba(255,255,255,.18), transparent 31%),
linear-gradient(145deg, #173b86, var(--hx-partner-blue-deep));
}
.hx-ambassador-overview .hx-partner-eyebrow { margin-bottom: 12px; color: #bed0fb; }
.hx-ambassador-overview h2 {
margin: 0 0 30px;
color: #fff;
font-size: clamp(26px, 2.92vw, 36px);
letter-spacing: -.035em;
}
.hx-ambassador-overview__items { display: grid; gap: 0; }
.hx-ambassador-overview__items > div {
padding: 19px 0;
border-top: 1px solid rgba(255,255,255,.15);
}
.hx-ambassador-overview__items p { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.55; }
.hx-ambassador-overview__items strong { display: block; margin-bottom: 4px; color: #fff; font-size: 15px; }
.hx-ambassador-apply {
padding: clamp(66px, 8vw, 108px) 0;
scroll-margin-top: 90px;
background: #f3f6fa;
}
.hx-ambassador-apply__layout {
display: grid;
grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
align-items: start;
gap: clamp(38px, 7vw, 92px);
max-width: 1200px;
}
.hx-ambassador-apply__intro {
position: sticky;
top: 115px;
}
.hx-ambassador-apply__intro h2 {
margin: 0 0 18px;
font-size: clamp(28px, 3.22vw, 40px);
letter-spacing: -.04em;
}
.hx-ambassador-apply__intro > p:not(.hx-ambassador-apply__privacy) {
margin: 0;
color: #5a6673;
font-size: 16px;
line-height: 1.7;
}
.hx-ambassador-apply__privacy {
position: relative;
margin: 25px 0 0;
padding: 17px 18px 17px 43px;
border: 1px solid #dce3ed;
border-radius: 9px;
color: #66717e;
background: rgba(255,255,255,.65);
font-size: 12px;
line-height: 1.55 !important;
}
.hx-ambassador-apply__privacy::before {
position: absolute;
top: 17px;
left: 17px;
content: "\2713";
color: var(--hx-partner-blue);
font-weight: 800;
}
.hx-ambassador-apply .hx-partner-form {
padding: clamp(25px, 4vw, 44px);
border: 0;
border-radius: 20px;
box-shadow: 0 24px 65px rgba(20, 39, 73, .11);
}
.hx-ambassador-apply .hx-partner-form__head {
margin-bottom: 24px;
padding-bottom: 22px;
border-bottom: 1px solid #e5e9f0;
}
.hx-ambassador-apply .hx-partner-form__head .hx-partner-eyebrow { margin-bottom: 8px; }
.hx-ambassador-apply .hx-partner-form__head h2 { font-size: clamp(23px, 2.65vw, 30px); }
.hx-ambassador-apply .hx-partner-form__head p { font-size: 13px; }
.hx-partner-form--ambassador .woocommerce,
.hx-partner-form--ambassador .woocommerce-form-register { margin: 0; }
.hx-partner-form--ambassador .woocommerce-form-register {
padding: 0;
border: 0;
background: transparent;
}
.hx-ambassador-progress {
--hx-ambassador-progress: 0;
position: relative;
margin: 0 0 34px;
}
.hx-ambassador-progress ol {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
.hx-ambassador-progress::before,
.hx-ambassador-progress__track {
position: absolute;
top: 17px;
left: 16.666%;
width: 66.666%;
height: 2px;
content: "";
}
.hx-ambassador-progress::before { background: #dbe1ea; }
.hx-ambassador-progress__track {
width: 66.666%;
background: var(--hx-partner-blue);
transform: scaleX(var(--hx-ambassador-progress));
transform-origin: left center;
transition: transform .35s ease;
}
.hx-partner-form--ambassador .hx-ambassador-progress button {
display: flex;
width: 100%;
min-height: 0;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 4px;
border: 0;
box-shadow: none;
color: #7a8491;
background: transparent;
cursor: pointer;
}
.hx-partner-form--ambassador .hx-ambassador-progress button:disabled { cursor: default; opacity: 1; }
.hx-ambassador-progress button > span {
display: grid;
width: 35px;
height: 35px;
border: 2px solid #dbe1ea;
border-radius: 50%;
color: #697584;
background: #fff;
font-size: 12px;
font-weight: 800;
place-items: center;
transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.hx-ambassador-progress button small { font-size: 11px; font-weight: 700; line-height: 1.35; }
.hx-ambassador-progress button[aria-current="true"] { color: var(--hx-partner-blue); }
.hx-ambassador-progress button[aria-current="true"] > span { border-color: var(--hx-partner-blue); color: #fff; background: var(--hx-partner-blue); }
.hx-ambassador-progress .is-complete button > span { border-color: var(--hx-partner-blue); color: var(--hx-partner-blue); }
.hx-ambassador-step {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.hx-ambassador-step[hidden] { display: none; }
.hx-ambassador-step__head { margin-bottom: 24px; outline: 0; }
.hx-ambassador-step__head > span { display: block; margin-bottom: 7px; color: var(--hx-partner-blue); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hx-ambassador-step__head h3 { margin: 0 0 7px; font-size: clamp(21px, 2.44vw, 26px); letter-spacing: -.025em; }
.hx-ambassador-step__head p { margin: 0; color: #697481; font-size: 13px; line-height: 1.55; }
.hx-ambassador-step__body {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.hx-ambassador-step[data-step="1"] .hx-ambassador-step__body { grid-template-columns: 1fr; gap: 4px; }
.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row {
min-width: 0;
margin: 0;
}
.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row:has(textarea) { grid-column: 1 / -1; }
.hx-partner-form--ambassador .form-row > label:first-child {
margin: 0 0 8px;
color: #263342;
font-size: 12px;
font-weight: 750;
}
.hx-partner-form--ambassador .required { color: #bd3b35; text-decoration: none; }
.hx-partner-form--ambassador input[type="text"],
.hx-partner-form--ambassador input[type="email"],
.hx-partner-form--ambassador input[type="password"],
.hx-partner-form--ambassador input[type="url"],
.hx-partner-form--ambassador textarea,
.hx-partner-form--ambassador select {
width: 100%;
min-height: 50px;
padding: 12px 14px;
border: 1px solid #cbd4df;
border-radius: 9px;
box-shadow: none;
color: #182536;
background: #fbfcfe;
font-size: 14px;
transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hx-partner-form--ambassador textarea { min-height: 105px; resize: vertical; }
.hx-partner-form--ambassador input:focus,
.hx-partner-form--ambassador textarea:focus,
.hx-partner-form--ambassador select:focus {
border-color: var(--hx-partner-blue);
outline: 0;
box-shadow: 0 0 0 3px rgba(29,68,151,.11);
background: #fff;
}
.hx-partner-form--ambassador .form-row:has(input[type="radio"]) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
padding: 18px 0;
border-bottom: 1px solid #e9edf2;
}
.hx-partner-form--ambassador .form-row:has(input[type="radio"]) > label:first-child,
.hx-partner-form--ambassador .form-row:has(input[type="radio"]) > .description { grid-column: 1 / -1; }
.hx-partner-form--ambassador input[type="radio"] {
position: absolute;
width: 1px !important;
height: 1px;
margin: 0;
opacity: 0;
}
.hx-partner-form--ambassador label.radio {
display: flex;
min-height: 47px;
align-items: center;
justify-content: center;
margin: 0;
padding: 10px 14px;
border: 1px solid #cfd7e1;
border-radius: 9px;
color: #4a5664;
background: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.hx-partner-form--ambassador input[type="radio"]:checked + label.radio {
border-color: var(--hx-partner-blue);
box-shadow: inset 0 0 0 1px var(--hx-partner-blue);
color: var(--hx-partner-blue);
background: #eef4ff;
}
.hx-partner-form--ambassador input[type="radio"]:focus-visible + label.radio { outline: 3px solid rgba(29,68,151,.17); outline-offset: 2px; }
.hx-partner-form--ambassador .description { margin: -2px 0 2px; color: #717c88; line-height: 1.5; }
.hx-ambassador-step__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 11px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid #e5e9ef;
}
.hx-partner-form--ambassador .hx-ambassador-step__actions > button {
width: auto;
min-height: 48px;
padding: 11px 20px;
border-radius: 9px;
font-size: 13px;
font-weight: 750;
}
.hx-partner-form--ambassador .hx-ambassador-step__back {
margin-right: auto;
border: 1px solid #d3dae3;
color: #3d4a59;
background: #fff;
}
.hx-partner-form--ambassador .hx-ambassador-step__back:hover,
.hx-partner-form--ambassador .hx-ambassador-step__back:focus-visible { border-color: #9ca9b8; color: var(--hx-partner-blue); background: #f7f9fc; }
.hx-partner-form--ambassador .hx-ambassador-step__next { border: 1px solid var(--hx-partner-blue); color: #fff; background: var(--hx-partner-blue); }
.hx-partner-form--ambassador .hx-ambassador-step__next:hover,
.hx-partner-form--ambassador .hx-ambassador-step__next:focus-visible { background: var(--hx-partner-blue-deep); }
.hx-ambassador-step__submit { flex: 0 1 300px; margin: 0 !important; }
.hx-partner-form--ambassador .hx-ambassador-step__submit button { min-height: 50px; border-radius: 9px; font-size: 13px; font-weight: 750; }
@media (max-width: 900px) {
.hx-ambassador-apply__layout { grid-template-columns: 1fr; }
.hx-ambassador-apply__intro { position: static; max-width: 700px; }
.hx-ambassador-apply__intro .hx-application-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hx-ambassador-apply__intro .hx-application-steps li { display: block; padding: 0; }
.hx-ambassador-apply__intro .hx-application-steps li::before,
.hx-ambassador-apply__intro .hx-application-steps li::after { display: none; }
.hx-ambassador-apply__intro .hx-application-steps strong,
.hx-ambassador-apply__intro .hx-application-steps span { display: block; }
}
@media (max-width: 640px) {
.hx-partner--ambassador .hx-partner-actions { align-items: stretch; flex-direction: column; }
.hx-partner--ambassador .hx-partner-actions .hx-button { width: 100%; }
.hx-ambassador-overview { border-radius: 10px 42px 10px 10px; }
.hx-ambassador-apply__intro .hx-application-steps { grid-template-columns: 1fr; gap: 12px; }
.hx-ambassador-apply__intro .hx-application-steps li { padding-left: 17px; border-left: 2px solid #d8e0ef; }
.hx-ambassador-apply .hx-partner-form { padding: 23px 18px; border-radius: 14px; }
.hx-ambassador-progress button small { display: none; }
.hx-ambassador-progress { margin-bottom: 27px; }
.hx-ambassador-step__body { grid-template-columns: 1fr; }
.hx-partner-form--ambassador .hx-ambassador-step__body > .form-row:has(textarea) { grid-column: auto; }
.hx-ambassador-step__actions { align-items: stretch; flex-direction: column-reverse; }
.hx-partner-form--ambassador .hx-ambassador-step__actions > button,
.hx-ambassador-step__submit { width: 100%; flex-basis: auto; }
.hx-partner-form--ambassador .hx-ambassador-step__back { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hx-ambassador-progress__track,
.hx-partner-form--ambassador * { transition-duration: .01ms !important; }
} .hx-recipe-finder {
padding: clamp(27px, 4vw, 42px);
border: 1px solid rgba(29, 68, 151, .16);
border-radius: 26px;
box-shadow: 0 24px 65px rgba(22, 39, 57, .11);
background: rgba(255,255,255,.9);
}
.hx-recipe-finder > .hx-guide-eyebrow { margin-bottom: 11px; }
.hx-recipe-finder fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hx-recipe-finder legend {
max-width: 470px;
margin: 0;
padding: 0;
color: var(--hx-guide-ink);
font-size: clamp(22px, 2.38vw, 30px);
font-weight: 750;
letter-spacing: -.035em;
line-height: 1.1;
}
.hx-recipe-finder fieldset > p {
margin: 12px 0 20px;
color: #66727e;
font-size: 13px;
line-height: 1.55;
}
.hx-recipe-finder__choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
.hx-recipe-finder__choices label { position: relative; min-width: 0; cursor: pointer; }
.hx-recipe-finder__choices input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.hx-recipe-finder__choices label > span {
display: flex;
min-height: 48px;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 12px 11px 15px;
border: 1px solid #d6dde6;
border-radius: 11px;
color: #3f4b59;
background: #fff;
transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, background-color .18s ease, transform .18s ease;
}
.hx-recipe-finder__choices strong { min-width: 0; font-size: 13px; line-height: 1.25; }
.hx-recipe-finder__choices small {
display: grid;
min-width: 24px;
height: 24px;
padding: 0 6px;
border-radius: 999px;
color: #687585;
background: #edf1f6;
font-size: 10px;
font-weight: 800;
place-items: center;
}
.hx-recipe-finder__choices label:hover > span { border-color: #aebbd0; transform: translateY(-1px); }
.hx-recipe-finder__choices input:checked + span {
border-color: var(--hx-guide-blue);
box-shadow: inset 0 0 0 1px var(--hx-guide-blue);
color: var(--hx-guide-blue);
background: #eff4fd;
}
.hx-recipe-finder__choices input:checked + span small { color: #fff; background: var(--hx-guide-blue); }
.hx-recipe-finder__choices input:focus-visible + span { outline: 3px solid rgba(29,68,151,.17); outline-offset: 2px; }
.hx-recipe-finder__submit {
width: 100%;
min-height: 48px;
margin-top: 13px;
border: 0;
border-radius: 10px;
color: #fff;
background: var(--hx-guide-blue);
font-size: 13px;
font-weight: 750;
cursor: pointer;
}
.hx-recipe-finder.is-enhanced .hx-recipe-finder__submit { display: none; }
.hx-recipe-finder__status {
display: flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: #586573;
font-size: 12px;
font-weight: 650;
}
.hx-recipe-finder__status::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4d8b59;
content: "";
}
.hx-recipes-archive[data-active-filter="sweet"] .hx-recipe-filter-item:not(.hx-recipe-trait--sweet),
.hx-recipes-archive[data-active-filter="savoury"] .hx-recipe-filter-item:not(.hx-recipe-trait--savoury),
.hx-recipes-archive[data-active-filter="fruity"] .hx-recipe-filter-item:not(.hx-recipe-trait--fruity),
.hx-recipes-archive[data-active-filter="make-ahead"] .hx-recipe-filter-item:not(.hx-recipe-trait--make-ahead),
.hx-recipes-archive[data-active-filter="quick"] .hx-recipe-filter-item:not(.hx-recipe-trait--quick) { display: none; }
.hx-recipe-filter-empty {
margin: 38px 0 0;
padding: 28px;
border: 1px solid var(--hx-guide-line);
border-radius: 14px;
color: #5e6974;
background: #f7f9fc;
text-align: center;
}
@media (max-width: 900px) {
.hx-recipe-finder { max-width: 620px; }
}
@media (max-width: 440px) {
.hx-recipe-finder__choices { grid-template-columns: 1fr; }
.hx-recipe-finder { padding: 24px 19px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.hx-recipe-finder__choices label > span { transition-duration: .01ms !important; }
}  .hx-wsform__step[hidden] {
display: none;
}
.hx-wsform__nav {
--hx-wsform-progress: 0;
--hx-wsform-steps: 4;
position: relative;
margin: 0 0 26px;
}
.hx-wsform__nav ol {
position: relative;
z-index: 1;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 4px;
padding: 0;
margin: 0;
list-style: none;
} .hx-wsform__nav::before,
.hx-wsform__track {
position: absolute;
top: 16px;
right: calc(50% / var(--hx-wsform-steps));
left: calc(50% / var(--hx-wsform-steps));
height: 2px;
content: "";
}
.hx-wsform__nav::before {
background: #dde3ea;
}
.hx-wsform__track {
background: var(--hx-partner-blue);
transform: scaleX(var(--hx-wsform-progress));
transform-origin: left center;
transition: transform .3s ease;
}
.hx-partner-form--wholesale .hx-wsform__crumb {
display: grid;
justify-items: center;
gap: 7px;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
color: #7a8695;
background: transparent;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
text-align: center;
cursor: pointer;
}
.hx-partner-form--wholesale .hx-wsform__crumb:hover,
.hx-partner-form--wholesale .hx-wsform__crumb:focus {
background: transparent;
}
.hx-partner-form--wholesale .hx-wsform__crumb:disabled {
cursor: default;
opacity: 1;
}
.hx-wsform__crumb > span {
display: grid;
width: 34px;
height: 34px;
border: 2px solid #dde3ea;
border-radius: 50%;
color: #7a8695;
background: #fff;
font-size: 13px;
place-items: center;
}
.is-current .hx-wsform__crumb {
color: var(--hx-partner-blue);
}
.is-current .hx-wsform__crumb > span {
border-color: var(--hx-partner-blue);
color: #fff;
background: var(--hx-partner-blue);
}
.is-complete .hx-wsform__crumb > span {
border-color: var(--hx-partner-blue);
color: var(--hx-partner-blue);
}
.hx-wsform__head {
margin-bottom: 20px;
outline: 0;
}
.hx-wsform__head > span {
display: block;
margin-bottom: 6px;
color: var(--hx-partner-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.hx-wsform__head h3 {
margin: 0 0 6px;
font-size: clamp(20px, 2.05vw, 23px);
letter-spacing: -.02em;
line-height: 1.2;
}
.hx-wsform__head p {
margin: 0;
color: #6a7581;
font-size: 13px;
line-height: 1.55;
}
.hx-wsform__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 6px;
}
.hx-partner-form--wholesale .hx-wsform__actions > button {
width: auto;
min-height: 48px;
padding: 0 22px;
border-radius: 7px;
font-size: 13px;
font-weight: 700;
}
.hx-partner-form--wholesale .hx-wsform__back {
border: 1px solid #cfd7df;
color: #46525f;
background: #fff;
}
.hx-partner-form--wholesale .hx-wsform__back:hover,
.hx-partner-form--wholesale .hx-wsform__back:focus-visible {
border-color: #9ca9b8;
color: var(--hx-partner-blue);
background: #f7f9fc;
}
.hx-partner-form--wholesale .hx-wsform__next {
margin-left: auto;
border: 1px solid var(--hx-partner-blue);
color: #fff;
background: var(--hx-partner-blue);
}
.hx-partner-form--wholesale .hx-wsform__next:hover,
.hx-partner-form--wholesale .hx-wsform__next:focus-visible {
background: var(--hx-partner-blue-deep);
} .hx-partner-form--wholesale .hx-wsform__next:only-child {
flex: 1 1 auto;
}
.hx-wsform__actions .hx-wholesale-form__submit {
flex: 1 1 240px;
margin: 0;
}
.hx-wsform.is-sent .hx-wsform__nav,
.hx-wsform.is-sent .hx-wsform__step {
display: none;
}
.hx-wholesale-form__grid > .hx-wholesale-form__wide {
grid-column: 1 / -1;
}  .hx-partner-form--wholesale .hidden-fields-container {
display: none;
}
.hx-partner-form--wholesale .wpcf7-response-output {
display: none;
}
.hx-partner-form--wholesale form.sent .wpcf7-response-output,
.hx-partner-form--wholesale form.failed .wpcf7-response-output,
.hx-partner-form--wholesale form.aborted .wpcf7-response-output,
.hx-partner-form--wholesale form.invalid .wpcf7-response-output,
.hx-partner-form--wholesale form.unaccepted .wpcf7-response-output,
.hx-partner-form--wholesale form.payment-required .wpcf7-response-output,
.hx-partner-form--wholesale form.spam .wpcf7-response-output {
display: block;
}
.hx-partner-form--wholesale .wpcf7-not-valid {
border-color: #bd3b35;
}
.hx-partner-form--wholesale .wpcf7-not-valid-tip {
display: block;
margin-top: 6px;
color: #bd3b35;
font-size: 12px;
font-weight: 600;
}
.hx-partner-form--wholesale .wpcf7-response-output {
padding: 14px 16px;
margin: 18px 0 0;
border: 1px solid #cfd7df;
border-radius: 8px;
color: #35404c;
font-size: 13.5px;
line-height: 1.55;
} .hx-margin-panel {
display: grid;
gap: 18px;
padding: clamp(22px, 3vw, 34px);
border: 1px solid var(--hx-partner-line);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(20, 33, 45, .07);
background: #fff;
}
.hx-margin-table__wrap {
overflow-x: auto;
}
.hx-margin-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.hx-margin-table th,
.hx-margin-table td {
padding: 14px 16px;
border-bottom: 1px solid #e7ecf2;
text-align: right;
white-space: nowrap;
}
.hx-margin-table thead th {
color: #6a7581;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.hx-margin-table tbody th {
color: var(--hx-partner-ink);
font-weight: 600;
text-align: left;
white-space: normal;
}
.hx-margin-table tbody tr:last-child th,
.hx-margin-table tbody tr:last-child td {
border-bottom: 0;
}
.hx-margin-table .is-highlight th,
.hx-margin-table .is-highlight td {
background: #f2f6ff;
}
.hx-margin-table .is-highlight td {
color: var(--hx-partner-blue);
font-size: 17px;
font-weight: 800;
}
.hx-margin-panel__note {
margin: 0;
color: #626e7a;
font-size: 13.5px;
line-height: 1.6;
}
.hx-margin-points {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 22px;
}
.hx-margin-points article {
padding: 24px;
border: 1px solid var(--hx-partner-line);
border-radius: 10px;
background: #fff;
}
.hx-margin-points h3 {
margin-bottom: 9px;
font-size: 16px;
letter-spacing: -.01em;
}
.hx-margin-points p {
margin: 0;
color: #5b6772;
font-size: 13.5px;
line-height: 1.6;
} .hx-partner-tinted {
padding: clamp(68px, 8vw, 112px) 0;
background: var(--hx-partner-cream);
}
.hx-partner-tinted > .hx-container {
max-width: 1200px;
}
.hx-fit-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.hx-fit-grid article {
padding: 26px 24px;
border: 1px solid #e3e8ee;
border-radius: 12px;
background: #fff;
}
.hx-fit-grid h3 {
margin-bottom: 10px;
font-size: 17px;
letter-spacing: -.015em;
}
.hx-fit-grid p {
margin: 0;
color: #5b6772;
font-size: 14px;
line-height: 1.65;
}
.hx-benefit-cards--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
} .hx-process {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
padding: 0;
margin: 0;
list-style: none;
counter-reset: hx-process;
}
.hx-process li {
padding: 30px 26px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 8px;
background: rgba(255, 255, 255, .06);
counter-increment: hx-process;
}
.hx-process li::before {
display: grid;
width: 34px;
height: 34px;
margin-bottom: 18px;
border-radius: 50%;
color: var(--hx-partner-blue-deep);
background: #fff;
font-size: 14px;
font-weight: 800;
content: counter(hx-process);
place-items: center;
}
.hx-process h3 {
margin-bottom: 10px;
color: #fff;
font-size: 18px;
}
.hx-process p {
margin: 0;
color: rgba(255, 255, 255, .78);
font-size: 14px;
line-height: 1.6;
} .hx-partner--wholesale .hx-button--primary {
border-color: var(--hx-partner-blue);
color: #fff;
background: var(--hx-partner-blue);
}
.hx-partner--wholesale .hx-button--primary:hover,
.hx-partner--wholesale .hx-button--primary:focus-visible {
border-color: var(--hx-partner-blue-deep);
color: #fff;
background: var(--hx-partner-blue-deep);
} .hx-partner--wholesale .hx-partner-faq {
padding-top: clamp(56px, 6vw, 88px);
}
.hx-wholesale-cta {
padding: clamp(48px, 6vw, 78px) 0;
background: var(--hx-partner-cream);
text-align: center;
}
.hx-wholesale-cta h2 {
margin-bottom: 12px;
font-size: clamp(26px, 2.85vw, 35px);
letter-spacing: -.03em;
}
.hx-wholesale-cta p {
max-width: 570px;
margin: 0 auto 26px;
color: #5b6772;
font-size: 16px;
}
@media (max-width: 1024px) {
.hx-fit-grid,
.hx-margin-points,
.hx-process,
.hx-benefit-cards--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.hx-wsform__crumb small {
display: none;
}
.hx-wsform__nav {
margin-bottom: 22px;
}
.hx-wsform__actions {
align-items: stretch;
flex-direction: column-reverse;
}
.hx-partner-form--wholesale .hx-wsform__actions > button,
.hx-wsform__actions .hx-wholesale-form__submit {
width: 100%;
flex-basis: auto;
}
.hx-partner-form--wholesale .hx-wsform__next {
margin-left: 0;
}
}
@media (max-width: 620px) {
.hx-fit-grid,
.hx-margin-points,
.hx-process,
.hx-benefit-cards--four {
grid-template-columns: minmax(0, 1fr);
}
.hx-margin-table th,
.hx-margin-table td {
padding: 12px 10px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.hx-wsform__track {
transition-duration: .01ms !important;
}
} .woocommerce .show-password-input,
.hx-login .show-password-input,
.hx-partner-form--ambassador .show-password-input {
width: 24px;
height: 24px;
background-size: 16px 16px;
background-position: center;
}
.woocommerce .password-input input,
.hx-login .password-input input,
.hx-partner-form--ambassador .password-input input {
padding-right: 44px;
} .hx-emt-page { padding: clamp(36px, 5vw, 68px) 0 clamp(56px, 7vw, 96px); }
.hx-emt-page > .hx-container { max-width: 860px; }
.hx-emt-page__head { margin-bottom: clamp(26px, 3vw, 38px); }
.hx-emt-page__head h1 {
margin: 10px 0 14px;
font-size: clamp(28px, 3.51vw, 42px);
letter-spacing: -.035em;
line-height: 1.05;
}
.hx-emt-page__head p { margin: 0; color: #57626f; font-size: 17px; line-height: 1.6; }
.hx-emt {
padding: clamp(24px, 3.4vw, 38px);
border: 1px solid var(--hx-partner-line, #dce2e8);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(20, 33, 45, .07);
background: #fff;
}
.hx-emt__title { margin: 0 0 22px; font-size: clamp(20px, 2.22vw, 24px); letter-spacing: -.02em; }
.hx-emt__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.hx-emt__key {
display: flex;
flex-direction: column;
gap: 7px;
padding: 16px;
border: 1px solid #e4e9f0;
border-radius: 10px;
background: #f7f9fc;
}
.hx-emt__label {
color: var(--hx-partner-blue, #1d4497);
font-size: 11px;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.hx-emt__note { color: #55606d; font-size: 14px; line-height: 1.45; } .hx-partner .hx-copy,
.hx-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: none;
color: var(--hx-partner-ink, #14212d);
text-align: left;
cursor: pointer;
}
.hx-copy > span { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.hx-copy > small { color: #7a8695; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.hx-partner .hx-copy:hover,
.hx-partner .hx-copy:focus-visible,
.hx-copy:hover { background: none; }
.hx-copy:hover > span { color: var(--hx-partner-blue, #1d4497); }
.hx-copy.is-copied > small { color: #1f7a4d; } .hx-emt__steps { padding: 0 0 0 22px; margin: 0 0 22px; list-style: decimal outside; }
.hx-emt__steps li { margin-bottom: 11px; color: #4b5764; font-size: 15px; line-height: 1.65; }
.hx-emt__steps li::marker { color: var(--hx-partner-blue, #1d4497); font-weight: 700; }
.hx-emt__warning {
padding: 14px 16px;
margin: 0;
border-radius: 9px;
background: #fff6e8;
color: #6b4a12;
font-size: 14px;
line-height: 1.55;
}
.hx-emt-page__back { margin: 22px 0 0; }
.hx-emt-help { margin-top: clamp(30px, 4vw, 48px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--hx-partner-line, #dce2e8); }
.hx-emt-help h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.hx-emt-help p { margin: 0; color: #57626f; font-size: 15px; line-height: 1.65; }
@media (max-width: 700px) {
.hx-emt__keys { grid-template-columns: minmax(0, 1fr); }
} .hx-emt-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
margin: 24px 0;
border: 1px solid var(--hx-partner-line, #dce2e8);
border-radius: 12px;
background: #f7f9fc;
}
.hx-emt-cta strong { display: block; margin-bottom: 3px; font-size: 16px; }
.hx-emt-cta span { color: #57626f; font-size: 14px; line-height: 1.5; }
.hx-emt-account { margin: 0 0 28px; }
.hx-emt-account > h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; }
.hx-emt-account > p { margin: 0 0 18px; color: #57626f; font-size: 15px; line-height: 1.6; }
.hx-emt-account--paid {
padding: 18px 20px;
border-radius: 12px;
background: #eef8f1;
}
.hx-emt-account--paid > h2 { color: #1f7a4d; }
.hx-emt-account--paid > p { margin: 0; }
@media (max-width: 600px) {
.hx-emt-cta { flex-direction: column; align-items: stretch; }
.hx-emt-cta .hx-button { width: 100%; text-align: center; }
}  .hx-contact {
--hx-partner-blue: #1d4497;
--hx-partner-blue-deep: #112d6c;
--hx-partner-ink: #14212d;
--hx-partner-line: #dce2e8;
--hx-contact-line: #e2e8f0;
--hx-contact-blue: var(--hx-partner-blue);
}
.hx-contact-hero { padding: clamp(34px, 4.5vw, 60px) 0 clamp(26px, 3vw, 38px); }
.hx-contact-hero h1 {
margin: 10px 0 14px;
font-size: clamp(30px, 3.77vw, 44px);
letter-spacing: -.035em;
line-height: 1.03;
}
.hx-contact-hero__lede { max-width: 640px; margin: 0 0 18px; color: #55606d; font-size: 18px; line-height: 1.6; }
.hx-contact-hero__hours {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 15px;
margin: 0;
border-radius: 999px;
background: #eef2fb;
color: var(--hx-contact-blue);
font-size: 13.5px;
font-weight: 650;
}
.hx-contact-hero__hours svg { flex: 0 0 auto; }
.hx-contact-routes { padding-bottom: clamp(40px, 5vw, 66px); }
.hx-contact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hx-contact-card {
display: flex;
flex-direction: column;
padding: 26px 24px 22px;
border: 1px solid var(--hx-contact-line);
border-radius: 14px;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hx-contact-card:hover {
border-color: #c4d2ea;
box-shadow: 0 16px 34px rgba(20, 33, 45, .09);
transform: translateY(-2px);
}
.hx-contact-card__icon {
display: grid;
width: 46px;
height: 46px;
margin-bottom: 18px;
border-radius: 12px;
background: #eef2fb;
color: var(--hx-contact-blue);
place-items: center;
}
.hx-contact-card__icon svg { width: 22px; height: 22px; }
.hx-contact-card h3 { margin: 0 0 9px; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.hx-contact-card p { margin: 0 0 18px; color: #5b6772; font-size: 14px; line-height: 1.6; }
.hx-contact-card__cta {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: auto;
color: var(--hx-contact-blue);
font-size: 14.5px;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.hx-contact-card__cta span { transition: transform .2s ease; }
.hx-contact-card:hover .hx-contact-card__cta span { transform: translateX(3px); }  .hx-contact > section {
width: 100%;
}
.hx-contact-form-section {
padding: clamp(46px, 6vw, 78px) 0;
background: #f7f9fc;
border-block: 1px solid #e8edf5;
} .hx-contact-form-layout {
max-width: 660px;
}
.hx-contact-form-intro {
margin-bottom: 22px;
text-align: center;
}
.hx-contact-form-intro h2 {
margin: 10px 0 12px;
font-size: clamp(26px, 2.89vw, 34px);
letter-spacing: -.03em;
}
.hx-contact-form-intro > p {
max-width: 46em;
margin: 0 auto;
color: #55606d;
font-size: 16px;
line-height: 1.6;
}
.hx-contact-form-card {
padding: clamp(24px, 3vw, 34px);
border: 1px solid var(--hx-contact-line);
border-radius: 14px;
box-shadow: 0 20px 48px rgba(20, 33, 45, .08);
background: #fff;
}
.hx-contact-form-card .dlvr-form { max-width: none; } .hx-contact-form-card .dlvr-field {
margin: 0 0 16px;
}
.hx-contact-form-card label {
display: block;
margin-bottom: 6px;
color: var(--hx-partner-ink);
font-size: 13px;
font-weight: 700;
}
.hx-contact-form-card .dlvr-req { color: #bd3b35; }
.hx-contact-form-card input[type="text"],
.hx-contact-form-card input[type="email"],
.hx-contact-form-card textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid #cfd7df;
border-radius: 8px;
background: #fff;
color: var(--hx-partner-ink);
font-size: 15px;
}
.hx-contact-form-card textarea { min-height: 132px; resize: vertical; }
.hx-contact-form-card input::placeholder,
.hx-contact-form-card textarea::placeholder { color: #97a2ae; }
.hx-contact-form-card input:focus,
.hx-contact-form-card textarea:focus {
border-color: var(--hx-contact-blue);
box-shadow: 0 0 0 3px rgba(29, 68, 151, .12);
outline: 0;
} @media (min-width: 620px) {
.hx-contact-form-card .dlvr-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
}
.hx-contact-form-card .dlvr-form > * { grid-column: 1 / -1; }
.hx-contact-form-card .dlvr-field:has(input[name="name"]) { grid-column: 1 / 2; }
.hx-contact-form-card .dlvr-field:has(input[name="email"]) { grid-column: 2 / 3; }
}
.hx-contact-form-card .dlvr-actions { margin: 4px 0 0; }
.hx-contact-form-card .dlvr-submit {
width: 100%;
min-height: 52px;
border: 0;
border-radius: 8px;
background: var(--hx-contact-blue);
color: #fff;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background-color .18s ease;
}
.hx-contact-form-card .dlvr-submit:hover,
.hx-contact-form-card .dlvr-submit:focus-visible { background: var(--hx-partner-blue-deep); }
.hx-contact-form-card .dlvr-fineprint {
margin: 12px 0 0;
color: #6f7a86;
font-size: 12.5px;
text-align: center;
} .hx-contact-form-hints {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 0;
margin: 18px 0 0;
list-style: none;
}
.hx-contact-form-hints li {
position: relative;
padding-left: 22px;
color: #5b6772;
font-size: 13px;
line-height: 1.5;
}
.hx-contact-form-hints li::before {
position: absolute;
top: 1px;
left: 0;
color: var(--hx-contact-blue);
font-weight: 800;
content: "✓";
}
@media (max-width: 619px) {
.hx-contact-form-hints { grid-template-columns: minmax(0, 1fr); gap: 7px; }
} .hx-contact-elsewhere { padding: clamp(46px, 6vw, 74px) 0; }
.hx-contact-elsewhere .hx-section-heading { margin-bottom: 24px; }
.hx-contact-elsewhere .hx-section-heading h2 { font-size: clamp(22px, 2.65vw, 30px); }
.hx-contact-elsewhere__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hx-contact-elsewhere__item {
display: block;
padding: 20px;
border: 1px solid var(--hx-contact-line);
border-radius: 12px;
background: #fff;
transition: border-color .2s ease, background .2s ease;
}
.hx-contact-elsewhere__item:hover { border-color: #c4d2ea; background: #f7f9fc; }
.hx-contact-elsewhere__item strong { display: block; margin-bottom: 6px; color: var(--hx-partner-ink, #14212d); font-size: 15px; }
.hx-contact-elsewhere__item span { color: #5b6772; font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1024px) {
.hx-contact-grid,
.hx-contact-elsewhere__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-contact-form-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.hx-contact-grid,
.hx-contact-elsewhere__grid { grid-template-columns: minmax(0, 1fr); }
} .hx-footer__trademark {
max-width: 34em;
margin-top: 10px;
font-size: 11.5px;
line-height: 1.55;
opacity: .72;
} @media (max-width: 767px) {
.hx2-wrap { width: min(100% - 32px, 1320px); }
.hx2 h1,
.hx2 h2 {
max-width: 100%;
font-size: clamp(1.89rem, 7.88vw, 2.28rem);
letter-spacing: -.035em;
line-height: 1.06;
text-wrap: balance;
overflow-wrap: normal;
}
.hx2 .hx2-btn { min-height: 50px; }
.hx2 .hx2-actions { width: 100%; gap: 10px; }
.hx2 .hx2-actions .hx2-btn { flex: 1 1 100%; } .hx2-hero__panel {
width: min(100% - 24px, 1380px);
gap: 0;
padding-block: 14px 44px;
}
.hx2-hero__slide {
height: clamp(660px, calc(100svh - 24px), 720px);
min-height: 0;
}
.hx2-hero__visual { min-height: 268px; }
.hx2-hero__copy { width: 100%; max-width: 360px; }
.hx2-hero__slide h1,
.hx2-hero__slide h2 {
max-width: 350px;
margin: 7px auto 13px;
font-size: clamp(1.97rem, 8.63vw, 2.34rem);
line-height: 1.02;
overflow-wrap: normal;
}
.hx2-hero__lede {
max-width: 350px;
margin-bottom: 18px;
font-size: 15.5px;
line-height: 1.52;
}
.hx2-hero__rating { margin-top: 13px; }
.hx2-hero__nav { display: none !important; }
.hx2-hero__dots { bottom: 10px; }
.hx2-proof .hx2-wrap > div { min-height: 72px; gap: 9px; padding: 12px 10px; }
.hx2-proof img { width: auto; max-width: 36px; height: 36px; padding: 0; }
.hx2-proof span { font-size: 10px; line-height: 1.25; }
.hx2-recipes,
.hx2-intro,
.hx2-flavours,
.hx2-why,
.hx2-reviews,
.hx2-events { padding-block: 68px; }
.hx2-section-head,
.hx2-recipes__head { gap: 15px; margin-bottom: 30px; }
.hx2-recipes__grid { gap: 14px; margin-bottom: 28px; }
.hx2-recipe { min-height: 270px; }
.hx2-recipe > span { right: 18px; bottom: 17px; left: 18px; }
.hx2-intro__grid { gap: 34px; }
.hx2-intro__media { padding: 12px; border-radius: 17px; box-shadow: 0 16px 36px rgba(30, 56, 105, .09); }
.hx2-intro__media::before { inset: -7px auto auto -7px; width: 50px; height: 50px; border-width: 2px; }
.hx2-intro__media figcaption { margin-top: 10px; }
.hx2-intro__copy h2 { margin-bottom: 18px; }
.hx2-intro__copy .hx2-lead { margin-bottom: 14px; font-size: 18px; line-height: 1.45; }
.hx2-intro__copy > p:not(.hx2-lead):not(.hx2-intro__canada) { margin-bottom: 20px; line-height: 1.65; }
.hx2-intro__facts { margin-bottom: 24px; }
.hx2-products { gap: 34px; }
.hx2-product__media { min-height: 320px; }
.hx2-product__media img { height: 292px; }
.hx2-product__info { gap: 16px; padding: 17px 2px 0; }
.hx2-flavours__footer { flex-direction: column; gap: 13px; padding-top: 38px; text-align: center; }
.hx2-routine { min-height: 0; }
.hx2-routine__image { min-height: 310px; }
.hx2-routine__copy { padding: 56px 16px; }
.hx2-routine__copy h2 { margin-bottom: 20px; }
.hx2-routine__copy > p:not(.hx2-eyebrow) { margin-bottom: 26px; line-height: 1.65; }
.hx2-routine__methods nav { gap: 8px; }
.hx2-routine__methods a { min-height: 50px; padding: 13px 14px; }
.hx2-routine__inspiration { gap: 16px; padding: 18px; }
.hx2-why__heading { gap: 14px; margin-bottom: 34px; }
.hx2-why__grid article { padding: 22px 0 25px; }
.hx2-why__grid article,
.hx2-why__grid .hx2-why__icon { animation: none !important; }
.hx2-why__grid article { opacity: 1 !important; }
.hx2-reviews__intro { align-items: stretch; gap: 20px; margin-bottom: 30px; }
.hx2-reviews__rating { align-self: flex-start; padding: 13px 16px; }
.hx2-review-carousel { --hx-slides-xs: 1; }
.hx2-review-card { min-height: 285px; padding: 24px; border-radius: 17px; }
.hx2-review-card__stars { margin-bottom: 28px; }
.hx2-review-card p { margin-bottom: 28px; font-size: 18px; }
.hx2-review-controls { justify-content: flex-start; padding-top: 18px; }
.hx2-review-controls > div:last-child { display: none; }
.hx2-events__grid { gap: 28px; margin-bottom: 30px; }
.hx2-close { padding-block: 74px; }
.hx2-close > .hx2-wrap > p:not(.hx2-eyebrow) { margin-bottom: 28px; font-size: 16px; line-height: 1.6; } .hx2-intro,
.hx2-flavours,
.hx2-routine,
.hx2-why,
.hx2-events,
.hx2-close {
content-visibility: auto;
contain-intrinsic-size: auto 700px;
}
}
@media (max-width: 380px) {
.hx2-wrap { width: min(100% - 24px, 1320px); }
.hx2-hero__panel { width: min(100% - 16px, 1380px); }
.hx2-hero__visual { min-height: 250px; }
}
@media (hover: none) and (pointer: coarse) {
.hx2-product__media img,
.hx2-recipe img,
.hx2-recipe > i { transition: none; }
} .hx2-hero__panel { grid-template-columns: .72fr 1.28fr; }
.hx2-hero__copy { width: 100%; max-width: 500px; }
.hx2-hero__visual::before,
.hx2-hero__visual::after { display: none; }
.hx2-hero__visual img {
max-height: min(580px, calc(100vh - 300px));
filter: none;
} .hx2-hero__track { scroll-behavior: auto; }
@media (min-width: 901px) {
.hx2-hero__nav {
top: auto;
bottom: 48px;
width: 38px;
height: 38px;
transform: none;
}
.hx2-hero__nav:hover { transform: scale(1.06); } .hx2-hero__nav--prev { right: calc(50% + 84px); left: auto; }
.hx2-hero__nav--next { right: auto; left: calc(50% + 84px); }
}
@media (max-width: 900px) {
.hx2-hero__panel { grid-template-columns: 1fr; }
}  .hx2-hero__visual--lineup {
position: relative;
display: block;
width: min(100%, calc((100vh - 330px) / .42));
min-height: 0;
aspect-ratio: 100 / 42;
margin-inline: auto;
}
.hx2-hero__visual--lineup picture {
position: absolute;
display: block;
margin: 0;
}
.hx2-hero__visual--lineup picture:nth-child(1) { left: 1%;    bottom: 10%; width: 21%;   z-index: 1; }
.hx2-hero__visual--lineup picture:nth-child(2) { left: 16.8%; bottom: 5%;  width: 24.8%; z-index: 2; }
.hx2-hero__visual--lineup picture:nth-child(3) { left: 35.4%; bottom: 0;   width: 29.2%; z-index: 3; }
.hx2-hero__visual--lineup picture:nth-child(4) { left: 58.4%; bottom: 5%;  width: 24.8%; z-index: 2; }
.hx2-hero__visual--lineup picture:nth-child(5) { left: 78%;   bottom: 10%; width: 21%;   z-index: 1; }
.hx2-hero__visual--lineup img {
position: static;
display: block;
width: 100%;
max-width: none;
height: auto;
max-height: none; filter: drop-shadow(0 12px 18px rgba(16, 24, 32, .16));
} .hx2-hero__slide--apple { background-color: #e4ecd5; }
.hx2-hero__slide--maple { background-color: #f1e3d0; }
@media (max-width: 900px) {
.hx2-hero__visual--lineup { width: min(100%, 560px); margin-bottom: 18px; }
} @media (min-width: 901px) {
.hx2-hero__panel { padding-block: clamp(12px, 2vh, 24px); }
.hx2-hero__visual:not(.hx2-hero__visual--lineup) { padding-bottom: 92px; } .hx2-hero__visual--lineup { margin-bottom: 92px; } .hx2-hero__visual { min-height: 0; }
.hx2-hero__visual--lineup { width: min(94%, calc((100vh - 400px) / .42)); }
.hx2-hero__visual:not(.hx2-hero__visual--lineup) img { max-height: min(560px, calc(100vh - 400px)); }
} .hx2-products--range { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hx2-products--range .hx2-product__media { min-height: 360px; }
.hx2-products--range .hx2-product__media img { width: 76%; height: 300px; mix-blend-mode: normal; }
.hx2-products--range .hx2-product__info { flex-direction: column; gap: 6px; padding-top: 16px; }
.hx2-products--range .hx2-product__info > strong { padding-top: 0; }
.hx2-product--apple .hx2-product__media { background: #e4ecd5; }
.hx2-product--maple .hx2-product__media { background: #f1e3d0; }
@media (max-width: 1080px) {
.hx2-products--range { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx2-products--range .hx2-product:last-child { grid-column: auto; width: auto; }
}
@media (max-width: 800px) {
.hx2-products--range { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
.hx2-products--range .hx2-product:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
.hx2-products--range .hx2-product__media { min-height: 250px; }
.hx2-products--range .hx2-product__media img { height: 220px; }
.hx2-products--range .hx2-product__media > span { top: 10px; left: 10px; }
} .hx2 { --hx2-section-y: clamp(52px, 6vw, 88px); }
.hx2-intro,
.hx2-flavours,
.hx2-why,
.hx2-recipes,
.hx2-reviews,
.hx2-events,
.hx2-close { padding-block: var(--hx2-section-y); }
.hx2-section-head { margin-bottom: clamp(28px, 3.4vw, 46px); }
.hx2-why__heading { margin-bottom: clamp(28px, 3.4vw, 46px); }
.hx2-flavours__footer { padding-top: clamp(28px, 3vw, 42px); }
.hx2-recipes__grid { margin-bottom: 36px; }
.hx2-events__grid { margin-bottom: 36px; }
.hx2-routine { min-height: 640px; }
.hx2-routine__copy { padding-block: var(--hx2-section-y); }
@media (max-width: 767px) {
.hx2-routine { min-height: 0; }
}  .hx2-proof .hx2-wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1200px; }
.hx2-proof .hx2-wrap > div { border-top: 0; border-left: 1px solid var(--hx2-line); }
.hx2-proof .hx2-wrap > div:first-child { border-left: 0; }
@media (max-width: 1024px) {
.hx2-proof .hx2-wrap > div { flex-direction: column; justify-content: center; gap: 7px; padding: 14px 6px; text-align: center; }
.hx2-proof img { max-width: 34px; height: 34px; }
.hx2-proof strong { font-size: 10.5px; line-height: 1.25; }
} .hx2-intro__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hx2-intro__facts span { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; font-size: 9px; line-height: 1.25; text-align: center; } .hx2-why__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hx2-why__grid article,
.hx2-why__grid article:nth-child(n) { min-height: 0; padding: 26px 22px 30px; border-top: 0; border-left: 1px solid var(--hx2-line); }
.hx2-why__grid article:first-child { border-left: 0; }
.hx2-why__grid h3 { font-size: 18px; }
@media (max-width: 1080px) {
.hx2-why__grid article,
.hx2-why__grid article:nth-child(n) { padding: 22px 14px 26px; }
.hx2-why__grid h3 { font-size: 16px; }
.hx2-why__grid p { font-size: 12.5px; line-height: 1.6; }
}
@media (max-width: 767px) {
.hx2-why__grid { grid-template-columns: 1fr; }
.hx2-why__grid article,
.hx2-why__grid article:nth-child(n) { padding: 22px 0 25px; border-top: 1px solid var(--hx2-line); border-left: 0; }
.hx2-why__grid article:first-child { border-top: 0; }
} .hx2-why__grid { --hx2-spot: 15s; }
.hx2-why__grid article:nth-child(1),
.hx2-why__grid article:nth-child(1) .hx2-why__icon { animation-delay: 0s; }
.hx2-why__grid article:nth-child(2),
.hx2-why__grid article:nth-child(2) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.8); }
.hx2-why__grid article:nth-child(3),
.hx2-why__grid article:nth-child(3) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.6); }
.hx2-why__grid article:nth-child(4),
.hx2-why__grid article:nth-child(4) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.4); }
.hx2-why__grid article:nth-child(5),
.hx2-why__grid article:nth-child(5) .hx2-why__icon { animation-delay: calc(var(--hx2-spot) * -.2); }
.hx2-why__grid article { animation-name: hx2-why-spot5; }
.hx2-why__grid .hx2-why__icon { animation-name: hx2-why-icon5; }
@keyframes hx2-why-spot5 {
0%   { opacity: 1; background-color: rgba(29, 68, 151, .08); }
16%  { opacity: 1; background-color: rgba(29, 68, 151, .08); }
21%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
95%  { opacity: var(--hx2-spot-dim); background-color: transparent; }
100% { opacity: 1; background-color: rgba(29, 68, 151, .08); }
}
@keyframes hx2-why-icon5 {
0%   { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
16%  { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
21%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
95%  { border-color: #dbe4f4; background-color: #f4f7fc; transform: none; }
100% { border-color: #9fb6e2; background-color: #e7eefb; transform: translateY(-3px) scale(1.06); }
} .hx2-size-toggle { display: flex; justify-content: center; margin: 0 0 clamp(22px, 2.6vw, 34px); }
.hx2-size-toggle__group { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #d6dce3; border-radius: 999px; background: #fff; }
.hx2-size-toggle__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hx2-size-toggle label {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 22px;
border-radius: 999px;
color: #35414b;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease, color .2s ease;
}
.hx2-size-toggle label:hover { color: var(--hx2-blue); }
.hx2-size-toggle__radio:checked + label { background: var(--hx2-blue); color: #fff; }
.hx2-size-toggle__radio:focus-visible + label { outline: 2px solid var(--hx2-blue); outline-offset: 3px; }
.hx2-flavours .hx2-products--size-25 { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto; }
.hx2-flavours:has(#hx2-size-25:checked) .hx2-products--size-15 { display: none; }
.hx2-flavours:has(#hx2-size-25:checked) .hx2-products--size-25 { display: grid; }
@media (max-width: 800px) {
.hx2-flavours .hx2-products--size-25 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}  .hx2-hero__slide--feature {
flex-direction: column;
align-items: stretch;
background: linear-gradient(180deg, #0a3880 0%, #0d3a82 45%, #1b4a9a 100%);
} @media (min-width: 901px) {
.hx2-hero__slide--feature { padding-bottom: 92px; }
}
.hx2-hero__slide--feature .hx2-hero__panel {
order: 0;
flex: 0 0 auto;
position: relative;
z-index: 1;
grid-template-columns: 1fr;
justify-items: center;
padding-block: clamp(22px, 4vh, 52px) 0;
text-align: center;
}
.hx2-hero__slide--feature .hx2-hero__copy { max-width: 760px; padding: 0; }
.hx2-hero__slide--feature h1 { max-width: none; margin: 12px 0 14px; font-size: clamp(2.4rem, 3.6vw, 3.85rem); }
.hx2-hero__slide--feature .hx2-hero__lede { max-width: 560px; margin: 0 auto 24px; }
.hx2-hero__slide--feature .hx2-eyebrow,
.hx2-hero__slide--feature .hx2-actions { justify-content: center; }
.hx2-hero__slide--feature .hx2-hero__rating { display: none; }
.hx2-hero__lineup {
order: 1;
position: relative;
display: block;
flex: 1 1 0;
min-height: clamp(260px, 42vh, 440px);
}
.hx2-hero__lineup img {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: auto;
height: 100%;
max-width: 100%;
max-height: none;
object-fit: cover;
object-position: center bottom;
transform: translateX(-50%);
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 95%, transparent), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 95%, transparent), linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-composite: intersect;
} .hx2-hero__slide--dark .hx2-eyebrow,
.hx2-hero__slide--dark h1,
.hx2-hero__slide--dark h2,
.hx2-hero__slide--dark .hx2-text-link { color: #fff; }
.hx2-hero__slide--dark .hx2-hero__lede { color: rgba(255, 255, 255, .88); }
.hx2-hero__slide--dark .hx2-hero__rating { color: rgba(255, 255, 255, .78); }
.hx2-hero__slide--dark .hx2-hero__rating span { color: #f2d38a; }
.hx2-hero__slide--dark .hx2-text-link { border-color: rgba(255, 255, 255, .6); } .hx2-hero__slide--apple { --hx2-slide-bg: #6c643c; --hx2-slide-bg-m: #7d5b41; }
.hx2-hero__slide--blue  { --hx2-slide-bg: #3f547e; --hx2-slide-bg-m: #4f5a72; }
.hx2-hero__slide--maple { --hx2-slide-bg: #93603f; --hx2-slide-bg-m: #8a5a3c; }
.hx2-hero__slide--cocoa { --hx2-slide-bg: #5d3c2c; --hx2-slide-bg-m: #835b48; } .hx2-hero__slide--oat   { --hx2-slide-bg: #b1997b; --hx2-slide-bg-m: #a89580; --hx2-photo-fade: 15%; }
.hx2-hero__slide--photo { background: var(--hx2-slide-bg); } .hx2-hero__photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: auto;
max-width: 62%;
aspect-ratio: 1400 / 903;
}
.hx2-hero__photo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hx2-photo-fade, 26%));
mask-image: linear-gradient(90deg, transparent 0, #000 var(--hx2-photo-fade, 26%));
}
.hx2-hero__slide--photo .hx2-hero__panel { position: relative; z-index: 1; grid-template-columns: 1fr; }
.hx2-hero__slide--photo .hx2-hero__copy { max-width: min(480px, 38%); } .hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-eyebrow,
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__lede { color: #14191d; }
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__rating { color: #24292d; }
.hx2-hero__slide--photo:not(.hx2-hero__slide--dark) .hx2-hero__rating span { color: #14306b; } @media (max-width: 900px) {
.hx2-hero__slide--feature .hx2-hero__panel { padding-block: 30px 6px; }
.hx2-hero__slide--feature .hx2-hero__copy { max-width: 560px; }
.hx2-hero__slide--feature .hx2-actions { align-items: center; }
.hx2-hero__lineup { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.hx2-hero__lineup img {
position: static;
width: 100%;
height: auto;
max-height: 46vh;
transform: none;
}
.hx2-hero__slide--photo { flex-direction: column; align-items: stretch; background: var(--hx2-slide-bg-m); }
.hx2-hero__photo { position: relative; inset: auto; flex: 1 1 auto; width: 100%; max-width: none; aspect-ratio: auto; min-height: 0; max-height: 52vh; overflow: hidden; }
.hx2-hero__photo img {
object-position: center 45%;
-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
mask-image: linear-gradient(180deg, #000 58%, transparent);
}
.hx2-hero__slide--photo .hx2-hero__panel { flex: 0 0 auto; justify-items: center; padding-block: 4px 44px; }
.hx2-hero__slide--photo .hx2-hero__copy { max-width: 640px; }
} .hx2-product__soon {
display: inline-block;
padding: 4px 9px;
border-radius: 999px;
background: #c8102e;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
} .hx-ship-fact { align-items: center; }
.hx-ship-fact .hx-ship-fact__icon {
display: inline-flex;
margin-top: 0;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--hx2-blue, #1d4497);
color: #fff;
box-shadow: 0 6px 14px rgba(29, 68, 151, .22);
}
.hx-ship-fact__icon svg { display: block; width: 24px; height: 24px; margin: auto; } .hx2-products .hx2-product__media--render { min-height: 0; aspect-ratio: 1; }
.hx2-products .hx2-product__media--render img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }