/*
Theme Name: Juice Goya
Template: goya
Description: Goya child theme with custom Juice header and footer
Version: 1.0.0
Author: Juice Grillz
Text Domain: juice-goya
*/
/* ===========================================
SELF-HOSTED INTER FONT — no Google Fonts dependency
=========================================== */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 600;
font-display: block;
src: url('./fonts/inter-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;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 600;
font-display: block;
src: url('./fonts/inter-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;
}
/* ===========================================
HIDE GOYA DEFAULT FOOTER (keep header!)
=========================================== */
.footer-widgets,
#footer,
footer.footer-main,
.goya-footer,
.site-footer,
.footer-wrapper {
display: none !important;
}
/* ===========================================
ENSURE JUICE FOOTER SHOWS SITE-WIDE
=========================================== */
.juice-footer {
display: block !important;
}
/* ===========================================
JUICE HERO SLIDER (homepage)
=========================================== */
.juice-hero-slider {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.juice-slides {
width: 100%;
height: 100%;
position: relative;
}
.juice-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.7s ease;
}
.juice-slide.active {
opacity: 1;
}
.juice-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Gucci-style zoom-release: image is zoomed in 20% at rest, settles to
natural size with a slow-start/fast-finish ease when the slide becomes
active (data-animated flag added by site.js). */
transform: scale(1.2);
transform-origin: center center;
transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
will-change: transform;
}
.juice-slide img[data-animated="true"] {
transform: scale(1);
}
/* Slider navigation arrows */
.juice-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, transform 0.3s ease;
z-index: 10;
}
.juice-slider-nav:hover {
background: #fff;
}
.juice-slider-nav svg {
width: 24px;
height: 24px;
color: #000;
}
.juice-slider-prev {
left: 20px;
}
.juice-slider-next {
right: 20px;
}
/* Slider dots */
.juice-slider-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.juice-slider-dot {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.juice-slider-dot.active {
background: #fff;
}
.juice-slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.juice-slider-nav {
width: 40px;
height: 40px;
}
.juice-slider-nav svg {
width: 20px;
height: 20px;
}
.juice-slider-prev {
left: 10px;
}
.juice-slider-next {
right: 10px;
}
.juice-slider-dots {
bottom: 20px;
}
}
/* Ensure content below hero is visible */
body.home .site-content {
position: relative;
z-index: 1;
}
/* ===========================================
GOYA HEADER OVERRIDES
=========================================== */
/* Hide header spacer on homepage only (hero goes full bleed) */
body.home .header-spacer,
body.single-product .header-spacer {
display: none !important;
}
/* Compact 60px header — matches scrolled logo/icons height for perfect symmetry */
body.home .site-header.is-scrolled,
body:not(.home) .site-header {
height: 72px !important;
}
.header-spacer,
.product-header-spacer {
height: 72px !important;
}
/* Non-homepage (except product pages): solid white header */
body:not(.home):not(.single-product) .site-header {
background: #fff !important;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important;
}
/* Remove ALL header borders and shadows — every page, every state */
.site-header,
.header_on_scroll .site-header,
.header_on_scroll:not(.megamenu-active) .site-header,
body.single-product .site-header,
body.home .site-header,
body.home .site-header.is-scrolled {
box-shadow: none !important;
border-bottom: none !important;
}
.site-header:after,
.header-border-1 .site-header:after,
.header_on_scroll .site-header:after {
display: none !important;
}
body:not(.home) #header .logo-holder {
position: relative !important;
width: 160px !important;
height: 72px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
transform: none !important;
transition: none !important;
pointer-events: none;
}
body:not(.home) #header .logo-holder .logolink,
body:not(.home) #header .logo-holder img {
pointer-events: auto;
}
body:not(.home) #header .logo-holder .logolink {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
body:not(.home) #header .logo-holder img {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}
/* Hide Goya's own header items — we use our custom icons overlay */
.site-header .hamburger-menu,
.site-header .main-navigation,
.site-header .header-right-items,
.site-header .header-bottom,
.header-mobile .hamburger-menu,
.header-mobile .mobile-header-icons {
display: none !important;
}
/* ===========================================
JUICE ICONS OVERLAY
=========================================== */
.juice-icons {
position: fixed;
top: 0;
right: 4.5%;
height: 90px;
display: flex;
align-items: center;
gap: 16px;
z-index: 10000;
transition: height 0.3s ease;
}
/* When header is scrolled, match 72px header */
.juice-icons.is-scrolled,
body:not(.home) .juice-icons {
height: 72px;
}
.juice-icon {
display: flex;
align-items: center;
color: #000;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: none;
transition: opacity 0.2s ease;
}
.juice-icon:hover {
opacity: 0.5;
}
.juice-icon svg {
width: 24px;
height: 24px;
}
/* Cart count badge */
.juice-cart {
position: relative;
}
.juice-cart .minicart-counter,
.juice-cart .juice-cart-count {
position: absolute !important;
top: -6px !important;
right: -8px !important;
background: #000 !important;
background-color: #000 !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 600 !important;
min-width: 16px !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
font-family: Arial, Helvetica, sans-serif !important;
}
.juice-cart .minicart-counter:empty,
.juice-cart .juice-cart-count:empty,
.juice-cart .minicart-counter.et-count-zero {
display: none !important;
}
/* Admin bar offset — match Goya's exact header shift at each breakpoint */
@media screen and (min-width: 783px) {
.admin-bar .juice-icons {
top: 32px;
}
}
@media screen and (max-width: 782px) and (min-width: 601px) {
.admin-bar .juice-icons {
top: 46px;
}
}
@media screen and (max-width: 600px) {
.admin-bar .juice-icons {
top: 0;
}
}
/* Mobile icons */
@media (max-width: 768px) {
.juice-icons {
right: 16px;
height: 70px;
gap: 20px;
}
.juice-icon svg {
width: 23px;
height: 23px;
}
.juice-icons.is-scrolled,
body:not(.home) .juice-icons {
height: 72px;
}
}
/* ===========================================
HOMEPAGE - ANIMATED HEADER (Goya overrides)
=========================================== */
/* Homepage: header always transparent — white bg is a sliding pseudo-element */
body.home .site-header,
body.single-product .site-header {
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
}
/* Homepage: white bar slides down on scroll (envelope reveal) */
body.home .site-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #fff;
box-shadow: none;
transform: translateY(-100%);
transition: transform 0.8s cubic-bezier(0.5, 0, 0, 1);
z-index: -1;
}
body.home .site-header.is-scrolled::before {
transform: translateY(0);
}
/* Product page: white bar fades in on scroll */
body.single-product .site-header::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #fff;
box-shadow: none;
opacity: 0;
transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1);
z-index: -1;
}
body.single-product .site-header.is-scrolled::before {
opacity: 1;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
/* Keep header itself transparent when scrolled — ::before handles the white */
body.home .site-header.is-scrolled,
body.single-product .site-header.is-scrolled {
background: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none !important;
}
/* ===========================================
HOMEPAGE - ANIMATED LOGO (Gucci technique)
Desktop: absolute positioned, viewport-centered
Uses margin:0 auto + width + translateY only
=========================================== */
/* The header itself is the positioning context for the absolute logo */
body.home #header.site-header {
overflow: visible !important;
}
body.home #header .logo-holder {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: clamp(360px, 63vw, 900px) !important;
height: 90px !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: translate3d(0, 35vh, 0);
transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
height 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: width, transform;
pointer-events: none;
z-index: 2;
}
body.home #header .logo-holder .logolink,
body.home #header .logo-holder img {
pointer-events: auto;
}
body.home #header .logo-holder .logolink {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
body.home #header .logo-holder img {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}
/* Scrolled: logo shrinks centered into header bar */
body.home #header.is-scrolled .logo-holder {
width: 160px !important;
height: 72px !important;
transform: translate3d(0, 0, 0);
}
/* ===========================================
MOBILE LOGO (<=991px)
=========================================== */
@media (max-width: 991px) {
/* Homepage: big centered logo pushed down */
body.home #header .logo-holder {
width: clamp(300px, 70vw, 600px) !important;
transform: translate3d(0, 30vh, 0);
}
/* Homepage scrolled: use transform (not margin) to go left — smooth both ways */
body.home #header.is-scrolled .logo-holder {
width: 135px !important;
height: 72px !important;
transform: translate3d(calc(-50vw + 88px), 0, 0);
}
/* All non-homepage pages: match homepage scrolled logo position exactly */
body:not(.home) #header .logo-holder {
position: absolute !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
transform: translate3d(calc(-50vw + 88px), 0, 0) !important;
}
}
/* ===========================================
SEARCH PANEL (boxed dropdown, right-aligned)
=========================================== */
.juice-search {
position: fixed;
top: 60px;
right: 24px;
z-index: 10000;
background: #fff;
width: min(680px, 55vw);
max-height: calc(100vh - 80px);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15),
-1px 0 0 rgba(0, 0, 0, 0.06),
0 1px 0 rgba(0, 0, 0, 0.06);
transition: opacity 0.25s ease,
transform 0.25s ease,
visibility 0s 0.25s;
-webkit-overflow-scrolling: touch;
}
.juice-search.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s ease,
transform 0.25s ease,
visibility 0s 0s;
}
/* Backdrop overlay */
.juice-search-backdrop {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.14);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0s 0.25s;
}
.juice-search-backdrop.is-visible {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0s 0s;
}
/* Homepage: header is 88px */
body.home .juice-search {
top: 88px;
}
/* Admin bar offset */
.admin-bar .juice-search {
top: 92px;
}
body.home.admin-bar .juice-search {
top: 120px;
}
@media (max-width: 782px) {
.admin-bar .juice-search {
top: 100px;
}
body.home.admin-bar .juice-search {
top: 116px;
}
}
/* Top row: search input + cancel */
.juice-search__top {
padding: 32px 32px 0;
}
.juice-search__form {
display: flex;
align-items: center;
gap: 18px;
}
.juice-search__field {
flex: 1;
position: relative;
padding-top: 0;
padding-bottom: 0;
}
.juice-search__input {
width: 100% !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
color: #000;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px !important;
font-weight: 400;
line-height: 1 !important;
padding: 0 0 6px !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
-webkit-appearance: none;
appearance: none;
border-radius: 0 !important;
}
.juice-search__input::placeholder {
opacity: 0;
}
/* Floating label */
.juice-search__label {
position: absolute;
left: 0;
bottom: 6px;
transform-origin: left bottom;
transform: translateY(0) scale(1);
color: #000;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
white-space: nowrap;
transition: transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
font-size 980ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 980ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-search__input:focus ~ .juice-search__label,
.juice-search__input:not(:placeholder-shown) ~ .juice-search__label {
transform: translateY(-20px) scale(0.85);
opacity: 0.4;
}
/* Underlines */
.juice-search__line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(0, 0, 0, 0.18);
}
.juice-search__line-active {
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 1px;
background: #000;
transform: translateX(-50%);
transition: width 820ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-search__input:focus ~ .juice-search__line-active {
width: 100%;
}
/* Cancel button */
.juice-search__cancel {
background: none;
border: none;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
padding: 4px 0;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.juice-search__cancel:hover {
opacity: 0.4;
}
/* Remove default search input styling */
.juice-search__input::-webkit-search-cancel-button,
.juice-search__input::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
/* Live search results */
.juice-search__results {
padding: 20px 32px 28px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 12px;
}
.juice-search__results-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.juice-search__result-item {
display: flex;
flex-direction: column;
text-decoration: none;
color: #000;
transition: opacity 0.2s;
}
.juice-search__result-item:hover {
opacity: 0.7;
}
.juice-search__result-img {
aspect-ratio: 1;
overflow: hidden;
background: #f5f5f5;
margin-bottom: 10px;
}
.juice-search__result-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.juice-search__result-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.juice-search__result-title {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: -0.2px;
text-transform: uppercase;
}
.juice-search__result-price {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}
.juice-search__no-results {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
text-align: center;
padding: 20px 0;
}
@media (max-width: 768px) {
.juice-search__results {
padding: 12px 18px 20px;
}
.juice-search__results-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.juice-search__result-item {
flex-direction: row;
align-items: center;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.juice-search__result-item:last-child {
border-bottom: none;
}
.juice-search__result-img {
width: 56px;
height: 56px;
flex-shrink: 0;
margin-bottom: 0;
aspect-ratio: auto;
}
.juice-search__result-info {
gap: 2px;
}
.juice-search__result-title {
font-size: 12px;
}
.juice-search__result-price {
font-size: 11px;
}
}
/* Suggestion columns */
.juice-search__suggestions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 22px 32px 28px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
margin-top: 12px;
}
.juice-search__heading {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #000;
margin: 0 0 14px;
line-height: 1;
}
.juice-search__links {
list-style: none;
margin: 0;
padding: 0;
}
.juice-search__links li {
margin-bottom: 10px;
}
.juice-search__links a {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
color: #000;
text-decoration: none;
letter-spacing: 0.02em;
transition: opacity 0.2s ease;
}
.juice-search__links a:hover {
opacity: 0.45;
}
/* Mobile */
@media (max-width: 768px) {
.juice-search {
top: 54px;
width: 100%;
right: 0;
max-height: calc(100vh - 54px);
max-height: calc(100dvh - 54px);
}
.juice-search__top {
padding: 24px 24px 0;
}
.juice-search__results {
padding: 16px 24px 24px;
}
.juice-search__results-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.juice-search__suggestions {
grid-template-columns: 1fr 1fr;
padding: 18px 24px 24px;
gap: 20px 0;
}
.juice-search__suggestions .juice-search__col:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.juice-search__top {
padding: 20px 18px 0;
}
.juice-search__suggestions {
grid-template-columns: 1fr;
padding: 16px 18px 20px;
gap: 18px;
}
.juice-search__suggestions .juice-search__col:last-child {
grid-column: auto;
}
}
/* ===========================================
ACCOUNT DROPDOWN PANEL
=========================================== */
.juice-account-toggle {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: inherit;
line-height: inherit;
}
.juice-account-backdrop {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.juice-account-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
.juice-account {
position: fixed;
top: 60px;
right: 46px;
z-index: 10000;
background: #fff;
width: 190px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.juice-account.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.juice-account__nav {
display: flex;
flex-direction: column;
padding: 24px 0;
}
.juice-account__nav a {
display: block;
padding: 12px 20px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
color: #000;
text-decoration: none;
text-align: center;
transition: background 0.2s ease, color 0.2s ease;
}
.juice-account__nav a:hover {
background: #f5f5f5;
}
/* Mobile: full-width dropdown */
@media (max-width: 768px) {
.juice-account {
right: 16px;
left: 16px;
width: auto;
top: 56px;
}
.juice-account__nav a {
padding: 12px 24px;
font-size: 12px;
}
}
/* ===========================================
FOOTER
=========================================== */
.juice-footer {
background: #000;
color: #fff;
margin-top: clamp(40px, 5vw, 80px);
}
/* Footer Content Section */
.juice-footer__about {
padding: clamp(40px, 4vw, 60px) clamp(24px, 3vw, 50px) 0;
}
.juice-footer__columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.juice-footer__col {
padding: 0 clamp(12px, 1.5vw, 24px);
}
/* Separator lines — centered between equal columns */
.juice-footer__col:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
/* Column headings */
.juice-footer__col h2 {
font-size: clamp(18px, 1.6vw, 28px);
font-weight: 400;
letter-spacing: clamp(1px, 0.2vw, 3px);
text-align: center;
margin: 0;
padding: clamp(24px, 3vw, 40px) 0 clamp(12px, 1.5vw, 20px);
color: rgba(255, 255, 255, 0.92);
}
/* Contact Column */
.juice-footer__col--contact {
display: flex;
flex-direction: column;
align-items: center;
}
.juice-footer-form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.juice-footer-form h2 {
padding-top: clamp(30px, 3vw, 50px);
padding-bottom: 10px;
}
.juice-footer__form-intro {
font-size: clamp(11px, 0.85vw, 13px);
line-height: 1.6;
text-align: left;
padding: clamp(12px, 1.5vw, 20px) 0;
max-width: 100%;
}
.juice-footer__form-intro a {
color: #fff;
text-decoration: underline;
}
.juice-footer__form-intro a:hover {
opacity: 0.8;
}
/* Footer form — compact fields */
.juice-footer .juice-contact-form[data-juice-form^="mailer"] .juice-input-wrap {
margin-bottom: 2px !important;
padding-bottom: 10px !important;
}
.juice-footer .juice-contact-form[data-juice-form^="mailer"] .juice-input-wrap.is-textarea textarea {
min-height: 60px !important;
}
/* Checkbox — proper square rendering */
.juice-footer .juice-contact-form[data-juice-form^="mailer"] .juice-optin input[type="checkbox"] {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
border: 2px solid rgba(255, 255, 255, 0.62) !important;
border-radius: 2px !important;
flex: 0 0 auto !important;
-webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
box-sizing: border-box !important;
}
.juice-footer .juice-contact-form[data-juice-form^="mailer"] .juice-optin input[type="checkbox"]:checked {
border-color: rgba(255, 255, 255, 0.95) !important;
}
/* About Column */
.juice-footer__col--about {
text-align: center;
}
.juice-footer__col--about p {
font-size: clamp(11px, 0.85vw, 13px);
line-height: 1.7;
padding: 0 0 clamp(12px, 1.2vw, 20px);
margin: 0;
}
/* Links Column */
.juice-footer__col--links {
display: flex;
flex-direction: column;
align-items: center;
}
.juice-footer__nav {
text-align: center;
}
.juice-footer__nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.juice-footer__nav li {
margin: 0;
}
.juice-footer__nav a {
font-size: clamp(11px, 0.85vw, 13px);
color: #fff;
text-decoration: none;
transition: transform 0.3s ease;
display: inline-block;
}
.juice-footer__nav a:hover {
transform: scale(1.05);
}
/* Footer Bottom — aligned with columns */
.juice-footer__bottom {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: clamp(60px, 6vw, 100px) 24px clamp(40px, 4vw, 60px);
}
.juice-footer__copyright {
font-size: 12px;
letter-spacing: 2px;
margin: 0;
padding-bottom: 5px;
width: 80vw;
max-width: 1400px;
text-align: left;
}
.juice-footer__logo {
margin: 0;
padding: 0;
width: 100%;
display: flex;
justify-content: center;
}
.juice-footer__logo img {
width: 80vw;
max-width: 1400px;
height: auto;
}
/* Footer Mobile */
@media (max-width: 1024px) {
.juice-footer__col:not(:last-child) {
border-right: none;
}
.juice-footer__columns {
grid-template-columns: 1fr;
width: 100%;
padding: 0 24px;
box-sizing: border-box;
gap: 40px;
}
.juice-footer__col h2 {
font-size: clamp(24px, 5vw, 32px);
}
/* Reorder columns on mobile */
.juice-footer__col--contact { order: 1; }
.juice-footer__col--about { order: 2; }
.juice-footer__col--links { order: 3; }
.juice-footer__col--links {
text-align: center;
}
.juice-footer__bottom {
padding: clamp(40px, 5vw, 60px) 24px 40px;
}
.juice-footer__logo img {
width: 95vw;
max-width: none;
}
}
/* ===========================================
SLIDE-OUT MENU PANEL — Juice override
Shared styles for both desktop + mobile panels
=========================================== */
/* --- BASE: Both panels slide from RIGHT --- */
#mobile-menu.side-panel,
#fullscreen-menu.side-panel {
background: #fff !important;
left: auto !important;
right: 0 !important;
transform: translateX(100%) !important;
opacity: 1 !important;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
flex-direction: column !important;
}
/* Panel open state */
.panel-open-menu #mobile-menu.side-menu,
.panel-open-menu #fullscreen-menu.side-menu {
transform: translateX(0) !important;
}
/* Z-INDEX: Panel overlays juice-icons (10000) and site-header (1023) */
body.panel-open-menu #mobile-menu.side-panel,
body.panel-open-menu #fullscreen-menu.side-panel {
z-index: 100001 !important;
}
body.panel-open-menu .click-capture {
z-index: 100000 !important;
}
/* Desktop: 25vw width */
@media (min-width: 769px) {
#mobile-menu.side-panel,
#fullscreen-menu.side-panel {
width: 25vw !important;
min-width: 300px !important;
max-width: 420px !important;
}
}
/* Mobile: full screen */
@media (max-width: 768px) {
#mobile-menu.side-panel,
#fullscreen-menu.side-panel {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
}
/* --- Hide sub-menus, mega menus, toggles, sliding-menu nav --- */
#mobile-menu .sub-menu,
#mobile-menu .menu-item-mega-parent .sub-menu,
#mobile-menu .mega-menu-title,
#mobile-menu .menu-item-has-children > .et-menu-toggle,
#mobile-menu .sliding-menu-nav,
#mobile-menu .sliding-menu-back,
#fullscreen-menu .sub-menu,
#fullscreen-menu .menu-item-mega-parent .sub-menu,
#fullscreen-menu .mega-menu-title,
#fullscreen-menu .menu-item-has-children > .et-menu-toggle {
display: none !important;
}
/* --- Menu items: identical Juice typography on ALL screens --- */
/* Note: Goya's slidingMenu plugin rebuilds #mobile-menu DOM:
#mobile-menu-container.sliding-menu.mobile-menu > ul.sliding-menu-panel > li > a
So we target BOTH original (.mobile-menu > li) and transformed (.sliding-menu-panel > li) */
#mobile-menu .mobile-menu > li,
#mobile-menu .sliding-menu-panel > li,
#fullscreen-menu .big-menu > li {
border-bottom: none !important;
}
#mobile-menu .mobile-menu > li > a,
#mobile-menu .sliding-menu-panel > li > a,
#fullscreen-menu .big-menu > li > a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #000000 !important;
padding: 16px 0 !important;
display: inline-block !important;
border-bottom: none !important;
white-space: nowrap !important;
text-decoration: none !important;
position: relative !important;
transition: transform 0.3s ease !important;
transform-origin: center left !important;
}
/* Kill parent theme ::after underline */
#mobile-menu .mobile-menu > li > a::after,
#mobile-menu .sliding-menu-panel > li > a::after,
#fullscreen-menu .big-menu > li > a::after {
display: none !important;
content: none !important;
}
/* Hover: scale(1.1) like VIRKSOMHEDEN footer links */
#mobile-menu .mobile-menu > li > a:hover,
#mobile-menu .sliding-menu-panel > li > a:hover,
#fullscreen-menu .big-menu > li > a:hover {
transform: scale(1.1) !important;
opacity: 1 !important;
}
/* --- CLOSE BUTTON: → arrow --- */
/* Show mobile-bar, position absolutely, strip to close btn only */
#mobile-menu .mobile-bar,
#fullscreen-menu .mobile-bar {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
z-index: 10 !important;
}
/* Hide action-icons inside mobile-bar */
#mobile-menu .mobile-bar .action-icons,
#fullscreen-menu .mobile-bar .action-icons {
display: none !important;
}
/* Style close button as → arrow */
#mobile-menu .et-close,
#fullscreen-menu .et-close {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
font-size: 0 !important;
color: #000000 !important;
margin: 36px 0 0 36px !important;
}
/* Hide the default X lines */
#mobile-menu .et-close::after,
#fullscreen-menu .et-close::after {
display: none !important;
content: none !important;
}
/* Arrow character replaces X */
#mobile-menu .et-close::before,
#fullscreen-menu .et-close::before {
content: "\2192" !important;
display: block !important;
position: static !important;
background: none !important;
width: auto !important;
height: auto !important;
transform: none !important;
margin: 0 !important;
font-size: 20px !important;
color: #000 !important;
font-family: 'Inter', system-ui, sans-serif !important;
opacity: 1 !important;
}
/* --- Hide extras --- */
#mobile-menu .side-panel-title,
#fullscreen-menu .side-panel-title,
#mobile-menu .bottom-extras,
#mobile-menu .mobile-top-extras,
#mobile-menu .mobile-search,
#fullscreen-menu .bottom-extras,
#fullscreen-menu .mobile-top-extras {
display: none !important;
}
/* --- DESKTOP layout --- */
@media (min-width: 769px) {
#mobile-menu.side-panel .side-panel-content,
#fullscreen-menu.side-panel .side-panel-content {
padding: 80px 36px 40px !important;
}
}
/* Force single-column layout (kill mega-menu grid) */
#fullscreen-menu .big-menu {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
#fullscreen-menu .big-menu > li {
width: 100% !important;
float: none !important;
}
/* --- MOBILE: Centered layout like old juicegrillz.dk --- */
@media (max-width: 768px) {
/* Close arrow moves to top-right on mobile */
#mobile-menu .mobile-bar,
#fullscreen-menu .mobile-bar {
left: auto !important;
right: 0 !important;
}
#mobile-menu .et-close,
#fullscreen-menu .et-close {
margin: 20px 20px 0 0 !important;
}
/* Content area fills panel height */
#mobile-menu.side-panel .side-panel-content,
#fullscreen-menu.side-panel .side-panel-content {
display: flex !important;
flex: 1 !important;
padding: 0 !important;
}
/* Container centers content vertically and horizontally */
#mobile-menu .side-panel-content .container,
#fullscreen-menu .side-panel-content .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
flex: 1 !important;
padding: 0 24px !important;
}
/* Menu wrapper — after slidingMenu plugin transforms DOM,
#mobile-menu-container becomes .sliding-menu.mobile-menu
with inline height from JS — override it */
#mobile-menu #mobile-menu-container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: auto !important;
}
/* Menu list (both original UL and plugin-rebuilt UL) centered */
#mobile-menu .mobile-menu,
#mobile-menu .sliding-menu-panel,
#fullscreen-menu .big-menu {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
position: relative !important;
left: auto !important;
}
/* Center hover origin on mobile */
#mobile-menu .mobile-menu > li > a,
#mobile-menu .sliding-menu-panel > li > a,
#fullscreen-menu .big-menu > li > a {
transform-origin: center center !important;
}
}
/* Social icons — pinned to bottom of slide-out panels */
.side-panel .juice-social-icons {
position: absolute;
bottom: 32px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
z-index: 3;
}
.side-panel .juice-social-icons a {
display: flex;
color: #000;
transition: opacity 0.3s ease;
}
.side-panel .juice-social-icons a:hover {
opacity: 0.4;
}
.side-panel .juice-social-icons svg {
width: 14px;
height: 14px;
}
/* ===========================================
JUICE CART DRAWER — Gucci-inspired side panel
=========================================== */
/* Fix z-index overlap: cart panel must be above header when open */
body.panel-open-cart .site-header {
z-index: 599 !important;
}
body.panel-open-cart #side-cart {
z-index: 10000 !important;
}
body.panel-open-cart .click-capture {
z-index: 9999 !important;
}
/* Panel container */
#side-cart.side-panel {
background: #fff !important;
}
/* Panel header — clean, minimal */
#side-cart.side-panel header {
background: #fff !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 0 32px !important;
height: 64px !important;
}
#side-cart .panel-header-inner {
height: 64px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
#side-cart .panel-header-inner .side-panel-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
#side-cart .side-panel-title {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: none !important;
color: #000 !important;
position: relative !important;
padding-right: 14px !important;
}
/* Item count badge — small black circle, stuck onto title */
#side-cart .side-panel-title .minicart-counter {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #000 !important;
color: #fff !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 8px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
margin-left: 0 !important;
position: absolute !important;
right: -2px !important;
top: -5px !important;
}
#side-cart .side-panel-title .minicart-counter.et-count-zero {
display: none !important;
}
/* Close button — arrow matching hamburger menu */
#side-cart .et-close {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
font-size: 0 !important;
color: #000 !important;
margin-left: 10px !important;
flex-shrink: 0 !important;
transition: opacity 0.3s ease;
}
#side-cart .et-close:hover {
opacity: 0.5;
}
/* Hide the default X lines */
#side-cart .et-close::after {
display: none !important;
content: none !important;
}
/* Arrow character replaces X */
#side-cart .et-close::before {
content: "\2192" !important;
display: block !important;
position: static !important;
background: none !important;
width: auto !important;
height: auto !important;
transform: none !important;
margin: 0 !important;
font-size: 20px !important;
color: #000 !important;
font-family: 'Inter', system-ui, sans-serif !important;
opacity: 1 !important;
}
/* Panel content area */
#side-cart .side-panel-content {
padding: 20px 32px 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Cart items list */
#side-cart .woocommerce-mini-cart {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Match burger menu's subtle rollout — same easing + duration.
opacity:1 forced so close doesn't snap-fade (parent .side-panel
defaults opacity:0; without this, opacity transitions to 0 instantly
while transform is still mid-slide). Mirrors style.css:1218 burger fix. */
#side-cart {
opacity: 1 !important;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Juice cart item — clean vertical layout */
#side-cart .juice-cart-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: relative;
text-align: center;
}
#side-cart .juice-cart-item:last-child {
border-bottom: none;
}
/* Cart item thumbnail */
#side-cart .juice-cart-thumb {
width: 100%;
margin-bottom: 12px;
position: relative;
}
#side-cart .juice-cart-thumb img {
width: 100%;
max-width: 224px;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 0;
}
/* Mobile: drop the 60px cap from Goya parent (shop.css matches
`#side-cart .widget_shopping_cart_content .woocommerce-mini-cart .woocommerce-mini-cart-item img`
at specificity 0,5,1 — we have to match its chain + !important to win)
so the thumbnail fills the panel. The side-cart goes near full-screen
on phones; the 60px thumb felt undersized. */
@media (max-width: 768px) {
#side-cart .widget_shopping_cart_content .woocommerce-mini-cart .woocommerce-mini-cart-item img,
#side-cart .juice-cart-thumb img {
max-width: 160px !important;
}
/* Align the × with the thumbnail. Thumb is 160px wide, centered →
right edge at calc(50% + 80px). Position X just OUTSIDE that, with
an 8px gap. X is 24px wide, so its right edge needs to be at
calc(50% + 80px + 8px + 24px) = calc(50% + 112px) from panel left,
which is calc(50% - 112px) from panel right. */
#side-cart .juice-cart-remove {
top: 8px !important;
right: calc(50% - 112px) !important;
}
}
/* Remove (×) button — matches .juice-wishlist-remove-icon */
/* Reset Goya .remove globals (core.css: text-indent, color, pseudo-element X lines) */
#side-cart .juice-cart-remove {
position: absolute;
top: 24px;
right: 0;
width: 24px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
color: #000 !important;
text-decoration: none;
font-size: 20px;
line-height: 1;
background: transparent !important;
border: none;
border-radius: 0 !important;
padding: 0;
z-index: 2;
transition: opacity 0.3s ease;
text-indent: 0 !important;
overflow: visible;
}
#side-cart .juice-cart-remove:hover {
opacity: 0.62;
background: transparent !important;
}
#side-cart .juice-cart-remove::before,
#side-cart .juice-cart-remove::after {
content: none !important;
display: none !important;
}
/* Product title */
#side-cart .juice-cart-title,
#side-cart .juice-cart-title a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
text-transform: uppercase !important;
color: #000;
text-decoration: none;
line-height: 1.4;
}
#side-cart .juice-cart-title a:hover {
opacity: 0.6;
}
/* Cart item meta — plating / impression kit size */
#side-cart .juice-cart-meta {
display: block;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
color: #000;
margin-top: 4px;
text-align: center;
letter-spacing: 0.02em;
}
/* Price — subtotal only */
#side-cart .juice-cart-price {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.02em;
color: #000;
margin-top: 4px;
}
/* Variation data */
#side-cart .juice-cart-item .variation {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
color: #000000;
margin: 0;
padding: 0;
}
#side-cart .juice-cart-item .variation dt,
#side-cart .juice-cart-item .variation dd {
display: inline;
margin: 0;
font-size: 11px;
}
#side-cart .juice-cart-item .variation dt {
display: none;
}
#side-cart .juice-cart-item .variation p {
margin: 0;
}
/* Cart summary / totals */
#side-cart .cart-panel-summary {
padding: 20px 0 !important;
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
margin-top: auto;
}
#side-cart .woocommerce-mini-cart__total {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
color: #000 !important;
margin: 0 0 20px !important;
padding: 0 !important;
}
#side-cart .woocommerce-mini-cart__total .amount {
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 0.02em !important;
}
/* Checkout + View Cart buttons */
#side-cart .woocommerce-mini-cart__buttons {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
#side-cart .woocommerce-mini-cart__buttons .button {
display: block !important;
width: 100% !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 16px 24px !important;
border-radius: 0 !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
text-decoration: none !important;
cursor: pointer;
}
/* Checkout button — primary black */
#side-cart .woocommerce-mini-cart__buttons .button.checkout {
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
}
#side-cart .woocommerce-mini-cart__buttons .button.checkout:hover {
background: #fff !important;
color: #000 !important;
}
/* View Cart button — outlined */
#side-cart .woocommerce-mini-cart__buttons .button:not(.checkout) {
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
}
#side-cart .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
background: #000 !important;
color: #fff !important;
}
/* Empty cart state */
#side-cart .et-cart-empty {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 60px 20px !important;
text-align: center;
}
#side-cart .et-cart-empty .empty-circle {
opacity: 0.15;
margin-bottom: 20px;
}
#side-cart .et-cart-empty .empty-circle svg {
width: 48px !important;
height: 48px !important;
}
#side-cart .woocommerce-mini-cart__empty-message {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #999 !important;
letter-spacing: 0.02em;
}
/* Hide summary when cart empty */
#side-cart .cart-panel-summary.empty-cart {
display: none !important;
}
/* Loader */
#side-cart #minicart-loader {
text-align: center;
padding: 40px 0;
}
/* Mobile adjustments */
@media (max-width: 575px) {
#side-cart.side-panel header {
padding: 0 20px !important;
}
#side-cart .side-panel-content {
padding: 16px 20px 0 !important;
}
}
/* Category page base styles — now in main category CSS block (line ~3680) */
.juice-subcategories {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.juice-subcat-item {
position: relative;
display: block;
height: 500px;
overflow: hidden;
}
.juice-subcat-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.juice-subcat-item:hover img {
transform: scale(1.03);
}
.juice-subcat-title {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 24px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #000;
transition: transform 0.4s ease;
}
.juice-subcat-item:hover .juice-subcat-title {
transform: translateY(-50%) scale(1.05);
}
.juice-products-section {
padding: 20px 0;
}
.juice-no-products {
text-align: center;
padding: 60px 20px;
font-size: 14px;
color: #666;
}
@media (max-width: 1024px) {
.juice-subcategories {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.juice-subcat-item {
height: 400px;
}
}
@media (max-width: 768px) {
.juice-category-page {
padding: 10px;
}
.juice-subcategories {
gap: 10px;
}
.juice-subcat-item {
height: 300px;
}
.juice-subcat-title {
font-size: 18px;
}
}
/* ===========================================
JUICE CATEGORIES PAGE
=========================================== */
.juice-categories-page {
width: 100%;
padding: 0 5px 5px 5px;
background: #fff;
}
.juice-categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.juice-category-item {
position: relative;
display: block;
height: 900px;
overflow: hidden;
}
.juice-category-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.juice-category-item:hover img {
transform: scale(1.03);
}
.juice-category-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
color: #fff;
text-align: center;
}
.juice-category-title {
font-size: 32px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 8px 0;
}
.juice-category-count {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.8;
}
.juice-no-categories {
grid-column: 1 / -1;
text-align: center;
padding: 100px 20px;
font-size: 14px;
color: #666;
}
@media (max-width: 768px) {
.juice-categories-grid {
grid-template-columns: 1fr;
}
.juice-category-item {
height: 500px;
}
.juice-category-overlay {
padding: 30px 20px;
}
.juice-category-title {
font-size: 24px;
}
}
/* ===========================================
POLICY PAGES (Privatlivspolitik, etc.)
=========================================== */
/* Hide WordPress page title on policy pages */
.page .entry-title,
.page .page-title,
.page-template-default .entry-header,
.page-template-default .page-header {
display: none !important;
}
/* Full width containers */
.page-template-default .entry-content,
.page-template-default .site-content,
.page-template-default .content-wrapper,
.page-template-default .container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
/* Full width block groups (for black backgrounds) */
.page-template-default .wp-block-group {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* (Moved to JUICE INFO PAGES section — see bottom of file) */
/* Juice privacy specific - ensure full width black */
.juice-privacy {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
}
/* ===========================================
WOOCOMMERCE PAGE FIXES
=========================================== */
/* Ensure proper spacing on cart/account pages */
.woocommerce-cart .site-content,
.woocommerce-account .site-content {
padding-top: 20px;
}
/* Fix any white line / background bleed issues */
.page-wrapper-inner,
.site-content,
#wrapper {
background: transparent;
border: none;
}
/* Remove any Goya borders that might show */
.page-wrapper-inner::before,
.page-wrapper-inner::after,
.site-content::before,
.site-content::after,
#wrapper::before,
#wrapper::after {
display: none !important;
}
/* Ensure footer has no gaps or lines */
.juice-footer {
border: none;
outline: none;
position: relative;
overflow: hidden;
}
/* Kill the right-side white line */
#wrapper,
.page-wrapper-inner,
.site-content,
body,
html {
border-right: none !important;
outline: none !important;
box-shadow: none !important;
}
/* Goya's click-capture — keep visible for panel close overlay */
/* Force footer to span full width with no gaps */
.juice-footer {
margin-right: 0 !important;
padding-right: 0 !important;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.juice-footer *:not(input):not(textarea):not(button):not(select) {
border-left: none;
border-right: none;
}
/* Fix Goya's content wrapper potential white backgrounds */
.content-wrapper,
.row,
.vc_row,
.wpb_row {
background: transparent !important;
border: none !important;
}
/* WooCommerce cart specific fixes */
.woocommerce-cart #wrapper {
background: #fff;
}
/* Ensure no vertical lines from Goya grid */
.vc_column_container,
.wpb_column {
border: none !important;
}
/* Admin bar adjustments for WooCommerce pages */
.admin-bar.woocommerce-cart .header-spacer {
height: 92px !important;
}
@media (max-width: 782px) {
.admin-bar.woocommerce-cart .header-spacer {
height: 100px !important;
}
}
/* ===========================================
LOGIN / REGISTER PAGE
Single-column Gucci-style with social login
Uses Juice Mailer UI components (light theme)
=========================================== */
/* Container */
.woocommerce-account:not(.logged-in) .site-content > .container {
max-width: 520px;
margin: 0 auto;
padding: 80px 24px 120px;
}
/* Hide WP/Goya page title */
.woocommerce-account:not(.logged-in) .page-header {
display: none;
}
/* Kill any Goya wrapper that might still render */
.et-login-wrapper {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* Hide WooCommerce privacy policy text (English, not needed) */
.woocommerce-privacy-policy-text {
display: none;
}
/* ── Juice login page layout ── */
.juice-login-page {
font-family: 'Inter', sans-serif;
max-width: 460px;
margin: 0 auto;
}
.juice-login-heading {
font-family: 'Inter', sans-serif;
font-size: 28px;
font-weight: 300;
letter-spacing: 6px;
text-transform: uppercase;
color: #000;
text-align: center;
margin: 0 0 16px;
}
.juice-login-subtitle {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 400;
color: rgba(0, 0, 0, 0.55);
text-align: center;
line-height: 1.6;
margin: 0 0 40px;
}
/* ── Social login buttons ── */
.juice-social-login {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 0;
}
.juice-social-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 14px 24px;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #000;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-social-btn:hover:not(:disabled) {
border-color: #000;
}
.juice-social-btn:disabled {
opacity: 0.45;
cursor: default;
}
.juice-social-btn svg {
flex: 0 0 auto;
}
/* ── "ELLER" divider ── */
.juice-login-divider {
display: flex;
align-items: center;
gap: 20px;
margin: 32px 0;
}
.juice-login-divider::before,
.juice-login-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.juice-login-divider span {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
color: rgba(0, 0, 0, 0.4);
}
/* ── Light-theme overrides for juice-mailer components ── */
body .juice-contact-form[data-juice-form="mailer-login"] .juice-input-wrap input,
body .juice-contact-form[data-juice-form="mailer-login"] .juice-input-wrap textarea {
color: #000 !important;
}
body .juice-contact-form[data-juice-form="mailer-login"] .juice-input-wrap label {
color: #000 !important;
}
body .juice-contact-form[data-juice-form="mailer-login"] .juice-underline-static {
background: rgba(0, 0, 0, 0.22) !important;
}
body .juice-contact-form[data-juice-form="mailer-login"] .juice-underline-animated {
background: #000 !important;
}
/* Autofill — white bg, black text */
body .juice-contact-form[data-juice-form="mailer-login"] .juice-input-wrap input:-webkit-autofill {
-webkit-text-fill-color: #000 !important;
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
box-shadow: 0 0 0px 1000px #fff inset !important;
background-color: #fff !important;
caret-color: #000 !important;
}
/* ── Submit button — light-theme juice-submit ── */
.juice-login-page .juice-submit {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: #000 !important;
border-color: rgba(0, 0, 0, 0.35) !important;
margin-top: 8px;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.juice-login-page .juice-submit:hover {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
/* ── Remember me + Lost password ── */
.juice-login-options {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
margin: 20px 0 28px;
}
.juice-login-remember {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.55);
cursor: pointer;
white-space: nowrap;
}
.juice-login-remember input[type="checkbox"] {
flex: 0 0 auto;
width: 12px;
height: 12px;
margin: 0;
appearance: none;
-webkit-appearance: none;
border: 2px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
background: transparent;
cursor: pointer;
transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-login-remember input[type="checkbox"]:checked {
border-color: rgba(0, 0, 0, 0.8);
background-repeat: no-repeat;
background-position: center;
background-size: 9px 9px;
background-image: url("data:image/svg+xml;utf8,");
}
.juice-login-lost {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.55);
text-decoration: none;
white-space: nowrap;
transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-login-lost:hover {
color: #000;
}
/* ── Switch link (toggle login/register) ── */
.juice-login-switch {
text-align: center;
margin-top: 36px;
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
}
.juice-login-switch a {
color: #000;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-login-switch a:hover {
border-bottom-color: #000;
}
/* ── Registration note ── */
.juice-login-note {
font-size: 13px;
color: rgba(0, 0, 0, 0.55);
line-height: 1.6;
text-align: center;
margin: 8px 0 16px;
}
/* ── Required field note ── */
.juice-login-required {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
margin: 0 0 24px;
}
/* ── Marketing consent checkbox ── */
.juice-register-consent {
margin: 28px 0 0;
}
.juice-consent-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.juice-consent-checkbox input[type="checkbox"] {
flex: 0 0 auto;
width: 12px;
height: 12px;
margin: 2px 0 0;
appearance: none;
-webkit-appearance: none;
border: 2px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
background: transparent;
cursor: pointer;
transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-consent-checkbox input[type="checkbox"]:checked {
border-color: rgba(0, 0, 0, 0.8);
background-repeat: no-repeat;
background-position: center;
background-size: 9px 9px;
background-image: url("data:image/svg+xml;utf8,");
}
.juice-consent-checkbox span {
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.6);
}
/* ── Terms & Privacy legal text ── */
.juice-register-legal {
margin: 24px 0 32px;
}
.juice-register-legal p {
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.5);
margin: 0;
}
.juice-register-legal a {
color: #000;
text-decoration: underline;
text-underline-offset: 2px;
transition: opacity 0.2s ease;
}
.juice-register-legal a:hover {
opacity: 0.6;
}
/* ── Filled submit button (register) ── */
.juice-login-page .juice-submit--filled {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.juice-login-page .juice-submit--filled:hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
/* ── Perks list (below register) ── */
.juice-register-perks {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.juice-perks-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.4);
margin: 0 0 20px;
}
.juice-perks-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.juice-perks-list li {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: rgba(0, 0, 0, 0.6);
padding-left: 20px;
position: relative;
}
.juice-perks-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 4px;
border-left: 1.5px solid rgba(0, 0, 0, 0.4);
border-bottom: 1.5px solid rgba(0, 0, 0, 0.4);
transform: rotate(-45deg);
}
/* ── Mobile ── */
@media (max-width: 768px) {
.woocommerce-account:not(.logged-in) .site-content > .container {
padding: 40px 24px 80px;
}
.juice-login-page {
max-width: 100%;
padding: 0 4px;
box-sizing: border-box;
}
.juice-login-heading {
font-size: 22px;
letter-spacing: 4px;
}
.juice-login-subtitle {
font-size: 12px;
margin-bottom: 28px;
}
.juice-login-divider {
margin: 24px 0;
}
.juice-social-btn {
padding: 12px 20px;
font-size: 10px;
}
.juice-login-page .juice-submit,
.juice-login-page .juice-submit--filled {
padding: 14px 24px !important;
font-size: 10px !important;
}
.juice-login-options {
flex-direction: row;
gap: 0;
}
}
/* ===========================================
IMPRESSION KIT — Single Product Upsell
=========================================== */
.juice-impression-kit {
margin: 16px 0 0;
padding: 20px 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
width: 100%;
}
.juice-kit-label {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #000;
margin: 0 0 8px;
}
.juice-kit-desc {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.6;
color: #000000;
margin: 0 0 14px;
}
.juice-kit-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.juice-kit-option {
flex: none;
width: 100%;
min-width: 0;
cursor: pointer;
}
.juice-kit-option input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.juice-kit-option-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-height: 50px;
padding: 11px 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
background 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-kit-option input[type="checkbox"]:checked + .juice-kit-option-inner,
.juice-kit-option input[type="radio"]:checked + .juice-kit-option-inner {
border-color: #000;
background: #000;
color: #fff;
}
.juice-kit-option input[type="checkbox"]:checked + .juice-kit-option-inner .juice-kit-option-name,
.juice-kit-option input[type="checkbox"]:checked + .juice-kit-option-inner .juice-kit-option-price,
.juice-kit-option input[type="radio"]:checked + .juice-kit-option-inner .juice-kit-option-name,
.juice-kit-option input[type="radio"]:checked + .juice-kit-option-inner .juice-kit-option-price {
color: #fff;
}
.juice-kit-option:hover .juice-kit-option-inner {
border-color: rgba(0, 0, 0, 0.35);
}
.juice-kit-option-name {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #000;
}
.juice-kit-option-price {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 400;
color: #000000;
}
.juice-kit-size {
margin: 12px 0;
}
.juice-kit-size-label {
margin: 0 0 8px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: #000;
}
.juice-kit-size-options {
display: flex;
gap: 8px;
}
.juice-kit-size-option {
flex: 1;
min-width: 0;
cursor: pointer;
}
.juice-kit-size-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.juice-kit-size-option span {
display: flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 10px 14px;
border: 1px solid rgba(0, 0, 0, 0.12);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
color: #000;
transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
background 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-kit-size-option input[type="radio"]:checked + span {
border-color: #000;
background: rgba(0, 0, 0, 0.02);
}
.juice-kit-size-option:hover span {
border-color: rgba(0, 0, 0, 0.35);
}
.juice-kit-add {
display: block;
width: 100%;
min-height: 44px;
padding: 12px 28px;
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #000;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
margin-top: 10px;
position: relative;
}
.juice-kit-add:hover {
background: #000;
color: #fff;
border-color: #000;
}
.juice-kit-add.added {
background: #000000;
color: #fff;
border-color: #000;
}
.juice-kit-add.loading {
cursor: wait;
background: #000 !important;
border-color: #000 !important;
color: transparent !important;
min-height: 44px !important;
padding: 12px 28px !important;
font-size: 10px !important;
position: relative;
}
/* Juice-styled spinner — replaces Goya's killed gold dot loader on the two
product-page add-to-cart buttons. Centered white ring on the black button
background. Text + bag-icon fade out first (300ms), then the spinner fades
in. Hover effects are locked out while .loading is active. */
@keyframes juice-spinner-rotate {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Selectors mirror the base rule's specificity so !important on color,
background, and border wins the cascade. Without this, the base color: #fff
on .woocommerce div.product .summary .single_add_to_cart_button overrode
our color: transparent and the text stayed visible behind the spinner. */
.juice-kit-add.loading,
.juice-product-actions .single_add_to_cart_button.loading,
.juice-product-actions button.single_add_to_cart_button.loading,
.woocommerce div.product .summary .single_add_to_cart_button.loading,
.woocommerce div.product .summary button.single_add_to_cart_button.loading,
.juice-cart-form .juice-add-to-cart.loading,
.juice-cart-form .single_add_to_cart_button.loading {
cursor: wait !important;
background: #000 !important;
border-color: #000 !important;
color: transparent !important;
position: relative;
/* Override Goya's base 300ms color transition so text fades in sync with
the spinner (80ms), not 300ms later. */
transition: color 80ms ease !important;
}
/* Hover lock: while loading, the normal black→white invert hover does not
apply. Same specificity chain as the original hover, plus .loading to
guarantee it overrides. */
.juice-kit-add.loading:hover,
.juice-product-actions .single_add_to_cart_button.loading:hover,
.juice-product-actions button.single_add_to_cart_button.loading:hover,
.woocommerce div.product .summary .single_add_to_cart_button.loading:hover,
.woocommerce div.product .summary button.single_add_to_cart_button.loading:hover {
background: #000 !important;
color: transparent !important;
border-color: #000 !important;
cursor: wait !important;
}
.juice-product-actions .single_add_to_cart_button.loading:hover .juice-bag-icon,
.woocommerce div.product .summary .single_add_to_cart_button.loading:hover .juice-bag-icon {
stroke: transparent !important;
color: transparent !important;
}
/* Bag icon snaps out fast — single_add_to_cart_button is a form submit, the
page begins navigating ~100-200ms after click, so any transition longer
than that never completes on screen. 80ms gets us a perceptible fade
without leaving the icon visible underneath the spinner. */
.juice-add-to-cart.loading .juice-bag-icon,
.single_add_to_cart_button.loading .juice-bag-icon {
opacity: 0;
transition: opacity 80ms ease;
}
/* Spinner — must be visible before form-submit navigation completes, so no
delay. 80ms fade-in matches the icon fade so the swap reads as one motion. */
@keyframes juice-spinner-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.juice-kit-add.loading::after,
.juice-add-to-cart.loading::after,
.single_add_to_cart_button.loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: 0;
border: 2px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
background: transparent !important;
display: block !important;
opacity: 0;
/* !important on animation is required: Goya's variations form AJAX handler
adds .et-loader to the button alongside .loading, and our own sitewide
kill rule (.et-loader:after { display: none !important; animation: none
!important }) at line 3863 would otherwise wipe out the spinner. Our
selector has higher specificity (0,2,1 vs 0,1,1) so !important here
wins. */
animation:
juice-spinner-fade-in 80ms ease forwards,
juice-spinner-rotate 0.7s linear infinite !important;
}
@media (max-width: 480px) {
.juice-kit-options {
gap: 8px;
}
.juice-kit-option-inner {
padding: 12px 8px;
}
.juice-kit-option-name {
font-size: 10px;
letter-spacing: 1px;
}
.juice-kit-option-price {
font-size: 10px;
}
}
/* ===========================================
JUICE HOMEPAGE TEMPLATE
=========================================== */
.juice-homepage-content {
width: 100%;
padding: 0;
background: #fff;
}
.juice-section {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 0;
}
.juice-section:last-child {
margin-bottom: 0;
}
/* Hero section — full bleed, edge-to-edge, no gap */
.juice-hero-section {
position: relative;
margin-bottom: 0;
gap: 0;
}
/* Full width section — Gucci-style featured (max-width 1440, centered) */
.juice-full-width {
max-width: 1440px;
margin: 0 auto 80px;
padding: 0;
}
/* Featured divider label (Gucci-style) — centered between sections */
.juice-featured-label {
width: 100%;
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1;
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
text-align: center;
color: #000;
margin: 64px 0;
padding: 80px 16px;
}
@media (max-width: 768px) {
.juice-featured-label {
/* Match Gucci's mobile FEATURED divider exactly:
- 80px top pad (text breathes from section boundary)
- Flush to previous section above (no top margin)
- 64px gap to next section below (external margin)
Measured live from gucci.com wayback mobile snapshot.
Weight (600) and zero tracking inherit from base rule — same on
desktop. Only the font-size shrinks for mobile. */
padding: 80px 16px 0;
margin: 0 0 64px;
font-size: 14px;
}
}
@media (max-width: 768px) {
.juice-hero-slider {
aspect-ratio: 2 / 3;
}
}
.juice-hero-section .juice-hero {
width: 100%;
height: 100%;
}
.juice-hero-section .juice-hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Column base styles */
.juice-col {
display: block;
overflow: hidden;
position: relative;
}
.juice-col img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.juice-col:hover img {
transform: scale(1.03);
}
/* Column titles */
.juice-col-title {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.03em;
text-transform: uppercase;
color: #fff;
transition: transform 0.4s ease;
}
.juice-col:hover .juice-col-title {
transform: translateY(-50%) scale(1.05);
}
@media (max-width: 768px) {
.juice-col-title {
font-size: 24px;
}
}
/* Four column section — 2x2 mobile, 4 across desktop */
.juice-four-col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 8px;
row-gap: 40px;
margin-bottom: 0;
padding: 56px 64px;
}
.juice-four-col .juice-col-quarter {
width: 100%;
}
.juice-four-col .juice-col-image {
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.juice-four-col .juice-col-image img {
/* Gucci-style zoom-release entrance: image is zoomed in 20% at rest and
settles to natural size when scrolled into view (data-animated flag set
by the IntersectionObserver in site.js). After settling, hover scales
slightly down — that hover rule is gated on data-animated so it only
fires post-entrance. */
transform: scale(1.2);
transform-origin: center center;
transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
will-change: transform;
}
.juice-four-col .juice-col-image img[data-animated="true"] {
transform: scale(1);
}
.juice-four-col .juice-col-quarter:hover .juice-col-image img[data-animated="true"] {
transform: scale(0.96);
}
.juice-col-label {
display: block;
text-align: center;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: capitalize;
color: #000;
padding: 16px 0 0;
}
@media (min-width: 769px) {
.juice-four-col {
grid-template-columns: repeat(4, 1fr);
}
}
/* Section heading — Juice UI */
@keyframes juiceFadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.juice-section-heading {
grid-column: 1 / -1;
width: 100%;
font-family: 'Inter', system-ui, sans-serif;
font-size: 24px;
line-height: 1;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
color: #000;
margin: 0 0 40px 0;
padding: 0;
animation: juiceFadeUp 0.8s ease-out both;
}
/* Two column section (50/50) — edge-to-edge like Gucci RawGrid */
.juice-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 0;
padding: 16px;
}
.juice-two-col .juice-col-half {
width: 100%;
aspect-ratio: 3 / 4;
}
.juice-two-col .juice-col-half img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2);
transform-origin: center center;
transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
will-change: transform;
}
.juice-two-col .juice-col-half img[data-animated="true"] {
transform: scale(1);
}
/* Full width section — Gucci's Article figure structure
(flex row, gap 32px, two 640×853 slides: image | text panel) */
.juice-full-width .juice-col-full {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 32px;
margin: 0 64px;
padding: 0;
}
.juice-full-width .juice-col-media {
display: block;
width: 640px;
height: 853px;
flex: 1 1 auto;
max-width: 640px;
overflow: hidden;
}
.juice-full-width .juice-col-full img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2);
transform-origin: center center;
transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
will-change: transform;
}
.juice-full-width .juice-col-full img[data-animated="true"] {
transform: scale(1);
}
.juice-full-width .juice-col-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 640px;
height: 853px;
flex: 1 1 auto;
max-width: 640px;
padding: 0;
margin: 0;
}
.juice-col-heading {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 26px;
font-weight: 400;
letter-spacing: -0.03em;
text-transform: uppercase;
color: #000;
margin: 0 0 20px;
line-height: 1.25;
}
.juice-col-body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.5;
letter-spacing: -0.04em;
color: #000;
margin: 0 0 20px;
max-width: 360px;
}
.juice-col-cta {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.03em;
text-transform: none;
color: #000;
text-decoration: none;
border-bottom: 1px solid #000;
padding-bottom: 2px;
line-height: 1.3;
}
.juice-col-cta:hover {
opacity: 0.7;
}
/* ===========================================
MOSAIC SECTION (3 service tiles — Gucci-style)
Service / Craft / Aftercare — 3-up grid with portrait media + text below.
=========================================== */
.juice-mosaic {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding: 32px 16px;
margin: 0 auto;
/* Matches Gucci's mosaic section max-width — 1440 minus 64×2 padding
leaves a 1312 content area, which is exactly 3×411 tiles + 2×40 gaps. */
max-width: 1440px;
margin-bottom: 0;
}
.juice-mosaic-section-heading {
grid-column: 1 / -1;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.1;
text-transform: uppercase;
text-align: center;
color: #000;
margin: 0 0 16px 0;
}
@media (min-width: 769px) {
.juice-mosaic-section-heading {
font-size: 32px;
margin: 0 0 32px 0;
}
}
.juice-mosaic-tile {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
.juice-mosaic-media {
width: 100%;
/* Gucci's mosaic media is a 1:1 square; the 3:5 portrait shape we had
before is the tile's total height (square media + text section below). */
aspect-ratio: 1 / 1;
overflow: hidden;
}
.juice-mosaic-media img {
width: 100%;
height: 100%;
object-fit: cover;
/* Gucci zoom-release entrance — same recipe as the rest of the homepage */
transform: scale(1.2);
transform-origin: center center;
transition: transform 1.2s cubic-bezier(0.5, 0, 0, 1);
will-change: transform;
}
.juice-mosaic-media img[data-animated="true"] {
transform: scale(1);
}
.juice-mosaic-tile:hover .juice-mosaic-media img[data-animated="true"] {
transform: scale(0.96);
}
.juice-mosaic-text {
padding: 16px 4px 0;
text-align: center;
}
.juice-mosaic-eyebrow {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 16px;
text-transform: uppercase;
color: #000;
margin: 0 0 8px 0;
}
.juice-mosaic-body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 18px;
letter-spacing: 0.005em;
color: #000;
margin: 0 auto;
max-width: 40ch;
}
/* Underlined CTA under each tile's body text — mirrors Gucci's pattern of
one specific link per mosaic card. Single border-bottom on the inline-block
so the underline tracks the text exactly, with 2px breathing room. */
.juice-mosaic-cta {
display: inline-block;
margin-top: 12px;
padding-bottom: 2px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #000;
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.juice-mosaic-tile:hover .juice-mosaic-cta {
opacity: 0.7;
}
@media (min-width: 769px) {
.juice-mosaic {
/* Fixed-width tiles (411 × 411) matching Gucci exactly. 3 × 411 +
2 × 40 gaps = 1313 ≈ 1312 content area so tiles fill the section
flush with the inner padding edges — no leftover space. */
grid-template-columns: 411px 411px 411px;
justify-content: center;
padding: 32px 64px;
gap: 40px;
}
}
/* Mosaic track wrapper — `display: contents` on desktop so tiles remain
direct grid children of .juice-mosaic (existing layout unchanged).
On mobile (≤768px) the track becomes a horizontal scroll-snap strip
with the heading sitting above as a separate block. */
.juice-mosaic-track {
display: contents;
}
@media (max-width: 768px) {
.juice-mosaic {
display: block;
padding: 32px 0;
}
.juice-mosaic-section-heading {
margin: 0 16px 24px;
text-align: center;
}
.juice-mosaic-track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
gap: 12px;
padding: 0 16px;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.juice-mosaic-track::-webkit-scrollbar {
display: none;
}
.juice-mosaic-track .juice-mosaic-tile {
flex: 0 0 78%;
scroll-snap-align: center;
}
}
/* ===========================================
NEWSLETTER BANNER (rests on top of footer — Gucci-style)
Full-bleed black band, centered text, single text-only CTA.
=========================================== */
/* 10% lighter than the footer (#000): 26/255 ≈ 10% on each channel. Gives a
subtle two-band separation when the banner stacks on top of the footer. */
.juice-newsletter-banner {
background: #1A1A1A;
padding: 56px 16px;
margin-bottom: 0;
text-align: center;
display: block;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Faded background image — pulls from --juice-newsletter-bg-img inlined by
template-homepage.php (mirrors the Til hende theme mod). Cover + center
so the model's face reads as a centered ghost layer behind the text. */
.juice-newsletter-banner::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--juice-newsletter-bg-img);
background-size: cover;
background-position: center;
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
.juice-newsletter-banner > * {
position: relative;
z-index: 1;
}
/* Footer normally carries an 80px top margin; on the homepage the newsletter
banner is the last section, so we close most of that gap to 10px. Scoped
to body.home only so other pages keep their original breathing room. */
body.home .juice-footer {
margin-top: 10px;
}
.juice-newsletter-eyebrow {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 24px;
text-transform: uppercase;
color: #fff;
margin: 0 0 24px 0;
}
.juice-newsletter-body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 26px;
font-weight: 100;
line-height: 36px;
letter-spacing: -0.03em;
color: #fff;
margin: 0 auto 24px;
max-width: 36ch;
}
.juice-newsletter-cta {
appearance: none;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding: 4px 2px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
cursor: pointer;
transition: border-color 0.4s cubic-bezier(0.5, 0, 0, 1), color 0.4s cubic-bezier(0.5, 0, 0, 1);
}
.juice-newsletter-cta:hover,
.juice-newsletter-cta:focus-visible {
border-color: #fff;
outline: none;
}
@media (min-width: 769px) {
.juice-newsletter-banner {
padding: 80px 64px;
}
.juice-newsletter-eyebrow {
font-size: 16px;
letter-spacing: -0.03em;
}
.juice-newsletter-body {
font-size: 32px;
line-height: 48px;
margin: 0 auto 32px;
}
}
/* Mobile responsive */
@media (max-width: 768px) {
.juice-section {
gap: 8px;
margin-bottom: 0;
}
.juice-hero-section {
margin-bottom: 0;
}
.juice-four-col {
margin-bottom: 0;
padding: 56px 16px;
row-gap: 40px;
column-gap: 8px;
}
.juice-section-heading {
font-size: 24px;
line-height: 1;
margin-bottom: 0;
}
/* Two columns stack on mobile */
.juice-two-col {
margin-bottom: 0;
padding: 8px;
gap: 8px;
grid-template-columns: 1fr;
}
/* Full width section — stack on mobile (image top, text below).
16px side padding makes the image inset slimmer than the 2-col
above (which has 8px section padding) — matching Gucci's pattern
where the section below FEATURED has narrower image columns than
the section above. Measured: Gucci above 469px wide / below 453px
(16px each side inset). */
.juice-full-width {
padding: 0 16px;
margin-bottom: 60px;
}
.juice-full-width .juice-col-full {
flex-direction: column;
gap: 16px;
margin: 0;
}
.juice-full-width .juice-col-media,
.juice-full-width .juice-col-text {
width: 100%;
max-width: 100%;
height: auto;
}
.juice-full-width .juice-col-media {
aspect-ratio: 3 / 4;
}
.juice-full-width .juice-col-text {
padding: 32px 16px;
}
.juice-full-width .juice-col-text {
padding: 32px 16px 16px;
}
.juice-col-heading {
font-size: 22px;
letter-spacing: 0.16em;
margin-bottom: 16px;
}
.juice-col-body {
font-size: 13px;
margin-bottom: 20px;
}
}
/* ===========================================
SERVICES PAGE
=========================================== */
.juice-services-page {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px 80px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.juice-services-header {
text-align: center;
padding: 60px 0 80px;
}
.juice-services-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 120px;
text-decoration: none;
color: #000;
}
.juice-services-block:hover {
color: #000;
}
.juice-services-block--reverse {
direction: rtl;
}
.juice-services-block--reverse > * {
direction: ltr;
}
.juice-services-image {
overflow: hidden;
}
.juice-services-image img {
width: 100%;
max-width: 420px;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 3 / 4;
transition: transform 0.4s ease;
}
.juice-services-block:hover .juice-services-image img {
transform: scale(1.03);
}
.juice-services-text {
text-align: center;
}
.juice-services-section-title {
font-size: 28px;
font-weight: 400;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0;
color: #000;
line-height: 1.5;
}
.juice-services-desc {
font-size: 13px;
font-weight: 400;
color: rgba(0,0,0,0.55);
margin: 16px 0 0;
letter-spacing: -0.01em;
line-height: 1.5;
}
@media (max-width: 768px) {
.juice-services-block {
grid-template-columns: 1fr;
gap: 32px;
}
.juice-services-block--reverse {
direction: ltr;
}
.juice-services-header {
padding: 40px 0 48px;
}
.juice-services-section-title {
font-size: 18px;
}
}
/* ===========================================
KIT LANDING PAGE
=========================================== */
.juice-kit-page {
max-width: 100%;
overflow: hidden;
}
/* Hero */
.juice-kit-hero {
position: relative;
width: 100%;
aspect-ratio: 25 / 14;
overflow: hidden;
}
.juice-kit-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.juice-kit-hero-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: rgba(0,0,0,0.3);
}
.juice-kit-hero-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 48px !important;
font-weight: 300 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 0 12px !important;
}
.juice-kit-hero-subtitle {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: rgba(255,255,255,0.8) !important;
margin: 0 0 40px !important;
max-width: 400px !important;
}
.juice-kit-hero-cta {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #fff !important;
text-decoration: none !important;
border: 1px solid #fff !important;
padding: 14px 48px !important;
transition: background 0.3s, color 0.3s !important;
}
.juice-kit-hero-cta:hover {
background: #fff !important;
color: #000 !important;
}
/* Section titles (shared) */
.juice-kit-section-title {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-align: center !important;
color: #000 !important;
margin: 0 0 48px !important;
}
/* What's in the kit — 3 columns */
.juice-kit-contents {
padding: 80px 24px;
max-width: 960px;
margin: 0 auto;
}
.juice-kit-contents-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.juice-kit-item {
text-align: center;
}
.juice-kit-item-icon {
width: 40px;
height: 40px;
margin: 0 auto 20px;
color: #000;
}
.juice-kit-item-icon svg {
width: 100%;
height: 100%;
}
.juice-kit-item-label {
display: block;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
margin-bottom: 10px;
}
.juice-kit-item-desc {
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: rgba(0,0,0,0.55);
margin: 0;
}
/* How it works — steps */
.juice-kit-steps {
padding: 80px 24px;
max-width: 640px;
margin: 0 auto;
border-top: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-steps-list {
display: flex;
flex-direction: column;
gap: 0;
}
.juice-kit-step {
display: flex;
gap: 32px;
align-items: flex-start;
padding: 28px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-step:last-child {
border-bottom: none;
}
.juice-kit-step-number {
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
color: rgba(0,0,0,0.3);
flex-shrink: 0;
padding-top: 2px;
}
.juice-kit-step-content {
flex: 1;
}
.juice-kit-step-title {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 500;
color: #000;
margin: 0 0 6px;
text-transform: none;
letter-spacing: 0;
}
.juice-kit-step-desc {
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.6;
color: rgba(0,0,0,0.55);
margin: 0;
}
/* Purchase section */
.juice-kit-purchase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 100%;
border-top: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-purchase-image {
aspect-ratio: 1 / 1;
overflow: hidden;
background: #1a1a1a;
}
.juice-kit-purchase-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.juice-kit-purchase-info {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px 60px;
}
.juice-kit-purchase-title {
font-family: 'Inter', system-ui, sans-serif;
font-size: 28px;
font-weight: 300;
letter-spacing: 0.04em;
color: #000;
margin: 0 0 16px;
}
.juice-kit-purchase-desc {
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.7;
color: rgba(0,0,0,0.55);
margin: 0 0 32px;
max-width: 400px;
}
.juice-kit-add-to-cart {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
background: #000;
text-decoration: none;
border: 1px solid #000;
padding: 16px 48px;
transition: background 0.3s, color 0.3s;
align-self: flex-start;
}
.juice-kit-add-to-cart:hover {
background: #fff;
color: #000;
}
.juice-kit-bag-icon {
width: 16px;
height: 16px;
}
/* FAQ */
.juice-kit-faq {
padding: 80px 24px;
max-width: 640px;
margin: 0 auto;
border-top: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-faq-list {
border-top: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-faq-item {
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.juice-kit-faq-trigger {
all: unset;
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
cursor: pointer;
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
color: #000;
transition: color 0.2s;
}
.juice-kit-faq-trigger:hover {
color: rgba(0,0,0,0.6);
}
.juice-kit-faq-chevron {
font-size: 12px;
transition: transform 0.3s;
}
.juice-kit-faq-trigger[aria-expanded="true"] .juice-kit-faq-chevron {
transform: rotate(180deg);
}
.juice-kit-faq-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.juice-kit-faq-panel p {
font-family: 'Inter', system-ui, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.7;
color: rgba(0,0,0,0.55);
margin: 0;
padding: 0 0 20px;
}
/* Kit — Mobile */
@media (max-width: 768px) {
.juice-kit-hero {
aspect-ratio: 3 / 4;
}
.juice-kit-hero-title {
font-size: 32px;
}
.juice-kit-contents {
padding: 60px 24px;
}
.juice-kit-contents-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.juice-kit-steps {
padding: 60px 24px;
}
.juice-kit-purchase {
grid-template-columns: 1fr;
}
.juice-kit-purchase-info {
padding: 40px 24px;
}
.juice-kit-faq {
padding: 60px 24px;
}
}
/* ===========================================
WOOCOMMERCE — JUICE UI OVERRIDES
Matches search panel + contact form aesthetic:
Inter font, thin underlines, uppercase small headings,
opacity hover, minimal buttons, clean white backgrounds.
=========================================== */
/* -------------------------------------------
CATEGORY PAGE HEADER
------------------------------------------- */
.woocommerce .page-title,
.woocommerce-products-header__title,
.term-description,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.woocommerce .page-title,
.woocommerce-products-header__title {
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #000 !important;
text-align: center;
margin: 40px 0 30px !important;
}
.woocommerce .woocommerce-result-count {
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.4) !important;
}
.woocommerce .woocommerce-ordering select {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 4px 0 !important;
color: #000;
}
/* -------------------------------------------
BREADCRUMBS
------------------------------------------- */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.4) !important;
text-decoration: none !important;
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: #000 !important;
}
/* Current page in breadcrumb — bold and black (last text node) */
.woocommerce .woocommerce-breadcrumb {
color: #000 !important;
font-weight: 500 !important;
}
.woocommerce .woocommerce-breadcrumb a {
color: rgba(0, 0, 0, 0.4) !important;
font-weight: 400 !important;
}
/* Legacy selectors for compatibility */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.4) !important;
text-decoration: none !important;
}
.woocommerce div.product .product_meta a:hover {
color: #000 !important;
}
/* Quantity input — legacy */
.woocommerce .quantity .qty {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
border-radius: 0 !important;
background: transparent !important;
text-align: center;
padding: 8px 4px !important;
width: 60px !important;
}
/* -------------------------------------------
PRODUCT TABS (Description, Reviews)
------------------------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding: 0 !important;
margin: 0 0 0 !important;
list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none !important;
background: none !important;
margin: 0 24px 0 0 !important;
padding: 0 0 12px !important;
border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.4) !important;
padding: 0 !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #000 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom: 1px solid #000 !important;
margin-bottom: -1px !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.8;
color: rgba(0, 0, 0, 0.6) !important;
padding: 24px 0 !important;
}
/* -------------------------------------------
CART PAGE
------------------------------------------- */
.woocommerce-cart .woocommerce table.cart,
.woocommerce-cart .woocommerce table.cart th,
.woocommerce-cart .woocommerce table.cart td {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
border-color: rgba(0, 0, 0, 0.15) !important;
}
.woocommerce-cart .woocommerce table.cart th {
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.4) !important;
}
.woocommerce a.remove {
color: rgba(0, 0, 0, 0.3) !important;
font-weight: 300 !important;
}
.woocommerce a.remove:hover {
color: #000 !important;
background: transparent !important;
}
/* Cart totals */
.woocommerce .cart_totals h2 {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
}
/* Kill Goya's opacity hover on ALL buttons sitewide */
.button:hover,
.button:active,
.button:focus,
button.button:hover,
button.button:active,
button.button:focus,
input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
button[type=submit]:hover,
button[type=submit]:active,
button[type=submit]:focus {
opacity: 1 !important;
}
/* Kill Goya's gold pulsating dot loader sitewide */
.yith-wcan-loading:after,
.blockUI.blockOverlay:after,
.easyzoom-notice:after,
.woocommerce-product-gallery__wrapper.slick:after,
.product-gallery .woo-variation-gallery-wrapper.loading-gallery:after,
.product-gallery .rtwpvg-wrapper.loading-rtwpvg:after,
.add_to_cart_button.loading:after,
.wcapf-before-update:after,
.woof_info_popup:after,
.tinv-wishlist .tinvwl_add_to_wishlist_button.inited-add-wishlist:after,
#side-filters.ajax-loader .side-panel-content:after,
.zoo-cw-gallery-loading:after,
.panel.side-panel .et-loader:after,
.cart-panel .et-loader:after,
.et-cart-panel .et-loader:after,
.et-loader:after,
.dot-loader:after {
display: none !important;
background: none !important;
animation: none !important;
}
/* Proceed to checkout button */
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce #place_order {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
padding: 10px 24px !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.woocommerce .cart .button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
background: #fff !important;
color: #000 !important;
}
/* Coupon input */
.woocommerce .coupon .input-text {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.18) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 8px 0 !important;
}
.woocommerce .coupon .button {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em;
text-transform: uppercase;
background: transparent !important;
color: #000 !important;
border: 1px solid rgba(0, 0, 0, 0.18) !important;
border-radius: 0 !important;
padding: 10px 20px !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.woocommerce .coupon .button:hover {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
/* -------------------------------------------
NOTICES & MESSAGES
------------------------------------------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
border-top: none !important;
border-left: 1px solid #000 !important;
background: #fafafa !important;
color: #000 !important;
border-radius: 0 !important;
}
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
background: transparent !important;
color: #000 !important;
border: 1px solid rgba(0, 0, 0, 0.18) !important;
border-radius: 0 !important;
padding: 8px 16px !important;
}
/* Inline anchors inside Woo notices (e.g., the "Fortryd?" undo link after Fjern)
should be underlined to read as a link, not body copy. */
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-error a:not(.button),
.woocommerce-message a.restore-item,
.woocommerce-notices-wrapper a:not(.button) {
text-decoration: underline !important;
text-underline-offset: 2px !important;
color: #000 !important;
}
.woocommerce .woocommerce-message a:not(.button):hover,
.woocommerce .woocommerce-info a:not(.button):hover,
.woocommerce-message a.restore-item:hover {
text-decoration-thickness: 2px !important;
}
/* -------------------------------------------
SALE BADGE
------------------------------------------- */
.woocommerce span.onsale {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 9px !important;
font-weight: 500 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
background: #000 !important;
color: #fff !important;
border-radius: 0 !important;
min-width: auto !important;
min-height: auto !important;
padding: 6px 10px !important;
line-height: 1 !important;
}
/* Hide WC Blocks sale badges site-wide (luxury brand: no sale chrome) */
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge {
display: none !important;
}
/* Hide strikethrough regular prices and remove sale-red on actual price (luxury: no sale chrome anywhere) */
.wc-block-components-product-price del,
.wc-block-components-product-price__regular,
.woocommerce .price del {
display: none !important;
}
.wc-block-components-product-price ins,
.wc-block-components-product-price__value,
.woocommerce .price ins {
text-decoration: none !important;
color: inherit !important;
background: none !important;
}
/* Tax row: "Inkl. moms" left, amount right, both #000 */
.wc-block-components-totals-footer-item-tax {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #000 !important;
margin-top: 20px !important;
}
.wc-block-components-totals-footer-item-tax .juice-tax-label,
.wc-block-components-totals-footer-item-tax .juice-tax-value {
color: #000 !important;
}
/* Shipping row: drop down a bit from separator and force black */
.wp-block-woocommerce-cart-order-summary-shipping-block {
margin-top: 20px !important;
}
.wc-block-components-totals-shipping .wc-block-components-totals-item__label,
.wc-block-components-totals-shipping .wc-block-components-totals-item__value,
.wc-block-components-totals-shipping .wc-block-components-totals-item__description {
color: #000 !important;
}
/* -------------------------------------------
RELATED PRODUCTS / UPSELLS
------------------------------------------- */
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-align: center;
margin: 60px 0 30px !important;
}
/* -------------------------------------------
PAGINATION
------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
color: rgba(0, 0, 0, 0.4) !important;
border: none !important;
background: transparent !important;
padding: 8px 12px !important;
transition: color 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
color: #000 !important;
background: transparent !important;
}
/* -------------------------------------------
STAR RATINGS
------------------------------------------- */
.woocommerce .star-rating {
font-size: 10px !important;
color: #000 !important;
}
/* -------------------------------------------
WISHLIST BUTTON (YITH) — PHP template mode with child theme override
Template: juice-goya/woocommerce/add-to-wishlist-button.php
------------------------------------------- */
.juice-wishlist-btn,
.yith-wcwl-add-to-wishlist a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
background: transparent !important;
color: #000 !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
padding: 14px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
display: block !important;
line-height: 1.2 !important;
transition: opacity 0.2s ease !important;
text-decoration: none !important;
}
.juice-wishlist-btn:hover,
.yith-wcwl-add-to-wishlist a:hover {
opacity: 0.7 !important;
background: transparent !important;
color: #000 !important;
}
/* Hide any leftover icons from YITH */
.yith-wcwl-add-to-wishlist .icon,
.yith-wcwl-add-to-wishlist .et-heart,
.yith-wcwl-add-to-wishlist .yith-wcwl-icon-svg {
display: none !important;
}
/* ===========================================
STICKY BREADCRUMB BAR (Gucci-style)
Sits under header, shows navigation path
=========================================== */
/* Category quick-nav links */
.juice-category-nav {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.juice-category-nav-link {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: capitalize;
color: rgba(0, 0, 0, 0.4);
text-decoration: none;
transition: color 0.2s ease;
padding: 2px 0;
}
.juice-category-nav-link:hover {
color: #000;
}
.juice-category-nav-link.is-active {
color: #000;
font-weight: 600;
padding-bottom: 0;
}
.juice-breadcrumb-bar {
position: fixed;
top: 72px;
left: 0;
right: 0;
z-index: 100;
background: #fff;
border-top: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 0 24px;
height: 40px;
display: flex;
align-items: center;
}
/* Spacer to prevent content jumping behind fixed breadcrumb */
.juice-breadcrumb-spacer {
height: 40px;
}
/* Admin bar: 32px on desktop */
.admin-bar .juice-breadcrumb-bar {
top: 104px;
}
/* Admin bar: 46px at 601-782px */
@media screen and (max-width: 782px) and (min-width: 601px) {
.admin-bar .juice-breadcrumb-bar {
top: 118px;
}
}
/* Admin bar: scrolls away at <= 600px */
@media screen and (max-width: 600px) {
.admin-bar .juice-breadcrumb-bar {
top: 72px;
}
}
.juice-breadcrumbs {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.juice-breadcrumbs a {
color: rgba(0, 0, 0, 0.4);
text-decoration: none;
transition: color 0.2s ease;
}
.juice-breadcrumbs a:hover {
color: #000;
}
.juice-breadcrumb-sep {
color: rgba(0, 0, 0, 0.2);
margin: 0 8px;
}
.juice-breadcrumb-current {
color: #000;
font-weight: 600;
}
@media (max-width: 768px) {
.juice-breadcrumb-bar {
padding: 0 16px;
height: 40px;
}
}
/* Hide breadcrumbs on product pages */
body.single-product .juice-breadcrumb-bar,
body.single-product .juice-breadcrumb-spacer {
display: none !important;
}
/* Prevent horizontal scroll on category pages */
body.tax-product_cat {
overflow-x: hidden;
}
/* Category pages: Gucci-style stacked stickies — nav parks under the header,
sort/filter bar stacks directly under the nav. */
body.tax-product_cat .juice-breadcrumb-bar {
position: sticky !important;
top: 72px !important;
left: 0 !important;
right: 0 !important;
z-index: 100 !important;
border-bottom: none !important; /* seamless with header */
}
body.tax-product_cat.admin-bar .juice-breadcrumb-bar {
top: 104px !important;
}
/* Remove Goya's header divider so header + breadcrumb read as one seamless block.
The line is a ::after pseudo-element (core.css:3857 .header-border-1 .site-header:after
and :3981 .header_on_scroll .site-header:after) plus a box-shadow. Target #header
(ID) to out-specify Goya's class selectors. */
body.tax-product_cat #header {
box-shadow: none !important;
}
body.tax-product_cat #header::after {
display: none !important;
}
/* Mobile only: center the category nav links (desktop stays left-aligned). */
@media screen and (max-width: 768px) {
body.tax-product_cat .juice-breadcrumb-bar {
justify-content: center !important;
}
body.tax-product_cat .juice-category-nav {
justify-content: center;
}
}
body.tax-product_cat .juice-breadcrumb-spacer {
display: none !important;
}
/* Align the nav links with the product grid's left edge. Grid lives inside
.juice-category-page (padding-left 64/32/24 by breakpoint, style.css:4820);
the breadcrumb bar sits outside it, so mirror that padding here. */
body.tax-product_cat .juice-breadcrumb-bar {
padding-left: 64px !important;
}
@media (max-width: 1280px) {
body.tax-product_cat .juice-breadcrumb-bar {
padding-left: 32px !important;
}
}
@media (max-width: 1024px) {
body.tax-product_cat .juice-breadcrumb-bar {
padding-left: 24px !important;
}
}
/* <=768px the nav is centered (justify-content:center above), so left padding
no longer governs alignment — left as-is. */
/* Sort/filter bar stacks under the sticky nav (72 header + 40 nav = 112). */
body.tax-product_cat .juice-sort-bar {
top: 112px !important;
}
body.tax-product_cat.admin-bar .juice-sort-bar {
top: 144px !important;
}
@media screen and (max-width: 782px) and (min-width: 601px) {
body.tax-product_cat.admin-bar .juice-breadcrumb-bar {
top: 118px !important;
}
body.tax-product_cat.admin-bar .juice-sort-bar {
top: 158px !important;
}
}
@media screen and (max-width: 600px) {
/* Nav bar IS visible at <600px (sticks at 72px, 40px tall), so the sort bar
must stack under it at 112px — not 72px, which hid it behind the nav. */
body.tax-product_cat .juice-sort-bar {
top: 112px !important;
}
body.tax-product_cat.admin-bar .juice-sort-bar {
top: 112px !important;
}
}
/* Gucci-style separator: the bar is line-free at rest; a full-width separator
fades in only once the bar is stuck to the sticky stack (body.juice-sort-stuck
toggled in site.js). Suppress the base inset border (style.css:4871) on category
pages so the line truly "appears" rather than just extending. The bar is
position:sticky (a positioned ancestor) so ::after anchors to it; full-bleed via
100vw is safe because body.tax-product_cat sets overflow-x:hidden. */
body.tax-product_cat .juice-sort-bar {
border-bottom: none !important;
}
body.tax-product_cat .juice-sort-bar::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0; /* between the nav bar and the sort bar (the stack boundary), Gucci-style */
width: 100vw;
height: 1px;
background: rgba(0, 0, 0, 0.08);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
body.tax-product_cat.juice-sort-stuck .juice-sort-bar::after {
opacity: 1;
}
/* ===========================================
CATEGORY PAGE — Gucci-style
Left-aligned title, sort bar, clean grid
=========================================== */
/* Category hero — full-width banner */
.juice-category-hero {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 0 !important;
overflow: hidden;
}
.juice-category-hero img {
width: 100%;
height: auto;
display: block;
max-height: 600px;
object-fit: cover;
}
/* Hero text overlay — centered on image */
.juice-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0 24px 48px;
text-align: center;
pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
min-height: 50%;
}
.juice-hero-title {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 2rem !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 0 !important;
}
.juice-hero-desc {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 0.813rem;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.5;
color: rgba(255,255,255,0.85);
margin: 12px 0 0;
max-width: 480px;
}
@media (max-width: 768px) {
.juice-category-hero img {
max-height: 400px;
}
.juice-hero-overlay {
padding: 0 16px 32px;
}
.juice-hero-title {
font-size: 1.5rem !important;
}
.juice-hero-desc {
font-size: 0.75rem;
}
}
/* Goya hero header fallback */
.juice-breadcrumb-spacer + .hero-header {
margin-bottom: 0;
}
/* Category page container — responsive padding like Gucci */
.juice-category-page {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 auto;
padding-left: 64px;
padding-right: 64px;
}
@media (max-width: 1280px) {
.juice-category-page {
padding-left: 32px;
padding-right: 32px;
}
}
@media (max-width: 1024px) {
.juice-category-page {
padding-left: 24px;
padding-right: 24px;
}
}
/* Category header — count centered */
.juice-category-header {
display: flex !important;
justify-content: center;
align-items: baseline;
padding: 24px 0 0 !important;
margin: 0 !important;
}
.juice-product-count {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.05em;
color: #000;
}
/* Search results: larger header text */
.juice-search-result-count {
font-size: 12px !important;
letter-spacing: 0.02em;
}
/* Sort / Filter bar — sticky */
.juice-sort-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 6px;
position: sticky;
top: 112px; /* 72px header + 40px breadcrumb */
background: #fff;
z-index: 90;
}
/* Search results: no breadcrumb bar, stick directly under header */
body.search-results .juice-sort-bar {
top: 72px;
}
body.search-results.admin-bar .juice-sort-bar {
top: 104px;
}
.juice-sort-btn,
.juice-filter-btn {
all: unset;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.02em;
color: #000;
display: inline-flex;
align-items: center;
gap: 6px;
transition: opacity 0.3s ease;
}
.juice-sort-btn strong {
font-weight: 500;
}
.juice-sort-chevron {
transition: transform 0.3s ease;
}
.juice-sort-btn:hover,
.juice-filter-btn:hover {
opacity: 0.5;
}
/* ===========================================
SLIDE PANELS — matches hamburger menu UI
Sort from left, Filter from right
transition: 0.7s cubic-bezier(0.4, 0, 0.2, 1)
=========================================== */
/* Shared overlay */
.juice-panel-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.juice-panel-overlay.is-open {
opacity: 1;
visibility: visible;
}
/* Base panel — matches hamburger menu exactly */
.juice-slide-panel {
position: fixed;
top: 0;
height: 100vh;
width: 25vw;
min-width: 300px;
max-width: 420px;
background: #fff;
z-index: 10001;
display: flex;
flex-direction: column;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 768px) {
.juice-slide-panel {
width: 100%;
min-width: 100%;
max-width: 100%;
}
}
/* Left panel (sort) */
.juice-slide-panel--left {
left: 0;
transform: translateX(-100%);
}
/* Right panel (filter) */
.juice-slide-panel--right {
right: 0;
transform: translateX(100%);
}
.juice-slide-panel.is-open {
transform: translateX(0);
}
/* Arrow close button — matches hamburger menu arrow (always left-aligned) */
.juice-slide-panel__close {
padding: 36px 0 0 36px;
}
.juice-panel-arrow {
all: unset;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 20px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
}
.juice-panel-arrow:hover {
opacity: 0.5;
}
/* Panel body */
.juice-slide-panel__body {
flex: 1;
overflow-y: auto;
padding: 32px 0;
}
/* Panel links — matches hamburger menu item typography */
.juice-panel-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 36px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #000;
text-decoration: none;
transition: transform 0.3s ease;
transform-origin: center left;
}
.juice-panel-link:hover {
transform: scale(1.1);
}
.juice-panel-link.is-active {
font-weight: 500;
}
.juice-panel-link svg {
flex-shrink: 0;
opacity: 0.8;
}
/* Filter accordions — matches product page accordion UI */
.juice-filter-accordions {
border-top: 1px solid rgba(0,0,0,0.1);
margin: 0 36px;
}
.juice-filter-accordion-item {
position: relative;
border-bottom: none;
}
.juice-filter-accordion-item::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(0,0,0,0.1);
}
.juice-filter-accordion-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #000000;
transition: width .8s cubic-bezier(.5, 0, 0, 1);
}
.juice-filter-accordion-item.is-expanded::after {
width: 100%;
}
.juice-filter-accordion-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #000;
text-align: left;
transition: color .8s cubic-bezier(.5, 0, 0, 1);
}
.juice-filter-accordion-trigger:hover {
color: rgba(0,0,0,0.6);
}
.juice-filter-accordion-chevron {
flex-shrink: 0;
font-size: 12px;
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-filter-accordion-trigger[aria-expanded="true"] .juice-filter-accordion-chevron {
transform: rotate(180deg);
}
.juice-filter-accordion-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1),
opacity .8s cubic-bezier(.5, 0, 0, 1);
}
.juice-filter-accordion-panel.is-open {
opacity: 1;
}
/* Filter category links */
.juice-filter-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #000;
text-decoration: none;
transition: transform 0.3s ease;
transform-origin: center left;
}
.juice-filter-link:hover {
transform: scale(1.1);
}
.juice-filter-link.is-active {
font-weight: 500;
}
/* Filter checkboxes */
.juice-filter-checkbox {
display: flex;
align-items: center;
padding: 10px 0;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
color: #000;
}
.juice-filter-checkbox input[type="checkbox"] {
display: none;
}
.juice-filter-check-box {
width: 14px;
height: 14px;
border: 1.5px solid rgba(0,0,0,0.3);
border-radius: 2px;
margin-right: 12px;
flex-shrink: 0;
position: relative;
transition: border-color 0.2s, background-color 0.2s;
}
.juice-filter-checkbox input[type="checkbox"]:checked + .juice-filter-check-box {
background: #000000;
border-color: #000;
}
.juice-filter-checkbox input[type="checkbox"]:checked + .juice-filter-check-box::after {
content: "";
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.juice-filter-checkbox-label {
flex: 1;
}
.juice-filter-checkbox .juice-filter-count {
margin-left: auto;
}
/* Filter footer — show results button */
.juice-filter-panel-footer {
padding: 20px 36px;
border-top: 1px solid rgba(0,0,0,0.08);
}
.juice-filter-show-btn {
all: unset;
cursor: pointer;
display: block;
width: 100%;
padding: 14px 0;
background: #000;
color: #fff;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
border: 1px solid #000;
box-sizing: border-box;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.juice-filter-show-btn:hover {
background: #fff;
color: #000;
}
/* ===========================================
PRODUCT GRID — CSS Grid, Gucci spacing
4-col desktop, 3-col tablet, 2-col mobile
=========================================== */
.juice-products-section ul.products,
.juice-products-section .woocommerce ul.products,
.woocommerce .juice-products-section ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0.5rem !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
list-style: none !important;
float: none !important;
}
/* Reset Goya Bootstrap col-* */
.juice-products-section ul.products li.product,
.woocommerce .juice-products-section ul.products li.product {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 1024px) {
.juice-products-section ul.products,
.juice-products-section .woocommerce ul.products,
.woocommerce .juice-products-section ul.products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.5rem !important;
}
}
@media (max-width: 768px) {
.juice-products-section ul.products,
.juice-products-section .woocommerce ul.products,
.woocommerce .juice-products-section ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.25rem 0.5rem !important;
}
.juice-category-page {
padding-left: 16px;
padding-right: 16px;
}
}
/* ===========================================
PRODUCT CARDS — Gucci-style
Custom content-product.php with carousel
=========================================== */
/* Card container */
.juice-product-card {
position: relative;
}
.juice-card-inner {
display: block;
}
/* Image carousel container */
.juice-card-media {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #fbfbfb;
}
.juice-card-link {
display: block;
width: 100%;
height: 100%;
}
.juice-card-slides {
position: relative;
width: 100%;
height: 100%;
}
.juice-card-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 0;
}
.juice-card-slide.is-active {
opacity: 1;
z-index: 1;
position: relative;
}
.juice-card-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hover zoom on image */
.juice-card-media img {
transition: transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.juice-card-media:hover img {
transform: scale(1.05);
}
/* Category card save/bookmark control (exclude handled in template) */
.juice-card-bookmark {
position: absolute;
top: 10px;
right: 10px;
z-index: 4;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #000;
background: transparent;
border: 0;
text-decoration: none !important;
transition: opacity 220ms ease, color 220ms ease;
}
.juice-card-bookmark:hover {
opacity: 0.72;
}
.juice-card-bookmark.loading,
.juice-card-bookmark.added {
background: transparent;
border-radius: 0;
color: #000;
opacity: 1;
}
.juice-card-bookmark.loading .juice-card-bookmark-icon,
.juice-card-bookmark.added .juice-card-bookmark-icon {
color: #000;
}
.juice-card-bookmark-icon {
display: block;
}
.juice-card-bookmark-icon path {
fill: transparent;
transition: fill 220ms ease;
}
.juice-card-bookmark.added .juice-card-bookmark-icon path {
fill: currentColor;
}
.juice-mini-toast {
position: fixed;
left: 50%;
top: 200px;
transform: translate(-50%, -12px);
background: #000;
color: #fff;
padding: 8px 14px;
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
z-index: 99999;
transition: opacity 220ms ease, transform 220ms ease;
}
.juice-mini-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* Navigation arrows */
.juice-card-arrow {
all: unset;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 2;
color: #000;
opacity: 0;
transition: opacity 0.3s ease;
}
.juice-card-media:hover .juice-card-arrow {
opacity: 0.7;
}
.juice-card-arrow:hover {
opacity: 1 !important;
}
.juice-card-prev {
left: 8px;
}
.juice-card-next {
right: 8px;
}
/* Scrollbar indicator */
.juice-card-scrollbar {
position: absolute;
bottom: 8px;
left: 16px;
right: 16px;
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease;
}
.juice-card-media:hover .juice-card-scrollbar {
opacity: 1;
}
.juice-card-scrollbar-track {
height: 2px;
background: rgba(0,0,0,0.15);
border-radius: 1px;
overflow: hidden;
}
.juice-card-scrollbar-thumb {
height: 100%;
background: #000;
border-radius: 1px;
transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
}
/* Product info — left-aligned */
.juice-card-info {
padding: 8px 0 0;
}
.juice-card-title-link {
text-decoration: none;
}
.juice-card-title,
.juice-card-title-link {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1rem !important;
letter-spacing: -0.2px !important;
text-transform: uppercase !important;
color: #000;
margin: 0;
text-align: left;
}
.juice-card-price,
.juice-card-price .woocommerce-Price-amount {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1rem;
letter-spacing: -0.03em;
color: #000;
display: block;
margin: 2px 0 0;
text-align: left;
}
/* Hide "inkl. moms" suffix */
.juice-card-price .woocommerce-price-suffix {
display: none !important;
}
/* Hide del/ins price formatting for simple products */
.juice-card-price del {
opacity: 0.4;
}
/* Hide Goya extras that might leak through */
.juice-product-card .product-inner,
.juice-product-card .product_thumbnail,
.juice-product-card .caption,
.juice-product-card .product-title,
.juice-product-card .product_after_title,
.juice-product-card .product_after_shop_loop_price,
.juice-product-card .after_shop_loop_actions,
.juice-product-card .actions-wrapper,
.juice-product-card .product-excerpt {
display: none !important;
}
/* But keep the card inner visible */
.juice-product-card .juice-card-inner {
display: block !important;
}
/* Hide arrows on mobile (swipe instead) */
@media (max-width: 1024px) {
.juice-card-arrow {
display: none !important;
}
.juice-card-scrollbar {
opacity: 1;
}
.juice-card-bookmark {
top: 8px;
right: 8px;
width: 26px;
height: 26px;
}
}
/* OLD Goya product card styles — keep for fallback compatibility */
.juice-products-section li.product:not(.juice-product-card) .product_thumbnail_hover,
.juice-products-section li.product:not(.juice-product-card) .actions-wrapper,
.juice-products-section li.product:not(.juice-product-card) .product-excerpt,
.juice-products-section li.product:not(.juice-product-card) .after_shop_loop_actions,
.juice-products-section li.product:not(.juice-product-card) .star-rating,
.juice-products-section li.product:not(.juice-product-card) .et-loop-variation-swatches,
.juice-products-section li.product:not(.juice-product-card) .badge,
.juice-products-section li.product:not(.juice-product-card) .yith-wcwl-add-to-wishlist,
.juice-products-section li.product:not(.juice-product-card) .et-quickview-button,
.juice-products-section li.product:not(.juice-product-card) .add_to_cart_button {
display: none !important;
}
/* ===========================================
SINGLE PRODUCT PAGE (Gucci-style)
Clean typography over Goya's default layout
=========================================== */
/* Product title */
.woocommerce div.product .product_title,
.woocommerce div.product .summary .product_title {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
color: #000 !important;
margin: 0 0 12px !important;
}
/* Product price — #000 like Gucci, not grey */
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price .woocommerce-Price-amount,
.woocommerce div.product .summary .price .woocommerce-Price-currencySymbol {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #000000 !important;
margin: 0 0 20px !important;
}
/* Short description */
.woocommerce div.product .summary .woocommerce-product-details__short-description,
.woocommerce div.product .summary .woocommerce-product-details__short-description p {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.8 !important;
color: rgba(0, 0, 0, 0.6) !important;
}
/* === JUICE ADD TO CART — Gucci-inspired button === */
.juice-cart-form .single_add_to_cart_button,
.juice-cart-form .juice-add-to-cart,
.woocommerce div.product .summary .single_add_to_cart_button,
.woocommerce div.product .summary button.single_add_to_cart_button {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
padding: 13px 40px !important;
min-height: 48px !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
cursor: pointer !important;
opacity: 1 !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
.juice-bag-icon {
flex-shrink: 0;
}
/* Loader/interaction overrides are grouped at end of file for max specificity. */
/* === SAVE BUTTON (Gemte Varer) — outlined style below add-to-cart === */
.juice-save-button-wrap {
margin-top: 8px !important;
width: 100% !important;
}
/* Style YITH wishlist button as outlined button */
.juice-save-button-wrap .yith-wcwl-add-to-wishlist,
.juice-save-button-wrap .yith-wcwl-add-button {
margin: 0 !important;
width: 100% !important;
}
.juice-save-button-wrap .yith-wcwl-add-to-wishlist a,
.juice-save-button-wrap .yith-wcwl-add-to-wishlist button,
.juice-save-button-wrap .yith-wcwl-add-to-wishlist-button,
.juice-save-button-wrap .yith_wcwl_add_to_wishlist,
.juice-save-button,
.juice-save-button-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
min-height: 48px !important;
padding: 13px 40px !important;
box-sizing: border-box !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-decoration: none !important;
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background 0.3s ease, color 0.3s ease !important;
}
.juice-save-button-wrap .yith-wcwl-add-to-wishlist a:hover,
.juice-save-button-wrap .yith-wcwl-add-to-wishlist button:hover,
.juice-save-button:hover,
.juice-save-button-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist:hover {
background: #000 !important;
color: #fff !important;
}
/* Hide YITH default icon if present */
.juice-save-button-wrap .yith-wcwl-icon {
display: none !important;
}
/* "Vare Gemt" / "Se Gemte Varer" state */
.juice-save-button-wrap .yith-wcwl-wishlistaddedbrowse a,
.juice-save-button-wrap .yith-wcwl-wishlistexistsbrowse a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 48px !important;
padding: 13px 40px !important;
box-sizing: border-box !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
text-decoration: none !important;
background: #f5f5f5 !important;
color: #000 !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
}
/* Product meta (SKU, Categories, Tags) */
.woocommerce div.product .summary .product_meta {
margin-top: 24px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
}
.woocommerce div.product .summary .product_meta > span {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.4) !important;
display: block !important;
margin-bottom: 8px !important;
}
.woocommerce div.product .summary .product_meta a {
color: rgba(0, 0, 0, 0.6) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.woocommerce div.product .summary .product_meta a:hover {
color: #000 !important;
}
/* Single product gallery image — natural proportions */
.woocommerce div.product .woocommerce-product-gallery img {
width: 100% !important;
height: auto !important;
}
/* Hide extras on single product (Gucci keeps it minimal)
NOTE: Do NOT use [class*="wishlist"] — it catches .et-wishlist-div-open
which wraps the add-to-cart button. Use specific classes only. */
.woocommerce div.product .summary .star-rating,
.woocommerce div.product .summary .et-sharing,
.woocommerce div.product .summary .product_sharing,
.woocommerce div.product .summary .et-wishlist-button,
.woocommerce div.product .summary .social-sharing,
.woocommerce div.product .woocommerce-product-rating,
.woocommerce div.product .et-wishlist-button,
.woocommerce div.product .goya-wishlist-button,
.woocommerce div.product .et-sharing,
.woocommerce div.product .social-icons,
.woocommerce div.product .product-share,
.woocommerce div.product .et-product-share,
.woocommerce div.product a[data-pin-do],
.woocommerce div.product .PIN_button,
.woocommerce div.product [id*="pinterest"],
.woocommerce div.product .price-separator {
display: none !important;
}
/* Stacked button layout — quantity on top, buttons below */
.woocommerce div.product .summary .et-wishlist-div-open {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* Quantity picker — small, clean, left-aligned under price */
.woocommerce div.product .summary .et-wishlist-div-open .quantity {
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
margin: 0 0 8px 0 !important;
width: 90px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
align-self: flex-start !important;
}
.woocommerce div.product .summary .et-wishlist-div-open .quantity input[type="number"] {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
text-align: center !important;
border: none !important;
background: transparent !important;
height: 32px !important;
width: 30px !important;
padding: 0 !important;
-moz-appearance: textfield !important;
}
.woocommerce div.product .summary .et-wishlist-div-open .quantity input::-webkit-inner-spin-button,
.woocommerce div.product .summary .et-wishlist-div-open .quantity input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.woocommerce div.product .summary .et-wishlist-div-open .quantity .minus,
.woocommerce div.product .summary .et-wishlist-div-open .quantity .plus {
background: transparent !important;
border: none !important;
font-size: 12px !important;
color: #000 !important;
cursor: pointer !important;
width: 28px !important;
height: 32px !important;
padding: 0 !important;
line-height: 32px !important;
}
/* Wishlist container — clean, auto-width to match add-to-cart */
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-to-wishlist,
.woocommerce div.product .et-wishlist-div-open .yith-add-to-wishlist-button-block {
display: inline-block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-button,
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-to-wishlist > div {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
/* Wishlist button styling — outline style matching add-to-cart */
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-button a,
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-button button {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #000 !important;
background: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
padding: 14px 40px !important;
display: inline-block !important;
text-decoration: none !important;
transition: border-color 0.2s ease !important;
}
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-button a:hover,
.woocommerce div.product .et-wishlist-div-open .yith-wcwl-add-button button:hover {
border-color: #000 !important;
}
/* Hide Goya's sticky product bar (the pop-down at top with add to cart) */
.sticky-product-bar,
.sticky-product-bar.active {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Also hide the body class effects */
body.product-bar-visible {
padding-top: 0 !important;
}
/* -------------------------------------------
SINGLE PRODUCT — Juice Native Layout
Juice HTML structure (no Goya wrappers):
.juice-product
> .juice-product-hero.product-gallery
> .juice-product-body
> .juice-product-tabs
> .juice-product-info
> .juice-product-related
------------------------------------------- */
/* Main product wrapper — prevent horizontal overflow on mobile */
.juice-product {
overflow-x: hidden;
width: 100%;
}
/* === HERO GALLERY — edge to edge === */
.juice-product-hero {
width: 100%;
overflow: hidden;
position: relative;
}
.juice-product-hero .woocommerce-product-gallery {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.juice-product-hero .woocommerce-product-gallery img {
width: 100% !important;
height: auto !important;
max-height: calc(100vh - 100px) !important;
object-fit: cover !important;
}
/* Gallery image link needs height for object-fit chain on mobile */
.juice-product-hero .woocommerce-product-gallery__image > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
/* Thumbnail strip — bottom-right overlay */
.juice-product-hero .flex-control-thumbs {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 3px !important;
position: absolute !important;
bottom: 20px !important;
right: 24px !important;
left: auto !important;
top: auto !important;
z-index: 10 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
float: none !important;
width: auto !important;
}
.juice-product-hero .flex-control-thumbs li {
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;
cursor: pointer !important;
}
.juice-product-hero .flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 0.5 !important;
cursor: pointer !important;
transition: opacity 0.2s ease !important;
padding: 0 !important;
border: none !important;
}
.juice-product-hero .flex-control-thumbs li img.flex-active,
.juice-product-hero .flex-control-thumbs li img:hover {
opacity: 1 !important;
}
/* Gallery arrows — Gucci-style translucent circles */
.juice-product-hero .slick-arrow {
display: none !important;
}
/* Gallery arrows — positioned next to thumbnails at bottom-right */
.juice-product-hero .flex-direction-nav {
display: flex !important;
position: absolute !important;
bottom: 20px !important;
right: 125px !important;
top: auto !important;
left: auto !important;
flex-direction: row !important;
gap: 4px !important;
z-index: 11 !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
list-style: none !important;
}
.juice-product-hero .flex-direction-nav li {
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.juice-product-hero .flex-direction-nav a {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.65) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border-radius: 50% !important;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
top: auto !important;
opacity: 0.7 !important;
transition: all .4s ease !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}
.juice-product-hero .flex-direction-nav a:hover {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.95) !important;
}
.juice-product-hero .flex-direction-nav a::after {
font-size: 10px !important;
color: #000 !important;
}
/* Gallery slide counter + progress bar — mobile only */
.juice-gallery-counter,
.juice-gallery-progress {
display: none;
}
/* Slick overrides on thumbnails */
.juice-product-hero .flex-control-thumbs.slick-slider {
display: flex !important;
position: absolute !important;
bottom: 20px !important;
right: 24px !important;
left: auto !important;
top: auto !important;
width: auto !important;
overflow: visible !important;
}
.juice-product-hero .flex-control-thumbs .slick-list {
display: flex !important;
overflow: visible !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
}
.juice-product-hero .flex-control-thumbs .slick-track {
display: flex !important;
gap: 3px !important;
width: auto !important;
transform: none !important;
}
.juice-product-hero .flex-control-thumbs .slick-slide {
flex: 0 0 30px !important;
width: 30px !important;
height: 30px !important;
float: none !important;
margin: 0 !important;
}
/* Disable lightbox on hero images */
.juice-product-hero .woocommerce-product-gallery__image a {
pointer-events: none !important;
cursor: default !important;
}
.juice-product-hero .woocommerce-product-gallery__image a:after {
display: none !important;
}
/* === BOOKMARK / SAVE ICON — floating on gallery === */
button.juice-bookmark-float {
position: absolute;
top: 20px;
right: 20px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: none;
cursor: pointer;
color: #000;
transition: background 0.3s ease, transform 0.2s ease;
}
button.juice-bookmark-float:hover {
background: rgba(255, 255, 255, 1);
}
button.juice-bookmark-float:active {
transform: scale(0.92);
}
/* Default: show outline, hide filled */
.juice-bookmark-icon-filled {
display: none;
}
/* Saved state: show filled, hide outline */
button.juice-bookmark-float.is-saved .juice-bookmark-icon {
display: none;
}
button.juice-bookmark-float.is-saved .juice-bookmark-icon-filled {
display: block;
}
/* === BODY — 3-section grid: header+info left, actions right (sticky) === */
.juice-product-body {
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-rows: auto 1fr;
gap: 0 clamp(30px, 3vw, 50px);
padding: 0 clamp(40px, 4vw, 60px) !important;
max-width: none !important;
margin: 0 auto;
}
/* LEFT COLUMN TOP — title, price, excerpt */
.juice-product-details {
grid-column: 1;
grid-row: 1;
padding-top: 40px;
align-self: start;
max-width: 520px;
}
/* LEFT COLUMN BOTTOM — description + accordions */
.juice-product-info {
grid-column: 1;
grid-row: 2;
align-self: start;
max-width: 520px;
}
/* RIGHT COLUMN — cart actions (sticky, spans both rows) */
.juice-product-actions {
grid-column: 2;
grid-row: 1 / -1;
padding-top: 40px;
position: sticky;
top: 100px;
align-self: start;
width: 100%;
min-width: 300px;
max-width: 400px;
overflow: hidden;
justify-self: end;
}
/* === RELATED SECTION — full width === */
.juice-product-related {
width: 100%;
overflow: hidden;
margin-top: 48px;
}
/* Hide duplicate price suffix (DKK display) */
.juice-product-details .price small,
.juice-product-details .price .woocommerce-price-suffix {
display: none !important;
}
/* Hide short description in actions column */
.juice-product-actions .woocommerce-product-details__short-description {
display: none !important;
}
/* Short description (excerpt) in details column — subtle like Gucci */
.juice-product-details .woocommerce-product-details__short-description,
.juice-product-details .woocommerce-product-details__short-description p {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: rgba(0, 0, 0, 0.5) !important;
margin: 0 0 8px !important;
}
/* Hide quantity selector — quantity handled in cart page */
.juice-quantity-row,
.juice-cart-form .quantity {
display: none !important;
}
/* === LEFT COLUMN: Product description === */
.juice-product-description {
margin-top: 40px;
padding-top: 28px;
border-top: none;
position: relative;
}
/* Full-width top border matching accordion style */
.juice-product-description::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.juice-desc-heading {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #000 !important;
margin: 0 0 8px !important;
}
.juice-desc-sku {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
color: rgba(0, 0, 0, 0.4) !important;
text-decoration: underline !important;
margin: 0 0 16px !important;
}
.juice-product-description p {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.8 !important;
color: rgba(0, 0, 0, 0.6) !important;
}
/* === LEFT COLUMN: Expandable accordions === */
.juice-accordion-item {
position: relative;
border-bottom: none;
}
/* Full-width parallel border lines (Gucci-style) */
.juice-accordion-item::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.juice-accordion-item:first-child {
border-top: none;
}
/* Top border on the container */
.juice-accordions {
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 40px;
}
/* Underline animation — full-width, appears when expanded */
.juice-accordion-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: #000;
transition: width .8s cubic-bezier(.5, 0, 0, 1);
}
.juice-accordion-item:has(.juice-accordion-trigger[aria-expanded="true"])::after {
width: 100%;
}
.juice-accordion-trigger {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.02em;
color: #000;
text-align: left;
transition: color .8s cubic-bezier(.5, 0, 0, 1);
}
.juice-accordion-trigger:hover {
color: rgba(0, 0, 0, 0.6);
}
.juice-accordion-chevron {
flex-shrink: 0;
font-size: 12px;
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.juice-accordion-trigger[aria-expanded="true"] .juice-accordion-chevron {
transform: rotate(180deg);
}
.juice-accordion-panel {
max-height: 0;
overflow: hidden;
opacity: 0;
padding-bottom: 20px;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1),
opacity .8s cubic-bezier(.5, 0, 0, 1);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.8;
color: rgba(0, 0, 0, 0.6);
}
.juice-accordion-panel.is-open {
opacity: 1;
/* For panels rendered already-open in HTML (e.g. "Har du brug for
hjælp?" on checkout), no JS runs to set the inline max-height. Without
this rule the panel stayed clamped at 0 and only the padding leaked
through, producing the half-visible content the user reported. JS
still controls max-height via inline styles during animations — inline
wins over CSS, so this only kicks in on initial render. */
max-height: none;
}
.juice-accordion-panel table {
width: 100%;
border-collapse: collapse;
}
.juice-accordion-panel table th,
.juice-accordion-panel table td {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
padding: 8px 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
color: rgba(0, 0, 0, 0.6) !important;
}
.juice-accordion-panel table th {
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.8) !important;
text-align: left;
padding-right: 16px !important;
}
/* === PROCESS FLOW — inside "Processen" accordion === */
.juice-process-flow {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
padding: 8px 0 4px;
}
.juice-process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 0 0 auto;
min-width: 56px;
max-width: 72px;
}
.juice-process-icon {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
transition: all 0.3s ease;
}
.juice-process-icon svg {
opacity: 0.7;
}
.juice-process-step:hover .juice-process-icon {
border-color: #000;
background: #000;
}
.juice-process-step:hover .juice-process-icon svg {
stroke: #fff;
opacity: 1;
}
.juice-process-label {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000;
line-height: 1.2;
}
.juice-process-desc {
font-family: 'Inter', sans-serif;
font-size: 8px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 1.2;
margin-top: 1px;
}
.juice-process-arrow {
display: flex;
align-items: center;
padding: 8px 4px 0;
opacity: 0.3;
}
/* === LEFT COLUMN: Product meta === */
.juice-product-details .product_meta {
margin-top: 24px !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* Hide breadcrumb in actions column — Goya injects it */
.juice-product-actions .woocommerce-breadcrumb {
display: none !important;
}
/* Hide wishlist button — covers all YITH modes + Goya variants */
.juice-product-actions .et-wishlist-button,
.juice-product-actions .goya-wishlist-button,
.juice-product-actions .yith-wcwl-add-to-wishlist,
.juice-product-actions .yith-wcwl-add-to-wishlist-button-block,
.juice-product-actions .yith-add-to-wishlist-button-block {
display: none !important;
}
/* === RIGHT COLUMN: Juice cart form === */
.juice-cart-form {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 0 24px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}
/* Quantity row */
.juice-quantity-row {
margin-bottom: 12px;
}
.juice-cart-form .quantity {
width: 100% !important;
margin: 0 !important;
}
.juice-cart-form .quantity .qty {
width: 100% !important;
text-align: center !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
padding: 12px !important;
background: #fff !important;
}
/* Variation groups */
.juice-variations {
margin-bottom: 20px;
}
.juice-variation-group {
margin-bottom: 16px;
}
.juice-variation-label {
display: block;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.5) !important;
margin-bottom: 8px !important;
}
.juice-variation-select-wrap select {
width: 100% !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #000 !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
padding: 12px 32px 12px 12px !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 10px 6px !important;
transition: border-color .8s cubic-bezier(.5, 0, 0, 1) !important;
}
.juice-variation-select-wrap select:focus {
border-color: #000 !important;
outline: none !important;
}
/* Variation labels + reset link — Gucci timing */
.juice-product-actions .variations .label label {
transition: color .8s cubic-bezier(.5, 0, 0, 1) !important;
}
/* Quantity: hide on variable product pages (custom grillz = qty 1) */
.juice-product-actions .woocommerce-variation-add-to-cart .quantity {
display: none !important;
}
/* === RIGHT COLUMN: Add to cart form (fallback for non-juice forms) === */
.juice-product-actions form.cart {
margin: 0 0 16px !important;
padding: 0 0 16px !important;
border-bottom: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
position: relative !important;
width: 100% !important;
}
/* Reorder: button on top, variations below */
/* Swatches plugin adds a wrapper div[data-product_id] — needs flex for ordering */
.juice-product-actions form.cart > div[data-product_id] {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.juice-product-actions form.cart .single_variation_wrap {
order: 1 !important;
width: 100% !important;
}
.juice-product-actions form.cart .variations {
order: 2 !important;
width: 100% !important;
}
.juice-product-actions form.cart .quantity {
order: 0 !important;
}
/* Border under form removed — kit section has its own border-top */
.juice-product-actions form.cart::after {
display: none;
}
/* Add-to-bag button — full width */
.juice-product-actions .single_add_to_cart_button,
.juice-product-actions button.single_add_to_cart_button {
width: 100% !important;
min-width: 0 !important;
padding: 16px 40px !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
.juice-product-actions .single_add_to_cart_button:hover,
.juice-product-actions button.single_add_to_cart_button:hover,
.woocommerce div.product .summary .single_add_to_cart_button:hover,
.woocommerce div.product .summary button.single_add_to_cart_button:hover {
background: #fff !important;
color: #000 !important;
border: 1px solid #000 !important;
opacity: 1 !important;
}
.juice-product-actions .single_add_to_cart_button:hover .juice-bag-icon,
.woocommerce div.product .summary .single_add_to_cart_button:hover .juice-bag-icon {
stroke: #000 !important;
color: #000 !important;
}
/* Legacy ::before effect removed; final button behavior is defined below. */
/* Quantity input in actions column */
.juice-product-actions .quantity {
width: 100% !important;
}
.juice-product-actions .quantity .qty {
width: 100% !important;
text-align: center !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
padding: 12px !important;
}
/* === RIGHT COLUMN: Variation selectors === */
.juice-product-actions .variations {
width: 100% !important;
border: none !important;
margin-bottom: 16px !important;
}
.juice-product-actions .variations td,
.juice-product-actions .variations th {
border: none !important;
padding: 8px 0 !important;
vertical-align: middle !important;
}
.juice-product-actions .variations .label label {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.5) !important;
}
.juice-product-actions .variations select {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #000 !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
padding: 10px 32px 10px 12px !important;
background-color: #fff !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 10px 6px !important;
width: 100% !important;
transition: border-color 0.2s ease !important;
}
.juice-product-actions .variations select:focus {
border-color: #000 !important;
outline: none !important;
}
.juice-product-actions .reset_variations {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.4) !important;
text-decoration: none !important;
}
/* Override Goya's .et-fixed → static on tablets/mobile — keep product header fixed */
@media (max-width: 991px) {
body.single-product .site-header,
body.single-product .site-header.et-fixed {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background: transparent !important;
}
}
/* === MOBILE — single column, breadcrumb below hero === */
@media (max-width: 768px) {
/* ── Product wrapper: flex column to reorder breadcrumb below hero ── */
.juice-product.et-product-detail {
display: flex !important;
flex-direction: column !important;
}
.juice-product-hero { order: 1 !important; }
.juice-breadcrumb-bar {
order: 2 !important;
position: static !important;
top: auto !important;
}
.juice-breadcrumb-spacer {
display: none !important;
}
.juice-finish-bar { order: 3 !important; }
.juice-product-body { order: 4 !important; }
.juice-product-related { order: 5 !important; }
/* ── Hero: full-bleed, fills viewport like frontpage ── */
.juice-product-hero {
height: 85vh !important;
overflow: hidden !important;
position: relative !important;
}
.juice-product-hero .woocommerce-product-gallery,
.juice-product-hero .woocommerce-product-gallery .flex-viewport {
height: 100% !important;
max-height: none !important;
}
.juice-product-hero .woocommerce-product-gallery__wrapper {
height: 100% !important;
}
.juice-product-hero .woocommerce-product-gallery__image {
height: 100% !important;
width: 100% !important;
}
.juice-product-hero .woocommerce-product-gallery__image > a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.juice-product-hero .woocommerce-product-gallery img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
}
/* ── Product body: single-column stack ── */
.juice-product-body {
display: flex !important;
flex-direction: column !important;
padding: 0 20px !important;
}
.juice-product-details {
order: 1 !important;
padding-top: 24px;
}
.juice-product-actions {
order: 2 !important;
position: static !important;
padding-top: 0;
max-width: none !important;
}
.juice-product-info {
order: 3 !important;
}
/* ── Price: separator line below (before excerpt) ── */
.juice-product-details .price {
padding-bottom: 16px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
margin-bottom: 12px !important;
}
/* ── Add-to-cart form: full-width column layout ── */
.juice-product-actions form.cart {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
/* ── Button: full-width on mobile ── */
.juice-product-actions .single_add_to_cart_button,
.juice-product-actions button.single_add_to_cart_button {
width: 100% !important;
min-width: 0 !important;
padding: 18px 40px !important;
}
/* ── Kit options: wrap layout (TOP+BUND row, TOP&BUND full-width) ── */
.juice-kit-options {
flex-wrap: wrap !important;
overflow-x: visible !important;
}
/* ── Kit add button: full-width ── */
.juice-kit-add {
width: 100% !important;
}
/* ── Separators: full-width on mobile ── */
.juice-product-description::before,
.juice-accordion-item::before,
.juice-product-actions form.cart::after {
width: 100% !important;
}
.juice-accordion-item::after {
width: 0 !important;
}
.juice-accordion-item:has(.juice-accordion-trigger[aria-expanded="true"])::after {
width: 100% !important;
}
/* ── Gallery: hide arrows + thumbnails on mobile ── */
.juice-product-hero .flex-direction-nav {
display: none !important;
}
.juice-product-hero .flex-control-thumbs {
display: none !important;
}
/* ── Gallery slide counter (1 / 4) — Gucci-style plain text, bottom-right ── */
.juice-gallery-counter {
display: block !important;
position: absolute !important;
bottom: 16px !important;
right: 16px !important;
left: auto !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 9px;
font-weight: 500;
color: #000;
background: none;
padding: 0;
border-radius: 0;
z-index: 10;
letter-spacing: -0.03em;
line-height: 1;
}
/* ── Gallery swipe progress bar — thin line at bottom of hero ── */
.juice-gallery-progress {
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 2px !important;
background: rgba(255, 255, 255, 0.3) !important;
z-index: 10 !important;
}
.juice-gallery-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #000;
transition: left .4s ease, width .4s ease;
}
.juice-product-hero .flex-control-thumbs li {
flex: 0 0 30px !important;
width: 30px !important;
height: 30px !important;
max-width: 30px !important;
}
/* ── Description & accordion spacing ── */
.juice-product-description {
margin-top: 24px !important;
}
.juice-accordions {
margin-top: 0 !important;
}
/* ── Process flow: slightly smaller on mobile ── */
.juice-process-step {
min-width: 48px !important;
max-width: 60px !important;
}
.juice-process-icon {
width: 38px !important;
height: 38px !important;
}
.juice-process-icon svg {
width: 18px !important;
height: 18px !important;
}
.juice-process-arrow {
padding: 6px 2px 0 !important;
}
/* ── Related section: more spacing above ── */
.juice-product-related {
margin-top: 40px !important;
}
}
/* -------------------------------------------
RELATED / UPSELLS — Horizontal Scroll
(Gucci "YOU MAY ALSO LIKE" style)
Goya DOM: section.related.products > .container > h2 + ul.products.row
The ul has Bootstrap .row class that fights our flex direction.
------------------------------------------- */
/* Heading — centered, kill Goya's inline-block + ::before line */
.juice-related-heading,
section.related.products > h2,
section.up-sells.upsells.products > h2,
.woocommerce div.product section.related > h2,
.woocommerce div.product section.up-sells > h2 {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
text-align: center !important;
display: block !important;
margin: 36px 0 24px !important;
padding: 0 40px !important;
color: #000 !important;
}
/* Kill Goya's decorative line pseudo-element */
section.related.products h2::before,
section.up-sells.upsells.products h2::before,
.woocommerce div.product section.related h2::before,
.woocommerce div.product section.up-sells h2::before {
display: none !important;
}
/* Section itself needs border-top separator and padding */
section.related.products,
section.up-sells.upsells.products {
border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
padding-bottom: 40px !important;
}
/* Break container out to full width */
section.related.products > .container,
section.up-sells.upsells.products > .container,
.woocommerce div.product section.related > .container,
.woocommerce div.product section.up-sells > .container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
/* Juice related products: arrow wrapper layout */
.juice-related-wrap {
position: relative;
display: flex;
align-items: center;
padding: 0;
}
/* Arrow buttons — Gucci-style translucent circles */
.juice-related-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: none;
border-radius: 50%;
cursor: pointer;
color: #000;
transition: background .4s ease, transform .4s ease;
z-index: 3;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.juice-related-prev {
left: 12px;
}
.juice-related-next {
right: 12px;
}
.juice-related-arrow:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-50%) scale(1.1);
}
.juice-related-track {
flex: 1;
overflow: hidden;
min-width: 0;
margin: 0;
}
/* Horizontal scroll — override Bootstrap .row flex-wrap */
.juice-related-track ul.products,
section.related.products ul.products,
section.up-sells.upsells.products ul.products,
.woocommerce div.product section.related ul.products,
.woocommerce div.product section.up-sells ul.products,
section.related.products ul.products.row,
section.up-sells.upsells.products ul.products.row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-behavior: smooth !important;
gap: 8px !important;
padding: 0 clamp(40px, 4vw, 60px) 20px !important;
margin: 0 !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
scroll-snap-type: none !important;
}
section.related.products ul.products::-webkit-scrollbar,
section.up-sells.upsells.products ul.products::-webkit-scrollbar,
.juice-related-track ul.products::-webkit-scrollbar {
display: none;
}
/* Override Slick carousel if it initializes before our JS removes it */
section.related.products ul.products.slick-initialized,
section.up-sells.upsells.products ul.products.slick-initialized {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
/* Hide Slick arrows and dots on related/upsells */
section.related.products .slick-arrow,
section.related.products .slick-dots,
section.up-sells.upsells.products .slick-arrow,
section.up-sells.upsells.products .slick-dots,
section.related.products ul.products + .slick-dots,
section.up-sells ul.products + .slick-dots {
display: none !important;
}
/* Each product card in scroll — override Bootstrap col-* widths */
section.related.products ul.products li.product,
section.up-sells.upsells.products ul.products li.product,
.woocommerce div.product section.related ul.products li.product,
.woocommerce div.product section.up-sells ul.products li.product {
flex: 0 0 calc(25% - 8px) !important;
min-width: 240px !important;
max-width: none !important;
width: calc(25% - 8px) !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Tablet */
@media (max-width: 1024px) {
section.related.products ul.products,
section.up-sells.upsells.products ul.products {
padding: 0 20px 16px !important;
gap: 8px !important;
}
section.related.products ul.products li.product,
section.up-sells.upsells.products ul.products li.product {
flex: 0 0 calc(33% - 6px) !important;
min-width: 160px !important;
max-width: none !important;
width: calc(33% - 6px) !important;
}
}
/* Progress bar — Gucci-style scroll indicator */
.juice-related-progress {
width: 50%;
max-width: 300px;
height: 2px;
background: rgba(0, 0, 0, 0.1);
margin: 24px auto 0;
position: relative;
overflow: hidden;
}
.juice-related-progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #000;
width: 20%;
transition: left .3s ease, width .3s ease;
}
/* Hide Goya extras on related/upsell cards — image + title + price only */
section.related li.product .product_thumbnail_hover,
section.related li.product .actions-wrapper,
section.related li.product .product-excerpt,
section.related li.product .after_shop_loop_actions,
section.related li.product .star-rating,
section.related li.product .yith-wcwl-add-to-wishlist,
section.related li.product .yith-add-to-wishlist-button-block,
section.related li.product .badge,
section.related li.product .et-quickview-button,
section.related li.product .add_to_cart_button,
section.up-sells li.product .product_thumbnail_hover,
section.up-sells li.product .actions-wrapper,
section.up-sells li.product .product-excerpt,
section.up-sells li.product .after_shop_loop_actions,
section.up-sells li.product .star-rating,
section.up-sells li.product .yith-wcwl-add-to-wishlist,
section.up-sells li.product .yith-add-to-wishlist-button-block,
section.up-sells li.product .badge,
section.up-sells li.product .et-quickview-button,
section.up-sells li.product .add_to_cart_button {
display: none !important;
}
/* Related card images */
section.related li.product .product_thumbnail img,
section.up-sells li.product .product_thumbnail img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
/* Related card title + price */
section.related li.product .product-title h2 a,
section.up-sells li.product .product-title h2 a {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
text-transform: uppercase !important;
color: #000 !important;
text-decoration: none !important;
text-align: center !important;
display: block !important;
margin-top: 12px !important;
}
section.related li.product .product_after_shop_loop_price .price,
section.related li.product .price,
section.up-sells li.product .product_after_shop_loop_price .price,
section.up-sells li.product .price {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #000000 !important;
text-align: center !important;
display: block !important;
}
/* Slider cards only: center + stack title/price and avoid all-caps */
section.related.products li.product .juice-card-info,
section.up-sells.upsells.products li.product .juice-card-info,
.juice-cart-related li.product .juice-card-info {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 4px !important;
}
section.related.products li.product .juice-card-title-link,
section.up-sells.upsells.products li.product .juice-card-title-link,
.juice-cart-related li.product .juice-card-title-link {
width: 100% !important;
text-align: center !important;
}
section.related.products li.product .juice-card-title,
section.up-sells.upsells.products li.product .juice-card-title,
.juice-cart-related li.product .juice-card-title {
text-align: center !important;
margin: 0 !important;
}
section.related.products li.product .juice-card-price,
section.up-sells.upsells.products li.product .juice-card-price,
.juice-cart-related li.product .juice-card-price,
section.related.products li.product .juice-card-price .woocommerce-Price-amount,
section.up-sells.upsells.products li.product .juice-card-price .woocommerce-Price-amount,
.juice-cart-related li.product .juice-card-price .woocommerce-Price-amount {
text-align: center !important;
margin: 0 !important;
color: #000 !important;
}
/* Disable Goya hover transforms on related */
section.related li.product:hover .product_thumbnail img,
section.up-sells li.product:hover .product_thumbnail img {
transform: none !important;
}
@media (max-width: 768px) {
.woocommerce div.product section.related ul.products,
.woocommerce div.product section.up-sells ul.products,
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products,
section.related.products ul.products,
section.related.products ul.products.row,
section.up-sells.upsells.products ul.products,
section.up-sells.upsells.products ul.products.row {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: none !important;
justify-content: flex-start !important;
padding: 0 12px 16px !important;
gap: 8px !important;
scrollbar-width: none !important;
}
.woocommerce div.product section.related ul.products::-webkit-scrollbar,
.woocommerce div.product section.up-sells ul.products::-webkit-scrollbar,
section.related.products ul.products::-webkit-scrollbar,
section.up-sells.upsells.products ul.products::-webkit-scrollbar {
display: none !important;
}
.woocommerce div.product section.related ul.products li.product,
.woocommerce div.product section.up-sells ul.products li.product,
.woocommerce div.product .related ul.products li.product,
.woocommerce div.product .upsells ul.products li.product,
section.related.products ul.products li.product,
section.up-sells.upsells.products ul.products li.product {
flex: 0 0 calc(45vw - 20px) !important;
min-width: calc(45vw - 20px) !important;
max-width: calc(45vw - 20px) !important;
scroll-snap-align: none !important;
}
/* Arrow buttons visible on mobile */
.juice-related-arrow {
width: 32px !important;
height: 32px !important;
}
.juice-related-wrap {
padding: 0 !important;
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
margin: 30px 0 16px !important;
}
}
/* ===========================================
FINISH VARIATION — Custom Juice buttons
Bypasses woo-variation-swatches plugin entirely
=========================================== */
/* Hide plugin swatch output completely */
/* Hide plugin swatch output */
.juice-product-actions .variable-items-wrapper,
.juice-product-actions ul.button-variable-items-wrapper,
.juice-product-actions [data-wvstooltip],
.woo-selected-variation-item-name,
.juice-product-actions .reset_variations {
display: none !important;
}
/* Variation label: hide */
.juice-variation-label {
display: none !important;
}
/* === FINISH BAR — centered row between hero and body === */
.juice-finish-bar {
display: flex;
justify-content: center;
padding: 28px clamp(40px, 4vw, 64px) 0;
}
/* Container: horizontal row, auto-width centered */
.juice-finish-buttons {
display: flex;
flex-wrap: nowrap;
gap: 24px;
align-items: center;
}
/* Each chip: color dot + text, no background/border */
.juice-finish-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border: none;
background: transparent;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
white-space: nowrap;
transition: color .3s ease;
-webkit-appearance: none;
appearance: none;
outline: none;
}
.juice-finish-btn:hover {
color: #000;
}
.juice-finish-btn.active {
color: #000;
font-weight: 500;
}
/* Color dot */
.juice-finish-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: box-shadow .3s ease;
flex-shrink: 0;
}
/* Active dot: outer ring matching the metal color */
.juice-finish-btn.active .juice-finish-dot {
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor;
border-color: transparent;
}
/* MOBILE: finish bar */
@media (max-width: 768px) {
.juice-finish-bar {
padding: 20px 16px 0;
}
.juice-finish-buttons {
gap: 16px;
}
.juice-finish-btn {
font-size: 9px;
gap: 6px;
}
.juice-finish-dot {
width: 12px;
height: 12px;
}
}
/* ===========================================
ADD-TO-CART BUTTON — solid black via background-image
=========================================== */
.juice-product-actions .single_add_to_cart_button,
.juice-product-actions .single_add_to_cart_button.disabled,
.juice-product-actions .single_add_to_cart_button:disabled,
.juice-product-actions .single_add_to_cart_button.wc-variation-is-unavailable,
.juice-product-actions .woocommerce-variation-add-to-cart .button {
color: #fff !important;
border: none !important;
opacity: 1 !important;
}
/* Category page title + header — now in main category CSS block above */
/* ═══════════════════════════════════════════════════════════════
JUICE INFO PAGES — custom template, no Goya wrappers
Ported from production virksomheden.css + uag-css-3974.css
═══════════════════════════════════════════════════════════════ */
/* Clean canvas — no extra spacing from Goya */
.juice-page {
margin: 0;
padding: 0;
}
/* Remove Goya's 28px gap between Gutenberg blocks */
.juice-page > .wp-block-group.has-background {
margin-bottom: 0 !important;
}
.juice-page > .wp-block-group + .wp-block-group {
margin-top: 0 !important;
}
/* Hide trailing empty paragraphs */
.juice-page > p:empty:last-child {
display: none !important;
}
/* Prevent horizontal overflow */
.juice-page {
overflow-x: hidden !important;
}
/* ─── Logo row (Om Juice .virk-logos) ─── */
/* All 3 SVGs are now 1000x1000 — no per-logo scaling needed */
.virk-logos {
display: grid !important;
grid-template-columns: auto auto auto !important;
justify-content: center !important;
align-items: center !important;
max-width: 640px !important;
column-gap: clamp(16px, 2vw, 32px) !important;
margin: 0 auto clamp(18px, 3vw, 38px) !important;
overflow: hidden !important;
}
.virk-logos .wp-block-column {
position: relative;
margin: 0 !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 clamp(10px, 1.2vw, 18px) !important;
}
/* Separators via middle column pseudo-elements */
.virk-logos .wp-block-column:nth-child(2)::before,
.virk-logos .wp-block-column:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
width: 2px;
height: clamp(16px, 2.5vw, 40px);
background: #000;
opacity: 0.85;
pointer-events: none;
}
.virk-logos .wp-block-column:nth-child(2)::before {
left: calc(-1 * (clamp(16px, 2vw, 32px) / 2));
transform: translate(-50%, -50%);
}
.virk-logos .wp-block-column:nth-child(2)::after {
right: calc(-1 * (clamp(16px, 2vw, 32px) / 2));
transform: translate(50%, -50%);
}
/* All logos: uniform sizing — same 1000x1000 canvas */
.virk-logos .wp-block-image {
margin: 0 !important;
display: flex !important;
justify-content: center !important;
}
.virk-logos .wp-block-image img {
height: clamp(80px, 9vw, 160px) !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain;
display: block;
}
/* Mobile */
@media (max-width: 781px) {
.virk-logos .wp-block-image img {
height: clamp(55px, 12vw, 100px) !important;
}
}
@media (max-width: 360px) {
.virk-logos {
grid-template-columns: 1fr !important;
row-gap: 14px !important;
}
.virk-logos .wp-block-column:nth-child(2)::before,
.virk-logos .wp-block-column:nth-child(2)::after {
display: none !important;
}
}
/* ─── UAGB Advanced Heading (plugin not installed locally) ─── */
/* Replicates production uag-css-3974.css heading styles */
.wp-block-uagb-advanced-heading {
text-align: center;
}
.wp-block-uagb-advanced-heading h1,
.wp-block-uagb-advanced-heading h2,
.wp-block-uagb-advanced-heading h3,
.wp-block-uagb-advanced-heading h4,
.wp-block-uagb-advanced-heading h5,
.wp-block-uagb-advanced-heading h6 {
word-break: break-word;
}
.uagb-heading-text {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #000;
text-align: center;
margin: 0;
}
.uagb-separator {
font-size: 0;
border-top-style: solid;
border-top-width: 1px;
display: inline-block;
margin: 0 0 6px 0;
}
/* OM JUICE heading — white text on black bg */
.uagb-block-3105dd2b {
text-align: center;
padding: 200px 0 15px;
}
.uagb-block-3105dd2b .uagb-heading-text {
color: #ffffff;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 5px;
}
.uagb-block-3105dd2b .uagb-separator {
border-color: #ffffff;
width: 26%;
margin-bottom: 15px;
}
/* NEO-URBANISM heading — black text on gradient */
.uagb-block-25985748 {
text-align: center;
padding: 0;
}
.uagb-block-25985748 .uagb-heading-text {
color: #000000;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 40px;
letter-spacing: 5px;
}
.uagb-block-25985748 .uagb-separator {
display: none;
}
/* ETISK KODEKS heading */
.uagb-block-c264008c {
text-align: center;
padding: 250px 0 0;
}
.uagb-block-c264008c .uagb-heading-text {
font-weight: 300;
letter-spacing: 0.3em;
}
.uagb-block-c264008c .uagb-separator {
border-color: currentColor;
width: 26%;
margin-bottom: 15px;
}
/* VILKÅR OG BETINGELSER heading */
.uagb-block-cd903a08 {
text-align: center;
padding: 250px 0 0;
}
.uagb-block-cd903a08 .uagb-heading-text {
color: #000000;
font-weight: 300;
letter-spacing: 0.3em;
}
.uagb-block-cd903a08 .uagb-separator {
border-top-color: #000000;
width: 26%;
margin-bottom: 15px;
}
/* VIRKSOMHEDSINFORMATION / SÅRBARHEDSRAPPORTERING headings */
.uagb-block-e82658ae {
text-align: center;
padding: 250px 0 30px;
}
.uagb-block-e82658ae .uagb-heading-text {
font-weight: 400;
letter-spacing: 0.12em;
}
.uagb-block-e82658ae .uagb-separator {
border-top-color: #010101;
width: 26%;
margin-bottom: 15px;
}
/* ─── Juice Page responsive (replaces Goya's responsive wrappers) ─── */
.juice-page .wp-block-group__inner-container {
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 782px) {
.juice-page .wp-block-group__inner-container {
padding-left: 0;
padding-right: 0;
}
}
/* =========================================================================
BOOKING SYSTEM
========================================================================= */
/* --- Page Layout --- */
.juice-booking-page {
padding: 120px 20px 80px;
min-height: 80vh;
background: #fff;
}
.juice-booking-container {
max-width: 640px;
margin: 0 auto;
}
.juice-booking-title {
font-family: 'Inter', sans-serif;
font-size: 22px;
font-weight: 400;
letter-spacing: 0.2em;
text-align: center;
margin: 0 0 48px;
color: #000;
}
/* --- Back Button --- */
.juice-booking-back {
background: none;
border: none;
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
color: #666;
cursor: pointer;
padding: 0;
margin-bottom: 32px;
transition: color 0.2s;
}
.juice-booking-back:hover {
color: #000;
}
/* --- Type Cards --- */
.juice-booking-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.juice-booking-type-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 24px;
background: #fff;
border: 1px solid #e0e0e0;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
font-family: 'Inter', sans-serif;
}
.juice-booking-type-card:hover {
border-color: #000;
background: #fafafa;
}
.juice-booking-type-icon {
color: #000;
}
.juice-booking-type-name {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.15em;
color: #000;
}
.juice-booking-type-desc {
font-size: 12px;
color: #888;
letter-spacing: 0.02em;
}
/* --- Calendar --- */
.juice-booking-calendar-wrap {
margin-bottom: 32px;
}
.juice-booking-calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.juice-booking-cal-month {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #000;
}
.juice-booking-cal-nav {
background: none;
border: 1px solid #e0e0e0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
color: #000;
transition: border-color 0.2s;
font-family: 'Inter', sans-serif;
}
.juice-booking-cal-nav:hover {
border-color: #000;
}
.juice-booking-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.juice-booking-cal-day-header {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-align: center;
padding: 8px 0;
color: #999;
text-transform: uppercase;
}
.juice-booking-cal-day-header.juice-cal-weekend {
color: #ccc;
}
.juice-booking-slots-title {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 16px;
color: #000;
}
/* --- Booking Summary --- */
.juice-booking-summary {
display: flex;
gap: 32px;
padding: 20px 0;
margin-bottom: 32px;
border-bottom: 1px solid #e0e0e0;
}
.juice-booking-summary-item {
display: flex;
flex-direction: column;
gap: 4px;
font-family: 'Inter', sans-serif;
}
.juice-booking-summary-item span {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
}
.juice-booking-summary-item strong {
font-size: 13px;
font-weight: 500;
color: #000;
}
/* --- Form --- */
.juice-booking-form-title {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.15em;
margin: 0 0 24px;
color: #000;
}
.juice-booking-field {
margin-bottom: 20px;
}
.juice-booking-field label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #666;
margin-bottom: 6px;
}
.juice-booking-optional {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: #aaa;
}
.juice-booking-field input,
.juice-booking-field textarea {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 14px;
padding: 12px 16px;
border: 1px solid #e0e0e0;
background: #fff;
color: #000;
transition: border-color 0.2s;
box-sizing: border-box;
}
.juice-booking-field input:focus,
.juice-booking-field textarea:focus {
outline: none;
border-color: #000;
}
.juice-booking-field textarea {
resize: vertical;
min-height: 80px;
}
.juice-booking-submit {
width: 100%;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 16px;
background: #000;
color: #fff;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
margin-top: 8px;
}
.juice-booking-submit:hover {
background: #fff;
color: #000;
}
.juice-booking-gdpr {
margin-bottom: 24px;
}
.juice-booking-checkbox-label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #666;
line-height: 1.5;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.juice-booking-checkbox-label input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
.juice-booking-checkbox-label a {
color: #000;
text-decoration: underline;
text-underline-offset: 2px;
}
.juice-booking-success-sub {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #888;
margin: 0;
}
.juice-booking-submit:disabled {
opacity: 0.5;
cursor: default;
}
.juice-booking-error {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #c00;
margin-top: 12px;
text-align: center;
}
/* --- Success --- */
.juice-booking-step--success {
text-align: center;
padding: 40px 0;
}
.juice-booking-success-icon {
color: #000;
margin-bottom: 20px;
}
.juice-booking-success-title {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2em;
margin: 0 0 12px;
color: #000;
}
.juice-booking-success-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #666;
margin: 0 0 32px;
}
.juice-booking-success-link {
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #000;
text-decoration: underline;
text-underline-offset: 4px;
}
/* --- Divider --- */
.juice-booking-divider {
text-align: center;
margin: 48px 0;
position: relative;
}
.juice-booking-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e0e0e0;
}
.juice-booking-divider span {
position: relative;
background: #fff;
padding: 0 20px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
color: #999;
}
/* --- Ring Os Card --- */
.juice-booking-call-card {
display: flex;
align-items: center;
gap: 20px;
padding: 28px 32px;
border: 1px solid #e0e0e0;
}
.juice-booking-call-icon {
color: #000;
flex-shrink: 0;
}
.juice-booking-call-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.juice-booking-call-title {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.15em;
margin: 0;
color: #000;
}
.juice-booking-call-number {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
color: #000;
text-decoration: none;
letter-spacing: 0.05em;
}
.juice-booking-call-number:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.juice-booking-call-hours {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #888;
}
/* --- My Account: Bookings Tab --- */
.juice-my-bookings-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
}
.juice-my-bookings-header h2 {
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
margin: 0;
color: #000;
}
.juice-my-bookings-new {
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
color: #000;
text-decoration: none;
border: 1px solid #000;
padding: 8px 20px;
transition: all 0.2s;
}
.juice-my-bookings-new:hover {
background: #000;
color: #fff;
}
.juice-my-bookings-section {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #888;
margin: 0 0 12px;
}
.juice-my-bookings-table-wrap {
overflow-x: auto;
margin-bottom: 40px;
}
.juice-my-bookings-table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', sans-serif;
font-size: 13px;
}
.juice-my-bookings-table th {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid #e0e0e0;
}
.juice-my-bookings-table td {
padding: 14px 12px;
border-bottom: 1px solid #f0f0f0;
color: #000;
}
.juice-my-bookings-table--past td {
color: #999;
}
.juice-booking-status {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 10px;
}
.juice-booking-status--pending,
.juice-booking-status--publish {
color: #b8860b;
background: #fdf8e8;
}
.juice-booking-status--confirmed {
color: #2e7d32;
background: #e8f5e9;
}
.juice-booking-status--cancelled {
color: #999;
background: #f5f5f5;
}
.juice-booking-status--completed {
color: #333;
background: #f0f0f0;
}
.juice-booking-cancel-btn {
font-family: 'Inter', sans-serif;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #c00;
background: none;
border: 1px solid #c00;
padding: 5px 14px;
cursor: pointer;
transition: all 0.2s;
}
.juice-booking-cancel-btn:hover {
background: #c00;
color: #fff;
}
.juice-booking-cancel-btn:disabled {
opacity: 0.5;
cursor: default;
}
.juice-my-bookings-empty {
text-align: center;
padding: 48px 0;
}
.juice-my-bookings-empty p {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: #888;
margin: 0 0 20px;
}
/* --- Booking Animations --- */
@keyframes juiceFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes juiceSlotFade {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.juice-fade-in {
animation: juiceFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.juice-slot-fade {
opacity: 0;
animation: juiceSlotFade 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* --- Booking Responsive --- */
@media (max-width: 480px) {
.juice-booking-page {
padding: 100px 16px 60px;
}
.juice-booking-type-grid {
grid-template-columns: 1fr;
}
.juice-booking-type-card {
padding: 28px 20px;
}
.juice-booking-summary {
flex-direction: column;
gap: 16px;
}
.juice-booking-call-card {
padding: 20px;
}
.juice-my-bookings-header {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.juice-my-bookings-table {
font-size: 12px;
}
.juice-my-bookings-table th,
.juice-my-bookings-table td {
padding: 10px 8px;
}
}
/* ═══════════════════════════════════════════════════════════════
JUICE CHECKOUT — Gucci-minimal, matches login/register UI
═══════════════════════════════════════════════════════════════ */
/* ── Checkout "Checking out as" email bar ── */
/* ── Checkout status bar (below topbar) — guest or email ── */
.juice-checkout-status-bar {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 10px 20px !important;
background: #f7f7f7 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #000 !important;
}
.juice-checkout-status-bar strong {
color: #000 !important;
font-weight: 600 !important;
font-size: 12px !important;
margin-left: 4px !important;
}
/* ── Logged-in checkout: hide contact info step (email pre-filled from account) ── */
body.logged-in-checkout .wp-block-woocommerce-checkout-contact-information-block {
display: none !important;
}
/* ── Distraction-free: hide default footer + header ── */
.woocommerce-checkout .juice-icons,
.woocommerce-checkout #site-footer,
.woocommerce-checkout .site-footer,
.woocommerce-checkout .juice-footer,
.woocommerce-checkout .site-header,
.woocommerce-checkout .header-spacer {
display: none !important;
}
/* Checkout: disable off-canvas panels so they cannot create a second viewport rail */
body.woocommerce-checkout #mobile-menu.side-panel,
body.woocommerce-checkout #fullscreen-menu.side-panel,
body.woocommerce-checkout .search-panel.side-panel,
body.woocommerce-checkout #side-cart.side-panel {
display: none !important;
}
/* ── Checkout footer (dark, matching header) ── */
.juice-checkout-footer {
background: #1a1a1a;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 32px 20px;
margin-top: 60px;
font-family: 'Inter', sans-serif;
}
.juice-checkout-footer-inner {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.juice-checkout-footer-help {
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 12px;
}
.juice-checkout-footer-help a {
color: #fff;
text-decoration: none;
margin-left: 8px;
letter-spacing: 0.5px;
transition: opacity 0.3s ease;
}
.juice-checkout-footer-help a:hover {
opacity: 0.6;
}
.juice-checkout-footer-links {
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 8px;
}
.juice-checkout-footer-links a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.juice-checkout-footer-links a:hover {
color: #fff;
}
.juice-checkout-footer-sep {
margin: 0 8px;
}
.juice-checkout-footer-copy {
font-size: 10px;
color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.5px;
}
/* Sticky dark checkout header (Gucci-like bar) */
.woocommerce-checkout .juice-checkout-topbar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1200 !important;
background: #1a1a1a !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}
body.admin-bar.woocommerce-checkout .juice-checkout-topbar {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar.woocommerce-checkout .juice-checkout-topbar {
top: 46px !important;
}
}
.woocommerce-checkout .juice-checkout-topbar-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
/* Match Gucci's checkout header proportions (measured live via MCP:
120px total, 51px logo, ~35px above/below). Stays fixed at 120px
at every scroll position — Gucci does NOT shrink theirs. */
height: 120px !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 34px !important;
}
.woocommerce-checkout .juice-checkout-back {
position: absolute !important;
left: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.9) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
max-width: 170px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: opacity 0.2s ease !important;
}
.woocommerce-checkout .juice-checkout-back::before {
content: "\e924" !important;
font-family: "et-icon" !important;
font-size: 16px !important;
line-height: 1 !important;
position: relative !important;
top: 0 !important;
}
.woocommerce-checkout .juice-checkout-back:hover {
opacity: 0.72 !important;
}
.woocommerce-checkout .juice-checkout-logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}
.woocommerce-checkout .juice-checkout-logo img {
display: block !important;
/* Constrain to Gucci's 172px wordmark width (measured live via MCP).
Our SVG is 4.11:1 aspect, so 172px wide renders at ~42px tall —
matches Gucci's compact wordmark footprint inside the 120px header. */
width: 172px !important;
height: auto !important;
}
@media (max-width: 992px) {
.woocommerce-checkout .juice-checkout-back {
font-size: 10px !important;
max-width: 130px !important;
gap: 6px !important;
}
}
@media (max-width: 768px) {
.woocommerce-checkout .juice-checkout-topbar-inner {
/* Proportionally smaller on mobile to keep the topbar from
dominating the viewport, while preserving the bumped airy feel. */
height: 100px !important;
padding: 0 16px !important;
}
.woocommerce-checkout .juice-checkout-logo img {
width: 144px !important;
height: auto !important;
}
.woocommerce-checkout .juice-checkout-back {
left: 8px !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
max-width: 28px !important;
justify-content: center !important;
gap: 0 !important;
font-size: 0 !important;
letter-spacing: 0 !important;
overflow: visible !important;
text-indent: -9999px !important;
}
.woocommerce-checkout .juice-checkout-back::before {
font-size: 18px !important;
text-indent: 0 !important;
}
.woocommerce-checkout .juice-checkout-logo img {
height: 30px !important;
}
.juice-checkout-status-bar {
font-size: 9px !important;
padding: 8px 16px !important;
}
}
/* ── Page layout: centered with breathing room ── */
.woocommerce-checkout .page-padding {
padding-top: 0 !important;
}
.woocommerce-checkout .site-content {
margin-top: 0 !important;
/* Must equal the fixed topbar height (.juice-checkout-topbar-inner)
so the form clears the bar instead of scrolling under it. Topbar
grew from 78→120px to match Gucci's airy framing — this padding
tracks it. */
padding-top: 120px !important;
}
@media (max-width: 768px) {
.woocommerce-checkout .site-content {
/* Mobile topbar height is 100px. */
padding-top: 100px !important;
}
}
.woocommerce-checkout .hero-header {
display: none !important;
}
.woocommerce-checkout .post-content {
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-checkout .wp-block-woocommerce-checkout {
margin: 0 auto !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* ── Page heading ── */
.woocommerce-checkout .wp-block-heading,
.woocommerce-checkout .entry-title,
.woocommerce-checkout h1 {
font-family: 'Inter', sans-serif !important;
font-size: 24px !important;
font-weight: 300 !important;
letter-spacing: 6px !important;
text-transform: uppercase !important;
color: #000 !important;
text-align: center !important;
margin: 0 0 48px !important;
}
/* ═══════════════════════════════════════════════════════════
CHECKOUT BOOKING STEP — Appointment or DIY kit
═══════════════════════════════════════════════════════════ */
#juice-booking-root .juice-booking-inner {
padding: 0;
}
#juice-booking-root .juice-booking-type-grid {
margin: 0 0 18px !important;
}
#juice-booking-root .juice-booking-type-card {
align-items: flex-start !important;
text-align: left !important;
padding: 18px 18px !important;
gap: 8px !important;
}
#juice-booking-root .juice-booking-type-card .juice-booking-type-name {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
#juice-booking-root .juice-booking-type-card .juice-booking-type-desc {
font-size: 12px !important;
line-height: 1.5 !important;
color: #666 !important;
}
#juice-booking-root .juice-booking-type-card.is-selected {
border-color: #000 !important;
background: #fafafa !important;
}
/* ── Calendar header ── */
.juice-booking-cal-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
.juice-booking-cal-month {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
}
.juice-booking-cal-nav {
background: none !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 14px !important;
color: #000 !important;
padding: 0 !important;
line-height: 1 !important;
transition: all 0.15s ease !important;
}
.juice-booking-cal-nav:hover {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
/* ── Calendar grid ── */
.juice-booking-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 4px !important;
}
.juice-booking-cal-hdr {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
text-align: center !important;
padding: 8px 0 !important;
color: rgba(0, 0, 0, 0.4) !important;
}
.juice-booking-weekend {
color: rgba(0, 0, 0, 0.25) !important;
}
/* ── Day cells ── */
.juice-booking-cal-day {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
background: none !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
padding: 10px 0 !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
color: #000 !important;
line-height: 1 !important;
}
.juice-booking-cal-day:hover:not(:disabled) {
border-color: #000 !important;
}
.juice-booking-cal-day--today {
font-weight: 600 !important;
}
.juice-booking-cal-day--selected {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
.juice-booking-cal-day--disabled {
color: rgba(0, 0, 0, 0.15) !important;
cursor: default !important;
}
.juice-booking-cal-day--empty {
cursor: default !important;
}
.juice-booking-cal-day--weekend:not(.juice-booking-cal-day--selected) {
color: rgba(0, 0, 0, 0.35) !important;
}
/* ── Time slots ── */
.juice-booking-label,
.juice-booking-slots-label {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: rgba(0, 0, 0, 0.45) !important;
margin: 24px 0 12px !important;
}
.juice-booking-slots-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
.juice-booking-slot {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
background: none !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
padding: 12px 0 !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
color: #000 !important;
line-height: 1 !important;
}
.juice-booking-slot:hover {
border-color: #000 !important;
}
.juice-booking-slot--selected {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
.juice-booking-slots-empty {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: rgba(0, 0, 0, 0.45) !important;
padding: 16px 0 !important;
}
/* ── Inline kit picker (shown when DIY is selected w/o kit in cart) ── */
.juice-booking-kit-picker {
margin-top: 18px !important;
}
.juice-booking-kit-picker .juice-booking-label {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.55) !important;
margin: 18px 0 10px !important;
}
.juice-booking-kit-picker .juice-booking-label:first-child {
margin-top: 0 !important;
}
.juice-booking-kit-types {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
.juice-booking-kit-type {
font-family: 'Inter', sans-serif !important;
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
padding: 16px 12px !important;
cursor: pointer !important;
transition: border-color 0.15s ease, background 0.15s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
text-align: left !important;
color: #000 !important;
}
.juice-booking-kit-type:hover {
border-color: #000 !important;
}
.juice-booking-kit-type.is-selected {
border-color: #000 !important;
background: #fafafa !important;
}
.juice-booking-kit-type .juice-booking-kit-name {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
line-height: 1.25 !important;
}
.juice-booking-kit-type .juice-booking-kit-price {
font-size: 12px !important;
color: rgba(0, 0, 0, 0.55) !important;
font-weight: 500 !important;
}
.juice-booking-kit-sizes {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
.juice-booking-kit-size {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
background: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
padding: 12px 0 !important;
text-align: center !important;
cursor: pointer !important;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease !important;
color: #000 !important;
line-height: 1 !important;
}
.juice-booking-kit-size:hover {
border-color: #000 !important;
}
.juice-booking-kit-size.is-selected {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
.juice-booking-kit-add {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
padding: 14px 24px !important;
cursor: pointer !important;
margin-top: 18px !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
.juice-booking-kit-add:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.85) !important;
}
.juice-booking-kit-add:disabled {
background: rgba(0, 0, 0, 0.35) !important;
border-color: rgba(0, 0, 0, 0.35) !important;
cursor: not-allowed !important;
}
/* ── Skift metode button (kit confirmation + appointment confirmation) ── */
.juice-booking-switch-method {
display: inline-block !important;
margin-left: 10px !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: #000 !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
cursor: pointer !important;
}
.juice-booking-switch-method:hover {
color: rgba(0, 0, 0, 0.65) !important;
}
/* ── Confirmed selection ── */
.juice-booking-confirmed {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
margin-top: 16px !important;
padding: 12px 16px !important;
background: rgba(0, 0, 0, 0.03) !important;
border-left: 2px solid #000 !important;
}
.juice-booking-confirmed .juice-booking-switch-method {
display: inline-block !important;
margin-left: 8px !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #000 !important;
text-decoration: underline !important;
cursor: pointer !important;
}
.juice-booking-inline-error {
display: block;
overflow: hidden;
max-height: 0;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
margin-top: 0 !important;
color: #c41e3a !important;
opacity: 0;
transition: max-height 300ms ease, opacity 300ms ease, margin 300ms ease;
}
.juice-booking-inline-error.is-visible {
max-height: 30px;
margin-top: 14px !important;
opacity: 1;
}
/* ===========================================
CART PAGE — Gucci-inspired layout (blocks)
=========================================== */
.woocommerce-cart .entry-header,
.woocommerce-cart .page-title {
display: none !important;
}
.woocommerce-cart .page-header,
.woocommerce-cart .woocommerce-products-header,
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-cart .hero-header {
display: none !important;
}
body.woocommerce-cart .juice-breadcrumb-bar,
body.woocommerce-cart .juice-breadcrumb-spacer {
display: none !important;
}
.woocommerce-cart .site-content > .container {
max-width: 100% !important;
padding: 0 !important;
}
.woocommerce-cart .entry-content > .juice-cart-hero {
margin-top: 0 !important;
}
.woocommerce-cart .entry-content > .wp-block-spacer:first-child,
.woocommerce-cart .entry-content > p:first-child:empty {
display: none !important;
}
.woocommerce-cart .entry-content > *:first-child {
margin-top: 0 !important;
}
.woocommerce-cart .site-content,
.woocommerce-cart .post-content,
.woocommerce-cart .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
html body.woocommerce-cart,
html body.woocommerce-cart #page,
html body.woocommerce-cart #wrapper,
html body.woocommerce-cart .site-content,
html body.woocommerce-cart .page-wrapper-inner,
html body.woocommerce-cart .content-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
.woocommerce-cart .site-header {
border-bottom: none !important;
box-shadow: none !important;
top: 0 !important;
}
body.admin-bar.woocommerce-cart .site-header {
top: 32px !important;
}
@media (max-width: 782px) {
body.admin-bar.woocommerce-cart .site-header {
top: 46px !important;
}
}
.woocommerce-cart .site-header,
.woocommerce-cart .site-header .header-main,
.woocommerce-cart .site-header .header-main .header-contents {
height: 72px !important;
min-height: 72px !important;
}
.woocommerce-cart .site-header .logolink img {
max-height: 22px !important;
}
.woocommerce-cart .header-spacer {
display: none !important;
height: 0 !important;
}
.admin-bar.woocommerce-cart .header-spacer {
display: none !important;
height: 0 !important;
}
.woocommerce-cart .product-header-spacer,
.admin-bar.woocommerce-cart .product-header-spacer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-cart #wrapper,
.woocommerce-cart .page-wrapper-inner,
.woocommerce-cart .content-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
.woocommerce-cart .juice-cart-hero {
position: relative;
margin: 72px 0 64px !important;
padding: 0 !important;
overflow: hidden;
display: block;
}
.woocommerce-cart .juice-cart-hero-img {
width: 100%;
height: 320px;
display: block;
object-fit: cover;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-cart .juice-cart-hero-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 24px 48px;
background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 100%);
min-height: 50%;
pointer-events: none;
}
.woocommerce-cart .juice-cart-hero-title {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 2rem !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #fff !important;
}
@media (max-width: 768px) {
.woocommerce-cart .juice-cart-hero-img {
max-height: 400px;
}
.woocommerce-cart .juice-cart-hero-overlay {
padding: 0 16px 32px;
}
.woocommerce-cart .juice-cart-hero-title {
font-size: 1.5rem !important;
}
.woocommerce-cart .juice-cart-hero {
margin: 0 0 40px !important;
}
}
.woocommerce-cart .shopping-cart-content {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
gap: clamp(34px, 4vw, 64px) !important;
align-items: start !important;
max-width: 1440px !important;
margin: 0 auto !important;
padding: 0 clamp(20px, 4vw, 64px) 64px !important;
}
.woocommerce-cart .shopping-cart-content.row {
margin-left: auto !important;
margin-right: auto !important;
}
.woocommerce-cart .shopping-cart-content > [class*="col"] {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
.woocommerce-cart .shopping-cart-content .cart-collaterals {
position: sticky !important;
top: 104px !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.woocommerce-cart .shopping-cart-content .juice-summary-card {
border: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 25px !important;
background: #fff !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals,
.woocommerce-cart .shopping-cart-content .cart_totals > .cart_totals,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals > .cart_totals {
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart-items::before {
content: "DINE VARER";
display: block;
margin: 0;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #000;
}
.woocommerce-cart table.woocommerce-cart-form__contents {
width: 100% !important;
border: 0 !important;
margin: 0 !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tbody {
width: 100% !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item {
border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tbody tr.cart_item:first-child {
border-top: none !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item > td {
padding-top: 28px !important;
padding-bottom: 28px !important;
border: none !important;
}
.woocommerce-cart td.product-thumbnail img {
width: 130px !important;
max-width: 130px !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
}
.woocommerce-cart td.et-product-details {
text-align: left !important;
}
.woocommerce-cart .product-name,
.woocommerce-cart .product-name a {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
text-transform: uppercase !important;
color: #000 !important;
}
.woocommerce-cart .product-price,
.woocommerce-cart .product-price .amount,
.woocommerce-cart .product-subtotal,
.woocommerce-cart .product-subtotal .amount,
.woocommerce-cart .product-subtotal bdi,
.woocommerce-cart .product-subtotal .woocommerce-Price-amount,
.woocommerce-cart .product-subtotal .woocommerce-Price-currencySymbol {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
color: #000 !important;
}
.woocommerce-cart .product-subtotal {
white-space: nowrap !important;
}
.woocommerce-cart .variation {
margin: 10px 0 14px !important;
}
.woocommerce-cart .variation dt {
display: none !important;
}
.woocommerce-cart .variation dd {
margin: 0 !important;
color: #000 !important;
}
.woocommerce-cart .variation dd p {
margin: 0 !important;
line-height: 1.8 !important;
}
/* Variation value typography — reset Goya/Juice uppercase-inherited styling from
.product-name and match Hostinger's in-row variation display.
Selectors are layered from most-specific downward so no parent/child wins at 11px. */
.woocommerce-cart tr.cart_item .product-name .variation,
.woocommerce-cart tr.cart_item .product-name .variation dt,
.woocommerce-cart tr.cart_item .product-name .variation dd,
.woocommerce-cart tr.cart_item .product-name .variation dd p,
.woocommerce-cart tr.cart_item .product-name dl.variation dd p,
.woocommerce-cart td.et-product-details .variation,
.woocommerce-cart td.et-product-details .variation * {
font-family: 'Jost', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #000 !important;
line-height: 1.5 !important;
}
.woocommerce-cart .product-quantity,
.woocommerce-cart .product-quantity .quantity {
display: none !important;
}
.woocommerce-cart .juice-cart-item-actions {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin-top: 16px !important;
flex-wrap: wrap !important;
}
.woocommerce-cart .juice-cart-item-actions .juice-cart-action {
font-family: var(--juice-mailer-ui-font) !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #000 !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
}
.woocommerce-cart .juice-cart-item-actions .juice-cart-action + .juice-cart-action::before {
content: "|" !important;
margin-right: 10px !important;
color: rgba(0, 0, 0, 0.4) !important;
}
.woocommerce-cart .juice-cart-item-actions .juice-cart-action:hover {
color: #000 !important;
}
/* Fjern action visual fix — Goya parent draws an × cross via .remove ::before/::after
(core.css:7801) and hides text via text-indent:-9999 (shop.css:169). On our
.juice-cart-action-remove that produced a stray × overlapping the row. Render as
plain "Fjern" text instead, matching Rediger/Gem. Click behavior unchanged
(native Woo href → wc_get_cart_remove_url). */
.woocommerce-cart .juice-cart-item-actions a.remove.juice-cart-action-remove {
width: auto !important;
height: auto !important;
color: #000 !important;
text-indent: 0 !important;
overflow: visible !important;
font-weight: 400 !important;
}
.woocommerce-cart .juice-cart-item-actions a.remove.juice-cart-action-remove::before {
position: static !important;
width: auto !important;
height: auto !important;
background: transparent !important;
transform: none !important;
top: auto !important;
left: auto !important;
margin-top: 0 !important;
opacity: 1 !important;
}
.woocommerce-cart .juice-cart-item-actions a.remove.juice-cart-action-remove::after {
content: none !important;
display: none !important;
}
.woocommerce-cart .shopping-cart-content .actions {
border: none !important;
padding: 24px 0 0 !important;
}
.woocommerce-cart .shopping-cart-content .coupon {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin-bottom: 14px !important;
}
.woocommerce-cart .shopping-cart-content .coupon .form-row {
margin: 0 !important;
}
.woocommerce-cart .shopping-cart-content .coupon .input-text {
min-height: 42px !important;
border: 1px solid rgba(0, 0, 0, 0.16) !important;
padding: 10px 12px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
}
.woocommerce-cart .shopping-cart-content .actions .button,
.woocommerce-cart .shopping-cart-content .actions .update-cart {
min-height: 42px !important;
border-radius: 0 !important;
font-family: var(--juice-mailer-ui-font) !important;
font-size: var(--juice-mailer-ui-btn-size) !important;
font-weight: var(--juice-mailer-ui-btn-weight) !important;
letter-spacing: var(--juice-mailer-ui-btn-letter) !important;
text-transform: uppercase !important;
}
/* Hide the "Opdater kurv" button — quantity is still editable but the
update-cart submit is hidden (Hostinger doesn't expose it either). */
.woocommerce-cart .shopping-cart-content tr td.actions .update-cart,
.woocommerce-cart .shopping-cart-content tr td.actions button[name="update_cart"] {
display: none !important;
}
/* "Gemt" banner — shown at the top of the wishlist page after a Gem click.
Auto-hides after ~4s; manually closable. */
.juice-gem-banner {
position: fixed !important;
top: 104px !important; /* below admin bar + site header */
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 99998 !important;
background: #000 !important;
color: #fff !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
max-width: 560px !important;
width: calc(100% - 32px) !important;
transition: opacity 360ms ease, transform 360ms ease !important;
}
.juice-gem-banner.is-fading {
opacity: 0 !important;
transform: translateX(-50%) translateY(-8px) !important;
}
.juice-gem-banner-inner {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 14px 18px !important;
}
.juice-gem-banner-check {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #fff !important;
color: #000 !important;
font-size: 10px !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
}
.juice-gem-banner-text {
flex: 1 !important;
line-height: 1.4 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.juice-gem-banner-close {
background: transparent !important;
color: #fff !important;
border: 0 !important;
cursor: pointer !important;
font-size: 20px !important;
line-height: 1 !important;
padding: 0 4px !important;
opacity: 0.7 !important;
}
.juice-gem-banner-close:hover { opacity: 1 !important; }
.juice-gem-banner--info { background: #555 !important; }
/* JUICE cart loader — full-viewport cover shown during cart action navigations
(Gem → wishlist, Fjern → remove + reload, Gå til betaling → checkout,
qty form submit → cart refresh). Hidden by default, fades in on .is-visible. */
/* JUICE loader v2 — full-viewport white overlay with logo + breathing arc
+ context-aware Danish text. Replaces the wordmark-pulse design.
See js/juice-loader.js for trigger logic. */
.juice-loader {
position: fixed !important;
inset: 0 !important;
z-index: 99999 !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0 !important;
pointer-events: none !important;
/* Gradual fade — 500ms with Material standard ease. Same curve applies
to fade-out on next page (cross-page transition via sessionStorage
+ cookie below). */
transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.juice-loader.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
}
/* Cross-page transition: when the previous page set sessionStorage flag,
a tiny inline script adds `juice-loader-incoming` to
before body paint. This rule renders the loader at full opacity on
the new page's first paint, hiding the underlying content until
juice-loader.js removes the class on DOMContentLoaded — which triggers
the same 500ms fade-out. Result: smooth fade in, smooth fade out. */
html.juice-loader-incoming .juice-loader {
opacity: 1 !important;
pointer-events: auto !important;
}
.juice-loader-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
margin-top: -12vh !important;
}
.juice-loader-logo {
width: 260px !important;
height: auto !important;
display: block !important;
}
/* Breathing arc — 36px ring, 3px stroke, 90° solid black arc with
rounded line caps. Rotates 1.3s with cubic-bezier(0.5,0,0.5,1) so it
subtly accelerates and decelerates through each revolution. */
.juice-loader-arc {
width: 36px !important;
height: 36px !important;
margin-top: 36px !important;
overflow: visible !important;
animation: juice-loader-spin 1.3s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}
.juice-loader-arc circle {
fill: none !important;
stroke: #000 !important;
stroke-width: 3 !important;
stroke-linecap: round !important;
stroke-dasharray: 23.56 70.69 !important;
stroke-dashoffset: 0 !important;
}
/* Context text — Inter 14px / 900 / uppercase, sits 24px below the arc. */
.juice-loader-text {
margin-top: 24px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #000 !important;
transition: opacity 280ms ease !important;
}
.juice-loader-text.is-fading {
opacity: 0 !important;
}
/* Email span (2nd stage of login flow only) — inherits Inter, but
lowercase native case so the address reads correctly. Subtle scale-up
from 0.92 → 1.0 coordinated with a 1.5px underline that wipes left
→ right under just the email. */
.juice-loader-text .juice-loader-email {
position: relative !important;
display: inline-block !important;
text-transform: none !important;
margin-left: 6px !important;
vertical-align: baseline !important;
transform-origin: left center !important;
transform: scale(0.92);
animation: juice-loader-email-in 650ms cubic-bezier(0.2, 0.85, 0.25, 1) 280ms forwards !important;
}
.juice-loader-text .juice-loader-email::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: -3px !important;
width: 100% !important;
height: 1.5px !important;
background: #000 !important;
transform-origin: left center !important;
transform: scaleX(0);
animation: juice-loader-underline 650ms cubic-bezier(0.65, 0, 0.35, 1) 280ms forwards !important;
}
@keyframes juice-loader-spin {
to { transform: rotate(360deg); }
}
@keyframes juice-loader-email-in {
to { transform: scale(1); }
}
@keyframes juice-loader-underline {
to { transform: scaleX(1); }
}
body.juice-loader-active {
overflow: hidden !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals h2 {
margin: 0 0 12px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #000 !important;
padding: 0 0 18px !important;
text-align: center !important;
border-bottom: none !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table {
border: none !important;
padding: 6px 0 !important;
margin: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
color: #000 !important;
padding: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table th,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table td {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: #000 !important;
border: none !important;
padding: 10px 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.shipping td,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.shipping td a {
color: rgba(0, 0, 0, 0.5) !important;
font-size: 12px !important;
text-transform: uppercase !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.order-total td {
font-size: 12px !important;
line-height: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
padding-top: 12px !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.tax-rate {
display: flex !important;
justify-content: space-between !important;
margin-top: 4px !important;
margin-bottom: 14px !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.tax-rate th,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.tax-rate td {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
line-height: 14px !important;
color: rgba(0, 0, 0, 0.52) !important;
padding: 0 !important;
}
/* Order summary rows (classic cart, div-based flex — matches Hostinger's
.wc-block-components-totals-item flex layout). Template emits
.juice-cart-summary-row (.shipping / .order-total) with label + value spans. */
.woocommerce-cart .shopping-cart-content .cart_totals {
padding: 0 !important;
border: none !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals .juice-cart-summary-table {
display: block !important;
padding: 6px 0 !important;
margin: 0 !important;
border: none !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 4px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: #000 !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row .juice-cart-summary-label,
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row .juice-cart-summary-value {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: #000 !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.shipping {
margin-top: 10px !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.shipping .juice-cart-summary-label,
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.shipping .juice-cart-summary-value {
color: #000 !important;
font-size: 12px !important;
text-transform: none !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.order-total {
border-top: none !important;
margin-top: 26px !important;
padding-top: 12px !important;
}
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.order-total .juice-cart-summary-label,
.woocommerce-cart .shopping-cart-content .juice-cart-summary-row.order-total .juice-cart-summary-value {
font-size: 12px !important;
line-height: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
}
/* Tax line — full-card-width flex row BELOW the total, matching Hostinger.
Template emits the div as a sibling of the total row, not nested inside it. */
.woocommerce-cart .shopping-cart-content .cart_totals .wc-block-components-totals-footer-item-tax {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin: 4px 0 14px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
line-height: 14px !important;
font-weight: 500 !important;
color: #000 !important;
text-transform: none !important;
width: auto !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals .wc-block-components-totals-footer-item-tax .juice-tax-label,
.woocommerce-cart .shopping-cart-content .cart_totals .wc-block-components-totals-footer-item-tax .juice-tax-value {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
line-height: 14px !important;
font-weight: 500 !important;
color: #000 !important;
text-transform: none !important;
}
/* Separator line below "Ordreoversigt" heading */
.woocommerce-cart .shopping-cart-content .cart_totals h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
}
/* Hide duplicate unit price — only line subtotal shows on the right (matches Hostinger). */
.woocommerce-cart .shopping-cart-content tr.cart_item .product-price {
display: none !important;
}
/* Checkout button — match Hostinger inline-flex + padding 12px 28px. */
.woocommerce-cart .shopping-cart-content .cart_totals .wc-proceed-to-checkout .checkout-button {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
padding: 12px 28px !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals .wc-proceed-to-checkout {
margin-top: 34px !important;
margin-bottom: 16px !important;
padding: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals .wc-proceed-to-checkout .checkout-button {
width: 100% !important;
min-height: 44px !important;
border-radius: 0 !important;
border: 1px solid #000 !important;
background: #000 !important;
color: #fff !important;
font-family: var(--juice-mailer-ui-font) !important;
font-size: var(--juice-mailer-ui-btn-size) !important;
font-weight: var(--juice-mailer-ui-btn-weight) !important;
letter-spacing: var(--juice-mailer-ui-btn-letter) !important;
text-transform: uppercase !important;
transition: background-color 300ms var(--juice-mailer-ui-ease),
color 300ms var(--juice-mailer-ui-ease),
border-color 300ms var(--juice-mailer-ui-ease) !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals .wc-proceed-to-checkout .checkout-button:hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
@media (min-width: 768px) {
.woocommerce-cart table.woocommerce-cart-form__contents thead {
display: none !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item {
display: grid !important;
grid-template-columns: 130px minmax(0, 1fr) !important;
column-gap: 28px !important;
align-items: start !important;
padding: 28px 0 !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item > td {
padding: 0 !important;
border: none !important;
}
.woocommerce-cart td.product-thumbnail {
grid-column: 1 !important;
}
.woocommerce-cart td.et-product-details {
grid-column: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
min-height: 130px !important;
position: relative !important;
padding-right: 110px !important;
row-gap: 6px !important;
}
.woocommerce-cart td.et-product-details .product-subtotal,
.woocommerce-cart td.et-product-details .product-subtotal .amount,
.woocommerce-cart td.et-product-details .product-subtotal .woocommerce-Price-amount {
position: absolute !important;
top: 0 !important;
right: 0 !important;
text-align: right !important;
white-space: nowrap !important;
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: #000 !important;
}
.woocommerce-cart td.et-product-details .product-subtotal bdi,
.woocommerce-cart td.et-product-details .product-subtotal .woocommerce-Price-currencySymbol {
font-size: 14px !important;
font-weight: 400 !important;
color: #000 !important;
}
.woocommerce-cart td.et-product-details .juice-cart-item-actions {
margin-top: auto !important;
padding-top: 10px !important;
justify-content: flex-start !important;
}
}
body.woocommerce-cart.juice-cart-edit-open {
overflow: hidden !important;
}
body.woocommerce-cart .juice-cart-edit-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.42);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
body.woocommerce-cart .juice-cart-edit-overlay[hidden] {
display: none !important;
}
body.woocommerce-cart .juice-cart-edit-panel {
width: min(100%, 520px);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.16);
position: relative;
padding: 26px 24px 22px;
}
body.woocommerce-cart .juice-cart-edit-close {
position: absolute;
top: 10px;
right: 12px;
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: #000;
font-size: 0;
line-height: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0.8;
transition: opacity 0.3s ease;
}
body.woocommerce-cart .juice-cart-edit-close:hover {
opacity: 1;
}
body.woocommerce-cart .juice-cart-edit-close::before {
content: "\2192";
font-family: "Inter", system-ui, sans-serif;
font-size: 20px;
line-height: 1;
color: #000;
}
body.woocommerce-cart .juice-cart-edit-content {
display: grid;
gap: 16px;
}
body.woocommerce-cart .juice-cart-edit-preview {
display: grid;
grid-template-columns: 92px 1fr;
gap: 14px;
align-items: center;
}
body.woocommerce-cart .juice-cart-edit-image {
width: 92px;
height: 92px;
object-fit: cover;
border: 1px solid rgba(0, 0, 0, 0.12);
}
body.woocommerce-cart .juice-cart-edit-title {
margin: 0;
font-family: var(--juice-mailer-ui-font);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: #000;
}
body.woocommerce-cart .juice-cart-edit-current {
margin: 4px 0 0;
font-family: var(--juice-mailer-ui-font);
font-size: 11px;
font-weight: 400;
color: rgba(0, 0, 0, 0.7);
}
body.woocommerce-cart .juice-cart-edit-field {
display: grid;
gap: 8px;
}
body.woocommerce-cart .juice-cart-edit-label {
font-family: var(--juice-mailer-ui-font);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-cart .juice-cart-edit-select-wrap {
position: relative;
}
body.woocommerce-cart .juice-cart-edit-select-trigger {
position: relative;
width: 100%;
min-height: 44px;
border: 1px solid rgba(0, 0, 0, 0.2);
background: #fff;
color: #000;
font-family: var(--juice-mailer-ui-font);
font-size: 12px;
font-weight: 400;
text-align: left;
padding: 10px 34px 10px 12px;
border-radius: 0;
cursor: pointer;
transition: border-color 250ms var(--juice-mailer-ui-ease);
}
body.woocommerce-cart .juice-cart-edit-select-trigger:disabled {
opacity: 1;
cursor: default;
}
body.woocommerce-cart .juice-cart-edit-select-wrap.is-open .juice-cart-edit-select-trigger {
border-color: #000;
}
body.woocommerce-cart .juice-cart-edit-select-trigger::after {
content: "";
position: absolute;
right: 12px;
top: 50%;
width: 7px;
height: 7px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: translateY(-60%) rotate(45deg);
pointer-events: none;
}
body.woocommerce-cart .juice-cart-edit-select-wrap.is-open .juice-cart-edit-select-trigger::after {
transform: translateY(-32%) rotate(-135deg);
}
body.woocommerce-cart .juice-cart-edit-select {
display: none !important;
}
body.woocommerce-cart .juice-cart-edit-select-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 5px);
border: 1px solid rgba(0, 0, 0, 0.2);
background: #fff;
display: none;
z-index: 10;
max-height: 220px;
overflow-y: auto;
}
body.woocommerce-cart .juice-cart-edit-select-wrap.is-open .juice-cart-edit-select-menu {
display: block;
}
body.woocommerce-cart .juice-cart-edit-option {
width: 100%;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background: #fff;
color: #000;
text-align: left;
padding: 11px 12px;
font-family: var(--juice-mailer-ui-font);
font-size: 12px;
font-weight: 400;
cursor: pointer;
}
body.woocommerce-cart .juice-cart-edit-option:last-child {
border-bottom: 0;
}
body.woocommerce-cart .juice-cart-edit-option:hover,
body.woocommerce-cart .juice-cart-edit-option.is-active {
background: rgba(0, 0, 0, 0.04);
}
body.woocommerce-cart .juice-cart-edit-status {
margin: 0;
min-height: 16px;
font-family: var(--juice-mailer-ui-font);
font-size: 11px;
color: rgba(0, 0, 0, 0.72);
}
body.woocommerce-cart .juice-cart-edit-status.is-error {
color: var(--juice-mailer-ui-error);
}
body.woocommerce-cart .juice-cart-edit-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
body.woocommerce-cart .juice-cart-edit-btn {
min-height: 34px;
border-radius: 0;
border: 1px solid #000;
cursor: pointer;
font-family: var(--juice-mailer-ui-font);
font-size: var(--juice-mailer-ui-btn-size);
font-weight: var(--juice-mailer-ui-btn-weight);
letter-spacing: var(--juice-mailer-ui-btn-letter);
text-transform: uppercase;
transition: background-color 300ms var(--juice-mailer-ui-ease),
color 300ms var(--juice-mailer-ui-ease),
border-color 300ms var(--juice-mailer-ui-ease);
}
body.woocommerce-cart .juice-cart-edit-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
body.woocommerce-cart .juice-cart-edit-btn-cancel {
order: 2;
background: #fff;
color: #000;
}
body.woocommerce-cart .juice-cart-edit-btn-cancel:hover {
background: #000;
color: #fff;
}
body.woocommerce-cart .juice-cart-edit-btn-save {
order: 1;
background: #000;
color: #fff;
}
body.woocommerce-cart .juice-cart-edit-btn-save:hover {
background: #fff;
color: #000;
}
.woocommerce-cart .juice-cart-summary-extra {
position: relative !important;
margin-top: 8px !important;
border-top: 1px solid rgba(0, 0, 0, 0.16) !important;
padding-top: 10px !important;
}
.woocommerce-cart .juice-cart-summary-extra::before,
.woocommerce-cart .juice-cart-summary-extra::after {
content: none !important;
}
.woocommerce-cart .juice-cart-summary-extra > .juice-cart-view-toggle {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px 0 !important;
background: transparent !important;
border: none !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #000000 !important;
cursor: pointer !important;
transition: color .8s cubic-bezier(.5, 0, 0, 1) !important;
}
.woocommerce-cart .juice-cart-summary-extra > .juice-cart-view-toggle:hover {
color: #000000 !important;
}
.woocommerce-cart .juice-cart-summary-extra > .juice-cart-view-toggle .juice-accordion-chevron {
font-size: 12px !important;
flex-shrink: 0 !important;
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce-cart .juice-cart-summary-extra.is-open > .juice-cart-view-toggle .juice-accordion-chevron {
transform: rotate(180deg) !important;
}
.woocommerce-cart .juice-cart-summary-extra .juice-cart-view-panel {
max-height: 0;
overflow: hidden !important;
opacity: 0 !important;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1),
opacity .8s cubic-bezier(.5, 0, 0, 1) !important;
}
.woocommerce-cart .juice-cart-summary-extra.is-open .juice-cart-view-panel {
opacity: 1 !important;
}
.woocommerce-cart .juice-cart-view-note {
margin: 10px 0 8px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
line-height: 1.5 !important;
color: rgba(0, 0, 0, 0.72) !important;
}
.woocommerce-cart .juice-cart-view-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.woocommerce-cart .juice-cart-view-list li {
margin: 0 0 8px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
color: #000 !important;
}
.woocommerce-cart .juice-cart-summary-extras.juice-accordions {
margin-top: 12px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 0 25px !important;
background: #fff !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-item {
position: relative !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-item + .juice-accordion-item::before {
content: '' !important;
display: block !important;
height: 1px !important;
background: rgba(0, 0, 0, 0.16) !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-trigger {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 14px 0 !important;
background: transparent !important;
border: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #000 !important;
cursor: pointer !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-trigger .juice-accordion-chevron {
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-trigger[aria-expanded="true"] .juice-accordion-chevron {
transform: rotate(180deg) !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel {
max-height: 0;
overflow: hidden !important;
opacity: 0 !important;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1),
opacity .8s cubic-bezier(.5, 0, 0, 1) !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel.is-open {
opacity: 1 !important;
padding-bottom: 14px !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel p,
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel li {
font-size: 11px !important;
line-height: 1.55 !important;
font-family: 'Inter', sans-serif !important;
color: rgba(0, 0, 0, 0.72) !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel li {
margin: 0 0 6px !important;
display: flex !important;
justify-content: space-between !important;
gap: 10px !important;
}
.woocommerce-cart .juice-cart-summary-extras .juice-accordion-panel a {
color: #000 !important;
text-decoration: underline !important;
}
.woocommerce-cart .juice-cart-related {
max-width: 1440px !important;
margin: 60px auto 0 !important;
padding: 0 clamp(20px, 4vw, 64px) 56px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-heading {
margin-top: 32px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-track ul.products {
padding: 0 0 16px !important;
gap: 12px !important;
scroll-snap-type: x mandatory !important;
scroll-padding-inline: 0 !important;
overflow-x: hidden !important;
}
.woocommerce-cart .juice-cart-related li.product {
flex: 0 0 calc((100% - 36px) / 4) !important;
min-width: calc((100% - 36px) / 4) !important;
max-width: calc((100% - 36px) / 4) !important;
width: calc((100% - 36px) / 4) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
.woocommerce-cart .juice-cart-related .juice-related-progress {
display: none !important;
}
.woocommerce-cart .juice-cart-related .juice-related-wrap {
padding: 0 !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
outline: none !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
top: 50% !important;
color: #000000 !important;
transform: translateY(-50%) !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow:hover {
background: transparent !important;
color: #000 !important;
transform: translateY(-50%) !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow svg {
display: block !important;
width: 22px !important;
height: 22px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow::before {
content: none !important;
}
.woocommerce-cart .juice-cart-related .juice-related-prev {
left: -28px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-next {
right: -28px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow.is-disabled {
opacity: 0.24 !important;
pointer-events: none !important;
}
@media (max-width: 991px) {
.woocommerce-cart .site-header,
.woocommerce-cart .site-header .header-main,
.woocommerce-cart .site-header .header-main .header-contents,
.woocommerce-cart .site-header .header-mobile,
.woocommerce-cart .site-header .header-mobile .header-contents {
height: 58px !important;
min-height: 58px !important;
}
.woocommerce-cart .site-header .logolink img {
max-height: 20px !important;
}
.woocommerce-cart .header-spacer {
display: none !important;
height: 0 !important;
}
.admin-bar.woocommerce-cart .header-spacer {
display: none !important;
height: 0 !important;
}
.woocommerce-cart .juice-cart-hero {
min-height: 170px;
margin-bottom: 22px;
}
.woocommerce-cart .shopping-cart-content {
display: block !important;
}
.woocommerce-cart .shopping-cart-content .cart-collaterals {
position: static !important;
margin-top: 24px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.woocommerce-cart .shopping-cart-content .juice-summary-card {
border: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.woocommerce-cart .juice-cart-summary-extras.juice-accordions {
border: 0 !important;
padding: 0 !important;
background: transparent !important;
margin-top: 16px !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals h2 {
margin: 0 0 14px !important;
padding: 0 !important;
border: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr {
padding: 10px 0 !important;
}
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .shopping-cart-content .cart_totals table.shop_table tr.order-total td {
border-top: 1px solid rgba(0, 0, 0, 0.16) !important;
margin-top: 10px !important;
padding-top: 12px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-prev {
left: -16px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-next {
right: -16px !important;
}
}
@media (min-width: 992px) {
.woocommerce-cart .juice-summary-card {
border: 1px solid rgba(0, 0, 0, 0.16) !important;
background: #ffffff !important;
}
.woocommerce-cart .juice-summary-card .cart_totals h2,
.woocommerce-cart .juice-summary-card .cart_totals table.shop_table,
.woocommerce-cart .juice-summary-card .wc-proceed-to-checkout,
.woocommerce-cart .juice-summary-card .juice-cart-summary-extra {
padding-left: 25px !important;
padding-right: 25px !important;
}
}
@media (max-width: 767px) {
body.woocommerce-cart .juice-cart-edit-overlay {
padding: 14px;
}
body.woocommerce-cart .juice-cart-edit-panel {
padding: 22px 16px 16px;
}
body.woocommerce-cart .juice-cart-edit-preview {
grid-template-columns: 74px 1fr;
gap: 12px;
}
body.woocommerce-cart .juice-cart-edit-image {
width: 74px;
height: 74px;
}
body.woocommerce-cart .juice-cart-edit-actions {
grid-template-columns: 1fr;
}
.woocommerce-cart .shopping-cart-content {
padding: 0 16px 36px !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tbody,
.woocommerce-cart table.woocommerce-cart-form__contents tr,
.woocommerce-cart table.woocommerce-cart-form__contents td {
display: block !important;
width: 100% !important;
}
.woocommerce-cart table.woocommerce-cart-form__contents tr.cart_item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
row-gap: 4px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding: 24px 0 !important;
}
.woocommerce-cart td.product-thumbnail {
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.woocommerce-cart td.et-product-details {
margin: 10px 0 0 !important;
padding: 0 !important;
min-width: 0 !important;
text-align: center !important;
}
.woocommerce-cart .product-name,
.woocommerce-cart .product-name a {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
.woocommerce-cart .product-price,
.woocommerce-cart .product-price .amount,
.woocommerce-cart .product-subtotal,
.woocommerce-cart .product-subtotal .amount {
font-size: 14px !important;
}
.woocommerce-cart td.product-thumbnail img {
width: 170px !important;
max-width: 170px !important;
}
.woocommerce-cart .product-subtotal {
display: none !important;
}
.woocommerce-cart .juice-cart-item-actions {
margin-top: 16px !important;
gap: 8px !important;
justify-content: center !important;
width: 100% !important;
}
.woocommerce-cart .juice-cart-item-actions .juice-cart-action {
font-size: 9px !important;
}
.woocommerce-cart .shopping-cart-content .cart-collaterals {
margin-top: 20px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.woocommerce-cart .juice-cart-hero {
margin-bottom: 16px !important;
min-height: 154px !important;
}
.woocommerce-cart .juice-cart-related {
padding: 0 0 40px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-heading {
padding: 0 16px !important;
}
.woocommerce-cart .juice-cart-related .juice-related-track ul.products {
padding: 0 50px 10px !important;
gap: 0 !important;
scroll-padding-inline: 50px !important;
}
.woocommerce-cart .juice-cart-related li.product {
flex: 0 0 calc(100% - 100px) !important;
min-width: calc(100% - 100px) !important;
max-width: calc(100% - 100px) !important;
width: calc(100% - 100px) !important;
scroll-snap-align: center !important;
}
.woocommerce-cart .juice-cart-related .juice-related-arrow {
display: none !important;
}
.woocommerce-cart .juice-cart-view-note,
.woocommerce-cart .juice-cart-view-list li {
font-size: 10px !important;
}
}
.woocommerce-cart .juice-cart-mobile-bag-header {
display: none !important;
}
@media (max-width: 991px) {
.woocommerce-cart .juice-cart-mobile-bag-header {
display: none !important;
width: 90% !important;
margin: 8px auto 22px !important;
padding: 0 !important;
}
.woocommerce-cart .juice-cart-mobile-bag-title {
margin: 0 !important;
padding: 22px 0 !important;
border-bottom: 1px solid #c8c6c5 !important;
font-family: 'Inter', sans-serif !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
color: #000000 !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
}
.woocommerce-cart .juice-cart-mobile-bag-count {
font: inherit !important;
color: inherit !important;
}
.woocommerce-cart .juice-cart-mobile-bag-checkout {
display: block !important;
width: 80% !important;
min-height: 44px !important;
line-height: 44px !important;
margin: 22px auto 10px !important;
text-align: center !important;
border: 1px solid #000000 !important;
background: #000000 !important;
color: #ffffff !important;
text-decoration: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
}
}
/* Collapsed Leveringsadresse summary with edit action (Gucci-like behavior). */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-step-summary-shipping {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 14px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 16px 20px !important;
border-radius: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-step-summary-shipping-lines {
min-width: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-step-summary-row {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-step-summary-row--shipping {
display: flex !important;
justify-content: space-between !important;
gap: 12px !important;
margin-top: 4px !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-step-summary-edit {
flex: 0 0 auto !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #000 !important;
cursor: pointer !important;
}
/* Ensure checkout footer stays visible. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-footer {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ==========================================================================
CHECKOUT PARITY — classic owned checkout shell
========================================================================== */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout {
counter-reset: juice-checkout-step !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout > .row {
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 44px !important;
margin: 0 auto 8px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-customer-fields {
flex: 1 1 auto !important;
width: 674px !important;
max-width: 674px !important;
padding-right: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container {
flex: 0 0 328px !important;
width: 328px !important;
max-width: 328px !important;
padding-left: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-summary-card {
padding: 25px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
background: #fff !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading {
margin: 0 0 4px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid #e7e7e7 !important;
text-align: center !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading-title,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading-ref {
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading-title {
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 18px !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading-ref {
margin-top: 6px !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-title {
display: flex !important;
align-items: center !important;
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
line-height: 20px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-title::before {
counter-increment: juice-checkout-step !important;
content: counter(juice-checkout-step) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
margin-right: 12px !important;
border-radius: 50% !important;
background: #000 !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
position: relative !important;
left: auto !important;
top: auto !important;
transform: none !important;
flex-shrink: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-description {
margin: 6px 0 0 42px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
color: rgba(0, 0, 0, 0.6) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-content {
overflow: hidden !important;
transition: max-height 0.8s cubic-bezier(0.5, 0, 0, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-active .juice-step-content {
opacity: 1 !important;
pointer-events: auto !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .juice-step-content,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .juice-step-content {
max-height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .juice-step-title,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .juice-step-title::before {
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .juice-step-title::before {
content: "" !important;
background: #000 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23fff' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 15px 15px !important;
color: transparent !important;
font-size: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked {
padding: 0 0 8px !important;
margin: 0 0 4px !important;
border-bottom: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .juice-step-title {
color: #c4c4c4 !important;
font-size: 12px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .juice-step-title::before {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
margin-right: 12px !important;
background: #ddd !important;
color: #fff !important;
font-size: 10px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .juice-step-description {
display: none !important;
}
/* --- N4: active-step heading parity (Hostinger small-uppercase-label pattern) --- */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-active .juice-step-title {
font-size: 12px !important;
letter-spacing: 0.24px !important;
text-transform: uppercase !important;
color: rgb(196, 196, 196) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .wc-block-components-address-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-address-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #payment-step .woocommerce-checkout-payment {
margin-top: 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-shipping-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-billing-fields {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row {
position: relative !important;
flex: 0 0 calc((100% - 18px) / 2) !important;
min-width: calc((100% - 18px) / 2) !important;
width: auto !important;
margin: 0 0 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row-wide,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_email_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #order_comments_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_address_1_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_company_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_phone_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice_alternative_mobile_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #ship_to_different_address_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_address_1_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_company_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_phone_field {
flex: 1 0 100% !important;
min-width: 100% !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_city_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_city_field {
flex: 1 1 calc((100% - 200px) / 2) !important;
min-width: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_postcode_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_postcode_field {
flex: 0 0 164px !important;
width: 164px !important;
min-width: 164px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_state_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_state_field {
display: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row label {
display: block !important;
margin: 0 0 7px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: #444 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .woocommerce-input-wrapper {
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea {
width: 100% !important;
min-height: 40px !important;
height: 40px !important;
padding: 2px 10px 0 !important;
border: 1px solid #e0e0e0 !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 1.2 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea {
min-height: 96px !important;
height: auto !important;
padding-top: 10px !important;
resize: vertical !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row input.input-text:focus,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select:focus,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea:focus {
border-color: #000 !important;
outline: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .required {
color: inherit !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-has-error input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-has-error select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-has-error textarea {
border-color: #c41e3a !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .woocommerce-form__label-for-checkbox span,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .checkbox {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-transform: none !important;
color: rgba(0, 0, 0, 0.6) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .input-checkbox {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
border: 1.5px solid rgba(0, 0, 0, 0.3) !important;
border-radius: 2px !important;
background: transparent !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
transition: border-color 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
margin: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .input-checkbox:checked {
border-color: rgba(0, 0, 0, 0.8) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 10px 10px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-place-order,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #place_order {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 240px !important;
min-height: 46px !important;
padding: 14px 40px !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
background: #000 !important;
color: #fff !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-place-order:hover,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #place_order:hover {
background: #fff !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment .payment_methods,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment .place-order {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment ul.payment_methods {
margin: 0 0 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment ul.payment_methods li {
margin: 0 0 12px !important;
padding: 16px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment ul.payment_methods li label {
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-payment div.payment_box {
margin: 0 !important;
padding: 16px !important;
border: none !important;
background: #f8f8f8 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 1.6 !important;
color: rgba(0, 0, 0, 0.6) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout:not(.juice-checkout-rebuild) #payment .form-row.place-order {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
line-height: 1.6 !important;
color: #aaa !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-terms-and-conditions-wrapper a,
body.woocommerce-checkout:not(.juice-checkout-rebuild) #payment .form-row.place-order a {
color: #000 !important;
text-decoration: underline !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table thead {
display: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody td,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot td {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody tr + tr td {
padding-top: 16px !important;
border-top: 1px solid #f0f0f0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody tr.cart_item {
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody .product-name,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody .product-total {
padding-bottom: 16px !important;
vertical-align: top !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody .product-name {
display: block !important;
width: 100% !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item-thumb {
flex: 0 0 72px !important;
width: 72px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item-thumb img {
display: block !important;
width: 72px !important;
height: 72px !important;
object-fit: cover !important;
border: 0 !important;
border-radius: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item-copy {
min-width: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item-title {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .juice-review-item-meta {
margin-top: 8px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tbody .product-total {
display: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .variation,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .variation dt,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .variation dd,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table strong.product-quantity {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table .variation {
margin: 4px 0 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table strong.product-quantity {
display: inline-block !important;
margin-right: 6px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr th,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr td {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
line-height: 16px !important;
font-weight: 400 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.shipping td {
text-transform: uppercase !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.order-total td {
padding-top: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.tax-total th,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.tax-total td,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.tax-rate th,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-table tfoot tr.tax-rate td {
font-size: 11px !important;
line-height: 14px !important;
color: rgba(0, 0, 0, 0.52) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .cart-subtotal,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .cart-discount,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .shipping,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .fee,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .tax-total,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .tax-rate,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card .order-total {
display: table-row !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-view-details {
margin-top: 8px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(0, 0, 0, 0.16) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-view-details-toggle,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-trigger {
width: 100% !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras {
margin-top: 12px !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 0 25px !important;
background: #fff !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-view-details-toggle {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
border: 0 !important;
background: transparent !important;
padding: 0 0 10px !important;
cursor: pointer !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-trigger {
padding: 14px 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-view-details-panel,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-panel {
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
padding-bottom: 12px !important;
font-size: 11px !important;
line-height: 1.55 !important;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1),
opacity .8s cubic-bezier(.5, 0, 0, 1) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-view-details-panel.is-open,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-panel.is-open {
opacity: 1 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-panel li {
margin: 0 0 6px !important;
display: flex !important;
justify-content: space-between !important;
gap: 10px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-summary-extras .juice-accordion-panel a {
color: #000 !important;
text-decoration: underline !important;
}
@media (max-width: 1024px) {
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_city_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping_postcode_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_country_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_city_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing_postcode_field {
flex: 1 0 100% !important;
width: 100% !important;
min-width: 100% !important;
}
}
@media (max-width: 768px) {
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout > .row {
flex-wrap: wrap !important;
gap: 20px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-customer-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container {
margin-top: 40px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-heading-ref {
padding-bottom: 14px !important;
border-bottom: 1px solid #e7e7e7 !important;
margin-bottom: 14px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-place-order,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #place_order {
width: 100% !important;
min-width: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea {
font-size: 16px !important;
}
}
/* ===========================================
ACCOUNT + WISHLIST OWNERSHIP LAYER
In-account YITH wishlist ownership (content only)
=========================================== */
/* Wishlist heading + divider */
body.juice-wishlist-page #yith-wcwl-form .wishlist-title-container {
margin: 0 0 20px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid #000 !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist-title h2 {
margin: 0 !important;
font-family: var(--juice-mailer-ui-font) !important;
font-size: 36px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #000 !important;
text-align: center !important;
}
/* Wishlist table typography ownership */
body.juice-wishlist-page #yith-wcwl-form .wishlist_table th {
font-family: var(--juice-mailer-ui-font) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
color: #000 !important;
border-bottom: 1px solid #000 !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table td {
font-family: var(--juice-mailer-ui-font) !important;
font-size: 13px !important;
color: #000 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.14) !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .wishlist-in-stock,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .wishlist-out-of-stock {
color: #000 !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
font-weight: 400 !important;
}
/* Buttons: Læg i kurv (long) */
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart a.button,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart .add_to_cart_button,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart .remove_from_wishlist.button {
width: 168px !important;
min-height: 36px !important;
max-width: 168px !important;
padding: 0 14px !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
text-decoration: none !important;
font-family: var(--juice-mailer-ui-font) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background: #fff !important;
color: #000 !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart a.button:hover,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart .add_to_cart_button:hover,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-add-to-cart .remove_from_wishlist.button:hover {
background: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
/* First-column remove control (small x only) */
body.juice-wishlist-page #yith-wcwl-form .wishlist_table td.product-remove {
width: 42px !important;
min-width: 42px !important;
text-align: left !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-remove .remove_from_wishlist {
width: 28px !important;
max-width: 28px !important;
min-width: 28px !important;
height: 28px !important;
min-height: 28px !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
border: 0 !important;
border-radius: 0 !important;
text-decoration: none !important;
background: transparent !important;
color: #000 !important;
font-size: 22px !important;
font-weight: 400 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
overflow: hidden !important;
text-indent: 0 !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-remove .remove_from_wishlist:hover {
background: transparent !important;
color: #000 !important;
opacity: 0.62 !important;
}
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-remove .remove_from_wishlist::before,
body.juice-wishlist-page #yith-wcwl-form .wishlist_table .product-remove .remove_from_wishlist::after {
content: none !important;
display: none !important;
}
/* Remove share section */
body.juice-wishlist-page #yith-wcwl-form .yith-wcwl-share {
display: none !important;
}
/* ===========================================
WISHLIST PAGE — Theme-owned template UI
File: page-wishlist.php
=========================================== */
body.juice-wishlist-owned .site-content > .container {
max-width: 940px !important;
}
body.juice-wishlist-owned .juice-wishlist-page-template > .container {
max-width: 880px !important;
margin: 0 auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.juice-wishlist-page-template {
padding: 32px 0 72px;
}
.juice-wishlist-shell {
width: 100%;
}
.juice-wishlist-title {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 28px;
line-height: 1.2;
font-weight: 300;
letter-spacing: 6px;
text-transform: uppercase;
color: #000;
text-align: center;
display: block;
}
.juice-wishlist-divider {
margin: 24px 0 10px;
border-top: 1px solid #000;
}
.juice-wishlist-empty {
text-align: center;
padding: 36px 0 12px;
}
.juice-wishlist-empty p {
margin: 0 0 16px;
color: #000;
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
}
.juice-wishlist-list {
list-style: none;
margin: 0;
padding: 0;
}
.juice-wishlist-item {
display: grid;
grid-template-columns: 24px 84px minmax(180px, 1fr) minmax(108px, auto) auto;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.juice-wishlist-remove-icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #000;
text-decoration: none;
font-size: 20px;
line-height: 1;
}
.juice-wishlist-remove-icon:hover {
opacity: 0.62;
}
.juice-wishlist-thumb img {
width: 84px;
height: auto;
display: block;
}
.juice-wishlist-meta {
display: flex;
flex-direction: column;
gap: 6px;
}
.juice-wishlist-name {
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
font-size: 14px;
line-height: 1.35;
color: #000;
text-decoration: none;
}
.juice-wishlist-name:hover {
opacity: 0.72;
}
.juice-wishlist-stock {
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
font-size: 12px;
font-weight: 400;
color: #000;
}
.juice-wishlist-price {
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
font-size: 14px;
color: #000;
text-align: right;
white-space: nowrap;
}
.juice-wishlist-price * {
color: #000 !important;
}
.juice-wishlist-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.juice-wishlist-page-btn {
width: 168px;
min-height: 36px;
max-width: 168px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #000;
border-radius: 0;
background: #fff;
color: #000;
text-decoration: none;
font-family: var(--juice-mailer-ui-font, "Inter", sans-serif);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0 12px;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.juice-wishlist-page-btn:hover {
background: #000;
color: #fff;
}
/* Use same hover behavior for all wishlist actions */
@media (max-width: 991px) {
.juice-wishlist-item {
grid-template-columns: 28px 72px minmax(170px, 1fr);
align-items: start;
}
.juice-wishlist-price {
grid-column: 3;
text-align: left;
margin-top: 4px;
}
.juice-wishlist-actions {
grid-column: 3;
justify-content: flex-start;
margin-top: 8px;
}
}
@media (max-width: 768px) {
.juice-wishlist-page-template {
padding: 20px 0 56px;
}
.juice-wishlist-title {
font-size: 22px;
letter-spacing: 4px;
}
.juice-wishlist-divider {
margin: 18px 0 8px;
}
.juice-wishlist-item {
gap: 10px;
padding: 12px 0;
grid-template-columns: 28px 64px minmax(120px, 1fr);
}
.juice-wishlist-thumb img {
width: 64px;
}
.juice-wishlist-name {
font-size: 13px;
}
.juice-wishlist-price {
font-size: 13px;
}
.juice-wishlist-actions {
flex-wrap: wrap;
}
.juice-wishlist-page-btn {
width: 146px;
max-width: 146px;
min-height: 34px;
font-size: 9px;
}
}
/* ===========================================
ACCOUNT/WISHLIST HEADER RESET
Use default white Goya header (checkout unchanged)
=========================================== */
body.woocommerce-account .juice-account-topbar,
body.juice-wishlist-page .juice-account-topbar,
body.juice-wishlist-owned .juice-wishlist-topbar,
body.juice-wishlist-owned .juice-account-topbar,
body.juice-wishlist-owned .juice-checkout-topbar {
display: none !important;
}
body.woocommerce-account.logged-in .juice-account-topbar {
display: block !important;
}
/* Restore default header flow for account + wishlist contexts. */
body.woocommerce-account .header-spacer,
body.juice-wishlist-page .header-spacer,
body.juice-wishlist-owned .header-spacer {
display: block !important;
height: auto !important;
min-height: 0 !important;
}
/* Wishlist page needs explicit spacer height so heading never sits under fixed header. */
body.juice-wishlist-owned .header-spacer {
height: 82px !important;
min-height: 82px !important;
}
@media (max-width: 991px) {
body.juice-wishlist-owned .header-spacer {
height: 70px !important;
min-height: 70px !important;
}
}
body.woocommerce-account .site-content,
body.juice-wishlist-page .site-content,
body.juice-wishlist-owned .site-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Desktop: ensure standard white desktop header is visible. */
@media (min-width: 992px) {
body.woocommerce-account .site-header,
body.juice-wishlist-page .site-header,
body.juice-wishlist-owned .site-header {
display: block !important;
}
body.woocommerce-account .juice-icons,
body.juice-wishlist-page .juice-icons,
body.juice-wishlist-owned .juice-icons {
display: flex !important;
}
body.woocommerce-account .header-mobile,
body.juice-wishlist-page .header-mobile,
body.juice-wishlist-owned .header-mobile {
display: none !important;
}
}
/* Mobile/tablet: use standard mobile header. */
@media (max-width: 991px) {
body.woocommerce-account .site-header,
body.juice-wishlist-page .site-header,
body.juice-wishlist-owned .site-header {
display: none !important;
}
body.woocommerce-account .header-mobile,
body.juice-wishlist-page .header-mobile,
body.juice-wishlist-owned .header-mobile {
display: block !important;
}
body.woocommerce-account .juice-icons,
body.juice-wishlist-page .juice-icons,
body.juice-wishlist-owned .juice-icons {
display: none !important;
}
}
/* Logged-in account pages use checkout-style dark header + nav bar in normal flow. */
body.woocommerce-account.logged-in .site-header,
body.woocommerce-account.logged-in .header-mobile,
body.woocommerce-account.logged-in .header-spacer,
body.woocommerce-account.logged-in .juice-icons {
display: none !important;
}
body.woocommerce-account.logged-in .juice-account-topbar {
position: relative !important;
background: #1a1a1a !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}
body.woocommerce-account.logged-in .juice-account-topbar-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 78px !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 34px !important;
}
body.woocommerce-account.logged-in .juice-account-back {
position: absolute !important;
left: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: rgba(255, 255, 255, 0.9) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
max-width: 170px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: opacity 0.2s ease !important;
}
body.woocommerce-account.logged-in .juice-account-back::before {
content: "\e924" !important;
font-family: "et-icon" !important;
font-size: 16px !important;
line-height: 1 !important;
position: relative !important;
top: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-back:hover {
opacity: 0.72 !important;
}
body.woocommerce-account.logged-in .juice-account-logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-logo img {
display: block !important;
width: auto !important;
height: 40px !important;
}
body.woocommerce-account.logged-in .site-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
@media (max-width: 992px) {
body.woocommerce-account.logged-in .juice-account-back {
font-size: 10px !important;
max-width: 130px !important;
gap: 6px !important;
}
}
@media (max-width: 768px) {
body.woocommerce-account.logged-in .juice-account-topbar-inner {
height: 70px !important;
padding: 0 16px !important;
}
body.woocommerce-account.logged-in .juice-account-back {
left: 8px !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
max-width: 28px !important;
justify-content: center !important;
gap: 0 !important;
font-size: 0 !important;
letter-spacing: 0 !important;
overflow: visible !important;
text-indent: -9999px !important;
}
body.woocommerce-account.logged-in .juice-account-back::before {
font-size: 18px !important;
text-indent: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-logo img {
height: 30px !important;
}
body.woocommerce-account.logged-in .site-content {
padding-top: 0 !important;
}
}
body.woocommerce-account.logged-in .juice-account-topbar,
body.woocommerce-account.logged-in .juice-account-nav-bar {
margin: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-nav-bar {
width: 100% !important;
background: #f7f7f7 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* Fallback hide for duplicate nav if another plugin re-attaches default output. */
body.woocommerce-account.logged-in .post-content > .woocommerce > .woocommerce-MyAccount-navigation.juice-account-nav {
display: none !important;
}
/* === ACCOUNT OWNERSHIP (Phase 1-5) === */
body.woocommerce-account.logged-in .page-header {
display: none !important;
}
body.woocommerce-account.logged-in .site-content > .container {
max-width: 1120px !important;
margin: 0 auto !important;
padding: 0 28px 96px !important;
}
body.woocommerce-account.logged-in .post-content > .woocommerce {
display: block !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav {
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 0 !important;
border: 0 !important;
position: relative !important;
box-sizing: border-box !important;
background: transparent !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav::before {
content: none !important;
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__list {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 28px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link {
display: inline-block !important;
white-space: nowrap !important;
padding: 8px 0 !important;
text-decoration: none !important;
color: #000000 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
border: 0 !important;
background: transparent !important;
position: relative !important;
opacity: 1 !important;
transform-origin: center center !important;
transition: transform 0.3s ease !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__icon {
flex-shrink: 0;
vertical-align: middle;
margin-right: 4px;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 0;
height: 1px;
background: #000000;
transform: translateX(-50%);
transition: width 780ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link:hover {
transform: scale(1.05);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item.is-active .juice-account-nav__link::after,
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link:hover::after {
width: 100%;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__logout-wrap {
margin: 0 !important;
text-align: right !important;
position: absolute !important;
right: 20px !important;
top: 0 !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__logout {
display: inline-block !important;
text-decoration: none !important;
color: #000000 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
border: 0 !important;
background: transparent !important;
position: relative !important;
padding: 8px 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__logout::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 0;
height: 1px;
background: #000000;
transform: translateX(-50%);
transition: width 780ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__logout:hover::after {
width: 100%;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__toggle {
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay {
display: contents !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay-panel {
display: contents !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay-close {
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item--logout-mobile {
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
float: none !important;
width: 100% !important;
max-width: 1040px !important;
margin: 12px auto 0 !important;
padding: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-heading {
margin: 40px 0 32px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 28px !important;
font-weight: 300 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: #000 !important;
}
/* === DASHBOARD (O1) === */
body.woocommerce-account.logged-in .juice-dashboard {
max-width: 980px;
margin: 0 auto;
}
body.woocommerce-account.logged-in .juice-dashboard__greeting {
margin: 0 0 32px;
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-dashboard__card {
border: 1px solid rgba(0, 0, 0, 0.14);
padding: 24px;
margin-bottom: 16px;
}
body.woocommerce-account.logged-in .juice-dashboard__card-label {
display: block;
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
}
body.woocommerce-account.logged-in .juice-dashboard__card-title {
margin: 0 0 4px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-dashboard__card-meta {
margin: 0 0 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
color: rgba(0, 0, 0, 0.68);
}
body.woocommerce-account.logged-in .juice-dashboard__card-link,
body.woocommerce-account.logged-in .juice-dashboard__card-action {
display: inline-block;
border-bottom: 1px solid transparent;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
transition: border-color 0.3s ease;
}
body.woocommerce-account.logged-in .juice-dashboard__card-link:hover,
body.woocommerce-account.logged-in .juice-dashboard__card-action:hover {
border-bottom-color: #000;
}
body.woocommerce-account.logged-in .juice-dashboard__card-empty-text {
margin: 0 0 12px;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-dashboard__section-title {
margin: 32px 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-dashboard__order-row {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
text-decoration: none;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 12px;
transition: opacity 0.3s ease;
}
body.woocommerce-account.logged-in .juice-dashboard__order-row:hover {
opacity: 0.6;
}
body.woocommerce-account.logged-in .juice-dashboard__order-date {
flex: 0 0 100px;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-dashboard__order-number {
flex: 0 0 80px;
font-weight: 600;
}
body.woocommerce-account.logged-in .juice-dashboard__order-status {
flex: 1;
}
body.woocommerce-account.logged-in .juice-dashboard__order-total {
flex: 0 0 80px;
text-align: right;
font-weight: 600;
}
body.woocommerce-account.logged-in .juice-dashboard__order-arrow {
flex: 0 0 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
}
body.woocommerce-account.logged-in .juice-dashboard__view-all {
display: inline-block;
margin-top: 12px;
border-bottom: 1px solid transparent;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
transition: border-color 0.3s ease;
}
body.woocommerce-account.logged-in .juice-dashboard__view-all:hover {
border-bottom-color: #000;
}
body.woocommerce-account.logged-in .juice-dashboard__empty-text {
margin: 16px 0;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-dashboard__services-link {
margin-top: 40px;
text-align: center;
}
body.woocommerce-account.logged-in .juice-dashboard__services-link a {
padding-bottom: 2px;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
transition: border-color 0.3s ease;
}
body.woocommerce-account.logged-in .juice-dashboard__services-link a:hover {
border-bottom-color: #000;
}
@media (max-width: 600px) {
body.woocommerce-account.logged-in .juice-dashboard__order-row {
flex-wrap: wrap;
gap: 4px 12px;
}
body.woocommerce-account.logged-in .juice-dashboard__order-date {
flex: 0 0 auto;
}
body.woocommerce-account.logged-in .juice-dashboard__order-number {
flex: 0 0 auto;
}
body.woocommerce-account.logged-in .juice-dashboard__order-total {
flex: 0 0 auto;
text-align: left;
}
body.woocommerce-account.logged-in .juice-dashboard__order-arrow {
display: none;
}
body.woocommerce-account.logged-in .juice-dashboard__card {
padding: 18px;
}
}
/* === ORDERS (ORD1) === */
body.woocommerce-account.logged-in .juice-account-orders {
max-width: 980px;
margin: 0 auto;
}
body.woocommerce-account.logged-in .juice-account-orders__header {
display: flex;
align-items: center;
gap: 16px;
padding: 0 0 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
body.woocommerce-account.logged-in .juice-account-orders__col-label {
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
}
body.woocommerce-account.logged-in .juice-account-orders__col-label--date {
flex: 0 0 100px;
}
body.woocommerce-account.logged-in .juice-account-orders__col-label--number {
flex: 0 0 80px;
}
body.woocommerce-account.logged-in .juice-account-orders__col-label--status {
flex: 1;
}
body.woocommerce-account.logged-in .juice-account-orders__col-label--total {
flex: 0 0 120px;
text-align: right;
}
body.woocommerce-account.logged-in .juice-account-orders__col-label--action {
flex: 0 0 20px;
}
body.woocommerce-account.logged-in .juice-account-orders__row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
text-decoration: none;
color: #000;
transition: opacity 0.3s ease;
}
body.woocommerce-account.logged-in .juice-account-orders__row:hover {
opacity: 0.6;
}
body.woocommerce-account.logged-in .juice-account-orders__cell {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 400;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--date {
flex: 0 0 100px;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-account-orders__cell--number {
flex: 0 0 80px;
font-weight: 600;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--status {
flex: 1;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--total {
flex: 0 0 120px;
text-align: right;
font-weight: 600;
}
body.woocommerce-account.logged-in .juice-account-orders__item-count {
margin-left: 4px;
font-size: 11px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5);
}
body.woocommerce-account.logged-in .juice-account-orders__cell--arrow {
flex: 0 0 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
font-size: 14px;
}
body.woocommerce-account.logged-in .juice-account-orders__pagination {
display: flex;
justify-content: space-between;
margin-top: 16px;
padding-top: 12px;
}
body.woocommerce-account.logged-in .juice-account-orders__page-btn {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease;
}
body.woocommerce-account.logged-in .juice-account-orders__page-btn:hover {
border-bottom-color: #000;
}
body.woocommerce-account.logged-in .juice-account-orders__empty {
text-align: center;
padding: 40px 0;
}
body.woocommerce-account.logged-in .juice-account-orders__empty p {
margin: 0 0 20px;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-orders-shop-btn {
min-height: 44px !important;
min-width: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 40px !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
body.woocommerce-account.logged-in .juice-orders-shop-btn:hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
@media (max-width: 600px) {
body.woocommerce-account.logged-in .juice-account-orders__header {
display: none;
}
body.woocommerce-account.logged-in .juice-account-orders__row {
flex-wrap: wrap;
gap: 4px 12px;
padding: 16px 0;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--date {
flex: 0 0 auto;
font-size: 11px;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--number {
flex: 0 0 auto;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--status {
flex: 0 0 100%;
order: 3;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--total {
flex: 0 0 auto;
text-align: left;
order: 4;
}
body.woocommerce-account.logged-in .juice-account-orders__cell--arrow {
display: none;
}
}
body.woocommerce-account.logged-in .juice-account-order-view {
max-width: 980px;
margin: 0 auto 18px;
}
body.woocommerce-account.logged-in .juice-account-order-view__status {
margin: 0 0 14px;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
color: #000;
}
body.woocommerce-account.logged-in .juice-account-order-view__status mark {
background: transparent;
color: #000;
font-weight: 500;
}
body.woocommerce-account.logged-in .juice-account-order-view .woocommerce-order-details {
margin-top: 10px;
}
body.woocommerce-account.logged-in .juice-account-order-view .shop_table th,
body.woocommerce-account.logged-in .juice-account-order-view .shop_table td {
font-family: 'Inter', sans-serif !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
color: #000 !important;
}
body.woocommerce-account.logged-in .juice-account-order-view .shop_table th {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.woocommerce-account.logged-in .juice-account-order-view .shop_table td {
font-size: 13px !important;
}
body.woocommerce-account.logged-in .juice-account-order-view__updates-title {
margin: 20px 0 10px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-account-order-view__updates {
margin: 0;
padding: 0;
list-style: none;
}
body.woocommerce-account.logged-in .juice-account-order-view__updates .woocommerce-OrderUpdate {
margin: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
padding: 10px 0;
}
body.woocommerce-account.logged-in .juice-account-order-view__updates .woocommerce-OrderUpdate-meta {
margin: 0 0 6px;
font-family: 'Inter', sans-serif;
font-size: 11px;
color: rgba(0, 0, 0, 0.62);
}
body.woocommerce-account.logged-in .juice-account-order-view__updates .woocommerce-OrderUpdate-description {
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
color: #000;
}
body.woocommerce-account.logged-in .juice-account-address,
body.woocommerce-account.logged-in .juice-account-settings {
max-width: 980px;
margin: 0 auto;
}
body.woocommerce-account.logged-in .juice-account-address__title {
margin: 0 0 14px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.woocommerce-account.logged-in .juice-account-address__back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
text-decoration: none;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
transition: opacity 0.3s ease;
}
body.woocommerce-account.logged-in .juice-account-address__back:hover {
opacity: 0.55;
}
body.woocommerce-account.logged-in .juice-account-address__back svg {
flex-shrink: 0;
}
body.woocommerce-account.logged-in .juice-account-address__overview {
margin-top: 4px;
}
body.woocommerce-account.logged-in .juice-account-address__desc {
margin: 0 0 14px;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.78);
}
body.woocommerce-account.logged-in .juice-account-address__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.woocommerce-account.logged-in .juice-account-address__card {
border: 1px solid rgba(0, 0, 0, 0.14);
padding: 14px;
}
body.woocommerce-account.logged-in .juice-account-address__card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 8px;
}
body.woocommerce-account.logged-in .juice-account-address__card-title {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-account-address__card-action {
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
border-bottom: 1px solid transparent;
}
body.woocommerce-account.logged-in .juice-account-address__card-action:hover {
border-bottom-color: #000;
}
body.woocommerce-account.logged-in .juice-account-address__card-body {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.65;
color: #000;
font-style: normal;
}
body.woocommerce-account.logged-in .juice-account-settings__form .form-row {
margin-bottom: 14px !important;
}
body.woocommerce-account.logged-in .juice-account-settings__form .form-row label {
display: block !important;
margin: 0 0 6px !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.62) !important;
}
body.woocommerce-account.logged-in .juice-account-settings__form #account_display_name_description {
display: block;
margin-top: 6px;
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.56);
}
body.woocommerce-account.logged-in .juice-account-settings__form .form-row input,
body.woocommerce-account.logged-in .juice-account-settings__form .form-row select,
body.woocommerce-account.logged-in .juice-account-settings__form .form-row textarea {
border: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
border-radius: 0 !important;
background: transparent !important;
padding: 10px 0 !important;
color: #000 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.4 !important;
}
body.woocommerce-account.logged-in .juice-account-settings__form .form-row input:focus,
body.woocommerce-account.logged-in .juice-account-settings__form .form-row select:focus {
border-bottom-color: #000 !important;
}
body.woocommerce-account.logged-in .juice-account-settings__actions {
margin-top: 12px !important;
}
body.woocommerce-account.logged-in .juice-account-settings__password-set {
margin: 14px 0 0;
padding: 12px 0 0;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
body.woocommerce-account.logged-in .juice-account-settings__password-set legend {
margin-bottom: 8px;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.7);
}
@media (max-width: 991px) {
body.woocommerce-account.logged-in .site-content > .container {
padding: 0 16px 60px !important;
}
body.woocommerce-account.logged-in .juice-account-nav-bar {
padding: 0 16px !important;
}
body.woocommerce-account.logged-in .juice-account-topbar-inner {
height: 60px !important;
padding: 0 14px !important;
}
body.woocommerce-account.logged-in .juice-account-back {
/* font-size handled by the <=992px and <=768px blocks above.
Re-declaring it here (later source order, equal specificity) was
overriding the <=768px `font-size:0` arrow-collapse, so the
"Tilbage til shop" text showed on real phones instead of the arrow. */
max-width: 124px !important;
}
body.woocommerce-account.logged-in .juice-account-logo img {
height: 32px !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav {
margin: 0 !important;
padding: 10px 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__toggle {
width: 100% !important;
min-height: 44px !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
cursor: pointer !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__toggle-icon {
display: inline-flex !important;
flex-direction: column !important;
gap: 3px !important;
width: 15px !important;
flex: 0 0 15px !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__toggle-icon span {
display: block !important;
width: 100% !important;
height: 1px !important;
background: #000 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__toggle-label {
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #000 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay {
display: block !important;
position: fixed !important;
inset: 0 !important;
z-index: 1500 !important;
background: rgba(0, 0, 0, 0.46) !important;
opacity: 0 !important;
pointer-events: none !important;
/* Match the anbefalet/filtre + header-menu slide system (.juice-panel-overlay). */
transition: opacity 0.3s ease !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay-panel {
display: flex !important;
flex-direction: column !important;
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: min(86vw, 360px) !important;
height: 100% !important;
background: #ffffff !important;
box-sizing: border-box !important;
padding: 16px 16px 22px !important;
transform: translateX(100%) !important;
/* Match .juice-slide-panel (anbefalet/filtre + header hamburger) exactly. */
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav.juice-account-nav--open .juice-account-nav__overlay {
opacity: 1 !important;
pointer-events: auto !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav.juice-account-nav--open .juice-account-nav__overlay-panel {
transform: translateX(0) !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__overlay-close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
width: 38px !important;
height: 38px !important;
border: 0 !important;
background: transparent !important;
color: #000 !important;
font-size: 28px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__list {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
height: calc(100% - 44px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 10px 0 0 !important;
margin: 0 !important;
gap: 0 !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item {
width: 100% !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 44px !important;
width: 100% !important;
border-top: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
transform-origin: center left !important;
transition: transform 0.3s ease !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link::after {
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__link:hover {
transform: scale(1.1) !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__logout-wrap {
display: none !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item--logout-mobile {
display: block !important;
margin-top: auto !important;
padding-top: 10px !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation.juice-account-nav .juice-account-nav__item--logout-mobile .juice-account-nav__link {
font-weight: 700 !important;
border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
margin-top: 8px !important;
}
body.woocommerce-account.logged-in .juice-account-address__grid {
grid-template-columns: 1fr;
}
body.woocommerce-account.logged-in .juice-account-heading {
font-size: 22px !important;
letter-spacing: 0.08em !important;
}
}
body.woocommerce-account.logged-in.juice-account-nav-open {
overflow: hidden !important;
touch-action: none !important;
}
@media (max-width: 480px) {
body.woocommerce-account.logged-in .site-content > .container {
padding: 0 12px 48px !important;
}
body.woocommerce-account.logged-in .juice-account-nav-bar {
padding: 0 12px !important;
}
body.woocommerce-account.logged-in .juice-account-heading {
font-size: 18px !important;
letter-spacing: 0.04em !important;
}
}
/* === ACCOUNT SETTINGS (K1 Accordion + Juice Inputs) === */
body.woocommerce-account.logged-in .juice-settings-form {
max-width: 980px !important;
margin: 0 auto !important;
}
body.woocommerce-account.logged-in .juice-settings-section {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
body.woocommerce-account.logged-in .juice-settings-section:first-of-type {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
body.woocommerce-account.logged-in .juice-settings-section__header {
width: 100%;
padding: 16px 0;
border: 0;
margin: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: #000;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
body.woocommerce-account.logged-in .juice-settings-section__chevron {
font-size: 12px;
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.woocommerce-account.logged-in .juice-settings-section__body {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .8s cubic-bezier(.5, 0, 0, 1), opacity .8s cubic-bezier(.5, 0, 0, 1);
}
body.woocommerce-account.logged-in .juice-settings-section.is-open .juice-settings-section__chevron {
transform: rotate(180deg);
}
body.woocommerce-account.logged-in .juice-settings-section.is-open .juice-settings-section__body {
opacity: 1;
}
body.woocommerce-account.logged-in .juice-account-settings .juice-contact-form[data-juice-form="mailer-login"] {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
body.woocommerce-account.logged-in .juice-settings-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap--full {
grid-column: 1 / -1;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap {
margin-bottom: 12px !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap .juice-input {
color: #000 !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap label {
color: #000 !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-underline-static {
background: rgba(0, 0, 0, 0.22) !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-underline-animated {
background: #000 !important;
}
body.woocommerce-account.logged-in .juice-settings-helper {
margin: 2px 0 16px;
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.55;
color: rgba(0, 0, 0, 0.62);
}
body.woocommerce-account.logged-in .juice-settings-section__actions {
margin-top: 18px !important;
text-align: center !important;
}
body.woocommerce-account.logged-in .juice-settings-save {
min-height: 44px !important;
min-width: 240px;
width: auto !important;
max-width: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 22px !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
body.woocommerce-account.logged-in .juice-settings-save:hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
@media (max-width: 991px) {
body.woocommerce-account.logged-in .juice-settings-grid {
grid-template-columns: 1fr;
column-gap: 0;
}
body.woocommerce-account.logged-in .juice-settings-section__body {
padding-right: 0;
}
body.woocommerce-account.logged-in .juice-settings-save {
width: auto !important;
min-width: 220px;
max-width: none;
}
}
body.woocommerce-account.logged-in .juice-settings-info {
margin: 2px 0 14px;
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.68);
}
body.woocommerce-account.logged-in .juice-settings-notice {
margin: 0 0 16px;
padding: 12px 16px;
background: rgba(0, 0, 0, 0.03);
border-left: 2px solid rgba(0, 0, 0, 0.12);
}
body.woocommerce-account.logged-in .juice-settings-notice strong {
display: block;
margin-bottom: 5px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-settings-notice p {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.6);
}
body.woocommerce-account.logged-in .juice-settings-toggle {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 12px;
align-items: center;
margin: 0 0 14px;
cursor: pointer;
}
body.woocommerce-account.logged-in .juice-settings-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
body.woocommerce-account.logged-in .juice-settings-toggle__switch {
position: relative;
width: 20px;
height: 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.15);
transition: background 300ms ease;
}
body.woocommerce-account.logged-in .juice-settings-toggle__switch::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
transition: transform 300ms ease;
}
body.woocommerce-account.logged-in .juice-settings-toggle input[type="checkbox"]:checked + .juice-settings-toggle__switch {
background: #000;
}
body.woocommerce-account.logged-in .juice-settings-toggle input[type="checkbox"]:checked + .juice-settings-toggle__switch::after {
transform: translateX(10px);
box-shadow: none;
}
body.woocommerce-account.logged-in .juice-settings-toggle__label {
display: flex;
flex-direction: column;
gap: 2px;
}
body.woocommerce-account.logged-in .juice-settings-toggle__label strong {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: #000;
margin: 0;
}
body.woocommerce-account.logged-in .juice-settings-toggle__label span {
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.5);
}
body.woocommerce-account.logged-in .juice-settings-privacy-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: relative;
}
body.woocommerce-account.logged-in .juice-settings-privacy-action > div {
flex: 1 1 auto;
}
body.woocommerce-account.logged-in .juice-settings-privacy-action strong {
display: block;
margin: 0 0 4px;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: #000;
}
body.woocommerce-account.logged-in .juice-settings-privacy-action p {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.55;
color: rgba(0, 0, 0, 0.58);
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn {
flex: 0 0 auto;
min-height: 44px;
padding: 0 16px;
border: 1px solid #000;
background: transparent;
color: #000;
border-radius: 0;
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn:hover:not(:disabled) {
background: #000;
color: #fff;
border-color: #000;
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn:disabled {
opacity: 0.6;
cursor: default;
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn--danger {
border-color: rgba(180, 0, 0, 0.6);
color: rgba(180, 0, 0, 0.8);
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn--danger:hover:not(:disabled) {
background: rgba(130, 0, 0, 0.92);
color: #fff;
border-color: rgba(130, 0, 0, 0.92);
}
body.woocommerce-account.logged-in .juice-settings-privacy-feedback {
flex-basis: 100%;
margin: 8px 0 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.55);
}
body.woocommerce-account.logged-in .juice-settings-privacy-feedback.is-success {
color: #0f5f2c;
}
body.woocommerce-account.logged-in .juice-settings-privacy-feedback.is-error {
color: #9b1c1c;
}
body.woocommerce-account.logged-in .juice-settings-privacy-links {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
}
body.woocommerce-account.logged-in .juice-settings-privacy-links a {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: #000;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 240ms ease, border-color 240ms ease;
}
body.woocommerce-account.logged-in .juice-settings-privacy-links a:hover {
color: #000;
border-bottom-color: rgba(0, 0, 0, 0.55);
}
body.woocommerce-account.logged-in .juice-settings-sessions {
margin-top: 16px;
}
body.woocommerce-account.logged-in .juice-settings-sessions__title {
margin: 0 0 10px;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #000;
}
body.woocommerce-account.logged-in .juice-settings-session {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.woocommerce-account.logged-in .juice-settings-session__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
body.woocommerce-account.logged-in .juice-settings-session__meta strong {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 600;
color: #000;
}
body.woocommerce-account.logged-in .juice-settings-session__meta span {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.5);
}
body.woocommerce-account.logged-in .juice-settings-session__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 20px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
font-family: 'Inter', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.75);
}
body.woocommerce-account.logged-in .juice-settings-sessions__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 12px;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap[data-field="password_current"] .juice-input,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap[data-field="password_1"] .juice-input,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap[data-field="password_2"] .juice-input {
padding-right: 28px !important;
}
body.woocommerce-account.logged-in .juice-settings-form .juice-input-wrap {
position: relative !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap .juice-pw-toggle {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: none !important;
border: none !important;
padding: 4px !important;
margin: 0 !important;
cursor: pointer !important;
color: rgba(0, 0, 0, 0.3) !important;
transition: color 200ms ease !important;
z-index: 2 !important;
line-height: 1 !important;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap .juice-pw-toggle:hover {
color: #000;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap .juice-pw-toggle svg {
display: block;
}
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap input[type="password"]::-ms-reveal,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap input[type="password"]::-ms-clear,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap input[type="password"]::-webkit-strong-password-auto-fill-button,
body.woocommerce-account.logged-in .juice-settings-grid .juice-input-wrap input[type="password"]::-webkit-contacts-auto-fill-button {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.woocommerce-account.logged-in .juice-settings-form input[type="password"]::-ms-reveal,
body.woocommerce-account.logged-in .juice-settings-form input[type="password"]::-ms-clear {
display: none !important;
}
body.woocommerce-account.logged-in .juice-settings-form input[type="password"]::-webkit-textfield-decoration-container,
body.woocommerce-account.logged-in .juice-settings-form input::-webkit-credentials-auto-fill-button {
display: none !important;
}
body.woocommerce-account.logged-in .juice-settings-forgot-wrap {
grid-column: 1 / -1;
margin: -4px 0 10px;
text-align: right;
}
body.woocommerce-account.logged-in .juice-settings-forgot-link {
font-family: 'Inter', sans-serif;
font-size: 11px;
line-height: 1.45;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 200ms ease, border-color 200ms ease;
}
body.woocommerce-account.logged-in .juice-settings-forgot-link:hover {
color: #000;
border-bottom-color: rgba(0, 0, 0, 0.55);
}
@media (max-width: 991px) {
body.woocommerce-account.logged-in .juice-settings-privacy-action {
align-items: flex-start;
flex-wrap: wrap;
}
body.woocommerce-account.logged-in .juice-settings-privacy-btn {
width: 100%;
max-width: 160px;
}
body.woocommerce-account.logged-in .juice-settings-session {
align-items: flex-start;
flex-wrap: wrap;
}
}
/* === ACCOUNT ADDRESS FORM (A1) === */
body.woocommerce-account.logged-in .juice-account-address__fields .form-row {
position: relative;
margin-bottom: 18px !important;
padding-top: 18px;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row::before,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row::before {
height: 1px;
background: rgba(0, 0, 0, 0.22);
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row::after {
height: 1px;
background: #000;
transform: scaleX(0);
transform-origin: 50% 50%;
transition: transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row:focus-within::after {
transform: scaleX(1);
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row > label {
position: absolute !important;
top: 28px;
left: 0;
margin: 0 !important;
padding: 0;
pointer-events: none;
transform-origin: left center;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 400;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: #000 !important;
transition: top 980ms cubic-bezier(0.16, 1, 0.3, 1), font-size 980ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 980ms cubic-bezier(0.16, 1, 0.3, 1), opacity 980ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row .woocommerce-input-wrapper {
display: block;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row input,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row select,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row textarea {
width: 100%;
border: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 8px 0 11px !important;
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.45 !important;
color: #000 !important;
box-shadow: none !important;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 22px !important;
background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 8px) calc(50% + 2px);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}
/* DK-only shipping: country is the sole option, so lock it — no dropdown popup,
no select arrow. Still submits its single value (DK). */
body.woocommerce-account.logged-in #billing_country_field select,
body.woocommerce-account.logged-in #shipping_country_field select {
pointer-events: none !important;
background-image: none !important;
padding-right: 0 !important;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row .required {
color: rgba(0, 0, 0, 0.72);
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row:focus-within > label,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row:has(.input-text:not(:placeholder-shown)) > label,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row:has(textarea:not(:placeholder-shown)) > label,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row:has(select) > label {
top: 0;
font-size: 8px !important;
letter-spacing: 0.12em !important;
color: #000 !important;
}
/* Inline field errors — mirrors juice-mailer (.juice-field-error): crimson 12px
message + warning-triangle icon, fades in below the field. Form keeps novalidate;
js/account-form-validation.js injects these on submit. */
body.woocommerce-account.logged-in .juice-account-address__fields .form-row {
position: relative;
}
/* Field errors use the shared flowed .juice-field-error system below (D2,
line ~13145): display:block + max-height 0→30px + margin-top, so the message
reserves space (pushes the next field down) and reverts when it clears. */
body.woocommerce-account.logged-in .juice-account-address__fields .form-row-first,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row-last,
body.woocommerce-account.logged-in .juice-account-address__fields .form-row-wide {
width: 100% !important;
float: none !important;
clear: both !important;
}
body.woocommerce-account.logged-in .juice-account-address__fields .form-row textarea {
min-height: 96px;
resize: vertical;
}
/* Address save button — matches GEM ÆNDRINGER */
body.woocommerce-account.logged-in .juice-account-address__actions {
margin-top: 18px !important;
text-align: center !important;
}
body.woocommerce-account.logged-in .juice-address-save {
min-height: 44px !important;
min-width: 240px;
width: auto !important;
max-width: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 48px !important;
background: #000 !important;
color: #fff !important;
border: 1px solid #000 !important;
border-radius: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}
body.woocommerce-account.logged-in .juice-address-save:hover {
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
/* ── D2: Per-field inline validation error ── */
.juice-field-error {
display: block;
overflow: hidden;
max-height: 0;
margin: 0 !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: #c41e3a !important;
opacity: 0;
transition: max-height 300ms ease, opacity 300ms ease, margin 300ms ease;
}
.juice-field-error.is-visible {
max-height: 30px;
margin-top: 6px !important;
opacity: 1;
}
/* Phone field error: align to number input column, not +45 prefix */
.wc-block-components-address-form__phone .juice-field-error {
grid-column: 2 !important;
grid-row: 3 !important;
}
/* ── D2: Required-field asterisks ── */
.juice-accordion label[for="email"]::after,
.juice-accordion label[for="shipping-first_name"]::after,
.juice-accordion label[for="shipping-last_name"]::after,
.juice-accordion label[for="shipping-address_1"]::after,
.juice-accordion label[for="shipping-postcode"]::after,
.juice-accordion label[for="shipping-city"]::after,
.juice-accordion label[for="shipping-phone"]::after {
content: " *";
color: #000000;
}
/* ── D2: Hide inline WC validation errors inside accordion steps (accordion handles its own) ── */
.woocommerce-checkout .juice-accordion .wc-block-components-validation-error {
display: none !important;
}
/* ── D3: Order notes — visually part of last step, no box borders ── */
body.woocommerce-checkout:not(.juice-checkout-rebuild) #order-notes {
border: none !important;
padding: 16px 0 0 !important;
margin: 0 !important;
}
/* ── D3b: Terms text — visually part of last step ── */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout__terms {
border: none !important;
padding: 14px 0 0 !important;
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
color: rgba(0, 0, 0, 0.5) !important;
line-height: 1.6 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout__terms a {
color: #000 !important;
font-weight: 500 !important;
}
/* ── D8: Guest order tracking card ── */
.juice-order-tracking {
margin: 32px 0;
}
.juice-order-tracking h2 {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 16px;
}
.juice-order-tracking-card {
border: 1px solid #e0e0e0;
padding: 0;
}
.juice-tracking-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.4;
border-bottom: 1px solid #e0e0e0;
}
.juice-tracking-row:last-child {
border-bottom: none;
}
.juice-tracking-label {
color: #666;
font-weight: 400;
}
.juice-tracking-row a {
color: #000;
text-decoration: underline;
}
/* ── Production Timeline ── */
.juice-timeline {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
gap: 0;
margin: 32px 0 28px;
padding: 0 8px;
}
.juice-timeline__step {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.juice-timeline__icon {
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
color: rgba(0,0,0,0.25);
transition: all 0.3s ease;
}
.juice-timeline__icon svg {
width: 22px;
height: 22px;
}
.juice-timeline__label {
font-family: 'Inter', sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(0,0,0,0.3);
text-align: center;
max-width: 72px;
line-height: 1.3;
}
.juice-timeline__line {
flex: 1;
height: 1.5px;
background: rgba(0,0,0,0.1);
margin-top: 26px;
min-width: 28px;
}
/* Done state — filled black, white icon */
.juice-timeline__step--done .juice-timeline__icon {
border-color: #000;
background: #000;
color: #fff;
}
.juice-timeline__step--done .juice-timeline__icon svg {
stroke: #fff;
}
.juice-timeline__step--done .juice-timeline__label {
color: #000;
}
.juice-timeline__line--done {
background: #000;
}
/* Active state — filled black, white icon, bold label */
.juice-timeline__step--active .juice-timeline__icon {
border-color: #000;
background: #000;
color: #fff;
}
.juice-timeline__step--active .juice-timeline__icon svg {
stroke: #fff;
}
.juice-timeline__step--active .juice-timeline__label {
color: #000;
font-weight: 600;
}
/* Kit-only CTA under timeline */
.juice-timeline-cta {
text-align: center;
margin: 24px 0 8px;
}
.juice-timeline-cta__text {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: rgba(0,0,0,0.6);
margin: 0 0 12px;
}
.juice-timeline-cta__link {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #000;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Timeline inside dashboard card */
.juice-dashboard__tracking .juice-timeline {
margin: 20px 0 4px;
}
/* ── Order details table on tracking page ── */
.juice-order-result .woocommerce-order-details__title {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 16px;
}
.juice-order-result .shop_table {
border: 1px solid #e0e0e0 !important;
border-collapse: collapse;
width: 100%;
}
.juice-order-result .shop_table th,
.juice-order-result .shop_table td {
font-family: 'Inter', sans-serif !important;
border-bottom: 1px solid rgba(0,0,0,0.08) !important;
padding: 12px 16px !important;
color: #000 !important;
}
.juice-order-result .shop_table thead th {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
.juice-order-result .shop_table tbody td,
.juice-order-result .shop_table tfoot td {
font-size: 13px !important;
}
.juice-order-result .shop_table tfoot th {
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.juice-order-result .woocommerce-customer-details {
margin-top: 24px;
}
.juice-order-result .woocommerce-column__title {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 12px;
}
.juice-order-result .woocommerce-customer-details address {
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
font-style: normal;
color: rgba(0,0,0,0.65);
}
/* ===========================================
GUEST ORDER TRACKING — /ordre-sporing/
=========================================== */
/* Result page notes */
.juice-order-result__notes {
margin-top: 40px;
text-align: left;
}
.juice-order-result__notes-title {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 16px;
}
.juice-order-result__notes-list {
list-style: none;
padding: 0;
margin: 0;
}
.juice-order-result__note {
padding: 14px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.juice-order-result__note:last-child {
border-bottom: none;
}
.juice-order-result__note-date {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
color: rgba(0, 0, 0, 0.45);
letter-spacing: 0.02em;
margin-bottom: 4px;
}
.juice-order-result__note-text p {
margin: 0;
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.6;
color: #000;
}
/* Result page back link — reuses juice-submit ghost style */
.juice-order-result__back {
margin-top: 32px;
}
.juice-order-result__back .juice-submit {
display: inline-block;
text-align: center;
text-decoration: none;
}
/* Tracking card inside result page — inherit login page max-width */
.juice-order-result .juice-order-tracking {
margin-top: 32px;
text-align: left;
}
.juice-order-result .juice-order-tracking h2 {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
margin: 0 0 16px;
}
/* ===========================================
DASHBOARD — TRACKING ROWS IN ACTIVE ORDER
=========================================== */
.juice-dashboard__tracking {
border-top: 1px solid #e0e0e0;
padding-top: 16px;
margin-top: 16px;
}
.juice-dashboard__tracking-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
font-size: 0.9rem;
line-height: 1.4;
}
.juice-dashboard__tracking-label {
color: #666;
font-weight: 400;
}
.juice-dashboard__tracking-link {
color: #000;
text-decoration: none;
}
.juice-dashboard__tracking-link:hover {
text-decoration: underline;
}
/* ── Mobile checkout spacing ── */
@media (max-width: 768px) {
/* Space between last step area and order summary */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout__sidebar {
margin-top: 40px !important;
}
/* Separator after cart number, spaced evenly before product thumbnail */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-checkout-heading-ref {
padding-bottom: 14px !important;
border-bottom: 1px solid #e7e7e7 !important;
margin-bottom: 14px !important;
}
/* Prevent iOS Safari zoom on input focus — inputs must be >= 16px */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-components-text-input input,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-components-text-input select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-components-combobox .components-combobox-control input,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout input[type="text"],
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout input[type="email"],
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout input[type="tel"],
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-block-checkout select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .wc-blocks-components-select__select {
font-size: 16px !important;
}
}
/* ═══════════════════════════════════════════
CART EMPTY STATE — Juice UI
═══════════════════════════════════════════ */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
display: none !important;
}
.juice-cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120px 24px 80px;
text-align: center;
}
.juice-cart-empty-icon {
width: 48px;
height: 48px;
margin-bottom: 24px;
color: rgba(0,0,0,0.25);
}
.juice-cart-empty-icon svg {
width: 100%;
height: 100%;
}
.juice-cart-empty-text {
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(0,0,0,0.5);
margin: 0 0 32px;
}
.juice-cart-empty-cta {
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #000;
text-decoration: none;
border: 1px solid #000;
padding: 14px 40px;
transition: background 0.3s, color 0.3s;
}
.juice-cart-empty-cta:hover {
background: #000;
color: #fff;
}
/* ═══════════════════════════════════════════
CART PAGE — Blocks Notices (extend checkout styles)
═══════════════════════════════════════════ */
.woocommerce-cart .wc-block-components-notice-banner {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
border-radius: 0 !important;
border: none !important;
padding: 12px 16px !important;
margin: 0 0 16px !important;
box-shadow: none !important;
animation: juice-checkout-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce-cart .wc-block-components-notice-banner.is-error {
background: #c41e3a !important;
color: #fff !important;
border-left: none !important;
}
.woocommerce-cart .wc-block-components-notice-banner.is-success {
background: #fff !important;
color: #1a1a2e !important;
border-left: none !important;
}
.woocommerce-cart .wc-block-components-notice-banner.is-info,
.woocommerce-cart .wc-block-components-notice-banner.is-warning {
background: #fff !important;
color: #1a1a2e !important;
border-left: none !important;
}
.woocommerce-cart .wc-block-components-notice-banner svg {
display: none !important;
}
.woocommerce-cart .wc-block-components-notice-banner__content {
font-size: 12px !important;
}
/* GLOBAL FONT OVERRIDE — force Inter sitewide.
Goya parent declares body/col-labels as Jost (Customizer-driven, env-specific).
Brand standard per PROJECT.md is Inter. */
body,
.juice-col-label,
.juice-col-quarter,
.juice-col-half,
.juice-col-full,
.juice-section-heading,
.product-title,
.entry-title {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* ===========================================================================
CHECKOUT P7.5 — VISUAL PARITY OVERRIDES
Captured from Hostinger ground truth (Blocks-era reference).
Defeats Goya parent's float-label pattern with static-above-input layout.
=========================================================================== */
/* Container — left col padding + step section spacing */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .col-lg-7.woocommerce-checkout-customer-fields {
padding: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .col-lg-5.woocommerce-checkout-review-order-container {
padding: 0 !important;
}
/* Step section — bottom padding 22px (matches Hostinger), divider line */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step {
margin: 0 0 8px !important;
padding: 0 0 22px !important;
border-bottom: 1px solid rgb(231, 231, 231) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step:last-of-type {
border-bottom: none !important;
}
/* Step locked has tighter spacing */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked {
padding: 0 0 8px !important;
margin: 0 0 4px !important;
border-bottom: none !important;
}
/* DEFEAT GOYA FLOAT-LABEL — use static label-above-input matching Hostinger */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.float-label {
position: static !important;
display: flex !important;
flex-direction: column !important;
margin: 0 0 14px !important;
overflow: visible !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.float-label .fl-label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row .fl-label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row > label {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: auto !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 7px !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 16px !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: rgb(102, 102, 102) !important;
opacity: 1 !important;
overflow: visible !important;
transition: none !important;
}
/* Input + select + textarea — match Hostinger 40px height, 1px #e0e0e0 border, no radius */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea {
width: 100% !important;
height: 40px !important;
min-height: 40px !important;
padding: 2px 10px 0 !important;
background: rgb(255, 255, 255) !important;
background-color: rgb(255, 255, 255) !important;
border: 1px solid rgb(224, 224, 224) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
color: rgb(0, 0, 0) !important;
transition: border-color 0.2s ease !important;
outline: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select {
padding-right: 36px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea {
height: auto !important;
min-height: 96px !important;
padding-top: 10px !important;
resize: vertical !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row input.input-text:focus,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row select:focus,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row textarea:focus {
border-color: rgb(0, 0, 0) !important;
}
/* Form-row 2-col grid layout */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-shipping-fields,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-billing-fields {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields .form-row,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing-fields .form-row {
flex: 0 0 calc((100% - 18px) / 2) !important;
min-width: calc((100% - 18px) / 2) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields .form-row-wide,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields .form-row.form-row-first + .form-row.form-row-last + .form-row,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields #shipping_company_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields #shipping_address_1_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields #shipping_phone_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields #ship_to_different_address_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-fields #juice_alternative_mobile_field,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #billing-fields .form-row-wide {
flex: 1 0 100% !important;
min-width: 100% !important;
}
/* Continue button — Hostinger sizing 240x44, padding 0 22px */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-continue {
display: inline-flex !important;
width: 240px !important;
min-width: 240px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 22px !important;
margin: 14px 0 0 !important;
background: rgb(0, 0, 0) !important;
background-color: rgb(0, 0, 0) !important;
border: 1px solid rgb(0, 0, 0) !important;
border-radius: 0 !important;
color: rgb(255, 255, 255) !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 17px !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
text-align: center !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}
/* Rediger button — top-right corner of collapsed step */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-edit {
position: absolute !important;
top: 6px !important;
right: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
color: rgb(0, 0, 0) !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 18.7px !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
cursor: pointer !important;
z-index: 5 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step {
position: relative !important;
}
/* Make sure the .wc-block-components-address-form wrapper inherits step-content's collapse */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .wc-block-components-address-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .wc-block-components-address-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed .juice-address-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked .juice-address-form {
display: none !important;
}
/* ===========================================================================
CHECKOUT P7.5 — KILL STRAY ELEMENTS (Glimse-confirmed)
=========================================================================== */
/* DUPLICATE PLACE-ORDER FIX
renders twice — once in #payment-step (correct), once inside
#order_review in sidebar (Goya/WC AJAX side-effect). Hide the sidebar copy. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) #order_review > #payment,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container #payment {
display: none !important;
}
/* Hide footer contact form on checkout page (juice-submit "SEND" button)
The juice-footer renders on every page; we don't want its contact form
competing with the checkout's place-order CTA. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-footer .juice-footer-form,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-footer .juice-contact-form {
display: none !important;
}
/* Goya parent's side-panel close buttons (.et-close) are in DOM globally —
they should ONLY appear when their parent panel is open (.is-open or .open class).
Default state: panels closed → close buttons hidden. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) #side-cart:not(.open) .et-close,
body.woocommerce-checkout:not(.juice-checkout-rebuild) #mobile-menu:not(.open) .et-close,
body.woocommerce-checkout:not(.juice-checkout-rebuild) #fullscreen-menu:not(.open) .et-close,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .search-panel:not(.open) .et-close {
display: none !important;
}
/* Booking calendar + slots inside a collapsed/locked step must stay hidden.
The .juice-step-content max-height:0 should clip them, but absolute-positioned
children can leak. Force display:none for safety. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-collapsed #juice-booking-root,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-locked #juice-booking-root {
display: none !important;
}
/* "Have a coupon?" WC info notice — hide. Coupons can be applied at the
sidebar order summary or via a dedicated UI later. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-form-coupon-toggle,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.checkout_coupon,
body.woocommerce-checkout:not(.juice-checkout-rebuild) #woocommerce-checkout-form-coupon,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-info,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-customer-fields > .woocommerce-info {
display: none !important;
}
/* Site-status badge from WP admin bar — visible to logged-in admins.
Don't hide globally (admins may want it on other pages), but hide on checkout
where it's just visual noise. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-site-status-badge-live {
display: none !important;
}
/* ===========================================================================
CHECKOUT P7.5 — FIELD ACTIVE STATE + INLINE ERROR PATTERN
Replicates Blocks-era is-active label color + per-field validation rendering
=========================================================================== */
/* Active label — black instead of grey when field has focus or value.
Mirrors wc-block-components-text-input.is-active label behavior. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.is-active label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.is-active .fl-label {
color: rgb(0, 0, 0) !important;
}
/* Field-level inline error message.
Hidden by default; revealed when:
- form gets .juice-show-live-errors (after place-order is clicked), OR
- the error element itself gets .is-visible (per-field reveal on Fortsæt validation) */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-field-error {
display: none;
margin-top: 6px !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
letter-spacing: 0.3px !important;
color: rgb(196, 30, 58) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout.juice-show-live-errors .form-row.has-error .juice-field-error,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-field-error.is-visible {
display: block !important;
}
/* Field error state — red border on invalid fields.
Matches both our .has-error class and WC native .woocommerce-invalid. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.has-error input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.has-error select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.has-error textarea,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid textarea {
border-color: rgb(196, 30, 58) !important;
box-shadow: none !important;
}
/* Errored label gets red color. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.has-error label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.woocommerce-invalid label {
color: rgb(196, 30, 58) !important;
}
/* WooCommerce server-side notice styling — sit at top of form, match Inter type. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-NoticeGroup,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-error,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-message {
margin: 0 0 20px 0 !important;
padding: 14px 18px !important;
border-radius: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
list-style: none !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-error,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-NoticeGroup .woocommerce-error {
background: rgb(252, 235, 238) !important;
border-left: 3px solid rgb(196, 30, 58) !important;
color: rgb(120, 18, 35) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-message,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-NoticeGroup .woocommerce-message {
background: rgb(232, 245, 233) !important;
border-left: 3px solid rgb(46, 125, 50) !important;
color: rgb(27, 75, 30) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-NoticeGroup li,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-error li,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout > .woocommerce-message li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================================
CHECKOUT CLASSIC PARITY — F4 + F10
Replicates Hostinger Blocks visual layer in classic markup.
Reference data: /mnt/c/Users/keith/JuiceHQ/checkout-tree-{HOSTINGER,LOCAL}.txt
============================================================================ */
/* --- F4: hide Goya's (Valgfrit) optional + (*required) abbr in checkout ---
Hostinger Blocks doesn't show either indicator. Required-ness is implicit
via the field schema; Blocks UX uses inline validation, not asterisks. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout label .optional,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout label abbr.required {
display: none !important;
}
/* --- F10.1: label color grey #666, NOT black ---
Goya's .fl-label forces color:#000; Hostinger keeps labels grey #666 even
when field is is-active (active state doesn't darken the label). */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row label.fl-label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.is-active label,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .form-row.is-active label.fl-label {
color: rgb(102, 102, 102) !important;
}
/* --- F10.2: place-order button full-width + 1.6px letter-spacing ---
Hostinger renders the place-order button at full form column width (674px)
with letter-spacing 1.6px. Local was 240px / 1px. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-place-order,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #place_order {
display: flex !important;
width: 100% !important;
letter-spacing: 1.6px !important;
}
/* --- F10.3: sidebar flat — no border / padding / bg on the card ---
Hostinger summary card is visually flat (transparent bg, no border).
Local was emitting white bg + 1px border + 25px padding. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .juice-summary-card {
border: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* --- F10.4: payment fade-in animation ---
Hostinger active-payment content has: animation: 0.3s cubic-bezier(0.4,0,0.2,1) juiceFadeIn */
@keyframes juiceFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-active .juice-step-content {
animation: juiceFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- N3: heading-container parity layout ---
Hostinger stacks heading above summary, full-width. Was flex-split
(caused 151px right-side summary). */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-heading-container {
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-heading-container > .juice-step-summary {
margin-top: 4px !important;
}
/* --- N5: outer summary typography parity (matches Hostinger 13px/black/22.1px) --- */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 22.1px !important;
color: rgb(0, 0, 0) !important;
}
/* --- F10.6: structured summary row layout (F2 prep) ---
Each address line as its own row. Edit button bottom-right of summary. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-shipping,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-kontakt,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-booking {
position: relative !important;
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-shipping-lines {
display: block !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-row {
display: block !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 22.1px !important;
color: rgb(0, 0, 0) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-summary-edit {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
color: rgb(0, 0, 0) !important;
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
line-height: 18.7px !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
cursor: pointer !important;
}
/* --- F10.7: kill stray coupon form on checkout (F5 prep, CSS guard) ---
Even after we remove via PHP filter, defensive hide ensures it never shows. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.checkout_coupon,
body.woocommerce-checkout:not(.juice-checkout-rebuild) form#woocommerce-checkout-form-coupon,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-form-coupon,
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-form-coupon-toggle {
display: none !important;
}
/* --- F6: billing-step visibility ---
Billing-step is a standalone section that renders only when user unchecks
"Brug samme adresse til fakturering". The PHP template emits `hidden`
attribute when same_for_billing=true; trust that. No CSS hide here. */
/* --- N15: shipping-option dedicated step ---
Replaces N7/N13 inline-method markup. Real shipping-method UI lives inside
#shipping-option-step .juice-step-content. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-option-step .juice-step-content ul#shipping_method {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-option-step .juice-step-content ul#shipping_method li {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 92px !important;
margin: 0 !important;
padding: 18px !important;
border: 1px solid #000 !important;
background: #fff !important;
box-sizing: border-box !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
line-height: 1.2 !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-option-step .juice-step-content ul#shipping_method li input[type="radio"] {
margin-right: 12px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #shipping-option-step .et-shipping-th-title {
display: none !important;
}
/* --- Rebuild P2: step shell parity on PHP shell ---
Re-apply the observed Hostinger shell contract without reviving old runtime. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step {
margin: 0 0 8px !important;
padding: 0 0 22px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-heading-container {
display: block !important;
margin: 0 0 16px !important;
padding: 0 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-title {
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: rgb(0, 0, 0) !important;
text-transform: uppercase !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout .juice-step-content {
transition: max-height 0.8s cubic-bezier(0.5, 0, 0, 1),
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* --- Rebuild P3: sidebar contract parity ---
Align the PHP sidebar structure to the observed Hostinger wrapper contract. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading {
display: block !important;
margin: 0 0 4px !important;
padding: 0 0 14px !important;
border-bottom: 0 !important;
text-align: left !important;
cursor: pointer !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-checkout-heading-title {
font-size: 13px !important;
font-weight: 400 !important;
line-height: 18.2px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .wc-block-components-checkout-order-summary__content {
display: block !important;
overflow: hidden !important;
opacity: 1 !important;
transition: max-height 0.8s cubic-bezier(0.5, 0, 0, 1),
opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) .woocommerce-checkout-review-order-container .juice-product-open {
display: block !important;
}
/* --- Rebuild P4: Aftryksmetode card parity ---
Keep the existing booking DOM/JS, but normalize the card contract. */
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice-booking-root .juice-booking-type-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 0 0 18px !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice-booking-root .juice-booking-type-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
min-height: 92px !important;
padding: 18px !important;
gap: 6px !important;
border: 1px solid rgba(0, 0, 0, 0.16) !important;
background: #fff !important;
box-shadow: none !important;
transition: border-color 0.3s ease, background-color 0.3s ease !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice-booking-root .juice-booking-type-card .juice-booking-type-name {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.08em !important;
color: #000 !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice-booking-root .juice-booking-type-card .juice-booking-type-desc {
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1.45 !important;
color: rgba(0, 0, 0, 0.72) !important;
}
body.woocommerce-checkout:not(.juice-checkout-rebuild) form.juice-checkout #juice-booking-root .juice-booking-type-card.is-selected {
border-color: #000 !important;
background: #fff !important;
}
/* ===========================================
HOMEPAGE A11Y — UI/UX PRO MAX AUDIT 2026-05-16
Tap-target expansion (≥44pt) via invisible ::before overlay so the visual
underline + text position stay exactly as designed; only the click area
grows. WCAG/Apple HIG touch-target rule. SR-only utility added in case the
parent theme doesn't ship one.
=========================================== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.juice-col-cta,
.juice-mosaic-cta,
.juice-newsletter-cta {
position: relative;
}
.juice-col-cta::before,
.juice-mosaic-cta::before,
.juice-newsletter-cta::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 44px;
z-index: 1;
}
/* Respect prefers-reduced-motion: kill homepage motion, keep functionality.
Vestibular-sensitive users still see every image, every CTA still clicks,
every hover state still triggers — only the *animation* becomes instant. */
@media (prefers-reduced-motion: reduce) {
.juice-homepage-content *,
.juice-homepage-content *::before,
.juice-homepage-content *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Images sit at scale(1) immediately — skip the Gucci zoom-release. */
.juice-hero-slider img,
.juice-col-image img,
.juice-col-half img,
.juice-mosaic-media img,
.juice-col-media img {
transform: none !important;
}
}