/* ============================================================
SAPI Hyva Theme - Professional B2B Industrial Design
Sandstrahlen.biz - Clean, polished, modern
============================================================ */
/* --- Brand Colors & Design Tokens --- */
:root {
--sapi-primary: #c70032;
--sapi-primary-dark: #a3002a;
--sapi-dark: #1e2530;
--sapi-dark-light: #2e3744;
--sapi-text: #111827;
--sapi-text-muted: #6b7280;
--sapi-bg-light: #f9fafb;
--sapi-emerald: #059669;
--sapi-border: #e5e7eb;
--sapi-border-light: #f3f4f6;
--sapi-radius: 8px;
--sapi-radius-sm: 4px;
--sapi-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
--sapi-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--sapi-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}
/* --- Missing Tailwind Utilities --- */
/* Width/height classes missing from compiled Tailwind (JIT purge gap) */
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.h-2\.5 { height: 0.625rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-9 { width: 2.25rem; }
.h-9 { height: 2.25rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-36 { width: 9rem; }
.h-36 { height: 9rem; }
.w-48 { width: 12rem; }
/* Color utilities */
.bg-emerald-50 { background-color: #ecfdf5; }
.border-emerald-200 { border-color: #a7f3d0; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-emerald-900 { color: #064e3b; }
.hover\:text-emerald-900:hover { color: #064e3b; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
/* Responsive visibility utilities (not compiled by Tailwind JIT) */
.hidden { display: none !important; }
@media (min-width: 768px) {
.md\:block { display: block !important; }
.md\:flex { display: flex !important; }
.md\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex !important; }
.lg\:block { display: block !important; }
.lg\:hidden { display: none !important; }
}
/* SAPI Desktop/Mobile visibility — bulletproof, no Tailwind dependency */
.sapi-desktop-only {
display: none !important;
}
@media (min-width: 1024px) {
.sapi-desktop-only {
display: flex !important;
align-items: center;
}
.sapi-mobile-only {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
}
/* Force-hide any mobile menu children that might have position:fixed */
.sapi-mobile-only *,
.sapi-mobile-only .sapi-mobile-menu,
.sapi-mobile-only .fixed {
display: none !important;
visibility: hidden !important;
}
/* Hide right-side Account+Cart+Logo on desktop — mobile only */
.sapi-mega-nav-right {
display: none !important;
}
}
@media (max-width: 1023px) {
.sapi-mobile-only {
display: block !important;
}
}
/* Layout utilities */
.decoration-dotted { text-decoration-style: dotted; }
.shrink-0 { flex-shrink: 0; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mix-blend-mode-multiply { mix-blend-mode: multiply; }
/* Gap utilities */
.gap-3 { gap: 0.75rem; }
/* Padding/margin decimal utilities missing from Tailwind JIT */
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
/* Inset positioning */
.-top-1 { top: -0.25rem; }
.-right-1 { right: -0.25rem; }
/* Min-height for touch targets */
.min-h-\[48px\] { min-height: 48px; }
.min-h-\[56px\] { min-height: 56px; }
/* ============================================================
ARBITRARY TAILWIND VALUES - Not compiled by Hyva JIT for child themes
============================================================ */
/* Arbitrary font sizes used in templates */
.text-\[0\.6rem\] { font-size: 0.6rem; }
.text-\[0\.65rem\] { font-size: 0.65rem; }
.text-\[0\.7rem\] { font-size: 0.7rem; }
.text-\[0\.72rem\] { font-size: 0.72rem; }
.text-\[10px\] { font-size: 10px; }
/* Arbitrary colors using CSS custom properties */
.bg-\[var\(--sapi-dark\)\] { background-color: var(--sapi-dark); }
.bg-\[var\(--sapi-primary\)\] { background-color: var(--sapi-primary); }
.text-\[var\(--sapi-primary\)\] { color: var(--sapi-primary); }
.text-\[var\(--sapi-dark\)\] { color: var(--sapi-dark); }
.hover\:bg-\[var\(--sapi-primary\)\]:hover { background-color: var(--sapi-primary); }
.hover\:text-\[var\(--sapi-primary\)\]:hover { color: var(--sapi-primary); }
/* Arbitrary z-index */
.z-\[9998\] { z-index: 9998; }
.z-\[9999\] { z-index: 9999; }
/* Arbitrary heights/widths */
.h-\[2px\] { height: 2px; }
.h-\[220px\] { height: 220px; }
.h-\[320px\] { height: 320px; }
/* Arbitrary positions */
.top-\[10\%\] { top: 10%; }
.right-\[10\%\] { right: 10%; }
.right-\[25\%\] { right: 25%; }
.bottom-\[15\%\] { bottom: 15%; }
/* Arbitrary transition */
.transition-\[max-height\] { transition-property: max-height; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
/* Opacity with slashes (backdrop overlays) */
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.active\:bg-white\/20:active { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/0 { background-color: rgba(255, 255, 255, 0); }
.group-active\:bg-white\/10:active { background-color: rgba(255, 255, 255, 0.1); }
/* Red background for View All */
.bg-red-50 { background-color: #fef2f2; }
.hover\:bg-red-100:hover { background-color: #fee2e2; }
.active\:bg-red-200:active { background-color: #fecaca; }
/* Transform/scale classes for tab underline animation */
.scale-x-100 { transform: scaleX(1); }
.scale-x-0 { transform: scaleX(0); }
.origin-left { transform-origin: left; }
.rotate-180 { transform: rotate(180deg); }
/* Drop shadow */
.drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05)); }
/* Gray backgrounds missing */
.bg-gray-50 { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.active\:bg-gray-200:active { background-color: #e5e7eb; }
/* Overscroll behavior */
.overscroll-y-contain { overscroll-behavior-y: contain; }
/* Typography utilities missing from JIT */
.leading-snug { line-height: 1.375; }
.tracking-wide { letter-spacing: 0.025em; }
/* Flex-shrink utility */
.flex-shrink-0 { flex-shrink: 0; }
/* Touch action */
.touch-manipulation { touch-action: manipulation; }
/* User select */
.select-none { user-select: none; }
/* ============================================================
GLOBAL - Typography & Base
============================================================ */
/* Override Hyva Tailwind page background (slate-50 ≈ #f8fafc) → white */
:root,
:host {
--color-bg: #ffffff !important;
--color-container: #ffffff !important;
--color-container-lighter: #ffffff !important;
--color-container-darker: #ffffff !important;
}
html,
body {
background-color: #ffffff !important;
}
body {
color: var(--sapi-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page-wrapper,
.page-main,
main.page-main,
.columns,
.column.main,
.catalog-category-view .page-main,
.catalog-product-view .page-main,
.cms-page-view .page-main {
background-color: #ffffff !important;
}
/* Clean heading hierarchy */
h1, .page-title { font-weight: 700; color: var(--sapi-text); letter-spacing: -0.01em; }
h2 { font-weight: 700; color: var(--sapi-text); }
h3 { font-weight: 600; color: var(--sapi-text); }
/* ============================================================
TOP CONTACT BAR - Slim bar above header
============================================================ */
.sapi-topbar {
background: var(--sapi-primary);
color: rgba(255,255,255,0.9);
font-size: 0.72rem;
line-height: 1;
letter-spacing: 0.01em;
width: 100%;
}
.sapi-topbar-inner {
width: 100%;
margin: 0 auto;
padding: 5px 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.sapi-topbar-left {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.sapi-topbar-item {
display: inline-flex;
align-items: center;
gap: 4px;
color: rgba(255,255,255,0.9);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s, opacity 0.15s;
}
.sapi-topbar-item:hover {
color: #fff;
opacity: 1;
}
.sapi-topbar-item svg {
flex-shrink: 0;
}
.sapi-topbar-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.sapi-topbar-social {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.85);
transition: color 0.15s, transform 0.15s;
padding: 2px;
}
.sapi-topbar-social:hover {
color: #fff;
transform: scale(1.15);
}
/* Mobile: hide entire top bar */
@media (max-width: 767px) {
.sapi-topbar {
display: none;
}
}
/* Tablet: hide address */
@media (min-width: 768px) and (max-width: 1023px) {
.sapi-topbar-address {
display: none;
}
}
/* ============================================================
HEADER - Compact dark bar
============================================================ */
.sapi-header {
background-color: var(--sapi-dark);
border-bottom: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
position: sticky;
top: 0;
z-index: 501;
}
/* On desktop, header scrolls away and nav bar is sticky */
@media (min-width: 1024px) {
.sapi-header {
position: relative;
z-index: 501;
}
}
/* Give header more breathing room */
.sapi-header .container {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
gap: 1rem !important;
}
@media (max-width: 767px) {
.sapi-header .container {
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
.sapi-logo-img {
height: 36px !important;
}
.sapi-header-btn {
padding: 0.5rem;
}
.sapi-header-btn svg {
width: 22px;
height: 22px;
}
}
.sapi-logo {
display: flex;
align-items: center;
}
.sapi-logo-img {
height: 32px;
width: auto;
max-width: 160px;
}
.sapi-header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem;
color: #fff;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.15s;
}
.sapi-header-btn:hover {
background-color: rgba(255,255,255,0.12);
}
/* Header SVGs white - scoped to direct header bar only, NOT full-screen drawers */
#header > .container svg,
.sapi-header > .container svg {
color: #fff;
}
/* Reset SVG colors inside full-screen drawers that live inside #header DOM */
#search-content svg {
color: currentColor;
}
/* Keep close button SVG white in mobile search dark header bar */
#search-content > div:first-child svg {
color: #fff;
}
/* Search placeholder icon - use gray */
#search-content .sapi-search-placeholder svg {
color: #e5e7eb;
}
#header .btn,
.sapi-header .btn {
color: #fff;
padding: 0.375rem;
}
/* Search wrapper & backdrop */
.sapi-search-wrapper {
position: relative;
z-index: 100;
}
/* Frosted glass backdrop behind search results (desktop only) */
.sapi-search-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(30, 37, 48, 0.25);
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
}
/* Hide backdrop on mobile (mobile search has its own fullscreen) */
@media (max-width: 767px) {
.sapi-search-backdrop {
display: none !important;
}
}
/* Backdrop fade-in/fade-out animation */
.sapi-backdrop-enter { transition: opacity 0.25s ease, backdrop-filter 0.3s ease; }
.sapi-backdrop-enter-start { opacity: 0; backdrop-filter: blur(0) saturate(100%); }
.sapi-backdrop-enter-end { opacity: 1; backdrop-filter: blur(6px) saturate(120%); }
.sapi-backdrop-leave { transition: opacity 0.2s ease, backdrop-filter 0.2s ease; }
.sapi-backdrop-leave-start { opacity: 1; }
.sapi-backdrop-leave-end { opacity: 0; backdrop-filter: blur(0) saturate(100%); }
/* Search form: rounded pill style */
.sapi-search-form {
display: flex;
align-items: center;
position: relative;
z-index: 101;
}
.sapi-search-input-wrap {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.sapi-search-input-icon {
position: absolute;
left: 10px;
width: 16px;
height: 16px;
color: rgba(255,255,255,0.4);
pointer-events: none;
z-index: 1;
}
.sapi-search-input {
width: 100%;
background: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: #fff !important;
border-radius: 12px 0 0 12px !important;
font-size: 0.82rem !important;
padding: 0.55rem 0.75rem 0.55rem 2rem !important;
transition: all 0.2s ease;
outline: none;
}
.sapi-search-input::placeholder {
color: rgba(255,255,255,0.4) !important;
}
.sapi-search-input:focus {
background: rgba(255,255,255,0.15) !important;
border-color: rgba(255,255,255,0.3) !important;
box-shadow: 0 0 0 3px rgba(199,0,50,0.15);
}
/* Search submit button */
.sapi-search-submit {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sapi-primary);
color: #fff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.55rem 1rem;
border: none;
border-radius: 0 12px 12px 0;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
}
.sapi-search-submit:hover {
background: #a80029;
}
/* Search Results Panel */
.sapi-search-results {
position: absolute;
left: -1rem;
right: -1rem;
top: calc(100% + 8px);
z-index: 101;
background: #fff;
border-radius: 16px;
box-shadow: 0 12px 48px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.06);
overflow-y: auto;
max-height: 70vh;
min-height: 200px;
-webkit-overflow-scrolling: touch;
border: 1px solid rgba(0,0,0,0.06);
}
/* Full-screen mode */
.sapi-search-results--fullscreen {
position: fixed !important;
left: 1rem !important;
right: 1rem !important;
top: 5rem !important;
bottom: 1rem !important;
max-height: none !important;
border-radius: 20px;
z-index: 9999 !important;
}
/* Full-screen close button */
.sapi-sr-close-btn {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: #f3f4f6;
border: none;
color: #6b7280;
cursor: pointer;
transition: all 0.15s;
}
.sapi-sr-close-btn:hover {
background: #e5e7eb;
color: #111827;
}
/* Extra action buttons (Expand + Advanced Search) */
.sapi-sr-actions {
border-top: 1px solid #f3f4f6;
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.sapi-sr-extra-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
.sapi-sr-expand-btn,
.sapi-sr-advanced-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
font-weight: 500;
color: #374151;
padding: 0.4rem 0.7rem;
border-radius: 8px;
border: 1px solid #d1d5db;
background: #f9fafb;
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
}
.sapi-sr-expand-btn:hover,
.sapi-sr-advanced-btn:hover {
background: #e5e7eb;
color: #111827;
border-color: #9ca3af;
}
/* Legacy search styles - override for new form */
#header .form-input,
#header input[type="search"],
#header input[type="text"] {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 12px;
font-size: 0.82rem;
padding: 0.55rem 0.75rem;
transition: all 0.15s ease;
}
#header .form-input::placeholder,
#header input::placeholder {
color: rgba(255,255,255,0.45);
}
#header .form-input:focus,
#header input:focus {
background: rgba(255,255,255,0.15);
border-color: rgba(255,255,255,0.3);
outline: none;
box-shadow: 0 0 0 3px rgba(199,0,50,0.15);
}
/* Desktop search submit button */
#header .btn.btn-primary.rounded-s-none {
border-radius: 0 12px 12px 0;
}
#header input.rounded-e-none {
border-radius: 12px 0 0 12px;
}
/* Customer/compare buttons in header */
#header [x-data="initCustomerMenu"] .btn,
#header [x-data*="Compare"] .btn {
color: #fff;
padding: 0.375rem;
}
/* ============================================================
NAVIGATION / MEGA MENU - Sticky bar with glass tile dropdowns
============================================================ */
.sapi-mega-nav {
background-color: var(--sapi-dark-light);
border-bottom: 2px solid var(--sapi-primary);
position: sticky;
top: 0;
z-index: 500;
}
.sapi-mega-nav-container {
max-width: 100%;
padding: 0 0.5rem;
}
/* Ensure page content stays BELOW header/nav */
.page-main,
.columns,
.column.main {
position: relative;
z-index: 1;
}
/* Gallery height: match product info column on desktop (only normal view, not fullscreen) */
@media (min-width: 768px) {
#gallery > div:not(.fixed) #gallery-main {
max-height: var(--sapi-gallery-max-h, 520px);
overflow: hidden;
}
#gallery > div:not(.fixed) #gallery-main img {
max-height: var(--sapi-gallery-max-h, 520px);
object-fit: contain;
}
}
/* PDP gallery: rounded images */
#gallery #gallery-main {
border-radius: 25px;
overflow: hidden;
}
#gallery #thumbs img {
border-radius: 12px;
}
/* Product gallery: low z-index normally, but allow fullscreen to escape */
.gallery-placeholder,
.fotorama-item,
.fotorama__stage {
z-index: 1 !important;
}
.product.media {
z-index: 1;
position: relative;
}
/* When gallery goes fullscreen (Hyva adds fixed+z-50), let it rise above nav */
.product.media:has(.fixed) {
z-index: 9999;
}
/* ============================================================
GALLERY MODAL - Bulletproof fullscreen
The Hyva gallery modal element is TELEPORTED to when
fullscreen opens (via SAPI gallery.phtml override) to escape
any ancestor with transform/filter/will-change that would trap
position:fixed. So these selectors must NOT depend on #gallery
as ancestor — they match the modal element wherever it lives.
============================================================ */
/* Fullscreen overlay: identified by aria-modal=true + .fixed class signature
(Hyva applies these together via Alpine binding when fullscreen). Click on
the overlay itself closes (handled in gallery.phtml @click.self).
z-index is maxed so it sits above Smartsupp chat / cookie / GDPR widgets. */
div[aria-modal="true"].fixed,
body > div.fixed.bg-white.z-50 {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
max-width: 100vw !important;
max-height: 100vh !important;
margin: 0 !important;
z-index: 2147483640 !important; /* near INT_MAX — above everything */
background: rgba(20, 25, 35, 0.85) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
cursor: zoom-out; /* visual hint that clicking backdrop closes */
}
/* Hide chat/cookie widgets while the gallery modal is open so nothing
covers the side arrows / close button. Selectors cover the common
third-party widget IDs/classes used on this site. */
body:has(> div[aria-modal="true"].fixed) #smartsupp-widget-container,
body:has(> div[aria-modal="true"].fixed) [id*="smartsupp"],
body:has(> div[aria-modal="true"].fixed) iframe[src*="smartsupp"],
body:has(> div[aria-modal="true"].fixed) [id*="cookie"],
body:has(> div[aria-modal="true"].fixed) [id*="gdpr"],
body:has(> div[aria-modal="true"].fixed) [class*="cookie-banner"],
body:has(> div[aria-modal="true"].fixed) [class*="cookieconsent"],
body:has(> div[aria-modal="true"].fixed) .amgdprcookie-bar-container,
body:has(> div[aria-modal="true"].fixed) .amgdprcookie-modal-container,
body:has(> div[aria-modal="true"].fixed) [data-gdpr-toolbar],
body:has(> div[aria-modal="true"].fixed) #defender-zap-modal,
body:has(> div[aria-modal="true"].fixed) #cookie-status-message {
display: none !important;
}
/* Image card centred inside the overlay (flex column flow with thumbs below) */
div[aria-modal="true"].fixed > .relative.self-center,
body > div.fixed.bg-white.z-50 > .relative.self-center {
position: relative !important;
background: #fff;
border-radius: 12px;
padding: 1rem;
max-width: 900px;
width: calc(100% - 2rem);
max-height: calc(100vh - 180px) !important;
margin: 3rem auto 0 !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
align-self: center;
flex: 0 1 auto;
cursor: default;
overflow: hidden;
}
/* Image element in fullscreen */
div[aria-modal="true"].fixed #gallery-main img,
body > div.fixed.bg-white.z-50 #gallery-main img {
max-height: calc(100vh - 220px) !important;
width: auto !important;
max-width: 100% !important;
margin: 0 auto;
object-fit: contain;
}
/* Thumbnails strip — override Hyva's position:fixed so it sits inside the
modal flex column (below the card), aligned exactly to the same width. */
div[aria-modal="true"].fixed #thumbs.fixed,
body > div.fixed.bg-white.z-50 #thumbs.fixed {
position: relative !important;
inset: auto !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px;
padding: 0.4rem 0.75rem;
max-width: 900px;
width: calc(100% - 2rem);
margin: 0.75rem auto 0 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
min-height: 0 !important;
height: auto !important;
flex: 0 0 auto;
align-self: center;
cursor: default;
}
/* Thumbnail size — smaller and uniform */
div[aria-modal="true"].fixed #thumbs.fixed img,
body > div.fixed.bg-white.z-50 #thumbs.fixed img {
width: 56px !important;
height: 56px !important;
object-fit: cover;
display: block;
}
/* Thumbnail per-slide spacing tighter */
div[aria-modal="true"].fixed #thumbs.fixed .js_thumbs_slide,
body > div.fixed.bg-white.z-50 #thumbs.fixed .js_thumbs_slide {
margin-bottom: 0 !important;
margin-right: 0.4rem !important;
}
/* Hide horizontal scrollbar on the thumbs scroller (still scrollable via wheel/drag) */
div[aria-modal="true"].fixed #thumbs.fixed .thumbs-wrapper,
body > div.fixed.bg-white.z-50 #thumbs.fixed .thumbs-wrapper {
scrollbar-width: none;
-ms-overflow-style: none;
}
div[aria-modal="true"].fixed #thumbs.fixed .thumbs-wrapper::-webkit-scrollbar,
body > div.fixed.bg-white.z-50 #thumbs.fixed .thumbs-wrapper::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Close-button CONTAINER: position fixed to viewport, aligned with card right edge */
div[aria-modal="true"].fixed > .absolute.top-0.right-0,
body > div.fixed.bg-white.z-50 > .absolute.top-0.right-0 {
position: fixed !important;
top: 1rem !important;
right: max(1rem, calc((100vw - 900px) / 2 + 0.5rem)) !important;
padding: 0 !important;
z-index: 2147483641 !important; /* above the modal */
}
/* Close button itself — solid dark background so it stands out on any image */
div[aria-modal="true"].fixed button[aria-label*="lose"],
body > div.fixed.bg-white.z-50 button[aria-label*="lose"] {
color: #fff !important;
background: rgba(0, 0, 0, 0.7) !important;
border: 2px solid rgba(255, 255, 255, 0.9) !important;
border-radius: 50%;
padding: 0.4rem !important;
transition: background 0.2s, transform 0.2s;
width: 2.75rem;
height: 2.75rem;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
div[aria-modal="true"].fixed button[aria-label*="lose"]:hover,
body > div.fixed.bg-white.z-50 button[aria-label*="lose"]:hover {
background: #dc2626 !important; /* red on hover */
transform: scale(1.08);
}
/* The X icon (heroicons SVG) inside */
div[aria-modal="true"].fixed button[aria-label*="lose"] svg,
body > div.fixed.bg-white.z-50 button[aria-label*="lose"] svg {
color: #fff !important;
stroke: #fff !important;
fill: #fff !important;
width: 1.5rem !important;
height: 1.5rem !important;
}
div[aria-modal="true"].fixed button[aria-label*="lose"]:hover,
body > div.fixed.bg-white.z-50 button[aria-label*="lose"]:hover {
background: rgba(255, 255, 255, 0.32) !important;
transform: scale(1.1);
}
/* Thumbnail active border */
div[aria-modal="true"].fixed .border-primary,
body > div.fixed.bg-white.z-50 .border-primary {
border-color: var(--sapi-primary) !important;
}
/* Mobile sizing — use dvh + flex layout so the image fills exactly the
available card area regardless of URL-bar visibility. The card becomes
a flex column: #gallery-main grows to fill, image fills #gallery-main. */
@media (max-width: 767px) {
div[aria-modal="true"].fixed,
body > div.fixed.bg-white.z-50 {
height: 100dvh !important;
max-height: 100dvh !important;
}
div[aria-modal="true"].fixed > .relative.self-center,
body > div.fixed.bg-white.z-50 > .relative.self-center {
display: flex !important;
flex-direction: column !important;
border-radius: 10px;
padding: 0.5rem;
width: calc(100% - 1rem) !important;
/* leave: 0.75rem top margin + thumb strip (~64px) + 0.75rem bottom = ~88px */
height: calc(100dvh - 92px) !important;
max-height: calc(100dvh - 92px) !important;
margin: 0.75rem auto 0 !important;
}
/* #gallery-main fills all remaining card space */
div[aria-modal="true"].fixed #gallery-main,
body > div.fixed.bg-white.z-50 #gallery-main {
flex: 1 1 auto !important;
min-height: 0 !important;
margin-bottom: 0 !important;
overflow: hidden !important;
position: relative !important;
}
/* Image fills #gallery-main with object-contain — never clipped */
div[aria-modal="true"].fixed #gallery-main img,
body > div.fixed.bg-white.z-50 #gallery-main img {
max-height: 100% !important;
max-width: 100% !important;
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
}
/* Smaller thumbs strip below the card */
div[aria-modal="true"].fixed #thumbs.fixed,
body > div.fixed.bg-white.z-50 #thumbs.fixed {
width: calc(100% - 1rem) !important;
padding: 0.3rem 0.5rem;
margin: 0.5rem auto 0.5rem !important;
}
div[aria-modal="true"].fixed #thumbs.fixed img,
body > div.fixed.bg-white.z-50 #thumbs.fixed img {
width: 44px !important;
height: 44px !important;
}
/* Close button */
div[aria-modal="true"].fixed > .absolute.top-0.right-0,
body > div.fixed.bg-white.z-50 > .absolute.top-0.right-0 {
top: 0.5rem !important;
right: 0.5rem !important;
}
div[aria-modal="true"].fixed button[aria-label*="lose"],
body > div.fixed.bg-white.z-50 button[aria-label*="lose"] {
width: 2.25rem;
height: 2.25rem;
padding: 0.35rem !important;
}
}
/* Desktop: also use flex column layout for consistent image fill */
@media (min-width: 768px) {
div[aria-modal="true"].fixed > .relative.self-center,
body > div.fixed.bg-white.z-50 > .relative.self-center {
display: flex !important;
flex-direction: column !important;
height: calc(100dvh - 140px) !important;
max-height: calc(100dvh - 140px) !important;
}
div[aria-modal="true"].fixed #gallery-main,
body > div.fixed.bg-white.z-50 #gallery-main {
flex: 1 1 auto !important;
min-height: 0 !important;
margin-bottom: 0 !important;
overflow: hidden !important;
position: relative !important;
}
div[aria-modal="true"].fixed #gallery-main img,
body > div.fixed.bg-white.z-50 #gallery-main img {
max-height: 100% !important;
max-width: 100% !important;
height: 100% !important;
width: 100% !important;
object-fit: contain !important;
}
}
/* Progressive enhancement: prefer dvh on browsers that support it (desktop too) */
@supports (height: 100dvh) {
div[aria-modal="true"].fixed,
body > div.fixed.bg-white.z-50 {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
/* Desktop nav inner: flex with categories, full width */
.sapi-mega-nav-inner {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 100%;
margin: 0;
padding: 0 1rem;
}
.sapi-mega-nav-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
flex: 1;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sapi-mega-nav-links::-webkit-scrollbar { display: none; }
.sapi-mega-nav-item {
position: static;
}
.sapi-nav-link {
display: flex;
align-items: center;
gap: 3px;
white-space: nowrap;
color: rgba(255,255,255,0.85);
font-weight: 600;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.04em;
padding: 0.65rem 0.6rem;
transition: all 0.15s ease;
line-height: 1.2;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
text-decoration: none;
}
.sapi-nav-link:hover,
.sapi-nav-link:focus {
background-color: rgba(255,255,255,0.1);
color: #fff;
border-bottom-color: var(--sapi-primary);
}
.sapi-nav-chevron {
width: 10px;
height: 10px;
transition: transform 0.2s;
flex-shrink: 0;
}
.sapi-nav-chevron--open {
transform: rotate(180deg);
}
/* Deals link: same style as all other nav links (no special red) */
.sapi-nav-deals {
background-color: transparent;
color: rgba(255,255,255,0.85);
border-bottom-color: transparent;
}
/* Right side: Account + Cart + Logo */
.sapi-mega-nav-right {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
margin-left: auto;
padding-left: 1rem;
}
.sapi-mega-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem;
color: rgba(255,255,255,0.75);
border-radius: 6px;
transition: all 0.15s;
text-decoration: none;
}
.sapi-mega-nav-icon:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.sapi-mega-nav-logo {
display: flex;
align-items: center;
margin-left: 0.5rem;
padding-left: 0.75rem;
border-left: 1px solid rgba(255,255,255,0.15);
}
.sapi-mega-nav-logo-img {
height: 22px;
width: auto;
opacity: 0.85;
transition: opacity 0.15s;
}
.sapi-mega-nav-logo:hover .sapi-mega-nav-logo-img {
opacity: 1;
}
/* Mega dropdown styles further down */
/* ============================================================
HERO SLIDER
============================================================ */
/* (Old hero slider rules removed — see new rules in HOMEPAGE section below) */
/* ============================================================
PRODUCT CARDS - Compact, modern
============================================================ */
.product-item.card,
.card.card-interactive {
border-radius: var(--sapi-radius);
border: 1px solid var(--sapi-border);
transition: all 0.2s ease;
padding: 0.4rem;
background: #fff;
}
.product-item.card:hover,
.card.card-interactive:hover {
box-shadow: var(--sapi-shadow-md);
border-color: #d1d5db;
transform: translateY(-2px);
}
/* Product name - compact, readable */
.product-info .product-item-link,
.product-info .text-lg {
font-size: 1rem !important;
line-height: 1.3;
font-weight: 600;
color: var(--sapi-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-info .product-item-link:hover {
color: var(--sapi-primary);
}
/* Product image */
.product-item-photo {
position: relative;
overflow: hidden;
border-radius: 25px;
background: #f9fafb;
}
.product-item-photo img,
.product-image-photo {
transition: transform 0.3s ease;
object-fit: contain;
}
.card:hover .product-item-photo img,
.card:hover .product-image-photo {
transform: scale(1.03);
}
/* ============================================================
PRICE DISPLAY - B2B: Excl tax FIRST, incl tax SECOND
ALWAYS on separate lines with clear visual hierarchy
============================================================ */
/* ============================================================
PRICE DISPLAY - B2B: Excl. tax FIRST (bigger), Incl. tax SECOND (smaller)
Single unified system — no duplicate labels.
Structure: .price-box > .price-container > .price-wrapper.price-including-tax
> .price-wrapper.price-excluding-tax
============================================================ */
/* Force vertical stacking */
.price-box {
display: flex !important;
flex-direction: column !important;
gap: 0;
align-items: flex-start !important;
}
.price-box .price-container {
display: flex !important;
flex-direction: column !important;
gap: 0;
width: 100%;
}
span.price-container {
display: block !important;
}
/* --- Excl. tax = PRIMARY (bigger, bold, brand color) --- */
.price-wrapper.price-excluding-tax {
order: -1;
display: block !important;
}
.price-wrapper.price-excluding-tax .price {
font-size: 1rem;
font-weight: 700;
color: var(--sapi-primary);
}
.price-wrapper.price-excluding-tax .price::after {
content: ' netto';
font-size: 0.6rem;
font-weight: 400;
color: #9ca3af;
vertical-align: middle;
}
/* --- Incl. tax = SECONDARY (smaller, muted) --- */
.price-wrapper.price-including-tax {
order: 1;
display: block !important;
}
.price-wrapper.price-including-tax .price {
font-size: 0.72rem;
font-weight: 400;
color: #9ca3af;
}
.price-wrapper.price-including-tax .price::after {
content: ' inkl. MwSt.';
font-size: 0.55rem;
font-weight: 400;
color: #c0c5cc;
}
/* --- Kill ALL ::before pseudo-labels from Hyva/data-label attributes --- */
.price-wrapper.price-excluding-tax::before,
.price-wrapper.price-excluding-tax::after,
.price-wrapper.price-including-tax::before,
.price-wrapper.price-including-tax::after {
display: none !important;
}
/* Re-enable only our price ::after labels */
.price-wrapper.price-excluding-tax .price::after,
.price-wrapper.price-including-tax .price::after {
display: inline !important;
}
/* --- "Ab" / "From" label: show above excl. price on configurable products --- */
.price-box .price-label {
font-size: 0.65rem;
color: #9ca3af;
font-weight: 400;
order: -2;
display: block !important;
}
/* --- Smaller prices on product cards in listings --- */
.products-grid .price-wrapper.price-excluding-tax .price,
.product-items .price-wrapper.price-excluding-tax .price,
.product-slider .price-wrapper.price-excluding-tax .price {
font-size: 0.88rem;
}
.products-grid .price-wrapper.price-including-tax .price,
.product-items .price-wrapper.price-including-tax .price,
.product-slider .price-wrapper.price-including-tax .price {
font-size: 0.65rem;
}
/* --- CART PAGE PRICES ---
Cart item prices use .cart-price (not .price) inside
.price-including-tax / .price-excluding-tax spans.
We use .sapi-cart-prices to avoid conflicts with .price-box global rules.
============================================================ */
.sapi-cart-prices {
display: flex;
flex-direction: row;
align-items: baseline;
gap: 1rem;
flex-shrink: 0;
}
/* Unit price: smaller, secondary (only shown when qty > 1) */
.sapi-cart-unit-price {
display: flex;
align-items: baseline;
gap: 0.35rem;
color: #9ca3af;
font-size: 0.85rem;
}
.sapi-cart-qty {
white-space: nowrap;
font-weight: 500;
}
/* Row total: primary, bold */
.sapi-cart-row-total {
font-weight: 600;
}
/* Each price value wrapper must be flex-column for tax ordering */
.sapi-cart-price-value {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
/* Order excl-tax first in cart prices */
.sapi-cart-prices span.price-excluding-tax {
order: -1;
}
.sapi-cart-prices span.price-including-tax {
order: 1;
}
/* Cart excl-tax = primary (bold, branded)
Structure: .price-excluding-tax > .cart-price > .price
Labels go on .price (innermost text), not .cart-price */
.sapi-cart-prices span.price-excluding-tax .price {
font-weight: 700;
color: var(--sapi-primary);
}
.sapi-cart-prices span.price-excluding-tax .price::after {
content: ' zzgl. MwSt.';
font-size: 0.55rem;
font-weight: 400;
color: #9ca3af;
vertical-align: middle;
}
/* Cart incl-tax = secondary (smaller, muted) */
.sapi-cart-prices span.price-including-tax .price {
font-size: 0.75rem;
font-weight: 400;
color: #9ca3af;
}
.sapi-cart-prices span.price-including-tax .price::after {
content: ' inkl. MwSt.';
font-size: 0.5rem;
font-weight: 400;
color: #d1d5db;
}
/* Unit price section: smaller styling when shown alongside row total */
.sapi-cart-unit-price span.price-excluding-tax .price {
font-weight: 500;
color: #6b7280;
font-size: 0.85rem;
}
/* Minicart/drawer prices also use .cart-price via sidebar.phtml
These have .price-wrapper class — already handled above */
/* --- EMPTY CART PAGE ---
Enhanced empty state with category CTAs
============================================================ */
.sapi-empty-cart {
max-width: 48rem;
margin: 2rem auto;
}
.sapi-empty-cart-hero {
text-align: center;
padding: 3rem 1.5rem 2rem;
}
.sapi-empty-cart-icon {
width: 4rem;
height: 4rem;
color: #d1d5db;
margin: 0 auto 1rem;
}
.sapi-empty-cart-hero h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--sapi-dark);
margin-bottom: 0.5rem;
}
.sapi-empty-cart-hero p {
color: #6b7280;
font-size: 0.95rem;
max-width: 28rem;
margin: 0 auto;
}
.sapi-empty-cart-cats {
margin-top: 2.5rem;
padding: 0 1rem;
}
.sapi-empty-cart-cats h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--sapi-dark);
margin-bottom: 1rem;
text-align: center;
}
.sapi-empty-cart-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (min-width: 640px) {
.sapi-empty-cart-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.sapi-empty-cart-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: var(--sapi-radius, 0.75rem);
background: #fff;
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.sapi-empty-cart-card:hover {
border-color: var(--sapi-primary);
box-shadow: 0 4px 12px rgba(199, 0, 50, 0.08);
transform: translateY(-2px);
}
.sapi-empty-cart-card-img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 0.5rem;
}
.sapi-empty-cart-card-placeholder {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: #f3f4f6;
border-radius: 0.5rem;
color: #9ca3af;
}
.sapi-empty-cart-card-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--sapi-dark);
text-align: center;
line-height: 1.3;
}
/* --- PDP PRICES (price.phtml) ---
Layout: excl-tax first (big red), incl-tax below (smaller gray).
Template renders "Exkl. Steuern:" label — we hide it and use our own "zzgl. MwSt." label.
*/
/* Each price div is its own line */
.price-box .final-price,
.price-box .final-price-excl-tax,
.price-box .price-excl-tax,
.price-box .old-price,
.price-box .old-price-excl-tax {
display: block !important;
width: 100%;
}
/* Move excl-tax BEFORE incl-tax */
.price-box .final-price-excl-tax,
.price-box .price-excl-tax {
order: -1;
}
.price-box .final-price {
order: 1;
}
/* ── Excl-tax section: hide template label, show only price + "zzgl. MwSt." ── */
.price-box .final-price-excl-tax,
.price-box .price-excl-tax {
font-size: 0;
line-height: 0;
color: transparent;
}
.price-box .final-price-excl-tax .price,
.price-box .price-excl-tax .price {
font-size: 1.6rem;
font-weight: 700;
color: var(--sapi-primary);
line-height: 1.3;
}
.price-box .final-price-excl-tax .price::after,
.price-box .price-excl-tax .price::after {
content: ' zzgl. MwSt.';
font-size: 0.65rem;
font-weight: 400;
color: #9ca3af;
vertical-align: middle;
}
/* ── Incl-tax section (.final-price): show price + "inkl. MwSt." ── */
.price-box .final-price {
font-size: 0;
line-height: 0;
color: transparent;
margin-top: 0.15rem;
}
.price-box .final-price .price {
font-size: 0.9rem;
font-weight: 500;
color: #6b7280;
line-height: 1.3;
}
.price-box .final-price .price::after {
content: ' inkl. MwSt.';
font-size: 0.6rem;
font-weight: 400;
color: #9ca3af;
}
/* Prevent nested .price > .price from getting ::after labels (SSR has nested spans before Alpine) */
.price-box .price .price::after {
content: none !important;
}
/* Hide all .price-label elements in price-box (removes "As low as" / "Ab" + "Exkl. Steuern:") */
.price-box .price-label {
display: none !important;
}
/* ── Hide "As low as" / "Ab" text GLOBALLY ── */
.final-price > .price-label,
.minimal-price .price-label,
.minimal-price-link .price-label,
.price-from .price-label,
.normal-price > .price-label {
display: none !important;
}
/* ── CATEGORY/LIST pages: excl-tax first, incl-tax below ── */
.price-container.price-excluding-tax {
order: -1;
}
.price-container.price-including-tax {
display: block !important;
order: 1;
}
.price-container.price-including-tax .price {
font-size: 0.7rem;
font-weight: 400;
color: #9ca3af;
}
.price-container.price-including-tax .price-label {
display: inline !important;
font-size: 0.55rem;
color: #9ca3af;
}
/* Old / sale price */
.old-price .price {
font-size: 0.8rem;
color: #9ca3af;
text-decoration: line-through;
}
.old-price-excl-tax .price {
font-size: 0.7rem;
color: #9ca3af;
text-decoration: line-through;
}
/* Hide "As low as" tier price on category/listing pages (shown separately on PDP) */
.product-item .minimal-price-link,
.products-grid .minimal-price-link,
.products-list .minimal-price-link {
display: none !important;
}
/* Tier pricing */
.prices-tier {
background: var(--sapi-bg-light);
padding: 0.75rem;
border-radius: var(--sapi-radius);
margin-top: 0.5rem;
font-size: 0.8rem;
border: 1px solid var(--sapi-border);
}
/* ============================================================
BUTTONS - Clean, consistent
============================================================ */
.btn-primary,
button.btn-primary,
a.btn-primary {
background-color: var(--sapi-primary) !important;
border-color: var(--sapi-primary) !important;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
transition: all 0.15s ease;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
background-color: var(--sapi-primary-dark) !important;
border-color: var(--sapi-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(199,0,50,0.25);
}
/* Secondary buttons */
.btn:not(.btn-primary) {
border-radius: 6px;
font-size: 0.8rem;
transition: all 0.15s ease;
}
/* ============================================================
PDP - Product Options - Ultra Compact
============================================================ */
/* Options wrapper */
.product-info-main [x-data*="initConfigurable"] {
margin-bottom: 0.5rem !important;
}
/* Options heading - minimal label style */
.product-info-main h2.title-font,
.product-info-main .text-xl.title-font,
.product-info-main h2.text-gray-900.text-xl {
font-size: 0.7rem !important;
font-weight: 700;
margin-bottom: 0.25rem !important;
margin-top: 0 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sapi-text-muted);
border-bottom: 1px solid var(--sapi-border);
padding-bottom: 0.35rem;
}
/* Option rows - tight */
.product-info-main .border-t.border-gray-300,
.product-info-main [x-data*="initConfigurable"] .border-t {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
border-color: var(--sapi-border-light) !important;
}
/* Last option row bottom border */
.product-info-main [x-data*="initConfigurable"] .last\:border-b:last-child {
border-bottom-color: var(--sapi-border-light) !important;
}
/* Option label */
.product-info-main .text-gray-700.label,
.product-info-main label.text-gray-700 {
font-size: 0.72rem !important;
font-weight: 600;
color: var(--sapi-text);
}
/* Option select dropdown */
.product-info-main .form-select,
.product-info-main select.super-attribute-select,
.product-info-main .super-attribute-select {
font-size: 0.72rem !important;
padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
border-radius: var(--sapi-radius-sm);
border: 1px solid #d1d5db;
max-width: 100%;
height: auto;
line-height: 1.4;
background-color: #fff;
transition: border-color 0.15s;
}
.product-info-main .form-select:focus,
.product-info-main select:focus {
border-color: var(--sapi-primary);
box-shadow: 0 0 0 2px rgba(199,0,50,0.1);
outline: none;
}
/* Custom product options */
.product-options-wrapper {
margin-bottom: 0.5rem;
}
.product-options-wrapper .fieldset {
padding: 0;
}
.product-options-wrapper .field {
margin-bottom: 0.35rem;
}
.product-options-wrapper .field .label {
font-size: 0.72rem;
font-weight: 600;
margin-bottom: 0.15rem;
}
.product-options-wrapper .field .control input,
.product-options-wrapper .field .control select,
.product-options-wrapper .field .control textarea {
font-size: 0.72rem;
padding: 0.25rem 0.5rem;
border-radius: var(--sapi-radius-sm);
}
/* Product attribute list (dl) on PDP */
#product-details .border-t {
padding-top: 0.2rem !important;
padding-bottom: 0.2rem !important;
}
#product-details .text-sm {
font-size: 0.7rem !important;
}
/* ============================================================
PDP - Polished Section Layout
============================================================ */
/* Main info wrapper */
.sapi-pdp-info {
display: flex;
flex-direction: column;
gap: 0;
}
/* Each section card */
.sapi-pdp-section {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
}
/* Section label (e.g. "Optionen") */
.sapi-pdp-section-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #6b7280;
margin-bottom: 0.75rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid #f3f4f6;
}
/* ── Title section ── */
.sapi-pdp-title-section {
border: none;
padding: 0 0 0.5rem;
margin-bottom: 0;
background: none;
}
.sapi-pdp-short-desc {
font-size: 0.82rem;
line-height: 1.6;
color: #4b5563;
margin-top: 0.25rem;
}
/* ── Stock section ── */
.sapi-pdp-stock-section {
background: #f9fafb;
}
.sapi-pdp-stock-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
/* Animated stock badge */
.sapi-pdp-stock-section .stock.available {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: #059669;
background: #ecfdf5;
border: 1px solid #a7f3d0;
padding: 4px 12px;
border-radius: 20px;
animation: sapi-stock-pulse 2s ease-in-out 1;
}
.sapi-pdp-stock-section .stock.available::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #059669;
animation: sapi-stock-dot 2s ease-in-out infinite;
}
@keyframes sapi-stock-pulse {
0% { transform: scale(0.95); opacity: 0; }
50% { transform: scale(1.02); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes sapi-stock-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sapi-pdp-stock-section .stock.unavailable {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
color: #dc2626;
background: #fef2f2;
border: 1px solid #fecaca;
padding: 4px 12px;
border-radius: 20px;
}
/* Attribute rows */
.sapi-pdp-attributes {
margin-top: 0.75rem;
}
.sapi-pdp-attr-row {
display: flex;
padding: 0.3rem 0;
border-top: 1px solid #e5e7eb;
font-size: 0.78rem;
}
.sapi-pdp-attr-row:last-child {
border-bottom: 1px solid #e5e7eb;
}
.sapi-pdp-attr-row dt {
width: 45%;
color: #6b7280;
font-weight: 500;
}
.sapi-pdp-attr-row dd {
width: 55%;
color: #111827;
font-weight: 600;
}
/* ── Options section ── */
.sapi-pdp-options-section {
border: 2px solid var(--sapi-primary);
background: linear-gradient(135deg, #fff5f7 0%, #fff 60%);
}
/* Options header label */
.sapi-pdp-options-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sapi-primary);
margin-bottom: 0.75rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(199, 0, 50, 0.15);
}
.sapi-pdp-options-header svg {
color: var(--sapi-primary);
flex-shrink: 0;
}
/* Hide vendor "Options" h2 — replaced by our .sapi-pdp-options-header */
.sapi-pdp-options-section h2.title-font,
.sapi-pdp-options-section h2.text-xl {
display: none;
}
/* Required field indicator (red asterisk) */
.sapi-pdp-options-section div:has(select[required]) > label::after,
.sapi-pdp-options-section div:has(input[required]) > label::after,
.sapi-pdp-options-section .field.required > label::after {
content: ' *';
color: var(--sapi-primary);
font-weight: 700;
font-size: 0.9em;
}
/* Required / Optional badge labels — per-locale via CSS variables */
:root {
--sapi-required-label: 'Pflichtfeld';
--sapi-optional-label: 'Optional';
}
html[lang^="en"] { --sapi-required-label: 'Required'; --sapi-optional-label: 'Optional'; }
html[lang^="sl"] { --sapi-required-label: 'Obvezno'; --sapi-optional-label: 'Neobvezno'; }
html[lang^="it"] { --sapi-required-label: 'Obbligatorio'; --sapi-optional-label: 'Opzionale'; }
html[lang^="es"] { --sapi-required-label: 'Obligatorio'; --sapi-optional-label: 'Opcional'; }
html[lang^="pl"] { --sapi-required-label: 'Wymagane'; --sapi-optional-label: 'Opcjonalne'; }
html[lang^="sk"] { --sapi-required-label: 'Povinné'; --sapi-optional-label: 'Voliteľné'; }
html[lang^="cs"] { --sapi-required-label: 'Povinné'; --sapi-optional-label: 'Volitelné'; }
html[lang^="nl"] { --sapi-required-label: 'Verplicht'; --sapi-optional-label: 'Optioneel'; }
html[lang^="hr"] { --sapi-required-label: 'Obavezno'; --sapi-optional-label: 'Neobavezno'; }
html[lang^="uk"] { --sapi-required-label: 'Обовʼязкове'; --sapi-optional-label: 'Необовʼязкове'; }
/* "Pflichtfeld" badge for required fields — :first-of-type prevents duplication on the sup-asterisk span */
.sapi-pdp-options-section div:has(select[required]) > label > span:first-of-type::after,
.sapi-pdp-options-section .field.required > label > span:first-of-type::after {
content: var(--sapi-required-label);
display: inline-block;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #fff;
background: var(--sapi-primary);
padding: 1px 5px;
border-radius: 3px;
margin-left: 0.4rem;
vertical-align: middle;
}
/* Optional field label — :first-of-type prevents duplication on the sup-asterisk span */
.sapi-pdp-options-section div:has(select:not([required])) > label > span:first-of-type::after,
.sapi-pdp-options-section .field:not(.required) > label > span:first-of-type::after {
content: var(--sapi-optional-label);
display: inline-block;
font-size: 0.6rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #9ca3af;
border: 1px solid #e5e7eb;
padding: 1px 5px;
border-radius: 3px;
margin-left: 0.4rem;
vertical-align: middle;
}
/* Clean up option attribute rows */
.sapi-pdp-options-section .border-t {
border-color: #f3f4f6;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.sapi-pdp-options-section label {
font-weight: 600;
font-size: 0.82rem;
color: #374151;
}
.sapi-pdp-options-section select {
border-radius: 8px;
border-color: #d1d5db;
font-size: 0.82rem;
padding: 0.5rem 0.75rem;
}
/* ── Price + Cart section ── */
.sapi-pdp-cart-section {
background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
border-color: #d1d5db;
}
.sapi-pdp-price {
margin-bottom: 0.75rem;
}
.sapi-pdp-addtocart {
display: flex;
align-items: center;
gap: 0.75rem;
}
.sapi-pdp-addtocart-btn {
flex: 1;
}
.sapi-pdp-addtocart-btn .btn-primary,
.sapi-pdp-addtocart-btn .action.primary,
.sapi-pdp-addtocart-btn button[type="submit"] {
width: 100%;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 0.88rem;
font-weight: 700;
border-radius: 8px;
}
/* Wishlist / Compare actions */
.sapi-pdp-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 0.5rem 0;
}
/* Quantity input */
.sapi-pdp-info input[name="qty"],
.sapi-pdp-info .qty-input {
width: 3.5rem;
text-align: center;
border-radius: 6px;
font-size: 0.85rem;
padding: 0.5rem;
}
/* Product title on PDP */
.page-title.text-3xl {
font-size: 1.6rem !important;
line-height: 1.3;
font-weight: 700;
}
@media (min-width: 768px) {
.page-title.text-3xl {
font-size: 1.95rem !important;
}
}
/* ============================================================
FOOTER - Dark professional B2B
============================================================ */
/* Override ANY gray background from parent Hyva theme */
.sapi-footer,
footer .bg-gray-100,
.page-footer,
footer.page-footer,
div.bg-gray-100.border-t.border-gray-300.pb-16 {
background-color: var(--sapi-dark) !important;
color: #d1d5db !important;
border-top: none !important;
border-color: transparent !important;
}
.sapi-footer-content {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
.sapi-footer-copyright {
background-color: rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.06);
}
.sapi-footer-copyright small {
color: #6b7280;
font-size: 0.7rem;
}
/* Footer links */
.sapi-footer a,
.page-footer a,
footer a:not(.sapi-logo):not(.sapi-nav-link) {
color: #d1d5db;
transition: color 0.15s ease;
}
.sapi-footer a:hover,
.page-footer a:hover,
footer a:not(.sapi-logo):not(.sapi-nav-link):hover {
color: #fff;
}
/* Footer headings */
.sapi-footer h3,
.sapi-footer h4,
.page-footer h3,
.page-footer h4,
footer h3,
footer h4 {
color: #fff !important;
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Footer grid from CMS block */
.site-footer .footer-top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 2.5rem 0 2rem;
}
@media (min-width: 768px) {
.site-footer .footer-top {
grid-template-columns: repeat(4, 1fr);
}
}
.site-footer .footer-top ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer .footer-top ul li {
padding: 0.15rem 0;
}
.site-footer .footer-top ul li a {
font-size: 0.75rem;
color: #9ca3af;
}
.site-footer .footer-top ul li a:hover {
color: #fff;
}
.site-footer .footer-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 2rem 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
.site-footer .footer-bottom {
grid-template-columns: repeat(4, 1fr);
}
}
/* Footer contact bar */
.sapi-footer-contacts,
.footer-contacts {
background-color: var(--sapi-dark-light);
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sapi-footer-contacts a,
.footer-contacts a {
color: #fff;
font-weight: 500;
}
/* Footer generic images - basic sizing (no filter that hides logos) */
.site-footer img,
.page-footer .footer.content img,
footer img:not(.sapi-logo-img) {
max-height: 28px;
width: auto;
display: inline-block;
vertical-align: middle;
margin: 0.2rem 0.3rem 0.2rem 0;
transition: opacity 0.15s;
}
/* Override Hyva's copyright bar */
footer .bg-surface,
.sapi-footer .bg-surface {
background-color: rgba(0,0,0,0.25) !important;
border-color: rgba(255,255,255,0.06) !important;
}
footer .bg-surface a[href*="hyva"] {
display: none !important;
}
footer .bg-surface p,
footer .bg-surface small {
color: #6b7280 !important;
font-size: 0.7rem;
}
/* ============================================================
BREADCRUMBS & PAGE TITLES
============================================================ */
.breadcrumbs {
font-size: 0.72rem;
padding: 0;
color: var(--sapi-text-muted);
}
.breadcrumbs a {
color: var(--sapi-text-muted);
}
.breadcrumbs a:hover {
color: var(--sapi-primary);
}
h1.page-title,
.page-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--sapi-text);
}
@media (min-width: 768px) {
h1.page-title,
.page-title {
font-size: 1.5rem;
}
}
/* ============================================================
PRODUCT LABELS
============================================================ */
.sapi-label {
position: absolute;
top: 8px;
z-index: 5;
padding: 0.2rem 0.6rem;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(--sapi-radius-sm);
line-height: 1.2;
}
.sapi-label-sale {
left: 8px;
background-color: var(--sapi-primary);
color: #fff;
}
.sapi-label-new {
right: 8px;
background-color: var(--sapi-emerald);
color: #fff;
}
/* (Old USP bar rules removed - replaced by new tile-based USP in homepage section below) */
.sapi-usp-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.7rem;
}
.sapi-usp-item svg {
width: 24px;
height: 24px;
color: var(--sapi-primary);
flex-shrink: 0;
}
.sapi-usp-item strong {
display: block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sapi-text);
}
.sapi-usp-item span {
color: var(--sapi-text-muted);
font-size: 0.65rem;
}
/* ============================================================
CATEGORY PAGE - Grid & Filters
============================================================ */
/* Clean toolbar - compact */
.toolbar.toolbar-products {
padding: 0.35rem 0;
border-bottom: 1px solid var(--sapi-border);
margin-bottom: 0.75rem;
}
.toolbar .modes-mode {
padding: 0.25rem;
border-radius: var(--sapi-radius-sm);
}
/* Fix grid/list mode icons: override currentColor SVGs with visible dark color */
.toolbar .modes-mode.mode-grid {
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.toolbar .modes-mode.mode-list {
background-image: url('data:image/svg+xml;utf8,') !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.toolbar .modes-mode.active {
opacity: 1;
background-color: #f3f4f6;
border-radius: 4px;
}
.toolbar .modes {
border-color: #d1d5db !important;
background-color: #fff !important;
}
.toolbar .sorter-label,
.toolbar .limiter-label {
font-size: 0.65rem;
color: var(--sapi-text-muted);
}
.toolbar select {
font-size: 0.65rem;
padding: 0.2rem 1.25rem 0.2rem 0.4rem;
border-radius: var(--sapi-radius-sm);
}
/* Product grid responsive - force more columns */
.products.wrapper .products-grid > ul,
.products.wrapper.mode-grid > ul,
.products.wrapper.mode-grid ul {
display: grid !important;
gap: 0.5rem !important;
grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 768px) {
.products.wrapper .products-grid > ul,
.products.wrapper.mode-grid > ul,
.products.wrapper.mode-grid ul {
gap: 0.6rem !important;
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 1024px) {
.products.wrapper .products-grid > ul,
.products.wrapper.mode-grid > ul,
.products.wrapper.mode-grid ul {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* Product image - constrained height */
.product-item-photo {
max-height: 160px;
}
.product-item-photo img,
.product-image-photo {
max-height: 160px;
object-fit: contain;
}
/* ── Category page: Product card improvements ── */
/* Product name: bigger, bolder */
.product-item-link {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
color: #1f2937;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-item-link:hover {
color: var(--sapi-primary);
}
/* Price on category: excl-tax first, bigger */
.product-item .price-container.price-excluding-tax .price,
.product-item .price-wrapper.price-excluding-tax .price {
font-size: 0.95rem;
font-weight: 700;
color: var(--sapi-primary);
}
.product-item .price-container.price-including-tax .price,
.product-item .price-wrapper.price-including-tax .price {
font-size: 0.7rem;
font-weight: 400;
color: #9ca3af;
}
.product-item .price-container.price-including-tax .price-label {
display: inline !important;
font-size: 0.55rem;
color: #9ca3af;
}
/* Meta info row (tax, shipping, delivery) */
.sapi-list-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.35rem;
padding-top: 0.35rem;
border-top: 1px solid #f3f4f6;
}
.sapi-list-meta-item {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: 0.68rem;
color: #9ca3af;
line-height: 1.3;
}
.sapi-list-meta-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
color: #d1d5db;
}
/* Delivery: green accent */
.sapi-list-meta-delivery {
color: #059669;
}
.sapi-list-meta-delivery .sapi-list-meta-icon {
color: #059669;
}
/* Stock status on category cards */
.product-item .stock.available {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.68rem;
font-weight: 600;
color: #059669;
}
.product-item .stock.available::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: #059669;
flex-shrink: 0;
}
.product-item .stock.unavailable {
font-size: 0.68rem;
color: #ef4444;
}
/* ============================================================
CATEGORY PAGE - Unified Filter Card + Pill Design
============================================================ */
/* Unified filter card (single rounded container) */
.sapi-filter-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
margin-bottom: 1.25rem;
}
.sapi-filter-card-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sapi-dark);
padding: 0.75rem 1rem;
border-bottom: 1px solid #f3f4f6;
margin: 0;
}
.sapi-filter-card-title svg {
color: var(--sapi-primary);
flex-shrink: 0;
}
/* Filter group (one per attribute) */
.sapi-filter-group {
border-bottom: 1px solid #f3f4f6;
}
.sapi-filter-group:last-child {
border-bottom: none;
}
.sapi-filter-group-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.625rem 1rem;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.sapi-filter-group-toggle:hover {
background: #fafafa;
}
.sapi-filter-group-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--sapi-dark);
}
.sapi-filter-chevron {
width: 14px;
height: 14px;
color: #9ca3af;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.sapi-filter-chevron--open {
transform: rotate(180deg);
}
.sapi-filter-group-options {
padding: 0 1rem 0.75rem;
}
/* Pill container */
.sapi-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
/* Individual pill */
.sapi-pill {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 500;
color: #374151;
background: #f9fafb;
border: 1px solid #e5e7eb;
cursor: pointer;
text-decoration: none;
transition: all 0.15s ease;
white-space: nowrap;
line-height: 1.4;
}
.sapi-pill:hover {
background: #e5e7eb;
border-color: #d1d5db;
color: #1f2937;
}
/* Active/selected pill */
.sapi-pill--active {
background: var(--sapi-primary);
border-color: var(--sapi-primary);
color: #fff;
}
.sapi-pill--active:hover {
background: #a80029;
border-color: #a80029;
color: #fff;
}
.sapi-pill-remove {
width: 12px;
height: 12px;
opacity: 0.8;
flex-shrink: 0;
}
/* Disabled pill (zero count) */
.sapi-pill--disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Pill count */
.sapi-pill-count {
font-size: 0.6rem;
color: #9ca3af;
}
.sapi-pill--active .sapi-pill-count {
color: rgba(255,255,255,0.7);
}
/* Active filters row (at top of card) */
.sapi-active-filters {
padding: 0.625rem 1rem;
border-bottom: 1px solid #f3f4f6;
background: #fefce8;
}
.sapi-active-pills {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-bottom: 0.375rem;
}
.sapi-filter-clear {
font-size: 0.65rem;
color: var(--sapi-text-muted);
text-decoration: underline;
cursor: pointer;
transition: color 0.15s;
}
.sapi-filter-clear:hover {
color: var(--sapi-primary);
}
/* AJAX loading: Skeleton product grid */
.sapi-skeleton-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
padding: 0.5rem 0;
}
@media (min-width: 640px) {
.sapi-skeleton-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.sapi-skeleton-grid { grid-template-columns: repeat(4, 1fr); }
}
.sapi-skeleton-card {
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 8px;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sapi-skeleton-img {
aspect-ratio: 1 / 1;
border-radius: 6px;
width: 100%;
}
.sapi-skeleton-title {
height: 14px;
width: 85%;
}
.sapi-skeleton-title-short {
height: 14px;
width: 55%;
}
.sapi-skeleton-price {
height: 18px;
width: 35%;
margin-top: 0.25rem;
}
/* Hide old sidebar default styling (border/background) */
.catalog-category-view .sidebar .block.filter {
border: none;
background: none;
padding: 0;
margin: 0;
}
.catalog-category-view .sidebar .block-title {
display: none;
}
/* Category page title - smaller */
.catalog-category-view .page-title,
.catalog-category-view h1 {
font-size: 1.1rem !important;
}
@media (min-width: 768px) {
.catalog-category-view .page-title,
.catalog-category-view h1 {
font-size: 1.25rem !important;
}
}
/* Cart buttons — keep icon + text on a single line on every viewport.
Covers both category-list items AND the PDP add-to-cart button. */
button[data-addto="cart"],
#product-addtocart-button,
.product-item button[type="submit"],
.product-item .tocart {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem !important;
white-space: nowrap !important;
}
button[data-addto="cart"] > svg,
#product-addtocart-button > svg,
.product-item button[type="submit"] > svg,
.product-item .tocart > svg {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
button[data-addto="cart"] > span,
#product-addtocart-button > span,
.product-item button[type="submit"] > span,
.product-item .tocart > span {
display: inline !important;
white-space: nowrap !important;
line-height: 1.2;
min-width: 0;
}
/* Mobile category page - compact buy button & cards */
@media (max-width: 767px) {
.product-item .btn-primary,
.product-item .tocart,
.product-item button[type="submit"],
.product-item button[data-addto="cart"] {
font-size: 0.65rem !important;
padding: 0.35rem 0.5rem !important;
white-space: nowrap !important;
line-height: 1.2;
/* Force single-line inline-flex layout for icon + text */
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
min-width: 0;
}
/* SVG icon — keep small on mobile so it fits beside the text */
.product-item .btn-primary svg,
.product-item .tocart svg,
.product-item button[type="submit"] svg,
.product-item button[data-addto="cart"] svg {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Text span — stay inline, no wrap, allow ellipsis only if truly overflowing */
.product-item .btn-primary > span,
.product-item .tocart > span,
.product-item button[type="submit"] > span,
.product-item button[data-addto="cart"] > span {
display: inline !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.product-item.card {
padding: 0.3rem !important;
}
.product-info .product-item-link,
.product-info .text-lg {
font-size: 0.9rem !important;
}
.price-container.price-excluding-tax .price,
.price-wrapper.price-excluding-tax .price {
font-size: 0.72rem !important;
}
.price-container.price-including-tax .price,
.price-wrapper.price-including-tax .price {
font-size: 0.55rem !important;
}
}
/* ============================================================
FORMS - Clean inputs
============================================================ */
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
border-radius: 6px;
border: 1px solid #d1d5db;
font-size: 0.82rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--sapi-primary);
box-shadow: 0 0 0 2px rgba(199,0,50,0.1);
outline: none;
}
/* ============================================================
MESSAGES / ALERTS
============================================================ */
.message.success {
background-color: #ecfdf5;
border: 1px solid #a7f3d0;
color: #065f46;
border-radius: var(--sapi-radius);
padding: 0.75rem 1rem;
font-size: 0.82rem;
}
.message.error {
background-color: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
border-radius: var(--sapi-radius);
padding: 0.75rem 1rem;
font-size: 0.82rem;
}
.message.notice,
.message.info {
background-color: #eff6ff;
border: 1px solid #bfdbfe;
color: #1e40af;
border-radius: var(--sapi-radius);
padding: 0.75rem 1rem;
font-size: 0.82rem;
}
/* ============================================================
HIDE PRICE / PREIS AUF ANFRAGE
============================================================ */
.sapi-hideprice-notice {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #fff5f7 0%, #fff 60%);
border: 2px solid var(--sapi-primary);
border-radius: var(--sapi-radius);
font-size: 1rem;
font-weight: 700;
color: var(--sapi-primary);
}
.sapi-hideprice-notice svg {
flex-shrink: 0;
color: var(--sapi-primary);
}
/* Amasty HidePrice: restyle framework-injected elements to match SAPI design.
The pricing plugin injects these at the framework level (aroundRender)
with inline styles, so we use !important to override. */
.amasty-hide-price-container {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 0.4rem 1rem !important;
margin: 0 !important;
background: transparent !important;
border: 2px solid var(--sapi-primary) !important;
border-radius: 9999px !important;
color: var(--sapi-primary) !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-decoration: none !important;
cursor: default !important;
text-align: center !important;
}
.amasty-hide-price-text {
font-size: inherit !important;
color: inherit !important;
}
.amasty-hide-price-image {
max-width: 20px !important;
max-height: 20px !important;
}
/* Hide Amasty's jQuery-injected replacement button + old form */
.amasty-hide-price-button {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.5rem 1.25rem !important;
margin: 0 !important;
background: var(--sapi-primary) !important;
border: none !important;
border-radius: 9999px !important;
color: #fff !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background 0.2s, transform 0.15s !important;
}
.amasty-hide-price-button:hover {
background: #a50029 !important;
transform: translateY(-1px) !important;
}
/* Hide Amasty's old jQuery/FancyBox form — SAPI uses Alpine.js modal */
.amhideprice-form,
.fancyambox-stage,
.fancyambox-overlay {
display: none !important;
}
/* Hide the hidden span marker injected by generateJsHideOnCategory */
[data-role="amhideprice-hide-button"] {
display: none !important;
}
/* ============================================================
SAPI MODAL SYSTEM
Reusable frosted-glass modal for quote requests, confirmations, etc.
Usage: .sapi-modal-backdrop > .sapi-modal
============================================================ */
/* Backdrop: frosted glass overlay */
.sapi-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
}
.sapi-modal-frost {
position: absolute;
inset: 0;
background: rgba(30, 37, 48, 0.45);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
backdrop-filter: blur(12px) saturate(1.2);
}
/* Modal box */
.sapi-modal {
position: relative;
z-index: 1;
background: #fff;
border-radius: 1rem;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04),
0 8px 40px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06);
width: 100%;
max-width: 26rem;
max-height: calc(100vh - 3rem);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Enter animation */
.sapi-modal[x-transition\:enter] {
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sapi-modal-enter-from {
opacity: 0;
transform: scale(0.92) translateY(8px);
}
.sapi-modal-enter-to {
opacity: 1;
transform: scale(1) translateY(0);
}
/* Leave animation */
.sapi-modal-leave-from {
opacity: 1;
transform: scale(1) translateY(0);
}
.sapi-modal-leave-to {
opacity: 0;
transform: scale(0.95) translateY(4px);
}
/* Modal header */
.sapi-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.25rem 1.5rem 0;
}
.sapi-modal-header h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--sapi-dark);
line-height: 1.3;
}
.sapi-modal-header p {
font-size: 0.8rem;
color: #9ca3af;
margin-top: 0.2rem;
}
/* Close button */
.sapi-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
margin: -0.25rem -0.5rem 0 0;
}
.sapi-modal-close:hover {
background: #f3f4f6;
color: var(--sapi-dark);
}
/* Modal body */
.sapi-modal-body {
padding: 1rem 1.5rem 1.5rem;
}
/* Form elements inside modal */
.sapi-modal-body .sapi-form-group {
margin-bottom: 0.75rem;
}
.sapi-modal-body .sapi-form-label {
display: block;
font-size: 0.78rem;
font-weight: 600;
color: #374151;
margin-bottom: 0.3rem;
}
.sapi-modal-body .sapi-form-label .sapi-required {
color: var(--sapi-primary);
margin-left: 0.15rem;
}
.sapi-modal-body .sapi-form-input {
display: block;
width: 100%;
padding: 0.55rem 0.75rem;
font-size: 0.85rem;
color: var(--sapi-dark);
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.sapi-modal-body .sapi-form-input:focus {
border-color: var(--sapi-primary);
box-shadow: 0 0 0 3px rgba(199, 0, 50, 0.08);
background: #fff;
}
.sapi-modal-body textarea.sapi-form-input {
resize: vertical;
min-height: 4.5rem;
}
.sapi-modal-body .sapi-form-error {
font-size: 0.78rem;
color: #dc2626;
margin-top: 0.5rem;
}
/* Submit button in modal */
.sapi-modal-body .sapi-modal-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.65rem 1.25rem;
margin-top: 1rem;
font-size: 0.9rem;
font-weight: 700;
color: #fff;
background: var(--sapi-primary);
border: none;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.sapi-modal-body .sapi-modal-submit:hover {
background: #a80029;
}
.sapi-modal-body .sapi-modal-submit:active {
transform: scale(0.98);
}
/* Success state */
.sapi-modal-success {
text-align: center;
padding: 2rem 1.5rem;
}
.sapi-modal-success svg {
margin: 0 auto 0.75rem;
}
.sapi-modal-success .sapi-modal-success-title {
font-size: 1.05rem;
font-weight: 700;
color: #059669;
}
.sapi-modal-success .sapi-modal-success-text {
font-size: 0.85rem;
color: #6b7280;
margin-top: 0.35rem;
}
/* Responsive: slightly larger on desktop */
@media (min-width: 768px) {
.sapi-modal {
max-width: 28rem;
}
}
/* ============================================================
MOBILE OPTIMIZATIONS
============================================================ */
@media (max-width: 767px) {
.sapi-nav-link {
padding: 0.4rem 0.5rem;
font-size: 0.62rem;
}
.products.wrapper.mode-grid ul {
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem;
}
.card.card-interactive,
.product-item.card {
padding: 0.5rem;
}
.product-info .product-item-link,
.product-info .text-lg {
font-size: 0.85rem !important;
}
/* Compact price on mobile */
.price-wrapper.price-excluding-tax .price,
.price-container.price-excluding-tax .price {
font-size: 0.9rem;
}
.price-box .final-price-excl-tax .price,
.price-box .price-excl-tax .price {
font-size: 1.25rem;
}
}
/* ============================================================
HIDE LUMA FALLBACK ELEMENTS
============================================================ */
.panel.header,
.header.links,
.panel.wrapper,
.nav-sections,
.nav-sections-items,
nav.navigation,
.minicart-wrapper:not(.sapi-header .minicart-wrapper) {
display: none !important;
}
.product-options-bottom {
display: none !important;
}
/* ============================================================
CART DRAWER - Buttons, icons, layout fixes
============================================================ */
/* Secondary button (View and Edit Cart) */
#cart-drawer .btn-secondary,
#cart-drawer .btn.btn-secondary {
background-color: var(--sapi-dark) !important;
border-color: var(--sapi-dark) !important;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
}
#cart-drawer .btn-secondary:hover {
background-color: #2a3340 !important;
border-color: #2a3340 !important;
}
/* Edit/Delete icon buttons */
#cart-drawer .btn.p-2,
#cart-drawer button.btn.p-2 {
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 6px;
color: var(--sapi-text);
padding: 6px !important;
transition: all 0.15s;
}
#cart-drawer .btn.p-2:hover {
background: #fee2e2;
border-color: #fca5a5;
color: var(--sapi-primary);
}
#cart-drawer .btn.p-2 svg {
width: 16px;
height: 16px;
}
/* Cart item layout — stack price below product name */
#cart-drawer li .grow > .flex.gap-2 {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem !important;
}
/* Product name */
#cart-drawer li .text-lg {
font-size: 0.85rem;
line-height: 1.3;
}
/* --- Cart Drawer Item Prices ---
sidebar.phtml outputs: .price-wrapper.price-including-tax + .price-wrapper.price-excluding-tax
Container uses .sapi-drawer-price (NOT .price-box) to avoid Hyva's global price rules
that force same font-size/weight on all prices via CSS variables. */
.sapi-drawer-price {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0 !important;
}
/* Excl. tax = PRIMARY (bold, branded) — first via order:-1 */
.sapi-drawer-price .price-wrapper.price-excluding-tax,
.sapi-drawer-price .price-excluding-tax {
order: -1;
display: block !important;
}
.sapi-drawer-price .price-excluding-tax .price {
font-size: 0.88rem !important;
font-weight: 700 !important;
color: var(--sapi-primary) !important;
}
.sapi-drawer-price .price-excluding-tax .price::after {
content: ' netto' !important;
display: inline !important;
font-size: 0.55rem;
font-weight: 400;
color: #9ca3af;
vertical-align: middle;
}
/* Incl. tax = SECONDARY (smaller, muted) — second via order:1 */
.sapi-drawer-price .price-wrapper.price-including-tax,
.sapi-drawer-price .price-including-tax {
order: 1;
display: block !important;
}
.sapi-drawer-price .price-including-tax .price {
font-size: 0.7rem !important;
font-weight: 400 !important;
color: #9ca3af !important;
}
.sapi-drawer-price .price-including-tax .price::after {
content: ' inkl. MwSt.' !important;
display: inline !important;
font-size: 0.5rem;
font-weight: 400;
color: #c0c5cc;
}
/* Kill ALL pseudo-labels (data-label ::before/::after) on wrappers */
.sapi-drawer-price .price-wrapper::before,
.sapi-drawer-price .price-wrapper::after,
.sapi-drawer-price .price-excluding-tax::before,
.sapi-drawer-price .price-excluding-tax::after,
.sapi-drawer-price .price-including-tax::before,
.sapi-drawer-price .price-including-tax::after {
display: none !important;
content: none !important;
}
/* Re-enable only .price::after (our custom labels) */
.sapi-drawer-price .price-excluding-tax .price::after,
.sapi-drawer-price .price-including-tax .price::after {
display: inline !important;
}
/* Hide Hyva price-label spans */
.sapi-drawer-price .price-label {
display: none !important;
}
/* Remove any inherited padding/margin on price spans */
.sapi-drawer-price .price {
padding: 0 !important;
margin: 0 !important;
text-indent: 0 !important;
}
/* --- Cart Drawer Subtotal with Tax Breakdown --- */
.sapi-drawer-subtotal {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 0.75rem;
border-top: 2px solid var(--sapi-dark);
}
.sapi-drawer-subtotal-row {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.sapi-drawer-subtotal-excl {
font-weight: 700;
font-size: 0.95rem;
color: var(--sapi-text, #1e2530);
}
.sapi-drawer-subtotal-excl .sapi-drawer-subtotal-value,
.sapi-drawer-subtotal-excl .sapi-drawer-subtotal-value .price {
color: var(--sapi-primary);
font-weight: 700;
font-size: 1rem;
}
.sapi-drawer-subtotal-incl {
font-weight: 400;
font-size: 0.75rem;
color: #9ca3af;
}
.sapi-drawer-subtotal-incl .sapi-drawer-subtotal-value,
.sapi-drawer-subtotal-incl .sapi-drawer-subtotal-value .price {
color: #9ca3af;
font-weight: 400;
font-size: 0.75rem;
}
.sapi-tax-hint {
font-weight: 400;
font-size: 0.65rem;
color: #9ca3af;
}
.sapi-drawer-subtotal-excl .sapi-tax-hint {
color: #6b7280;
}
/* Options detail list */
#cart-drawer dl.table {
font-size: 0.75rem;
}
/* Cart item image */
#cart-drawer li img {
border-radius: 16px;
border: 1px solid #f0f0f0;
}
/* Empty cart icon */
#cart-drawer .text-fg\/30 {
color: #d1d5db;
}
/* Drawer padding */
#cart-drawer {
padding: 1.25rem;
}
/* Title */
#cart-drawer #cart-drawer-title {
font-size: 1.1rem;
}
/* ============================================================
MISC
============================================================ */
#smartsupp-widget-container {
z-index: 100 !important;
}
.sapi-mega-dropdown::-webkit-scrollbar {
width: 4px;
}
.sapi-mega-dropdown::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 2px;
}
.prolabels-wrapper {
position: relative;
}
/* Loading spinner / skeleton */
[x-cloak] {
display: none !important;
}
/* ============================================================
2026 UX DESIGN PRINCIPLES
============================================================ */
/* --- Focus-visible: accessible keyboard navigation --- */
*:focus-visible {
outline: 2px solid var(--sapi-primary);
outline-offset: 2px;
border-radius: 4px;
}
/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
outline: none;
}
/* --- Smooth scroll + prevent horizontal overflow from full-bleed sections --- */
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --- Micro-interactions: button press feedback --- */
.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active {
transform: scale(0.97);
box-shadow: none;
}
/* --- Touch feedback for mobile --- */
@media (max-width: 767px) {
a, button {
-webkit-tap-highlight-color: transparent;
}
.product-item.card:active,
.card.card-interactive:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
}
/* --- Subtle depth: soft glow on interactive elements --- */
.btn-primary:focus-visible {
box-shadow: 0 0 0 4px rgba(199, 0, 50, 0.2);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
box-shadow: 0 0 0 3px rgba(199, 0, 50, 0.1);
}
/* --- Performance: font-display swap --- */
@font-face {
font-display: swap;
}
/* --- Glassmorphism: functional frosted overlays (2026 trend) --- */
.sapi-mobile-menu,
.sapi-mobile-search {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.97);
}
/* Enhanced backdrop blur for drawers */
.sapi-mobile-menu ~ .fixed[class*="bg-black"],
.fixed.bg-black\/50 {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* --- Progressive disclosure on product cards (hover reveals more) --- */
@media (min-width: 768px) {
.product-item.card .product-item-inner,
.card.card-interactive .product-item-inner {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.product-item.card:hover .product-item-inner,
.card.card-interactive:hover .product-item-inner {
max-height: 80px;
opacity: 1;
}
}
/* --- Skeleton loading placeholders --- */
.sapi-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: sapi-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes sapi-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* --- Enhanced card hover: subtle glow + lift --- */
.product-item.card:hover,
.card.card-interactive:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(199, 0, 50, 0.06);
}
/* --- Category card glassmorphism overlay --- */
.sapi-category-card .absolute.bottom-0 {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}
/* --- Better visual hierarchy for section headings --- */
.sapi-category-grid h2,
.sapi-why-section h2,
.block.widget .block-title strong {
letter-spacing: -0.01em;
}
/* --- Warm, organic border-radius on key elements --- */
/* Tile rounded corners (not hero slider — hero is edge-to-edge) */
.sapi-category-card,
.sapi-menu-tile {
border-radius: 12px;
}
/* ============================================================
SWISSUP SOLD TOGETHER - Frequently Bought Together
============================================================ */
.soldtogether-block {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
padding: 1.5rem;
margin: 1.5rem 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.soldtogether-block .amazonstyle-images {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.25rem;
flex-wrap: wrap;
padding: 0;
margin: 1rem 0;
list-style: none;
}
.soldtogether-block .amazonstyle-images .item {
flex: 0 0 auto;
max-width: 100px;
text-align: center;
}
.soldtogether-block .amazonstyle-images .item img {
max-width: 80px;
max-height: 80px;
object-fit: contain;
border-radius: var(--sapi-radius-sm);
border: 1px solid var(--sapi-border);
padding: 4px;
background: #fff;
}
.soldtogether-block .amazonstyle-images .plus {
font-size: 1.25rem;
font-weight: 700;
color: #9ca3af;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
}
.soldtogether-block .amazonstyle-images .plus::before {
content: "+";
}
.soldtogether-block .amazonstyle-checkboxes {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--sapi-border);
}
.soldtogether-block .product-items-list {
list-style: none;
padding: 0;
margin: 0 0 1rem 0;
}
.soldtogether-block .product-items-list .product-item-details {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
font-size: 0.78rem;
border-bottom: 1px solid var(--sapi-border-light);
flex-wrap: wrap;
}
.soldtogether-block .product-items-list .product-item-details:last-child {
border-bottom: none;
}
.soldtogether-block .product-items-list .checkbox {
width: 1rem;
height: 1rem;
accent-color: var(--sapi-primary);
flex-shrink: 0;
}
.soldtogether-block .product-items-list .product-item-name {
font-size: 0.78rem;
font-weight: 600;
}
.soldtogether-block .product-items-list .product-item-name a {
color: var(--sapi-text);
}
.soldtogether-block .product-items-list .product-item-name a:hover {
color: var(--sapi-primary);
}
.soldtogether-block .product-items-list .price-box {
flex-direction: row !important;
gap: 0.5rem;
align-items: baseline;
}
.soldtogether-block .product-items-list .price-box .price {
font-size: 0.78rem;
}
/* Add All to Cart button */
.soldtogether-block .soldtogether-cart-btn,
.soldtogether-block .button-cart .action.primary {
background-color: var(--sapi-primary) !important;
border-color: var(--sapi-primary) !important;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
font-size: 0.8rem;
padding: 0.6rem 1.25rem;
cursor: pointer;
transition: all 0.15s ease;
}
.soldtogether-block .soldtogether-cart-btn:hover,
.soldtogether-block .button-cart .action.primary:hover {
background-color: var(--sapi-primary-dark) !important;
border-color: var(--sapi-primary-dark) !important;
}
.soldtogether-block .totalprice {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: 0.85rem;
}
.soldtogether-block .totalprice .price-label {
font-weight: 600;
color: var(--sapi-text);
}
.soldtogether-block .totalprice .price {
font-weight: 700;
color: var(--sapi-primary);
font-size: 1.1rem;
}
.soldtogether-block .details-toggler {
font-size: 0.7rem;
color: var(--sapi-primary);
text-decoration: underline;
cursor: pointer;
}
.soldtogether-block .details-wrapper {
background: #fff;
border: 1px solid var(--sapi-border);
border-radius: 6px;
padding: 0.75rem;
margin-top: 0.5rem;
font-size: 0.78rem;
}
.soldtogether-block .details-wrapper select {
font-size: 0.78rem;
padding: 0.3rem 0.5rem;
border-radius: var(--sapi-radius-sm);
border: 1px solid #d1d5db;
}
/* ============================================================
SWISSUP SOLD TOGETHER - Carousel
============================================================ */
.soldtogether-swiper {
background: var(--sapi-bg-light);
border: 1px solid var(--sapi-border);
border-radius: var(--sapi-radius);
padding: 1.25rem;
margin: 1.5rem 0;
}
.soldtogether-swiper .block-title strong {
font-size: 1rem;
font-weight: 700;
color: var(--sapi-text);
}
.soldtogether-swiper .swiper-container {
overflow: hidden;
position: relative;
padding: 0.5rem 0;
}
.soldtogether-swiper .item.product-item {
padding: 0.5rem;
}
.soldtogether-swiper .product-item-info {
background: #fff;
border: 1px solid var(--sapi-border);
border-radius: 25px;
padding: 0.75rem;
text-align: center;
transition: box-shadow 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.soldtogether-swiper .product-item-info:hover {
box-shadow: var(--sapi-shadow-md);
}
.soldtogether-swiper .product-item-photo img {
max-height: 120px;
width: auto;
margin: 0 auto;
object-fit: contain;
}
.soldtogether-swiper .product-item-name {
font-size: 0.72rem;
line-height: 1.3;
margin: 0.5rem 0 0.25rem;
}
.soldtogether-swiper .product-item-name a {
color: var(--sapi-text);
font-weight: 600;
}
.soldtogether-swiper .product-item-name a:hover {
color: var(--sapi-primary);
}
.soldtogether-swiper .product-item-details .price-box {
justify-content: center;
align-items: center;
}
.soldtogether-swiper .product-item-details .price {
font-size: 0.82rem;
}
.soldtogether-swiper .field.choice {
margin-top: 0.5rem;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
}
.soldtogether-swiper .field.choice .checkbox {
width: 0.9rem;
height: 0.9rem;
accent-color: var(--sapi-primary);
}
.soldtogether-swiper .swiper-button-prev,
.soldtogether-swiper .swiper-button-next {
width: 2rem;
height: 2rem;
background: #fff;
border: 1px solid var(--sapi-border);
border-radius: 50%;
box-shadow: var(--sapi-shadow);
}
.soldtogether-swiper .swiper-button-prev::after,
.soldtogether-swiper .swiper-button-next::after {
font-size: 0.75rem;
color: var(--sapi-text);
}
/* ============================================================
SWISSUP HIGHLIGHT / WIDGET CAROUSELS
============================================================ */
.block.widget .block-title strong,
.block-carousel .block-title strong,
.block-products-list .block-title strong {
font-size: 1rem;
font-weight: 700;
color: var(--sapi-text);
}
.swiper-container,
.highlight-carousel {
overflow: hidden;
}
/* ============================================================
HOMEPAGE - Content from CMS
============================================================ */
/* USP benefit items from CMS content */
.benefit-items,
.pagebuilder-column-group {
gap: 1rem;
}
/* Category images grid (EasyCatalogImg) */
.easycatalogimg {
margin: 2rem 0;
}
.easycatalogimg .category-item {
border-radius: var(--sapi-radius);
overflow: hidden;
border: 1px solid var(--sapi-border);
transition: all 0.2s ease;
}
.easycatalogimg .category-item:hover {
box-shadow: var(--sapi-shadow-md);
transform: translateY(-2px);
}
.easycatalogimg .category-item .category-name {
font-size: 0.82rem;
font-weight: 600;
padding: 0.75rem;
}
/* ============================================================
TABLES - Clean data tables
============================================================ */
table {
border-collapse: collapse;
width: 100%;
}
table th {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sapi-text-muted);
padding: 0.5rem 0.75rem;
border-bottom: 2px solid var(--sapi-border);
text-align: left;
}
table td {
font-size: 0.82rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--sapi-border-light);
color: var(--sapi-text);
}
table tr:hover td {
background-color: var(--sapi-bg-light);
}
/* ============================================================
ACCOUNT PAGES
============================================================ */
.account .sidebar-main .nav.item a {
font-size: 0.82rem;
padding: 0.4rem 0;
color: var(--sapi-text-muted);
transition: color 0.1s;
}
.account .sidebar-main .nav.item a:hover,
.account .sidebar-main .nav.item.current a {
color: var(--sapi-primary);
font-weight: 600;
}
/* ============================================================
CHECKOUT / CART
============================================================ */
.cart-summary {
background: var(--sapi-bg-light);
border: 1px solid var(--sapi-border);
border-radius: var(--sapi-radius);
padding: 1.5rem;
}
/* ============================================================
SCROLLBAR STYLING
============================================================ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* ============================================================
FOOTER CMS BLOCK STYLING - Classes from CMS blocks
============================================================ */
/* Contact bar — headline left, methods right */
.footer-contacts {
background-color: var(--sapi-dark-light) !important;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
max-width: 1280px;
margin: 0 auto;
}
.footer-contacts__intro {
text-align: left;
margin-bottom: 0;
flex-shrink: 0;
}
.footer-contacts__headline {
color: #d1d5db;
font-size: 0.95rem;
font-weight: 400;
margin: 0;
line-height: 1.4;
}
.footer-contacts__headline-strong {
color: #fff;
font-weight: 700;
font-size: 1.1rem;
display: block;
}
.footer-contacts__methods {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.footer-contacts__method {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
transition: background 0.2s;
}
.footer-contacts__method:hover {
background: rgba(255,255,255,0.06);
}
.footer-contacts__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.footer-contacts__icon svg {
width: 32px;
height: 32px;
}
.footer-contacts__text {
font-size: 0.82rem;
font-weight: 600;
}
.footer-contacts__text a {
color: #fff !important;
white-space: nowrap;
}
.footer-contacts__text a:hover {
color: var(--sapi-primary) !important;
}
/* Mobile: stack vertically */
@media (max-width: 767px) {
.footer-contacts {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 1.25rem 1rem;
}
.footer-contacts__intro {
text-align: center;
}
.footer-contacts__headline-strong {
display: inline;
}
.footer-contacts__methods {
justify-content: center;
gap: 1rem;
}
}
/* Main footer structure */
.site-footer {
color: #d1d5db;
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
/* Footer columns - top */
.footer-top {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 2.5rem 0 2rem;
}
@media (min-width: 768px) {
.footer-top {
grid-template-columns: repeat(4, 1fr);
}
}
.footer-col {
min-width: 0;
}
.footer-heading {
color: #fff !important;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Footer link list */
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-link {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0;
}
/* Footer link arrow icons - fix sizing */
.footer-link__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.footer-link__icon svg {
width: 10px !important;
height: 10px !important;
fill: var(--sapi-primary);
opacity: 0.7;
}
.footer-link a {
font-size: 0.75rem;
color: #9ca3af !important;
transition: color 0.15s;
}
.footer-link a:hover {
color: #fff !important;
}
/* Contact lines in footer */
.contact-line {
font-size: 0.75rem;
padding: 0.15rem 0;
color: #9ca3af;
}
.contact-line a {
color: #d1d5db !important;
}
.contact-line a:hover {
color: #fff !important;
}
/* Footer bottom row */
.footer-bottom {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 2rem 0;
border-top: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
.footer-bottom {
grid-template-columns: repeat(4, 1fr);
}
}
.footer-bottom-col {
min-width: 0;
}
/* Payment/shipping logos */
.footer-logos {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
}
.footer-logos img {
max-height: 32px !important;
width: auto;
background: rgba(255,255,255,0.95);
border-radius: 4px;
padding: 5px 8px;
filter: none !important;
opacity: 1;
transition: all 0.15s;
}
.footer-logos img:hover {
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Trust points in footer */
.trust-points {
list-style: none;
padding: 0;
margin: 0;
}
.trust-points li {
font-size: 0.72rem;
padding: 0.2rem 0;
color: #9ca3af;
display: flex;
align-items: center;
gap: 0.4rem;
}
.trust-points li::before {
content: "";
width: 6px;
height: 6px;
background: var(--sapi-emerald);
border-radius: 50%;
flex-shrink: 0;
}
/* Trust badge */
.footer-trust-badge {
text-align: center;
}
.footer-trust-badge img {
max-width: 120px;
filter: none !important;
opacity: 0.9;
}
/* ============================================================
CATEGORY PAGE - Uniform product images
============================================================ */
/* Force all product images to same aspect ratio */
.product-item-photo,
.product-image-container {
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
border-radius: 25px;
overflow: hidden;
}
.product-item-photo img,
.product-image-photo {
width: 100%;
height: 100%;
object-fit: contain;
max-height: 100%;
mix-blend-mode: multiply;
}
/* ============================================================
HOMEPAGE - Compact product tiles & category separation
============================================================ */
/* Swissup Highlight product widgets - compact cards */
.block.widget .products-grid .product-item,
.highlight-carousel .product-item,
.block-products-list .product-item {
max-width: 220px;
}
/* Widget section titles with visual separator */
.block.widget .block-title,
.block-carousel .block-title,
.block-products-list .block-title {
border-bottom: 2px solid var(--sapi-primary);
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
/* Homepage category sections - visual separation */
.cms-index-index .block.widget,
.cms-index-index .block-products-list {
margin: 1.5rem 0;
padding: 1.5rem 0;
border-top: 1px solid var(--sapi-border);
}
.cms-index-index .block.widget:first-child {
border-top: none;
}
/* EasyCatalogImg categories - card style */
.easycatalogimg .category-item,
.block-subcategories .category-item {
background: var(--sapi-bg-light);
border: 1px solid var(--sapi-border);
border-radius: var(--sapi-radius);
padding: 1rem;
transition: all 0.2s ease;
}
.easycatalogimg .category-item:hover,
.block-subcategories .category-item:hover {
border-color: var(--sapi-primary);
box-shadow: var(--sapi-shadow-md);
transform: translateY(-2px);
}
/* Homepage H1 - professional */
.cms-index-index h1 {
font-size: 1.25rem !important;
font-weight: 700;
color: var(--sapi-text);
margin: 1rem 0;
line-height: 1.3;
}
/* ============================================================
MEGA MENU - Glass tile dropdown (desktop)
============================================================ */
/* Full-width dropdown with tile grid */
.sapi-mega-dropdown {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 50;
background: #fff;
border-top: 3px solid var(--sapi-primary);
box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
border-radius: 0 0 10px 10px;
padding: 1.25rem;
max-height: 80vh;
overflow-y: auto;
}
/* Subcategory tile grid — flexbox so partial/short rows stay centered.
(A grid of 1fr columns always fills the width, so menus with fewer than a
full row left-align. Flex + justify-content:center centers them instead.)
--sapi-tile-cols controls tiles per row; each tile's width is derived from it. */
.sapi-mega-dropdown .sapi-mega-tiles,
.sapi-mega-tiles {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 4px;
box-sizing: border-box;
--sapi-tile-cols: 6;
}
.sapi-mega-tiles > .sapi-mega-tile {
flex: 0 0 calc((100% - (var(--sapi-tile-cols) - 1) * 16px) / var(--sapi-tile-cols));
max-width: calc((100% - (var(--sapi-tile-cols) - 1) * 16px) / var(--sapi-tile-cols));
}
@media (max-width: 1280px) {
.sapi-mega-dropdown .sapi-mega-tiles,
.sapi-mega-tiles { --sapi-tile-cols: 5; }
}
@media (max-width: 1080px) {
.sapi-mega-dropdown .sapi-mega-tiles,
.sapi-mega-tiles { --sapi-tile-cols: 4; }
}
/* Premium Strahlmittel von Sapi menu only: 8 children laid out as 4 + 4.
Higher specificity (two classes) so it beats the responsive rules above. */
.sapi-mega-dropdown .sapi-mega-tiles.sapi-mega-tiles--four {
--sapi-tile-cols: 4;
max-width: 880px;
}
/* Individual tile: image on top, label below — fills its grid cell */
.sapi-mega-tile {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-width: 0;
text-decoration: none;
transition: transform 0.2s ease;
}
.sapi-mega-tile:hover {
transform: translateY(-3px);
}
.sapi-mega-tile:hover .sapi-mega-tile-visual {
box-shadow: 0 8px 24px rgba(0,0,0,0.14);
border-color: var(--sapi-primary);
}
/* Image area: fixed aspect ratio container */
.sapi-mega-tile-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
background: #f9fafb;
border: 1px solid #e5e7eb;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Override dark inline gradients — keep tiles light */
.sapi-mega-tile .sapi-tile-gradient {
background: #f3f4f6 !important;
position: absolute;
inset: 0;
}
/* Label below tile image */
.sapi-mega-tile-name {
display: block;
text-align: center;
font-size: 0.78rem;
font-weight: 600;
color: #1f2937;
padding: 6px 4px 0;
line-height: 1.3;
word-break: break-word;
}
.sapi-mega-tile:hover .sapi-mega-tile-name {
color: var(--sapi-primary);
}
/* Reuse existing .sapi-tile-img, .sapi-tile-gradient, .sapi-tile-overlay, .sapi-tile-label, .sapi-tile-text */
/* Footer in dropdown: view all link */
.sapi-mega-dropdown-footer {
margin-top: 0.75rem;
padding-top: 0.6rem;
border-top: 1px solid #f3f4f6;
text-align: center;
}
.sapi-mega-dropdown-viewall {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.78rem;
font-weight: 600;
color: var(--sapi-primary);
text-decoration: none;
padding: 0.4rem 1rem;
border-radius: 20px;
transition: all 0.15s;
}
.sapi-mega-dropdown-viewall:hover {
background: rgba(199, 0, 50, 0.06);
color: var(--sapi-primary);
}
/* SoldTogether - Customers Also Bought (SplideJS carousel) */
.sapi-also-bought .splide__arrow {
background: white;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
width: 2rem;
height: 2rem;
opacity: 1;
transition: all 0.2s ease;
}
.sapi-also-bought .splide__arrow:hover {
border-color: var(--sapi-primary, #c70032);
background: var(--sapi-primary, #c70032);
}
.sapi-also-bought .splide__arrow:hover svg {
fill: white;
}
.sapi-also-bought .splide__arrow svg {
width: 14px;
height: 14px;
fill: #374151;
}
.sapi-also-bought .splide__arrow--prev { left: -0.5rem; }
.sapi-also-bought .splide__arrow--next { right: -0.5rem; }
@media (max-width: 768px) {
.sapi-also-bought .splide__arrow { display: none; }
}
/* (Product sections styles replaced by PDP Tabs section below) */
/* ============================================================
PDP - Related & Upsell Sliders - Compact
============================================================ */
.product-slider {
margin: 1.5rem 0 !important;
}
.product-slider h2 {
font-size: 0.9rem !important;
font-weight: 700;
margin-bottom: 0.75rem;
}
/* Make slider items smaller */
.product-slider .snap-slider-item {
--snap-cols: 4;
}
.product-slider .card {
padding: 0.5rem;
}
.product-slider .product-item-photo img,
.product-slider .product-image-photo {
max-height: 140px;
object-fit: contain;
}
.product-slider .product-info .product-item-link,
.product-slider .product-info .text-lg {
font-size: 0.72rem !important;
}
.product-slider .price-box .price {
font-size: 0.78rem !important;
}
/* ============================================================
MOBILE SEARCH - Full-Screen Drawer
============================================================ */
/* Mobile search overlay */
.sapi-mobile-search {
-webkit-overflow-scrolling: touch;
}
/* Inside mobile search: make results fill remaining space */
.sapi-mobile-search .sapi-search-wrapper {
position: static;
}
.sapi-mobile-search .sapi-search-results {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 63px !important;
bottom: 0 !important;
max-height: none !important;
border-radius: 0 !important;
border: none !important;
border-top: 1px solid #e5e7eb !important;
box-shadow: none !important;
margin-top: 0 !important;
z-index: 10 !important;
}
/* Hide the search submit button in mobile drawer */
.sapi-mobile-search .sapi-search-submit,
.sapi-mobile-search .btn.btn-primary.rounded-s-none {
display: none;
}
/* Hide the frosted backdrop in mobile drawer */
.sapi-mobile-search .sapi-search-backdrop {
display: none !important;
}
/* Hide the search icon in mobile input */
.sapi-mobile-search .sapi-search-input-icon {
display: none;
}
/* Make mobile search input full-width rounded */
.sapi-mobile-search input[type="search"],
.sapi-mobile-search .sapi-search-input,
.sapi-mobile-search .form-input {
border-radius: 8px !important;
padding-left: 1rem !important;
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.2) !important;
color: #fff !important;
font-size: 0.9rem !important;
padding: 0.6rem 1rem !important;
}
.sapi-mobile-search input::placeholder {
color: rgba(255,255,255,0.5) !important;
}
.sapi-mobile-search input:focus {
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.35) !important;
box-shadow: none !important;
}
/* Hide placeholder when results are showing */
.sapi-mobile-search .sapi-search-placeholder {
pointer-events: none;
}
/* --- Search Results: Section Headers --- */
.sapi-sr-header {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.75rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
}
/* --- Search Results: Category Chips --- */
.sapi-sr-cats {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.6rem 0.75rem;
}
.sapi-sr-cat-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.45rem 0.75rem;
font-size: 0.78rem;
font-weight: 500;
color: #374151;
background: #f3f4f6;
border-radius: 20px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
min-height: 36px;
}
.sapi-sr-cat-chip:hover,
.sapi-sr-cat-chip:active {
background: var(--sapi-primary, #c70032);
color: #fff;
}
.sapi-sr-cat-chip svg {
opacity: 0.5;
}
.sapi-sr-cat-chip:hover svg,
.sapi-sr-cat-chip:active svg {
opacity: 1;
stroke: #fff;
}
/* --- Search Results: Product Grid --- */
.sapi-sr-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: #f3f4f6;
}
.sapi-sr-card {
display: flex;
gap: 0.6rem;
background: #fff;
text-decoration: none;
color: inherit;
transition: background 0.15s;
padding: 0.6rem;
}
.sapi-sr-card:active {
background: #f9fafb;
}
/* Featured product card (top-priority category) */
.sapi-sr-card--featured {
background: linear-gradient(135deg, #fff5f7 0%, #fff 70%) !important;
border-left: 3px solid var(--sapi-primary);
position: relative;
}
.sapi-sr-card--featured:hover,
.sapi-sr-card--featured:active {
background: linear-gradient(135deg, #ffe8ed 0%, #fef2f4 70%) !important;
}
/* Featured badge */
.sapi-sr-card-badge {
display: inline-flex;
align-items: center;
font-size: 0.55rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
background: var(--sapi-primary);
padding: 1px 6px;
border-radius: 3px;
line-height: 1.5;
white-space: nowrap;
}
/* Card meta row (SKU + badge) */
.sapi-sr-card-meta {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.sapi-sr-card-img {
width: 60px;
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 6px;
overflow: hidden;
border: 1px solid #f0f0f0;
}
.sapi-sr-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.sapi-sr-card-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.sapi-sr-card-name {
font-size: 0.82rem;
font-weight: 600;
color: #1f2937;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.sapi-sr-card-sku {
font-size: 0.62rem;
color: #9ca3af;
margin: 0;
}
.sapi-sr-card-price {
margin-top: auto;
}
.sapi-sr-price {
font-size: 0.88rem;
font-weight: 700;
color: var(--sapi-primary, #c70032);
}
.sapi-sr-price-tax {
font-size: 0.6rem;
color: #9ca3af;
font-weight: 400;
margin-left: 0.2rem;
}
.sapi-sr-price-incl {
font-size: 0.65rem;
color: #6b7280;
margin-top: 0.1rem;
}
.sapi-sr-price-old {
font-size: 0.7rem;
color: #9ca3af;
text-decoration: line-through;
margin-left: 0.3rem;
}
.sapi-sr-price-req {
font-size: 0.7rem;
color: #6b7280;
font-style: italic;
}
/* --- Search Results: View All Button --- */
.sapi-sr-viewall {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--sapi-primary, #c70032);
text-decoration: none;
border-top: 1px solid #f3f4f6;
background: #fff;
transition: background 0.15s;
min-height: 44px;
}
.sapi-sr-viewall:hover,
.sapi-sr-viewall:active {
background: #fef2f2;
}
/* --- Mobile search: full-screen grid adjustments --- */
.sapi-mobile-search .sapi-sr-grid {
grid-template-columns: 1fr;
gap: 1px;
}
.sapi-mobile-search .sapi-sr-card {
padding: 0.75rem;
gap: 0.75rem;
}
.sapi-mobile-search .sapi-sr-card-img {
width: 64px;
height: 64px;
}
.sapi-mobile-search .sapi-sr-card-name {
font-size: 0.85rem;
}
.sapi-mobile-search .sapi-sr-price {
font-size: 0.9rem;
}
.sapi-mobile-search .sapi-sr-cat-chip {
padding: 0.5rem 0.85rem;
font-size: 0.82rem;
min-height: 40px;
}
.sapi-mobile-search .sapi-sr-viewall {
padding: 0.85rem 1rem;
font-size: 0.85rem;
min-height: 48px;
}
/* --- Desktop: search results as compact dropdown --- */
@media (min-width: 768px) {
.sapi-search-results {
max-height: 70vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.sapi-sr-grid {
grid-template-columns: repeat(2, 1fr);
}
.sapi-sr-card {
padding: 0.65rem;
gap: 0.75rem;
}
.sapi-sr-card-img {
width: 72px;
height: 72px;
border-radius: 6px;
}
.sapi-sr-card-name {
font-size: 0.82rem;
}
.sapi-sr-price {
font-size: 0.88rem;
}
.sapi-sr-card:hover {
background: #f9fafb;
}
}
/* --- Search action button icons: ensure visibility --- */
.sapi-sr-expand-btn svg,
.sapi-sr-advanced-btn svg,
.sapi-sr-viewall svg,
.sapi-sr-close-btn svg {
display: inline-block !important;
visibility: visible !important;
width: 14px;
height: 14px;
flex-shrink: 0;
}
.sapi-sr-close-btn svg {
width: 18px;
height: 18px;
}
/* --- Search: Header count badge --- */
.sapi-sr-header-count {
font-size: 0.6rem;
opacity: 0.5;
font-weight: 400;
}
/* --- Search: Category Count Badge --- */
.sapi-sr-cat-count {
font-size: 0.6rem;
font-weight: 600;
background: rgba(0,0,0,0.06);
color: #6b7280;
padding: 0.1rem 0.4rem;
border-radius: 10px;
margin-left: 0.15rem;
}
.sapi-sr-cat-chip:hover .sapi-sr-cat-count {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* --- Search: Placeholder (empty state on focus) --- */
.sapi-sr-placeholder {
padding: 2.5rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
}
.sapi-sr-placeholder svg {
opacity: 0.15;
width: 40px !important;
height: 40px !important;
margin-bottom: 0.75rem;
animation: sapi-sandblast-pulse 3s ease-in-out infinite;
}
.sapi-sr-placeholder p {
font-size: 0.82rem;
color: #9ca3af;
margin: 0;
line-height: 1.5;
}
@keyframes sapi-sandblast-pulse {
0%, 100% { transform: scale(1); opacity: 0.15; }
50% { transform: scale(1.08); opacity: 0.25; }
}
/* --- Search: Loading Bar Animation --- */
.sapi-sr-loading {
padding: 1.5rem 0.75rem;
text-align: center;
}
.sapi-sr-loading-bar {
height: 3px;
background: #f3f4f6;
border-radius: 3px;
overflow: hidden;
margin: 0 auto 0.75rem;
max-width: 200px;
position: relative;
}
.sapi-sr-loading-bar::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 40%;
background: var(--sapi-primary, #c70032);
border-radius: 3px;
animation: sapi-loading-slide 1s ease-in-out infinite;
}
@keyframes sapi-loading-slide {
0% { left: -40%; }
100% { left: 100%; }
}
.sapi-sr-loading-text {
font-size: 0.72rem;
color: #9ca3af;
}
/* --- Search: Popular Terms / Suggestion List (Google-style) --- */
.sapi-sr-suggest-list {
padding: 0.25rem 0;
}
.sapi-sr-suggest-item {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 0.82rem;
color: #374151;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.sapi-sr-suggest-item:hover,
.sapi-sr-suggest-active {
background: #f3f4f6;
}
.sapi-sr-suggest-count {
margin-left: auto;
font-size: 0.65rem;
color: #9ca3af;
background: #f3f4f6;
padding: 0.15rem 0.45rem;
border-radius: 10px;
}
.sapi-sr-suggest-active .sapi-sr-suggest-count {
background: #e5e7eb;
}
/* --- Search: "Did you mean" Spell-check --- */
.sapi-sr-didyoumean {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.75rem;
background: #fefce8;
border-bottom: 1px solid #fef08a;
font-size: 0.78rem;
color: #92400e;
}
.sapi-sr-didyoumean-link {
background: #fff;
border: 1px solid #fbbf24;
color: #92400e;
font-weight: 600;
font-size: 0.78rem;
padding: 0.3rem 0.7rem;
border-radius: 16px;
cursor: pointer;
transition: all 0.15s;
}
.sapi-sr-didyoumean-link:hover {
background: #fbbf24;
color: #451a03;
}
/* --- Search: Refinement Suggestion Chips (when results exist) --- */
.sapi-sr-refine {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f3f4f6;
}
.sapi-sr-refine-label {
font-size: 0.68rem;
color: #9ca3af;
font-weight: 500;
}
.sapi-sr-refine-chip {
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #374151;
font-size: 0.72rem;
font-weight: 500;
padding: 0.25rem 0.6rem;
border-radius: 14px;
cursor: pointer;
transition: all 0.15s;
}
.sapi-sr-refine-chip:hover {
background: var(--sapi-primary, #c70032);
border-color: var(--sapi-primary, #c70032);
color: #fff;
}
/* --- Search: No Results State --- */
.sapi-sr-noresults {
padding: 1.5rem 1rem;
text-align: center;
}
.sapi-sr-noresults-title {
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin: 0.75rem 0 0.25rem;
}
.sapi-sr-noresults-hint {
font-size: 0.72rem;
color: #9ca3af;
margin: 0;
}
.sapi-sr-noresults-suggest {
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid #f3f4f6;
}
.sapi-sr-noresults-suggest-label {
display: block;
font-size: 0.7rem;
font-weight: 600;
color: #6b7280;
margin-bottom: 0.5rem;
}
.sapi-sr-noresults-suggest-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.sapi-sr-noresults-suggest-btn {
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: var(--sapi-primary, #c70032);
font-size: 0.78rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.15s;
}
.sapi-sr-noresults-suggest-btn:hover {
background: var(--sapi-primary, #c70032);
border-color: var(--sapi-primary, #c70032);
color: #fff;
}
/* ============================================================
SWISSUP HIGHLIGHT - Hyva-compatible widget styling
============================================================ */
.sapi-highlight-block {
margin: 1.5rem 0;
}
/* Carousel track - horizontal scroll container */
.sapi-slider-track {
display: flex;
flex-wrap: nowrap;
gap: 0.75rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0.25rem 0.5rem 0.5rem;
}
.sapi-slider-track::-webkit-scrollbar {
display: none;
}
/* Each product card after JS flattening — direct child of track */
.sapi-slider-card {
flex: 0 0 160px !important;
min-width: 160px !important;
max-width: 160px !important;
scroll-snap-align: start;
list-style: none;
}
@media (min-width: 640px) {
.sapi-slider-card {
flex: 0 0 190px !important;
min-width: 190px !important;
max-width: 190px !important;
}
}
@media (min-width: 1024px) {
.sapi-slider-card {
flex: 0 0 210px !important;
min-width: 210px !important;
max-width: 210px !important;
}
}
/* Compact product cards inside slider */
.sapi-slider-card .product-item-photo img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.sapi-slider-card .product-info {
padding: 0;
}
.sapi-slider-card .product-item-link {
font-size: 0.78rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sapi-slider-card .price-box {
font-size: 0.82rem;
}
/* Compact add-to-cart: icon only */
.sapi-slider-card .btn-primary span {
display: none;
}
.sapi-slider-card .btn-primary {
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
}
/* Smaller tax/shipping text */
.sapi-slider-card .text-gray-400 {
font-size: 0.65rem;
}
/* Remove excess spacing from card internals */
.sapi-slider-card .product-item-details,
.sapi-slider-card .product-info > div:first-child {
margin-top: 0.25rem;
}
/* Fallback: hide original wrapper elements if JS hasn't run yet */
.sapi-slider-track > section {
display: contents;
}
.sapi-slider-track .products.wrapper {
display: contents;
}
.sapi-slider-track ul[role="list"] {
display: contents;
}
/* Slider arrows */
.sapi-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 32px;
height: 32px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.sapi-slider-arrow:hover {
background: #f9fafb;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sapi-slider-arrow svg {
width: 16px;
height: 16px;
color: #374151;
}
.sapi-slider-arrow--left {
left: -4px;
}
.sapi-slider-arrow--right {
right: -4px;
}
/* Highlight block header — hidden on homepage (titles shown in banners above) */
.cms-index-index .sapi-highlight-header {
display: none;
}
.sapi-highlight-header {
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--sapi-primary);
}
.sapi-highlight-title {
font-size: 1rem;
font-weight: 700;
color: #111827;
}
/* Highlight block footer - "view all" link below products */
.sapi-highlight-footer {
margin-top: 0.75rem;
text-align: center;
}
.sapi-highlight-viewall {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
font-weight: 600;
color: var(--sapi-primary);
text-decoration: none;
padding: 0.5rem 1.25rem;
border: 1px solid var(--sapi-primary);
border-radius: 20px;
transition: all 0.15s;
}
.sapi-highlight-viewall:hover {
background: var(--sapi-primary);
color: #fff;
}
.sapi-highlight-viewall svg {
width: 14px;
height: 14px;
}
/* Non-carousel: product grid */
.sapi-highlight-block .block-content > :not(.relative) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@media (min-width: 640px) {
.sapi-highlight-block .block-content > :not(.relative) {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.sapi-highlight-block .block-content > :not(.relative) {
grid-template-columns: repeat(4, 1fr);
}
}
/* ============================================================
NEWSLETTER - Dark footer styling
============================================================ */
.sapi-newsletter {
background: transparent;
}
/* ============================================================
FOOTER - Inner content max-width for readability
============================================================ */
.footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* ============================================================
HOMEPAGE - Responsive, edge-to-edge on mobile
============================================================ */
/* Remove max-width constraint on homepage product items */
.block.widget .products-grid .product-item,
.highlight-carousel .product-item,
.block-products-list .product-item {
max-width: none;
}
/* Homepage CMS inline styles override */
.cms-index-index h1[style] {
font-size: 1.1rem !important;
}
/* ============================================================
HOMEPAGE: Full edge-to-edge — KILL ALL padding/margins
Nuclear approach: kill padding on EVERY wrapper level
============================================================ */
.cms-index-index .page-main,
.cms-index-index .columns,
.cms-index-index .column.main {
padding: 0 !important;
padding-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
margin-inline: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Kill ALL .container and .px-* padding inside homepage */
.cms-index-index .column.main .container,
.cms-index-index .column.main [class*="px-"],
.cms-index-index .column.main [class*="mx-auto"] {
padding-left: 0 !important;
padding-right: 0 !important;
padding-inline: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-inline: 0 !important;
max-width: 100% !important;
}
/* CMS widget blocks: small inner padding for product cards */
.cms-index-index .block.widget {
width: 100%;
padding: 0 0.5rem;
}
@media (min-width: 768px) {
.cms-index-index .block.widget {
padding: 0 2rem;
max-width: 1400px;
margin: 0 auto;
}
}
/* Homepage font sizing */
.cms-index-index h2 { font-size: 1rem; }
@media (min-width: 768px) {
.cms-index-index h2 { font-size: 1.1rem; }
.cms-index-index .block.widget { font-size: 0.85rem; }
}
/* ============================================================
HOMEPAGE: Category Gradient Banners (between product sections)
============================================================ */
.sapi-home-banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 120px;
text-decoration: none;
color: #fff;
position: relative;
overflow: hidden;
margin: 0.5rem 0;
}
.sapi-home-banner-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: 1.5rem 1rem;
z-index: 1;
}
.sapi-home-banner-title {
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sapi-home-banner-text {
font-size: 0.82rem;
opacity: 0.85;
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.sapi-home-banner-cta {
display: inline-block;
margin-top: 6px;
padding: 0.45rem 1.2rem;
font-size: 0.78rem;
font-weight: 600;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 20px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background 0.2s;
}
.sapi-home-banner:hover .sapi-home-banner-cta,
.sapi-home-banner:active .sapi-home-banner-cta {
background: rgba(255,255,255,0.3);
}
@media (min-width: 768px) {
.sapi-home-banner {
min-height: 140px;
border-radius: 0;
}
.sapi-home-banner-title {
font-size: 1.8rem;
}
.sapi-home-banner-text {
font-size: 0.95rem;
}
}
/* Homepage product sections spacing */
.sapi-home-products .sapi-home-section {
padding: 0 0.75rem;
}
@media (min-width: 768px) {
.sapi-home-products .sapi-home-section {
padding: 0 1.5rem;
}
}
/* Center section titles/subtitles under the homepage H1 */
.cms-index-index .sapi-home-products .block-title,
.cms-index-index .sapi-home-products .block.widget .block-title {
text-align: center;
}
.cms-index-index .sapi-home-products .block.widget .block-title .subtitle {
display: block;
margin-left: 0;
margin-top: 6px;
}
/* Homepage intro paragraph below H1 */
.cms-index-index .sapi-home-intro {
max-width: 820px;
margin: 0.4rem auto 1.5rem;
color: #4a5160;
font-size: 1rem;
line-height: 1.55;
padding: 0 1rem;
}
@media (min-width: 768px) {
.cms-index-index .sapi-home-intro {
font-size: 1.05rem;
}
}
/* Spacing between promo banners and the H1 heading block */
.cms-index-index .sapi-promo-banners {
margin-bottom: 2.5rem;
}
.cms-index-index [data-pb-style="FLO3Q96"] {
margin-top: 2rem;
padding: 0 1rem;
}
@media (min-width: 768px) {
.cms-index-index .sapi-promo-banners {
margin-bottom: 3.5rem;
}
.cms-index-index [data-pb-style="FLO3Q96"] {
margin-top: 3rem;
}
}
/* Hide old jumbotron wrappers from CMS (no longer used) */
.cms-index-index .jumbotron {
padding: 0 !important;
margin: 0 !important;
}
.cms-index-index .jumbotron > .container {
padding: 0 !important;
max-width: 100% !important;
}
/* ============================================================
CATEGORY PAGE: Hide category hero image (keep in admin/tiles)
============================================================ */
.catalog-category-view .category-image,
.catalog-category-view .category-view > .category-image {
display: none !important;
}
/* ============================================================
CATEGORY PAGE: Read-more / collapse for long descriptions
============================================================ */
/* Override Ulmod_Readmoreless inline styles — our JS handles readmore */
.catalog-category-view .category-description {
max-height: none !important;
}
/* Hide Ulmod's checkbox toggle (RequireJS-based, doesn't work in Hyva) */
.ulmod-read-more-state,
.ulmod-read-more-trigger {
display: none !important;
}
.sapi-readmore {
overflow: hidden;
position: relative;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Gradient fade at bottom when collapsed */
.sapi-readmore:not(.sapi-readmore--open)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,1) 100%);
pointer-events: none;
z-index: 1;
}
/* Read more button */
.sapi-readmore-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 20px;
margin: 0;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f9fafb;
color: var(--sapi-primary, #c70032);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.sapi-readmore-btn:hover {
background: #f3f4f6;
border-color: var(--sapi-primary, #c70032);
}
.sapi-readmore-icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.sapi-readmore-btn--open .sapi-readmore-icon {
transform: rotate(180deg);
}
@media (min-width: 768px) {
.sapi-readmore-btn {
width: auto;
margin: 8px auto 0;
padding: 8px 28px;
}
}
/* ============================================================
MOBILE: Nav bar collapsed (burger moved to header)
============================================================ */
@media (max-width: 1023px) {
/* Collapse nav bar - takes no space */
.sapi-mega-nav {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
overflow: visible !important;
/* CRITICAL: position:static removes stacking context so
the fixed-position mobile drawer can escape and sit above the header */
position: static !important;
z-index: auto !important;
}
.sapi-mega-nav .sapi-mega-nav-container {
padding: 0 !important;
height: 0 !important;
}
/* Hide desktop nav elements on mobile */
.sapi-mega-nav-inner,
.sapi-mega-nav-links,
.sapi-mega-nav-right {
display: none !important;
}
}
/* Hide burger menu + mobile search toggle on desktop */
@media (min-width: 1024px) {
#sapi-burger-btn,
.sapi-burger-btn,
button[aria-label="Open Menu"],
.sapi-header-btn.lg\:hidden {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
visibility: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
#menu-search-icon {
display: none !important;
}
}
/* ============================================================
PDP - TABS (Desktop) + ACCORDION (Mobile)
============================================================ */
.sapi-product-tabs {
border: 1px solid #e5e7eb;
border-radius: var(--sapi-radius, 8px);
background: #fff;
overflow: hidden;
}
/* Tab bar */
.sapi-tabs-bar {
background: #f9fafb;
border-bottom: 2px solid #e5e7eb;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sapi-tabs-bar::-webkit-scrollbar {
display: none;
}
.sapi-tab-btn {
cursor: pointer;
background: none;
border: none;
outline: none;
}
.sapi-tab-btn:focus-visible {
outline: 2px solid var(--sapi-primary, #c70032);
outline-offset: -2px;
}
/* Tab panel */
.sapi-tab-panel {
padding: 1.25rem 1.5rem;
}
.sapi-tab-panel table {
width: 100%;
border-collapse: collapse;
}
.sapi-tab-panel table td,
.sapi-tab-panel table th {
font-size: 0.8rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f3f4f6;
text-align: left;
}
.sapi-tab-panel table th {
color: #6b7280;
font-weight: 500;
width: 40%;
}
.sapi-tab-panel table td {
color: #111827;
}
/* Accordion item */
.sapi-accordion-item {
background: #fff;
}
.sapi-accordion-trigger {
cursor: pointer;
border: none;
background: none;
}
.sapi-accordion-trigger:focus-visible {
outline: 2px solid var(--sapi-primary, #c70032);
outline-offset: -2px;
}
.sapi-accordion-content table {
width: 100%;
border-collapse: collapse;
}
.sapi-accordion-content table td,
.sapi-accordion-content table th {
font-size: 0.78rem;
padding: 0.4rem 0.5rem;
border-bottom: 1px solid #f3f4f6;
}
.sapi-accordion-content table th {
color: #6b7280;
font-weight: 500;
width: 45%;
}
/* Prose inside tabs/accordion */
.sapi-tab-panel .prose,
.sapi-accordion-content .prose {
font-size: 0.85rem;
line-height: 1.7;
color: #374151;
}
.sapi-tab-panel .prose img,
.sapi-accordion-content .prose img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* ============================================================
MOBILE SLIDE-IN MENU - Full-screen tile-based drawer
============================================================ */
.sapi-mobile-menu {
-webkit-overflow-scrolling: touch;
z-index: 9999 !important;
}
/* --- Mobile menu header --- */
.sapi-mobile-menu-header {
min-height: 52px;
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.sapi-menu-logo {
height: 28px;
width: auto;
max-width: 100px;
filter: brightness(0) invert(1); /* white version */
}
/* --- Mobile menu: Level panels & tile grid that fills height --- */
.sapi-menu-level {
padding: 6px;
transition: transform 0.3s ease-in-out;
}
.sapi-menu-level-1 {
min-height: 100%;
}
.sapi-menu-level-1.sapi-menu-level--hidden {
transform: translateX(-100%);
position: absolute;
inset: 0;
pointer-events: none;
}
.sapi-menu-level-2 {
position: absolute;
inset: 0;
overflow-y: auto;
}
.sapi-menu-level-2.sapi-menu-level--offscreen {
transform: translateX(100%);
}
/* 2-column tile grid: rows fill available height */
.sapi-menu-tile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
/* Each row: at least 100px, expands to fill space */
grid-auto-rows: minmax(100px, 1fr);
}
/* Back and View-all buttons */
.sapi-menu-back-btn {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 10px 12px;
margin-bottom: 6px;
font-size: 0.8rem;
font-weight: 600;
color: #374151;
background: #f3f4f6;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.sapi-menu-back-btn:active {
background: #e5e7eb;
}
.sapi-menu-viewall-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
margin-bottom: 6px;
font-size: 0.8rem;
font-weight: 700;
color: var(--sapi-primary);
background: #fef2f2;
border-radius: 8px;
text-decoration: none;
transition: background 0.15s;
}
.sapi-menu-viewall-btn:active {
background: #fecaca;
}
/* --- Mobile menu icon fixes --- */
/* All SVGs inside mobile menu body: currentColor, never white */
.sapi-mobile-menu svg {
color: currentColor !important;
flex-shrink: 0;
}
/* Header bar SVGs (close button) - white */
.sapi-mobile-menu-header svg {
color: #fff !important;
}
/* --- Mobile menu footer --- */
.sapi-mobile-menu-footer {
min-height: 56px;
padding: 8px 4px !important;
justify-content: center !important;
gap: 2px !important;
}
.sapi-menu-footer-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 12px;
font-size: 0.65rem;
font-weight: 600;
color: #6b7280;
text-decoration: none;
border-radius: 8px;
transition: color 0.15s, background 0.15s;
min-width: 60px;
text-align: center;
}
.sapi-menu-footer-link:hover,
.sapi-menu-footer-link:active {
color: var(--sapi-primary);
background: #f3f4f6;
}
.sapi-menu-footer-link svg {
color: currentColor !important;
width: 20px !important;
height: 20px !important;
}
/* ============================================================
HIDE THIRD-PARTY OVERLAYS when mobile menu/search is open
Targets: Smartsupp chat widget, Cookiebot consent banner,
and any other floating z-index elements
============================================================ */
body.sapi-menu-open #chat-application,
body.sapi-menu-open #smartsupp-widget-container,
body.sapi-menu-open [id^="smartsupp"],
body.sapi-menu-open #CybotCookiebotDialog,
body.sapi-menu-open #CybotCookiebotDialogBodyUnderlay,
body.sapi-menu-open [id^="Cookiebot"],
body.sapi-menu-open .cc-window,
body.sapi-menu-open .cc-banner,
body.sapi-menu-open .cookie-consent,
body.sapi-menu-open #cookie-consent,
body.sapi-menu-open [class*="smartsupp"],
body.sapi-menu-open [class*="cookie-consent"],
body.sapi-menu-open iframe[title*="chat" i],
body.sapi-menu-open iframe[title*="Smartsupp" i],
body.sapi-menu-open iframe[src*="smartsupp"],
body.sapi-menu-open iframe[src*="cookiebot"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.sapi-menu-tile {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
user-select: none;
cursor: pointer;
transition: transform 0.15s ease;
}
.sapi-menu-tile:active {
transform: scale(0.97);
}
/* Tile image: fill tile, no stretch */
.sapi-tile-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}
.sapi-menu-tile:active .sapi-tile-img {
transform: scale(1.03);
}
/* Gradient fallback background (no image) */
.sapi-tile-gradient {
position: absolute;
inset: 0;
}
/* Light vignette so edges don't feel flat */
.sapi-tile-overlay {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
}
/* Tap feedback layer */
.sapi-tile-tap {
position: absolute;
inset: 0;
background: transparent;
transition: background 0.15s ease;
pointer-events: none;
}
.sapi-menu-tile:active .sapi-tile-tap {
background: rgba(255, 255, 255, 0.1);
}
/* Centered SVG icon on gradient tiles */
.sapi-tile-icon {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.25;
pointer-events: none;
}
/* Frosted glass badge — centered on tile */
.sapi-tile-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
gap: 3px;
z-index: 2;
}
.sapi-tile-text {
display: inline-block;
color: #fff;
font-weight: 700;
font-size: 0.85rem;
line-height: 1.25;
letter-spacing: 0.01em;
padding: 6px 14px;
border-radius: 8px;
background: rgba(46, 55, 68, 0.55);
-webkit-backdrop-filter: blur(10px) saturate(140%);
backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
max-width: 90%;
word-break: break-word;
}
.sapi-tile-text--sub {
font-size: 0.8rem;
padding: 5px 12px;
}
/* ============================================================
HOMEPAGE - Hero Image Slider (full-bleed, SplideJS)
============================================================ */
/* Hero slider — styles are inline in hero-slider.phtml for cache reliability */
/* Splide controls */
.sapi-hero-slider .splide__pagination {
bottom: 0.75rem;
}
.sapi-hero-slider .splide__pagination__page {
background: rgba(255, 255, 255, 0.4);
width: 8px;
height: 8px;
}
.sapi-hero-slider .splide__pagination__page.is-active {
background: #fff;
transform: scale(1.2);
}
.sapi-hero-slider .splide__arrow {
background: rgba(255, 255, 255, 0.15);
width: 2.5rem;
height: 2.5rem;
opacity: 0.7;
}
.sapi-hero-slider .splide__arrow:hover {
background: rgba(255, 255, 255, 0.3);
opacity: 1;
}
.sapi-hero-slider .splide__arrow svg {
fill: #fff;
width: 1rem;
height: 1rem;
}
/* --- CTA Tile Grid (below hero, edge-to-edge) --- */
.sapi-cta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
@media (min-width: 768px) {
.sapi-cta-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.sapi-cta-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
padding: 16px 8px;
color: #fff;
text-decoration: none;
transition: filter 0.2s ease, transform 0.15s ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.sapi-cta-tile:hover {
filter: brightness(1.1);
}
.sapi-cta-tile:active {
filter: brightness(0.95);
transform: scale(0.98);
}
.sapi-cta-icon {
opacity: 0.9;
display: flex;
align-items: center;
justify-content: center;
}
.sapi-cta-icon svg {
color: #fff !important;
}
.sapi-cta-label {
font-weight: 700;
font-size: 0.75rem;
line-height: 1.2;
}
/* Hide chevron on CTA tiles — cleaner centered look */
.sapi-cta-tile > svg:last-child {
display: none;
}
@media (min-width: 768px) {
.sapi-cta-tile {
padding: 20px 16px;
gap: 8px;
}
.sapi-cta-label {
font-size: 0.85rem;
}
}
/* ============================================================
HOMEPAGE - USP Trust Tiles (edge-to-edge grid)
============================================================ */
.sapi-usp-bar {
width: 100%;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
/* USP bar: always visible (critical trust content, skip reveal animation) */
.sapi-usp-bar.sapi-reveal {
opacity: 1 !important;
transform: none !important;
}
.sapi-usp-bar .sapi-reveal-stagger > * {
opacity: 1 !important;
transform: none !important;
}
.sapi-usp-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
@media (min-width: 768px) {
.sapi-usp-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.sapi-usp-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 10px;
gap: 4px;
border-right: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.sapi-usp-tile:nth-child(2n) {
border-right: none;
}
@media (min-width: 768px) {
.sapi-usp-tile {
padding: 20px 16px;
gap: 6px;
}
.sapi-usp-tile:nth-child(2n) {
border-right: 1px solid #e5e7eb;
}
.sapi-usp-tile:last-child {
border-right: none;
}
}
/* Remove bottom border on last row */
.sapi-usp-tile:nth-last-child(-n+2) {
border-bottom: none;
}
@media (min-width: 768px) {
.sapi-usp-tile:nth-last-child(-n+4) {
border-bottom: none;
}
}
.sapi-usp-icon {
color: var(--sapi-primary);
display: flex;
align-items: center;
justify-content: center;
}
.sapi-usp-icon svg {
color: var(--sapi-primary) !important;
}
.sapi-usp-title {
font-size: 0.8rem;
font-weight: 700;
color: #111827;
line-height: 1.2;
}
.sapi-usp-text {
font-size: 0.65rem;
color: #6b7280;
line-height: 1.2;
}
/* ============================================================
HOMEPAGE - Category Horizontal Slider
============================================================ */
.sapi-cat-slider-section {
width: 100%;
padding: 1.5rem 0 1rem;
}
/* Category slider: always visible (skip reveal animation) */
.sapi-cat-slider-section.sapi-reveal {
opacity: 1 !important;
transform: none !important;
}
.sapi-cat-slider-title {
font-size: 1rem;
font-weight: 800;
color: #111827;
text-align: center;
margin: 0 0 1rem;
padding: 0 1rem;
}
@media (min-width: 768px) {
.sapi-cat-slider-title {
font-size: 1.15rem;
margin-bottom: 1.25rem;
}
}
.sapi-cat-slider {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 8px 8px;
}
.sapi-cat-slider::-webkit-scrollbar {
display: none;
}
.sapi-cat-slide {
flex: 0 0 140px;
height: 140px;
position: relative;
display: block;
border-radius: 10px;
overflow: hidden;
scroll-snap-align: start;
text-decoration: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: transform 0.15s ease;
}
.sapi-cat-slide:active {
transform: scale(0.97);
}
@media (min-width: 768px) {
.sapi-cat-slide {
flex: 0 0 180px;
height: 160px;
}
.sapi-cat-slider {
gap: 10px;
padding: 0 2rem 10px;
}
}
/* Desktop: single-line horizontal slider (swipeable, scroll-snap) */
@media (min-width: 1024px) {
.sapi-cat-slider {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 0 2rem 10px;
gap: 14px;
}
.sapi-cat-slider::-webkit-scrollbar {
display: none;
}
.sapi-cat-slide {
flex: 0 0 200px;
width: 200px;
height: 160px;
scroll-snap-align: start;
}
.sapi-cat-slider-section {
padding: 2rem 0 1.5rem;
}
}
/* ============================================================
HOMEPAGE - Why SAPI Section
============================================================ */
.sapi-why-section {
position: relative;
padding: 2rem 1rem;
background: #f9fafb;
}
@media (min-width: 768px) {
.sapi-why-section {
padding: 3rem 2rem;
}
}
/* Override homepage nuclear reset for why-section inner containers */
.cms-index-index .sapi-why-section .container,
.cms-index-index .sapi-why-section [class*="px-"],
.cms-index-index .sapi-why-section [class*="mx-auto"] {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.sapi-why-section .sapi-why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.sapi-why-section .sapi-why-grid {
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
}
.sapi-why-card {
display: flex;
gap: 0.875rem;
padding: 1rem;
background: #fff;
border-radius: 10px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sapi-why-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.sapi-why-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #fef2f2;
color: var(--sapi-primary);
}
.sapi-why-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.sapi-why-card h3 {
font-size: 0.85rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.25rem;
}
.sapi-why-card p {
font-size: 0.78rem;
color: #6b7280;
line-height: 1.5;
margin: 0;
}
/* ============================================================
HOMEPAGE - SEO Text Block
============================================================ */
.sapi-seo-section {
padding: 2rem 1rem;
margin: 0;
}
@media (min-width: 768px) {
.sapi-seo-section {
padding: 2.5rem 2rem;
}
}
.sapi-seo-card {
max-width: 900px;
margin: 0 auto;
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e9ecef;
position: relative;
}
@media (min-width: 768px) {
.sapi-seo-card {
padding: 2rem 2.5rem;
}
}
.sapi-seo-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.sapi-seo-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background: var(--sapi-primary);
color: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.sapi-seo-icon svg {
width: 18px;
height: 18px;
}
.sapi-seo-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--sapi-dark);
margin: 0;
line-height: 1.3;
}
@media (min-width: 768px) {
.sapi-seo-title {
font-size: 1.1rem;
}
}
.sapi-seo-body {
overflow: hidden;
transition: max-height 0.5s ease-in-out;
}
.sapi-seo-content {
color: #4b5563;
font-size: 0.82rem;
line-height: 1.65;
}
.sapi-seo-content p {
margin: 0 0 0.75rem 0;
}
.sapi-seo-content p:last-child {
margin-bottom: 0;
}
.sapi-seo-fade {
position: relative;
margin-top: -3rem;
height: 3rem;
background: linear-gradient(transparent, #f8f9fa);
pointer-events: none;
}
.sapi-seo-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.75rem;
padding: 0.4rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--sapi-primary);
background: transparent;
border: 1px solid var(--sapi-primary);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.sapi-seo-toggle:hover {
background: var(--sapi-primary);
color: #fff;
}
.sapi-seo-toggle svg {
width: 14px;
height: 14px;
transition: transform 0.2s;
}
.sapi-seo-toggle-flip {
transform: rotate(180deg);
}
/* Override homepage nuclear padding reset for SEO section */
.cms-index-index .sapi-seo-section {
padding: 2rem 1rem !important;
}
@media (min-width: 768px) {
.cms-index-index .sapi-seo-section {
padding: 2.5rem 2rem !important;
}
}
/* ============================================================
SAPI LOADING ANIMATION - Sandblasting themed
============================================================ */
/* Page-level loader */
.sapi-page-loader {
position: fixed;
inset: 0;
z-index: 99999;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sapi-page-loader.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Nozzle + blast container */
.sapi-blast-loader {
position: relative;
width: 80px;
height: 80px;
margin-bottom: 8px;
}
/* Central nozzle aperture */
.sapi-blast-loader .nozzle {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
background: var(--sapi-primary);
border-radius: 50%;
animation: sapi-nozzle-pulse 1.4s ease-in-out infinite;
z-index: 2;
}
/* Sand particles spraying outward */
.sapi-blast-loader .particle {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
margin: -2px 0 0 -2px;
border-radius: 50%;
background: var(--sapi-primary);
animation: sapi-particle-spray 1.4s ease-out infinite;
}
.sapi-blast-loader .particle:nth-child(2) { --angle: 0deg; --dist: 32px; animation-delay: 0s; opacity: 0.9; }
.sapi-blast-loader .particle:nth-child(3) { --angle: 45deg; --dist: 28px; animation-delay: 0.1s; opacity: 0.8; }
.sapi-blast-loader .particle:nth-child(4) { --angle: 90deg; --dist: 34px; animation-delay: 0.2s; opacity: 0.7; }
.sapi-blast-loader .particle:nth-child(5) { --angle: 135deg; --dist: 26px; animation-delay: 0.05s; opacity: 0.9; }
.sapi-blast-loader .particle:nth-child(6) { --angle: 180deg; --dist: 30px; animation-delay: 0.15s; opacity: 0.8; }
.sapi-blast-loader .particle:nth-child(7) { --angle: 225deg; --dist: 33px; animation-delay: 0.25s; opacity: 0.7; }
.sapi-blast-loader .particle:nth-child(8) { --angle: 270deg; --dist: 29px; animation-delay: 0.08s; opacity: 0.85; }
.sapi-blast-loader .particle:nth-child(9) { --angle: 315deg; --dist: 31px; animation-delay: 0.18s; opacity: 0.75; }
.sapi-blast-loader .particle:nth-child(10) { --angle: 22deg; --dist: 25px; animation-delay: 0.12s; opacity: 0.6; width: 3px; height: 3px; }
.sapi-blast-loader .particle:nth-child(11) { --angle: 158deg; --dist: 27px; animation-delay: 0.22s; opacity: 0.6; width: 3px; height: 3px; }
.sapi-blast-loader .particle:nth-child(12) { --angle: 248deg; --dist: 35px; animation-delay: 0.07s; opacity: 0.5; width: 2px; height: 2px; }
.sapi-blast-loader .particle:nth-child(13) { --angle: 68deg; --dist: 24px; animation-delay: 0.28s; opacity: 0.5; width: 2px; height: 2px; }
/* Sand stream bar below */
.sapi-sand-stream {
width: 100px;
height: 3px;
background: rgba(199, 0, 50, 0.08);
border-radius: 3px;
overflow: hidden;
}
.sapi-sand-stream::after {
content: '';
display: block;
width: 35%;
height: 100%;
background: linear-gradient(90deg, transparent, var(--sapi-primary), transparent);
border-radius: 3px;
animation: sapi-sand-flow 1.2s ease-in-out infinite;
}
/* Loader logo */
.sapi-loader-logo {
width: 110px;
height: auto;
margin-top: 1rem;
opacity: 0.85;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 12px;
}
@keyframes sapi-nozzle-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 0, 50, 0.4); }
50% { transform: scale(0.85); box-shadow: 0 0 0 8px rgba(199, 0, 50, 0); }
}
@keyframes sapi-particle-spray {
0% {
transform: rotate(var(--angle)) translateX(0) scale(1);
opacity: 0.9;
}
30% {
opacity: 0.7;
}
100% {
transform: rotate(var(--angle)) translateX(var(--dist)) scale(0.2);
opacity: 0;
}
}
@keyframes sapi-sand-flow {
0% { transform: translateX(-120%); }
100% { transform: translateX(380%); }
}
/* Inline spinner (for AJAX etc.) */
.sapi-spinner {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 24px;
height: 24px;
}
.sapi-spinner::before {
content: '';
width: 6px;
height: 6px;
background: var(--sapi-primary);
border-radius: 50%;
animation: sapi-nozzle-pulse 1s ease-in-out infinite;
}
.sapi-spinner::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid transparent;
border-top-color: var(--sapi-primary);
border-right-color: rgba(199, 0, 50, 0.3);
border-radius: 50%;
animation: sapi-spin 0.7s linear infinite;
}
@keyframes sapi-spin {
100% { transform: rotate(360deg); }
}
/* ============================================================
APP-LIKE ANIMATIONS - Smooth transitions & micro-interactions
============================================================ */
/* Scroll-reveal: elements fade+slide up when they enter viewport */
.sapi-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sapi-reveal.sapi-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delay for child elements */
.sapi-reveal-stagger > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sapi-reveal-stagger.sapi-visible > *:nth-child(1) { transition-delay: 0.05s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(2) { transition-delay: 0.1s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(3) { transition-delay: 0.15s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(4) { transition-delay: 0.2s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(5) { transition-delay: 0.25s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(6) { transition-delay: 0.3s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(7) { transition-delay: 0.35s; }
.sapi-reveal-stagger.sapi-visible > *:nth-child(8) { transition-delay: 0.4s; }
.sapi-reveal-stagger.sapi-visible > * {
opacity: 1;
transform: translateY(0);
}
/* Smooth page transitions */
.page-main {
animation: sapi-page-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sapi-page-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Product card hover lift (desktop) */
@media (min-width: 768px) {
.product-item.card,
.card.card-interactive {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s ease;
}
.product-item.card:hover,
.card.card-interactive:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
}
/* Button press effect */
.btn, button[type="submit"], .sapi-cta-tile, .sapi-home-banner {
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
}
.btn:active, button[type="submit"]:active {
transform: scale(0.97);
}
/* Smooth link hover underlines */
a {
transition: color 0.15s ease;
}
/* CTA tiles: subtle scale on hover */
.sapi-cta-tile:hover {
transform: scale(1.02);
filter: brightness(1.08);
}
/* Category slider tiles: lift on hover */
.sapi-cat-slide:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.sapi-cat-slide {
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.25s ease;
}
/* Mega menu dropdown: smooth scale entrance */
.sapi-mega-dropdown {
transform-origin: top center;
}
/* USP tiles: subtle hover lift */
.sapi-usp-tile {
transition: transform 0.2s ease, background 0.2s ease;
}
.sapi-usp-tile:hover {
transform: translateY(-2px);
background: #f3f4f6;
}
/* Homepage banners: subtle parallax-like hover */
.sapi-home-banner {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sapi-home-banner:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
/* ============================================================
HOMEPAGE - Promotional Banners (3-column image grid)
============================================================ */
.sapi-promo-banners {
width: 100%;
padding: 1rem 0.75rem;
}
@media (min-width: 768px) {
.sapi-promo-banners {
padding: 1.5rem 2rem;
max-width: 1400px;
margin: 0 auto;
}
}
.sapi-promo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
@media (min-width: 640px) {
.sapi-promo-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
}
.sapi-promo-card {
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: #fff;
min-height: 180px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) {
.sapi-promo-card {
min-height: 220px;
}
}
.sapi-promo-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.sapi-promo-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.sapi-promo-card:hover img {
transform: scale(1.05);
}
.sapi-promo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.65) 100%);
z-index: 1;
}
.sapi-promo-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 1.25rem;
}
.sapi-promo-title {
font-size: 1rem;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
.sapi-promo-title { font-size: 1.1rem; }
}
.sapi-promo-subtitle {
font-size: 0.78rem;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.sapi-promo-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
background: var(--sapi-primary);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ============================================================
CATEGORY PAGE - Filter Drawer
============================================================ */
.sapi-filter-fab {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 400;
width: 44px;
height: 44px;
border-radius: 0 10px 10px 0;
background: var(--sapi-dark);
color: #fff;
border: none;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* Filter drawer: HIDE everything on desktop, only show on mobile */
@media (min-width: 1024px) {
.sapi-filter-fab,
.sapi-filter-overlay,
.sapi-filter-drawer {
display: none !important;
}
}
.sapi-filter-fab:hover {
background: var(--sapi-primary);
transform: translateY(-50%) scale(1.08);
box-shadow: 0 6px 24px rgba(199,0,50,0.35);
}
.sapi-filter-fab svg {
width: 22px;
height: 22px;
}
.sapi-filter-fab-count {
position: absolute;
top: -4px;
right: -4px;
width: 20px;
height: 20px;
background: var(--sapi-primary);
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
/* Filter drawer overlay */
.sapi-filter-overlay {
position: fixed;
inset: 0;
z-index: 998;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
transition: opacity 0.3s ease;
}
/* Filter drawer panel */
.sapi-filter-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 999;
width: 320px;
max-width: 85vw;
background: #fff;
box-shadow: 4px 0 30px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sapi-filter-drawer.sapi-filter-drawer--open {
transform: translateX(0);
}
.sapi-filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
background: var(--sapi-dark);
color: #fff;
flex-shrink: 0;
}
.sapi-filter-drawer-title {
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.sapi-filter-drawer-title svg {
width: 18px;
height: 18px;
opacity: 0.7;
}
.sapi-filter-drawer-close {
background: rgba(255,255,255,0.1);
border: none;
border-radius: 8px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
transition: background 0.15s;
}
.sapi-filter-drawer-close:hover {
background: rgba(255,255,255,0.2);
}
.sapi-filter-drawer-close svg {
width: 18px;
height: 18px;
}
.sapi-filter-drawer-body {
flex: 1;
overflow-y: auto;
padding: 0;
-webkit-overflow-scrolling: touch;
}
/* Drawer body inherits pill design from .sapi-filter-card / .sapi-pill */
.sapi-filter-drawer-body .sapi-filter-card {
border: none;
border-radius: 0;
box-shadow: none;
}
.sapi-filter-drawer-body .sapi-filter-card-title {
display: none; /* Drawer has its own header */
}
.sapi-filter-drawer-body .sapi-filter-group-options {
padding: 0 1rem 0.75rem;
}
.sapi-filter-drawer-footer {
padding: 1rem 1.25rem;
border-top: 1px solid #e5e7eb;
flex-shrink: 0;
display: flex;
gap: 0.5rem;
}
.sapi-filter-apply-btn {
flex: 1;
background: var(--sapi-primary);
color: #fff;
border: none;
border-radius: 8px;
padding: 0.7rem 1rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.sapi-filter-apply-btn:hover {
background: var(--sapi-primary-dark);
}
.sapi-filter-reset-btn {
background: #f3f4f6;
color: #374151;
border: none;
border-radius: 8px;
padding: 0.7rem 1rem;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.sapi-filter-reset-btn:hover {
background: #e5e7eb;
}
/* Hide sidebar on mobile (mobile uses the slide-in drawer instead) */
@media (max-width: 1023px) {
.catalog-category-view .sidebar.sidebar-main {
display: none !important;
}
}
/* ============================================================
CLS PREVENTION & PERFORMANCE
============================================================ */
/* content-visibility: auto for below-fold sections (skip rendering until near viewport) */
.sapi-why-section,
.sapi-seo-section {
content-visibility: auto;
contain-intrinsic-size: auto 400px;
}
/* PDP: tabs/accordion and related products below fold */
.catalog-product-view .sapi-product-tabs,
.catalog-product-view .block.related,
.catalog-product-view .block.upsell,
.catalog-product-view .block.crosssell {
content-visibility: auto;
contain-intrinsic-size: auto 300px;
}
/* Category: products below first screen */
.catalog-category-view .products.wrapper {
contain: layout style;
}
/* Stabilize product cards: reserve space for name + price */
.product-item .product-item-info {
display: flex;
flex-direction: column;
}
.product-item .product-item-details {
min-height: 80px;
display: flex;
flex-direction: column;
}
/* Prevent font-swap CLS: ensure consistent line-height */
.product-item-name,
.product-item .price-box {
line-height: 1.4;
}
/* ============================================================
FLY-TO-CART ANIMATION
============================================================ */
/* Flying thumbnail clone */
.sapi-fly-to-cart {
position: fixed;
z-index: 99999;
pointer-events: none;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(199, 0, 50, 0.3);
border: 2px solid var(--sapi-primary);
background: #fff;
object-fit: contain;
transition: none;
}
.sapi-fly-to-cart.sapi-fly-animate {
transition: all 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
opacity: 0;
transform: scale(0.15);
}
/* Cart icon bounce */
@keyframes sapi-cart-bounce {
0% { transform: scale(1); }
25% { transform: scale(1.35); }
50% { transform: scale(0.9); }
75% { transform: scale(1.15); }
100% { transform: scale(1); }
}
#menu-cart-icon.sapi-cart-bounce {
animation: sapi-cart-bounce 0.5s ease;
}
/* Cart badge pulse on new item */
@keyframes sapi-badge-pulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 0, 50, 0.5); }
50% { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(199, 0, 50, 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(199, 0, 50, 0); }
}
#menu-cart-icon.sapi-cart-bounce > span[x-text="summaryCount"] {
animation: sapi-badge-pulse 0.6s ease 0.2s;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.sapi-reveal { opacity: 1; transform: none; }
.sapi-reveal-stagger > * { opacity: 1; transform: none; }
.page-main { animation: none; }
}
/* ============================================================
CHECKOUT / FIRECHECKOUT — SAPI Overrides
Luma base CSS is loaded in @layer(luma-base) via requirejs-loader.phtml.
Firecheckout-light.css (un-layered) sits on top.
Rules here are un-layered + use !important where needed = highest priority.
Everything scoped to body.firecheckout so header/footer are untouched.
============================================================ */
/* ──── Hide mega-menu navigation on checkout (prevent click-away) ──── */
.firecheckout .sapi-mega-nav,
.checkout-index-index .sapi-mega-nav {
display: none !important;
}
/* ──── Hide top-bar on checkout (cleaner look) ──── */
.firecheckout .sapi-topbar,
.checkout-index-index .sapi-topbar {
display: none !important;
}
/* ──── Protect SAPI header from Luma containers on checkout ──── */
/* Magento core defines header-wrapper (div.header.content) and
header.panel.wrapper inside header.container. On checkout these
may survive the Hyva base-layout-reset. Hide them so only the
SAPI #header renders. */
.firecheckout .page-header > .panel.wrapper,
.firecheckout .page-header > .header.content,
.checkout-index-index .page-header > .panel.wrapper,
.checkout-index-index .page-header > .header.content {
display: none !important;
}
/* Ensure SAPI header stays intact on checkout pages */
.firecheckout .sapi-header .container,
.checkout-index-index .sapi-header .container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.firecheckout .sapi-logo,
.checkout-index-index .sapi-logo {
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
/* ──── Luma base CSS that Firecheckout depends on ──── */
/* Hyva doesn't load styles-m.css / styles-l.css.
These rules replicate the essential Luma form/field
layout patterns that firecheckout-light.css builds on. */
.firecheckout .fieldset {
border: 0;
margin: 0 0 20px;
padding: 0;
min-inline-size: auto;
}
.firecheckout .fieldset > .legend {
box-sizing: border-box;
float: left;
font-size: 20px;
font-weight: 300;
line-height: 1.2;
margin: 0 0 20px;
padding: 0;
width: 100%;
}
.firecheckout .fieldset > .legend + br {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.firecheckout .fieldset > .field {
margin: 0 0 10px;
}
.firecheckout .fieldset > .field > .label {
display: block;
font-weight: 600;
margin: 0 0 4px;
font-size: 13px;
}
.firecheckout .fieldset > .field > .control {
width: 100%;
}
.firecheckout .fieldset:last-child {
margin-bottom: 0;
}
/* Field widths for float layout (Luma pattern) */
.firecheckout .field {
box-sizing: border-box;
}
.firecheckout .field .field.choice {
margin-bottom: 8px;
}
.firecheckout .field .note {
font-size: 12px;
color: #666;
margin-top: 4px;
}
/* Luma modal/popup base — hidden by default, shown via ._show */
.firecheckout .modal-popup,
.firecheckout .modal-custom:not(.opc-sidebar) {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.2s, opacity 0.2s;
pointer-events: none;
}
.firecheckout .modal-popup._show,
.firecheckout .modal-custom:not(.opc-sidebar)._show {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 0.2s;
pointer-events: all;
}
.firecheckout .modal-popup .modal-inner-wrap,
.firecheckout .modal-custom .modal-inner-wrap {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
padding: 24px;
position: relative;
}
.firecheckout .modal-popup .modal-header,
.firecheckout .modal-custom .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.firecheckout .modal-popup .modal-title,
.firecheckout .modal-custom .modal-title {
font-size: 18px;
font-weight: 600;
}
.firecheckout .modal-popup .action-close,
.firecheckout .modal-custom .action-close {
background: none;
border: 0;
cursor: pointer;
padding: 8px;
font-size: 0;
position: absolute;
top: 12px;
right: 12px;
}
.firecheckout .modal-popup .action-close::before,
.firecheckout .modal-custom .action-close::before {
content: '\00d7';
font-size: 24px;
line-height: 1;
color: #666;
}
.firecheckout .modal-popup .action-close:hover::before,
.firecheckout .modal-custom .action-close:hover::before {
color: var(--sapi-primary);
}
.firecheckout .modal-popup .modal-footer,
.firecheckout .modal-custom .modal-footer {
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.firecheckout .modals-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 899;
}
/* Luma table base (used by shipping methods, totals) */
.firecheckout table {
width: 100%;
border-collapse: collapse;
}
.firecheckout table th,
.firecheckout table td {
padding: 6px 8px;
text-align: left;
vertical-align: top;
}
/* Luma .abs-discount-block (coupons) */
.firecheckout .payment-option._active .payment-option-content {
display: block;
}
.firecheckout .payment-option:not(._active) .payment-option-content {
display: none;
}
.firecheckout .payment-option .payment-option-inner {
display: flex;
gap: 8px;
align-items: flex-end;
}
.firecheckout .payment-option .payment-option-inner .input-text {
flex: 1;
}
/* Luma address list (for logged-in users with saved addresses) */
.firecheckout .shipping-address-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.firecheckout .shipping-address-item {
box-sizing: border-box;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 16px;
cursor: pointer;
flex: 1 1 calc(50% - 6px);
min-width: 220px;
transition: border-color 0.15s;
}
.firecheckout .shipping-address-item:hover {
border-color: #9ca3af;
}
.firecheckout .shipping-address-item.selected-item {
border-color: var(--sapi-primary);
background: #fef2f5;
}
.firecheckout .shipping-address-item-inner {
font-size: 13px;
line-height: 1.5;
}
.firecheckout .action-select-shipping-item {
margin-top: 10px;
}
/* Luma new-address-popup button */
.firecheckout .action-show-popup {
margin-bottom: 16px;
}
/* ──── Full-width layout wrappers ──── */
.firecheckout .page-main {
max-width: 100%;
width: 100%;
padding: 0;
margin: 0 auto;
}
.firecheckout .page-main > .container {
max-width: 100%;
padding: 0 24px;
}
.firecheckout .columns {
display: block;
max-width: 100%;
}
.firecheckout .column.main {
width: 100%;
max-width: 100%;
float: none;
padding: 0;
}
/* ──── Page wrapper: allow sticky sidebar ──── */
.firecheckout .page-wrapper {
overflow: visible !important;
}
.firecheckout .page-main {
max-width: 1280px;
width: 100%;
padding: 0;
margin: 0 auto;
}
/* ──── OPC flex layout (wrapper + sidebar) ──── */
.firecheckout #checkout {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
padding: 0 24px 40px;
box-sizing: border-box;
gap: 20px;
}
.firecheckout .opc-wrapper,
.firecheckout.firecheckout-col1-set #checkout .opc-wrapper,
.firecheckout.firecheckout-col2-set #checkout .opc-wrapper,
.firecheckout.firecheckout-col3-set #checkout .opc-wrapper {
flex: 1 1 0%;
min-width: 0;
max-width: 100%;
padding: 0 !important;
margin: 0;
order: 1;
float: none !important;
counter-reset: firecheckout-section-counter;
}
.firecheckout .opc-sidebar {
flex: 0 0 380px;
max-width: 380px;
order: 2;
position: sticky;
top: 15px;
align-self: flex-start;
float: none !important;
}
/* ──── Col3 layout: shipping + payment side-by-side in wrapper ──── */
@media (min-width: 1024px) {
.firecheckout.firecheckout-col3-set .opc {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.firecheckout.firecheckout-col3-set .opc > li {
flex: 1 1 calc(50% - 8px);
min-width: 320px;
}
}
/* ──── Col2 layout: 60/40 split ──── */
@media (min-width: 768px) {
.firecheckout.firecheckout-col2-set .opc-wrapper {
flex: 0 0 60%;
max-width: 60%;
}
.firecheckout.firecheckout-col2-set .opc-sidebar {
flex: 0 0 calc(40% - 20px);
max-width: calc(40% - 20px);
}
}
/* ──── Col1 narrower layout ──── */
.firecheckout.firecheckout-col1-set .page-main {
max-width: 1080px;
}
/* ──── Mobile: collapse to single column ──── */
@media (max-width: 900px) {
.firecheckout #checkout { flex-direction: column; }
.firecheckout .opc-sidebar { flex: 1 1 100%; max-width: 100%; position: static; }
.firecheckout.firecheckout-col3-set .opc { display: block; }
.firecheckout.firecheckout-col3-set .opc > li { width: 100%; }
}
/* ──── OPC section cards ──── */
.firecheckout .opc {
list-style: none;
padding: 0;
margin: 0;
}
.firecheckout #checkout .opc-wrapper .opc > li,
.firecheckout #checkout .opc-sidebar,
.firecheckout .opc > li,
.firecheckout .opc-sidebar {
background: #fff;
border: 1px solid #e8eaed;
border-radius: 6px;
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* ──── Step titles with counter circles ──── */
.firecheckout .step-title,
.firecheckout .opc-block-summary > .title,
.firecheckout .opc-sidebar .step-title {
display: flex;
align-items: center;
font-size: 20px;
font-weight: 600;
padding: 0 0 16px;
margin: 0;
border: 0;
color: var(--sapi-text, #111827);
}
.firecheckout #checkout .opc-wrapper .step-title::before,
.firecheckout .opc-wrapper .step-title::before {
counter-increment: firecheckout-section-counter;
content: counter(firecheckout-section-counter);
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
min-width: 30px;
border: 2px solid var(--sapi-primary, #c70032) !important;
border-radius: 50%;
color: var(--sapi-primary, #c70032) !important;
font-weight: 700;
font-size: 15px;
margin-right: 10px;
background: transparent !important;
}
/* ──── Fieldset & field layout ──── */
.firecheckout fieldset,
.firecheckout .fieldset {
border: 0;
margin: 0;
padding: 0;
background: none;
min-width: 0;
}
.firecheckout .fieldset > .field,
.firecheckout .fieldset > .fields > .field {
margin-bottom: 12px;
}
.firecheckout div.field {
box-sizing: border-box;
}
.firecheckout div.field > .label {
display: block;
margin-bottom: 4px;
font-weight: 500;
font-size: 13px;
color: #374151;
}
.firecheckout div.field > .control {
position: relative;
width: 100%;
}
/* Required asterisk */
.firecheckout div.field.required > .label::after,
.firecheckout div.field._required > .label::after {
content: ' *';
color: var(--sapi-primary, #c70032);
font-size: 13px;
}
/* FC column grid */
.firecheckout .field { float: left; width: 100%; box-sizing: border-box; padding: 0 4px; }
/* ──── Form elements ──── */
/* Include #checkout in selectors to beat firecheckout-light.css specificity */
.firecheckout #checkout input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]),
.firecheckout .modal-popup input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]),
.firecheckout input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="submit"]):not([type="button"]),
.firecheckout #checkout select,
.firecheckout .modal-popup select,
.firecheckout select,
.firecheckout #checkout textarea,
.firecheckout .modal-popup textarea,
.firecheckout textarea {
width: 100%;
max-width: 100%;
height: 44px;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
font-family: inherit;
color: #111827;
box-sizing: border-box;
transition: border-color 0.15s;
line-height: normal;
-webkit-appearance: none;
}
.firecheckout #checkout textarea,
.firecheckout .modal-popup textarea,
.firecheckout textarea {
height: auto;
min-height: 80px;
resize: vertical;
}
.firecheckout #checkout select,
.firecheckout .modal-popup select,
.firecheckout select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.firecheckout #checkout input:focus,
.firecheckout #checkout select:focus,
.firecheckout #checkout textarea:focus,
.firecheckout input:focus,
.firecheckout select:focus,
.firecheckout textarea:focus {
outline: none;
border-color: var(--sapi-primary, #c70032);
box-shadow: 0 0 0 2px rgba(199, 0, 50, 0.1);
background-color: #fff;
}
/* ──── Error states ──── */
.firecheckout #checkout input.mage-error,
.firecheckout #checkout select.mage-error,
.firecheckout #checkout textarea.mage-error,
.firecheckout #checkout ._error input:not([type="checkbox"]):not([type="radio"]),
.firecheckout #checkout ._error select,
.firecheckout input.mage-error,
.firecheckout select.mage-error,
.firecheckout textarea.mage-error,
.firecheckout ._error input,
.firecheckout ._error select {
border-color: #dc2626 !important;
}
.firecheckout div.mage-error,
.firecheckout div.field-error {
color: #dc2626;
font-size: 12px;
margin-top: 3px;
}
/* ──── Checkbox & radio ──── */
/* Override Tailwind's logical properties (inline-size/block-size) AND set SAPI brand color */
.firecheckout input[type="checkbox"],
.firecheckout input[type="radio"] {
width: auto;
height: auto;
inline-size: auto;
block-size: auto;
margin-right: 6px;
vertical-align: middle;
--form-active-color: var(--sapi-primary, #c70032);
border-color: #d1d5db;
}
.firecheckout input[type="checkbox"]:checked,
.firecheckout input[type="radio"]:checked {
border-color: var(--sapi-primary, #c70032);
background-color: var(--sapi-primary, #c70032);
}
.firecheckout input[type="checkbox"]:focus,
.firecheckout input[type="radio"]:focus {
outline-color: var(--sapi-primary, #c70032);
border-color: var(--sapi-primary, #c70032);
}
.firecheckout .field.choice {
display: flex;
align-items: flex-start;
float: none;
padding: 4px 0;
}
.firecheckout .field.choice > .label {
display: inline;
font-weight: normal;
cursor: pointer;
}
/* ──── Buttons ──── */
.firecheckout .action,
.firecheckout button.action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
border-radius: var(--sapi-radius, 6px);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
line-height: 1.4;
text-decoration: none;
border: 1px solid transparent;
box-sizing: border-box;
}
.firecheckout #checkout .actions-toolbar .action.primary,
.firecheckout #checkout .action.primary,
.firecheckout .modal-footer .action.primary,
.firecheckout .action.primary,
.firecheckout button.action.primary {
background: var(--sapi-primary, #c70032) !important;
border-color: var(--sapi-primary, #c70032) !important;
color: #fff !important;
text-shadow: none;
}
.firecheckout #checkout .actions-toolbar .action.primary:hover,
.firecheckout #checkout .action.primary:hover,
.firecheckout .modal-footer .action.primary:hover,
.firecheckout .action.primary:hover,
.firecheckout button.action.primary:hover,
.firecheckout #checkout .actions-toolbar .action.primary:focus,
.firecheckout #checkout .action.primary:focus,
.firecheckout .action.primary:focus,
.firecheckout button.action.primary:focus {
background: var(--sapi-primary-dark, #a3002a) !important;
border-color: var(--sapi-primary-dark, #a3002a) !important;
color: #fff !important;
}
/* Kill FC-light green pseudo-elements on buttons */
.firecheckout .action.primary::before,
.firecheckout .action.primary::after {
color: #fff !important;
}
.firecheckout .action.secondary,
.firecheckout button.action.secondary,
.firecheckout .action-cancel {
background: #fff;
border: 1px solid #d1d5db;
color: #374151;
}
.firecheckout .action.secondary:hover,
.firecheckout button.action.secondary:hover,
.firecheckout .action-cancel:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
/* ──── Actions toolbar ──── */
/* Reset Tailwind @layer components border/direction/padding */
.firecheckout .actions-toolbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 16px;
border-block-start: 0;
padding-block-start: 0;
margin-block-start: 0;
}
.firecheckout .actions-toolbar .action-cancel { order: -1; }
/* ──── Shipping methods table ──── */
.firecheckout .table-checkout-shipping-method {
width: 100%;
border-collapse: collapse;
}
.firecheckout .table-checkout-shipping-method thead { display: none; }
.firecheckout .table-checkout-shipping-method tbody tr {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
cursor: pointer;
}
.firecheckout .table-checkout-shipping-method tbody tr:last-child { border-bottom: 0; }
.firecheckout .table-checkout-shipping-method td {
border: 0;
padding: 4px 8px;
text-align: left;
}
.firecheckout .table-checkout-shipping-method .col-carrier { font-weight: 500; }
.firecheckout .table-checkout-shipping-method .col-price { margin-left: auto; font-weight: 600; }
/* ──── Payment methods ──── */
.firecheckout .payment-method {
border-bottom: 1px solid #f3f4f6;
padding: 12px 0;
}
.firecheckout .payment-method:last-child { border-bottom: 0; }
.firecheckout .payment-method-title { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.firecheckout .payment-method-content { padding: 12px 0 0 28px; }
.firecheckout .payment-method-content div.field { display: block; float: none; padding: 6px 0; }
/* ──── Billing address ──── */
.firecheckout .billing-address-details {
padding: 8px 0 8px 28px;
line-height: 1.7;
font-size: 14px;
color: #374151;
}
.firecheckout .billing-address-details:empty { display: none; }
/* ──── Order summary sidebar ──── */
.firecheckout .opc-block-summary .table-totals {
width: 100%;
border-collapse: collapse;
}
.firecheckout .opc-block-summary .table-totals th,
.firecheckout .opc-block-summary .table-totals td {
padding: 6px 0;
text-align: left;
border: 0;
}
.firecheckout .opc-block-summary .table-totals td { text-align: right; }
.firecheckout .opc-block-summary .grand .mark,
.firecheckout .opc-block-summary .grand .amount {
font-size: 18px;
font-weight: 700;
padding-top: 12px;
border-top: 2px solid #e5e7eb;
}
.firecheckout .minicart-items-wrapper {
max-height: 300px;
overflow-y: auto;
margin: 12px 0;
padding: 0;
}
.firecheckout .minicart-items {
list-style: none;
padding: 0;
margin: 0;
}
.firecheckout .minicart-items .product-item {
display: flex;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #f3f4f6;
}
.firecheckout .minicart-items .product-item:last-child { border-bottom: 0; }
.firecheckout .minicart-items .product-item-name { font-size: 13px; font-weight: 500; }
.firecheckout .minicart-items .subtotal { font-weight: 600; white-space: nowrap; }
.firecheckout .minicart-items .product-image-container { width: 48px; height: 48px; flex-shrink: 0; }
.firecheckout .minicart-items .product-image-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
/* ──── Messages ──── */
.firecheckout .message {
padding: 12px 16px;
border-radius: 4px;
margin-bottom: 12px;
font-size: 14px;
}
.firecheckout .message-error,
.firecheckout .message.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.firecheckout .message-success,
.firecheckout .message.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.firecheckout .message-notice,
.firecheckout .message.notice { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
/* ──── Loading mask ──── */
/* Hidden by default — Luma JS shows it via inline style="display:block" when loading.
NO !important here so that JS inline styles naturally override this rule. */
.firecheckout .loading-mask {
display: none;
position: fixed;
inset: 0;
background: rgba(255,255,255,0.7);
z-index: 9999;
align-items: center;
justify-content: center;
}
/* Block-level content loading (e.g. shipping methods reloading) */
.firecheckout ._block-content-loading {
position: relative;
min-height: 60px;
}
.firecheckout ._block-content-loading > .loading-mask {
display: flex !important;
position: absolute;
background: rgba(255,255,255,0.85);
z-index: 100;
}
.firecheckout #checkout-loader { position: relative; }
/* ──── FC heading styles ──── */
.firecheckout .fc-heading,
.firecheckout .fc-subtitle {
color: #6b7280;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 10px;
}
/* ──── Checkout agreements (terms) ──── */
.firecheckout .checkout-agreement {
display: flex;
align-items: flex-start;
gap: 6px;
margin-bottom: 8px;
font-size: 13px;
}
.firecheckout .checkout-agreements .action-show { color: var(--sapi-primary); cursor: pointer; text-decoration: underline; background: none; border: 0; padding: 0; }
/* ──── Tailwind form label margin reset ──── */
.firecheckout form label,
.firecheckout .fieldset label {
margin-bottom: 4px;
}
/* ──── FC letter-spacing safety net ──── */
/* FC-light uses letter-spacing:-0.4em hack for inline-block grids.
Ensure all child elements always reset to normal. */
.firecheckout #checkout .fieldset > * {
letter-spacing: normal;
}
/* ──── Page title area ──── */
.firecheckout .page-title {
font-size: 24px;
font-weight: 700;
margin: 16px 24px;
color: var(--sapi-text, #111827);
}
/* ──── Authentication link ──── */
/* Override Luma's float:right + margin-top:-60px which pushes it to the side */
.firecheckout .authentication-wrapper {
position: static !important;
float: none !important;
margin: 0 0 12px !important;
margin-top: 0 !important;
max-width: none !important;
text-align: right;
padding: 0 24px;
}
.firecheckout ._has-auth-shown .authentication-wrapper {
z-index: 900;
}
.firecheckout .authentication-wrapper .action-auth-toggle {
color: var(--sapi-primary);
cursor: pointer;
background: none;
border: none;
font-size: 14px;
text-decoration: underline;
}
/* ──── Discount / gift code toggle ──── */
.firecheckout .payment-option-title { cursor: pointer; font-weight: 600; padding: 10px 0; }
.firecheckout .payment-option-content { padding: 10px 0 0; }
/* ──── Trust CMS block above checkout ──── */
.firecheckout .firecheckout-content-top,
.firecheckout .firecheckout-content-bottom {
padding: 0 24px;
margin-bottom: 16px;
}
/* ──── Continue shopping link ──── */
.firecheckout .continue-shopping {
color: var(--sapi-primary);
font-size: 14px;
text-decoration: none;
margin: 0 24px 16px;
display: inline-block;
}
.firecheckout .continue-shopping:hover { text-decoration: underline; }
/* ============================================================
LUMA BASE CSS — Missing patterns that Firecheckout depends on
Without these, Knockout.js-rendered checkout components break.
============================================================ */
/* ──── CRITICAL: Payment method active/inactive toggle ──── */
/* Without this, ALL payment methods show their content expanded */
.firecheckout .checkout-payment-method .payment-method-content {
display: none;
padding: 12px 0 0 28px;
}
.firecheckout .checkout-payment-method .payment-method._active .payment-method-content {
display: block;
}
.firecheckout .payment-method:not(._active) .payment-method-content {
display: none !important;
}
.firecheckout .payment-method._active .payment-method-content {
display: block !important;
}
/* Payment method structure */
.firecheckout .checkout-payment-method .payment-method:first-child .payment-method-title {
border-top: 0;
}
.firecheckout .checkout-payment-method .payment-method + .payment-method .payment-method-title {
border-top: 1px solid #e5e7eb;
}
.firecheckout .checkout-payment-method .payment-method-title {
padding: 14px 0;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-weight: 500;
}
.firecheckout .checkout-payment-method .payment-method-title .payment-icon {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.firecheckout .checkout-payment-method .payment-method-title .payment-icon img {
max-height: 24px;
width: auto;
display: inline-block;
vertical-align: middle;
}
/* Override Tailwind display:block on checkout images/svgs */
.firecheckout .checkout-payment-method .payment-method-title img,
.firecheckout .checkout-payment-method .payment-method-title svg,
.firecheckout .checkout-payment-method .ccard .credit-card-types img {
display: inline-block;
vertical-align: middle;
}
.firecheckout .checkout-payment-method .payment-method-title .action-help {
display: inline-block;
margin-left: 5px;
}
.firecheckout .checkout-payment-method .payment-method-content .fieldset:not(:last-child) {
margin: 0 0 16px;
}
.firecheckout .checkout-payment-method .payment-method-note {
font-size: 13px;
color: #6b7280;
margin-bottom: 12px;
}
.firecheckout .checkout-payment-method .payment-method-note + .checkout-billing-address {
margin-top: 16px;
}
/* Payment groups */
.firecheckout .checkout-payment-method .payment-group + .payment-group .step-title {
margin: 20px 0 0;
}
.firecheckout .checkout-payment-method .step-title {
border-bottom: 0;
margin-bottom: 0;
}
.firecheckout .checkout-payment-method .no-payments-block {
padding: 20px;
text-align: center;
color: #6b7280;
font-style: italic;
}
/* Billing address form inside payment */
.firecheckout .checkout-payment-method .field-select-billing,
.firecheckout .checkout-payment-method .billing-address-form {
max-width: 500px;
}
.firecheckout .checkout-payment-method .billing-address-same-as-shipping-block {
margin: 0 0 12px;
}
.firecheckout .checkout-payment-method .checkout-billing-address {
margin: 0 0 16px;
}
.firecheckout .checkout-payment-method .checkout-billing-address .primary .action-update {
margin-bottom: 16px;
}
.firecheckout .checkout-payment-method .checkout-billing-address .billing-address-details {
line-height: 1.7;
padding: 0 0 0 23px;
font-size: 14px;
}
.firecheckout .checkout-payment-method .checkout-billing-address input[type="checkbox"] {
vertical-align: top;
}
/* ──── Payment option (coupon/discount) ──── */
.firecheckout .checkout-payment-method .payment-option._collapsible .payment-option-title {
cursor: pointer;
}
.firecheckout .checkout-payment-method .payment-option._collapsible .payment-option-content {
display: none;
}
.firecheckout .checkout-payment-method .payment-option._active .payment-option-content {
display: block;
}
.firecheckout .checkout-payment-method .payment-option-title {
border-top: 1px solid #e5e7eb;
padding: 14px 0;
}
.firecheckout .checkout-payment-method .payment-option-title .action-toggle {
color: var(--sapi-primary, #c70032);
display: inline-block;
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.firecheckout .checkout-payment-method .payment-option-title .action-toggle::after {
content: ' ▾';
font-size: 12px;
}
.firecheckout .checkout-payment-method .payment-option-content {
padding: 0 0 16px 0;
}
.firecheckout .checkout-payment-method .payment-option-content .primary .action.action-apply {
margin-right: 0;
}
/* Discount / coupon form */
.firecheckout .form-discount {
display: flex;
align-items: flex-end;
gap: 8px;
}
.firecheckout .form-discount .field {
flex: 1;
float: none;
padding: 0;
}
.firecheckout .form-discount .actions-toolbar {
flex-shrink: 0;
margin-top: 0;
}
.firecheckout .form-discount .actions-toolbar .primary {
display: inline-flex;
}
/* ──── Field tooltip (the ? icon + popup content) ──── */
.firecheckout .field-tooltip {
cursor: pointer;
position: absolute;
right: 0;
top: 1px;
z-index: 10;
}
.firecheckout .field-tooltip._active {
z-index: 100;
}
.firecheckout .field-tooltip._active .field-tooltip-content {
display: block;
}
.firecheckout .field-tooltip .label {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.firecheckout .field-tooltip .field-tooltip-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
text-decoration: none;
cursor: pointer;
}
.firecheckout .field-tooltip .field-tooltip-action > span {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* Replace Luma icon-font with a CSS "?" circle */
.firecheckout .field-tooltip .field-tooltip-action::before {
content: '?';
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #e5e7eb;
color: #374151;
font-size: 12px;
font-weight: 700;
line-height: 1;
transition: background 0.15s;
}
.firecheckout .field-tooltip .field-tooltip-action:hover::before,
.firecheckout .field-tooltip._active .field-tooltip-action::before {
background: var(--sapi-primary, #c70032);
color: #fff;
}
.firecheckout .field-tooltip .field-tooltip-content {
background: #fff;
border: 1px solid #d1d5db;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
font-size: 13px;
padding: 12px 14px;
width: 270px;
display: none;
position: absolute;
text-transform: none;
word-wrap: break-word;
z-index: 100;
left: 38px;
top: -9px;
line-height: 1.5;
color: #374151;
}
.firecheckout .field-tooltip .field-tooltip-content::before,
.firecheckout .field-tooltip .field-tooltip-content::after {
border: 10px solid transparent;
height: 0;
width: 0;
border-right-color: #fff;
left: -21px;
top: 12px;
content: '';
display: block;
position: absolute;
z-index: 3;
}
.firecheckout .field-tooltip .field-tooltip-content::before {
border-right-color: #d1d5db;
}
.firecheckout .field-tooltip .field-tooltip-content::after {
border-right-color: #fff;
width: 1px;
z-index: 4;
}
@media (max-width: 768px) {
.firecheckout .field-tooltip .field-tooltip-content {
left: auto;
right: -10px;
top: 100%;
margin-top: 8px;
}
.firecheckout .field-tooltip .field-tooltip-content::before,
.firecheckout .field-tooltip .field-tooltip-content::after {
border-right-color: transparent;
border-bottom-color: #fff;
left: auto;
right: 12px;
top: -21px;
}
.firecheckout .field-tooltip .field-tooltip-content::before {
border-bottom-color: #d1d5db;
}
}
/* Field with tooltip needs relative positioning and padding for the ? icon */
.firecheckout .field._with-tooltip > .control {
padding-right: 36px;
position: relative;
}
/* ──── Items-in-cart collapse (Order Summary product list) ──── */
.firecheckout .opc-block-summary .items-in-cart > .title {
border-bottom: 1px solid #e5e7eb;
padding: 10px 36px 10px 0;
cursor: pointer;
display: block;
text-decoration: none;
margin-bottom: 0;
position: relative;
font-size: 14px;
}
.firecheckout .opc-block-summary .items-in-cart > .title > span {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.firecheckout .opc-block-summary .items-in-cart > .title strong {
font-size: 14px;
font-weight: 600;
margin: 0;
}
/* Arrow indicator */
.firecheckout .opc-block-summary .items-in-cart > .title::after {
content: '▾';
position: absolute;
right: 0;
top: 10px;
font-size: 14px;
color: #6b7280;
transition: transform 0.2s;
}
.firecheckout .opc-block-summary .items-in-cart.active > .title::after {
transform: rotate(180deg);
}
/* Content collapse toggle */
.firecheckout .items-in-cart > .content {
display: none;
}
.firecheckout .items-in-cart.active > .content {
display: block;
}
/* OPC block summary enhancements */
.firecheckout .opc-block-summary {
background: #fafafa;
border-radius: 6px;
padding: 0;
margin: 0;
}
.firecheckout .opc-block-summary > .title {
display: block;
font-size: 20px;
font-weight: 600;
padding: 0 0 16px;
margin: 0;
}
.firecheckout .opc-block-summary .mark .value {
color: #6b7280;
display: block;
font-size: 12px;
}
.firecheckout .opc-block-summary .discount.coupon {
display: none;
}
.firecheckout .opc-block-summary .not-calculated {
font-style: italic;
white-space: normal;
color: #9ca3af;
}
.firecheckout .opc-block-summary .table-totals .table-caption {
display: none;
}
.firecheckout .opc-block-summary .grand.incl + .grand.excl .mark,
.firecheckout .opc-block-summary .grand.incl + .grand.excl .amount {
border-top: 0;
font-size: 13px;
padding-top: 0;
}
.firecheckout .opc-block-summary .grand.incl + .grand.excl .mark strong,
.firecheckout .opc-block-summary .grand.incl + .grand.excl .amount strong {
font-weight: 400;
}
.firecheckout .opc-block-summary .table-totals .totals-tax-summary .mark,
.firecheckout .opc-block-summary .table-totals .totals-tax-summary .amount {
border-bottom: 1px solid #e5e7eb;
border-top: 1px solid #e5e7eb;
cursor: pointer;
}
.firecheckout .opc-block-summary .table-totals .totals-tax-summary .amount .price {
padding-right: 20px;
position: relative;
display: inline-block;
}
.firecheckout .opc-block-summary .table-totals .totals-tax-details {
display: none;
}
.firecheckout .opc-block-summary .table-totals .totals-tax-summary._active + .totals-tax-details {
display: table-row;
}
.firecheckout .opc-block-summary .table-totals tbody tr:last-child td {
padding-bottom: 14px;
}
.firecheckout .opc-block-summary .product-item .product-item-inner {
display: flex;
align-items: flex-start;
margin: 0 0 8px;
width: 100%;
gap: 8px;
}
.firecheckout .opc-block-summary .product-item .product-item-name-block {
flex: 1;
text-align: left;
}
.firecheckout .opc-block-summary .product-item .subtotal {
text-align: right;
white-space: nowrap;
font-weight: 600;
}
.firecheckout .opc-block-summary .product-item .price {
font-size: 14px;
font-weight: 400;
}
.firecheckout .opc-block-summary .product-item .price-including-tax + .price-excluding-tax .price {
font-size: 12px;
}
.firecheckout .opc-block-summary .product-item .message {
margin-top: 8px;
}
.firecheckout .opc-block-summary .actions-toolbar {
position: relative;
z-index: 1;
}
.firecheckout .opc-block-summary .actions-toolbar .secondary {
border-top: 1px solid #e5e7eb;
display: block;
margin: -1px 0 0;
padding: 12px 0 0;
text-align: left;
}
.firecheckout .column.main .opc-block-summary .product-item {
margin: 0;
padding-left: 0;
}
/* Item options (configurable product attributes in summary) */
.firecheckout .opc-block-summary .items-in-cart .product .item-options {
margin: 4px 0 0;
}
.firecheckout .opc-block-summary .items-in-cart .product .item-options dt {
float: left;
clear: left;
margin: 0 8px 0 0;
font-weight: 600;
font-size: 12px;
color: #6b7280;
}
.firecheckout .opc-block-summary .items-in-cart .product .item-options dt::after {
content: ':';
}
.firecheckout .opc-block-summary .items-in-cart .product .item-options dd {
float: left;
margin: 0 0 4px;
font-size: 12px;
color: #374151;
}
/* ──── Shipping methods enhancements ──── */
.firecheckout .table-checkout-shipping-method .col-method {
width: 30px;
flex-shrink: 0;
text-align: center;
}
.firecheckout .no-quotes-block {
margin: 12px 0;
padding: 16px;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #991b1b;
font-size: 14px;
}
.firecheckout .opc-estimated-wrapper {
margin-top: 0;
display: none;
}
/* Shipping information block (shown after selecting address) */
.firecheckout .opc-block-shipping-information {
padding: 0;
}
.firecheckout .opc-block-shipping-information .shipping-information-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
font-weight: 600;
padding-bottom: 10px;
}
.firecheckout .opc-block-shipping-information .shipping-information-title .action-edit {
color: var(--sapi-primary, #c70032);
cursor: pointer;
text-decoration: none;
font-size: 13px;
}
.firecheckout .opc-block-shipping-information .shipping-information-content {
line-height: 1.7;
font-size: 14px;
color: #374151;
}
.firecheckout .opc-block-shipping-information .ship-to,
.firecheckout .opc-block-shipping-information .ship-via {
margin: 0 0 16px;
}
/* ──── Authentication dropdown (login from checkout) ──── */
/* .authentication-wrapper positioning now consolidated in "Authentication link" section above */
.firecheckout .authentication-dropdown {
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
position: absolute;
right: 0;
top: 100%;
margin-top: 8px;
min-width: 340px;
max-width: 500px;
padding: 24px;
transform: scale(1, 0);
transform-origin: top right;
transition: transform 0.15s ease, visibility 0s linear 0.15s;
visibility: hidden;
z-index: 101;
box-sizing: border-box;
}
.firecheckout .authentication-dropdown._show {
transform: scale(1, 1);
transition: transform 0.15s ease, visibility 0s linear 0s;
visibility: visible;
}
.firecheckout .block-authentication .block-title {
font-size: 18px;
border-bottom: 0;
margin-bottom: 20px;
}
.firecheckout .block-authentication .block-title strong {
font-weight: 600;
}
.firecheckout .block-authentication .field .label {
font-weight: 500;
}
.firecheckout .block-authentication .actions-toolbar {
margin-bottom: 5px;
}
.firecheckout .block-authentication .actions-toolbar > .secondary {
padding-top: 16px;
text-align: left;
}
.firecheckout .block-authentication .block[class] {
margin: 0;
}
.firecheckout .block-authentication .block[class] ul {
list-style: none;
padding-left: 0;
}
.firecheckout .block-authentication .block[class] .field .control,
.firecheckout .block-authentication .block[class] .field .label {
float: none;
width: auto;
}
.firecheckout .block-authentication .block[class] + .block {
border-top: 1px solid #e5e7eb;
margin-top: 20px;
padding-top: 20px;
position: relative;
}
.firecheckout .block-authentication .block[class] + .block::before {
content: attr(data-label);
background: #fff;
border: 1px solid #d1d5db;
border-radius: 50%;
color: #9ca3af;
display: inline-block;
font-size: 12px;
height: 28px;
left: 50%;
line-height: 26px;
margin: -15px 0 0 -14px;
min-width: 28px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0;
box-sizing: border-box;
}
/* Authentication dropdown overlay */
.firecheckout .dropdown-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.firecheckout ._show ~ .dropdown-overlay {
display: block;
}
/* ──── Place order button ──── */
.firecheckout .place-order {
margin-top: 12px;
}
.firecheckout .place-order .actions-toolbar {
display: block;
text-align: right;
}
.firecheckout .place-order .actions-toolbar .primary {
display: block;
float: none;
}
.firecheckout .place-order .actions-toolbar .primary .action.primary.checkout {
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 700;
border-radius: 6px;
}
/* ──── Checkout agreements block ──── */
.firecheckout .checkout-agreements-block .checkout-agreements {
margin-bottom: 16px;
}
.firecheckout .checkout-agreements-block .checkout-agreement.field {
display: flex;
align-items: flex-start;
}
.firecheckout .checkout-agreements-block .checkout-agreement.field.required label::after {
content: none;
}
.firecheckout .checkout-agreements-block .checkout-agreement.field.required .action-show::after {
content: '*';
color: var(--sapi-primary, #c70032);
font-size: 12px;
}
.firecheckout .checkout-agreements-block .action-show {
vertical-align: baseline;
color: var(--sapi-primary, #c70032);
cursor: pointer;
text-decoration: underline;
background: none;
border: 0;
padding: 0;
}
.firecheckout .checkout-agreements-items {
padding-bottom: 16px;
}
.firecheckout .checkout-agreements-items .checkout-agreements-item {
margin-bottom: 16px;
}
.firecheckout .checkout-agreement-item-content {
overflow: auto;
max-height: 300px;
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 13px;
line-height: 1.6;
}
/* ──── OPC sidebar: modal-slide resets ──── */
/* Luma renders the sidebar as a modal-slide overlay on mobile.
We need explicit resets so it always renders inline. */
.firecheckout .opc-sidebar {
visibility: visible !important;
opacity: 1 !important;
pointer-events: all !important;
position: sticky;
top: 15px;
transform: none !important;
}
.firecheckout .opc-sidebar .modal-inner-wrap {
padding: 0;
border: 0;
background: none !important;
box-shadow: none;
position: static;
transform: none !important;
max-height: none;
overflow: visible;
}
.firecheckout .opc-sidebar .modal-header {
display: none !important;
}
.firecheckout .opc-sidebar .modal-content {
padding: 0;
}
/* ──── Shipping form max-width ──── */
.firecheckout .opc-wrapper .form-login,
.firecheckout .opc-wrapper .form-shipping-address {
max-width: 600px;
}
.firecheckout .opc-wrapper .form-login {
border-bottom: 1px solid #e5e7eb;
padding-bottom: 16px;
margin-bottom: 16px;
}
/* ──── Block content loading ──── */
.firecheckout ._block-content-loading {
position: relative;
}
/* ──── Loader spinner (CSS-only, replaces Luma GIF) ──── */
.firecheckout .loading-mask .loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.firecheckout .loading-mask .loader > img {
display: none;
}
.firecheckout .loading-mask .loader::before {
content: '';
width: 32px;
height: 32px;
border: 3px solid #e5e7eb;
border-top-color: var(--sapi-primary, #c70032);
border-radius: 50%;
animation: sapi-spinner 0.6s linear infinite;
}
.firecheckout .loading-mask .loader > p {
font-size: 13px;
color: #6b7280;
margin: 0;
}
@keyframes sapi-spinner {
to { transform: rotate(360deg); }
}
/* ──── Hidden helper ──── */
.firecheckout .fc-hidden {
display: none !important;
}
/* ──── Checkout success page ──── */
.checkout-onepage-success .page-title-wrapper {
padding: 24px;
}
.checkout-onepage-success .checkout-success {
padding: 0 24px 40px;
}
.checkout-onepage-success .checkout-success .actions-toolbar {
margin-top: 24px;
}
/* ──── Form login specific styles ──── */
.firecheckout .form-login .fieldset {
clear: left;
margin-bottom: 0;
}
.firecheckout .form-login .hidden-fields {
margin-top: 0;
margin-bottom: 20px;
}
.firecheckout .form-login .note {
font-size: 12px;
color: #6b7280;
margin-top: 6px;
}
/* ──── Shipping policy (tooltip variant) ──── */
.firecheckout .shipping-policy-block.field-tooltip {
position: static;
display: inline-block;
margin-top: 8px;
}
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-action {
display: inline;
cursor: pointer;
color: var(--sapi-primary, #c70032);
text-decoration: underline;
font-size: 13px;
}
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-action::before {
display: none;
}
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-action span {
clip: auto;
width: auto;
height: auto;
position: static;
margin: 0;
}
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-content {
position: relative;
left: auto;
top: auto;
margin-top: 8px;
width: 100%;
}
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-content::before,
.firecheckout .shipping-policy-block.field-tooltip .field-tooltip-content::after {
display: none;
}
/* ──── Credit card fields ──── */
.firecheckout .ccard .fields > .year {
padding-left: 5px;
}
.firecheckout .ccard .fields .select {
padding-left: 5px;
padding-right: 5px;
}
.firecheckout .ccard .month .select {
width: 140px;
}
.firecheckout .ccard .year .select {
width: 80px;
}
.firecheckout .ccard > .field.cvv > .control {
display: inline-block;
padding-right: 20px;
}
.firecheckout .ccard .cvv .label {
display: block;
}
.firecheckout .ccard .cvv .input-text {
width: 55px;
}
/* ──── Express checkout buttons (PayPal, etc.) ──── */
.firecheckout .checkout-payment-method .payment-method-iframe {
background: transparent;
display: none;
width: 100%;
}
.firecheckout .checkout-payment-method .payment-method._active .payment-method-iframe {
display: block;
}
/* ──── Stripe / third-party payment styling ──── */
.firecheckout .payment-method .flex-center {
display: flex;
align-items: center;
gap: 8px;
}
.firecheckout .payment-method .payment-type-icon {
width: 32px;
height: auto;
}
/* ──── Responsive: Single-column checkout on mobile ──── */
@media (max-width: 900px) {
.firecheckout .opc-sidebar {
position: static;
}
.firecheckout .authentication-dropdown {
min-width: 100%;
right: -24px;
}
.firecheckout .opc-wrapper .form-login,
.firecheckout .opc-wrapper .form-shipping-address {
max-width: 100%;
}
}
/* ──── Shipping method table — mobile card layout (applies to .firecheckout too) ──── */
.table-checkout-shipping-method,
.firecheckout .table-checkout-shipping-method {
width: 100%;
max-width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.table-checkout-shipping-method td,
.firecheckout .table-checkout-shipping-method td {
word-break: break-word;
overflow-wrap: anywhere;
min-width: 0;
}
@media (max-width: 640px) {
.table-checkout-shipping-method,
.firecheckout .table-checkout-shipping-method,
.table-checkout-shipping-method thead,
.firecheckout .table-checkout-shipping-method thead,
.table-checkout-shipping-method tbody,
.firecheckout .table-checkout-shipping-method tbody,
.table-checkout-shipping-method tr,
.firecheckout .table-checkout-shipping-method tr,
.table-checkout-shipping-method td,
.firecheckout .table-checkout-shipping-method td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.table-checkout-shipping-method thead,
.firecheckout .table-checkout-shipping-method thead {
display: none !important;
}
.table-checkout-shipping-method tbody tr,
.firecheckout .table-checkout-shipping-method tbody tr {
position: relative;
padding: 14px 14px 14px 40px !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px;
margin-bottom: 10px;
background: #fff;
flex-direction: column !important;
}
.table-checkout-shipping-method tbody td,
.firecheckout .table-checkout-shipping-method tbody td {
border: none !important;
padding: 2px 0 !important;
width: auto !important;
margin-left: 0 !important;
}
.table-checkout-shipping-method tbody td.col-method:first-child,
.firecheckout .table-checkout-shipping-method tbody td.col-method:first-child {
position: absolute;
top: 16px;
left: 12px;
padding: 0 !important;
width: auto !important;
}
.table-checkout-shipping-method tbody td.col-price,
.firecheckout .table-checkout-shipping-method tbody td.col-price {
font-weight: 700;
font-size: 15px;
margin-left: 0 !important;
}
.table-checkout-shipping-method tbody td.col-method,
.firecheckout .table-checkout-shipping-method tbody td.col-method {
font-weight: 600;
}
.table-checkout-shipping-method tbody td.col-carrier,
.firecheckout .table-checkout-shipping-method tbody td.col-carrier {
color: #6b7280;
font-size: 13px;
line-height: 1.4;
}
/* Ensure parent containers allow the table to shrink */
#checkout-shipping-method-load,
.checkout-shipping-method,
.methods-shipping {
max-width: 100%;
overflow-x: hidden;
}
}
/* ──── Hide shipping-method title column on mobile (user-requested) ──── */
@media only screen and (max-width: 768px) {
html body td#label_method_bestway_tablerate,
html body td#label_method_mpcustomshipping_mpcustomshipping,
html body table.table-checkout-shipping-method tbody td[id^="label_method_"],
html body #co-shipping-method-form .table-checkout-shipping-method td[id^="label_method_"],
html body li#opc-shipping_method .table-checkout-shipping-method td[id^="label_method_"],
html body .table-checkout-shipping-method tbody td.col-method:not(:first-child) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
}
/* ============================================================
SHIPPING LANDING PAGE + CALCULATOR
============================================================ */
.sapi-shipping-landing { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(12px, 2vw, 24px); }
.sapi-shipping-hero {
text-align: center;
padding: clamp(32px, 5vw, 56px) clamp(16px, 3vw, 32px);
background: linear-gradient(135deg, #1e2530 0%, #2e3744 100%);
color: #fff;
border-radius: 16px;
margin-bottom: 28px;
}
.sapi-shipping-hero h1 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
margin: 0 0 12px;
color: #fff;
letter-spacing: -0.01em;
}
.sapi-shipping-hero p {
max-width: 680px;
margin: 0 auto;
color: rgba(255,255,255,0.85);
font-size: clamp(0.95rem, 1.5vw, 1.05rem);
line-height: 1.55;
}
.sapi-shipping-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.sapi-shipping-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
backdrop-filter: blur(4px);
}
.sapi-shipping-hero-badge svg { width: 16px; height: 16px; }
/* Calculator card */
.sapi-shipping-calc {
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(18px, 3vw, 28px);
background: #fff;
box-shadow: 0 6px 22px rgba(15,34,76,0.06);
max-width: 900px;
margin: -40px auto 0;
position: relative;
z-index: 2;
}
.sapi-shipping-calc-form { display: grid; gap: 14px; }
.sapi-shipping-calc-row {
display: grid;
gap: 12px;
grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 720px) {
.sapi-shipping-calc-row { grid-template-columns: 1fr; }
}
.sapi-shipping-calc-field { display: flex; flex-direction: column; gap: 6px; }
.sapi-shipping-calc-label { font-size: 0.85rem; font-weight: 600; color: #374151; }
.sapi-shipping-calc-input {
width: 100%;
padding: 11px 13px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 0.95rem;
font-weight: 400;
color: #111827;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.sapi-shipping-calc-input:focus {
outline: none;
border-color: var(--sapi-primary, #c70032);
box-shadow: 0 0 0 3px rgba(199,0,50,.12);
}
.sapi-shipping-calc-btn {
margin-top: 4px;
padding: 13px 20px;
border: none;
border-radius: 10px;
background: var(--sapi-primary, #c70032);
color: #fff;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
transition: filter .15s, transform .1s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sapi-shipping-calc-btn:disabled { opacity: .6; cursor: wait; }
.sapi-shipping-calc-btn:hover:not(:disabled) { filter: brightness(1.08); }
.sapi-shipping-calc-btn:active:not(:disabled) { transform: translateY(1px); }
.sapi-shipping-calc-result {
margin-top: 20px;
padding: 18px 20px;
border-radius: 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
}
.sapi-shipping-calc-result.is-error {
background: #fef2f2;
border-color: #fecaca;
color: #991b1b;
}
.sapi-shipping-calc-result-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.sapi-shipping-calc-result-head h4 {
margin: 0;
font-size: 0.9rem;
font-weight: 700;
color: #065f46;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.sapi-shipping-calc-price {
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 800;
color: var(--sapi-primary, #c70032);
margin: 4px 0 2px;
line-height: 1.1;
}
.sapi-shipping-calc-price small {
font-size: 0.7rem;
font-weight: 500;
color: #6b7280;
margin-left: 6px;
vertical-align: 4px;
}
.sapi-shipping-calc-method {
font-size: 0.9rem;
color: #374151;
margin-top: 4px;
}
.sapi-shipping-calc-meta { color: #9ca3af; margin: 0 4px; }
.sapi-shipping-calc-error { display: flex; gap: 10px; align-items: flex-start; }
.sapi-shipping-calc-error svg { flex-shrink: 0; margin-top: 2px; }
.sapi-shipping-calc-error p { margin: 0; font-weight: 500; }
/* Trust pillars grid */
.sapi-shipping-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 44px 0;
}
@media (max-width: 720px) {
.sapi-shipping-pillars { grid-template-columns: 1fr; }
}
.sapi-shipping-pillar {
padding: 22px 20px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
text-align: center;
transition: transform .25s, box-shadow .25s;
}
.sapi-shipping-pillar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(15,34,76,0.06);
}
.sapi-shipping-pillar-icon {
width: 52px;
height: 52px;
margin: 0 auto 14px;
background: linear-gradient(135deg, #fef3f4 0%, #fee2e4 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sapi-primary, #c70032);
}
.sapi-shipping-pillar-icon svg { width: 26px; height: 26px; }
.sapi-shipping-pillar h3 {
margin: 0 0 6px;
font-size: 1.02rem;
font-weight: 700;
color: #111827;
}
.sapi-shipping-pillar p {
margin: 0;
font-size: 0.88rem;
color: #6b7280;
line-height: 1.5;
}
/* How it works */
.sapi-shipping-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 36px 0;
position: relative;
}
@media (max-width: 720px) {
.sapi-shipping-steps { grid-template-columns: 1fr; }
}
.sapi-shipping-step {
padding: 20px;
border-radius: 12px;
background: #f9fafb;
border: 1px solid #f3f4f6;
position: relative;
}
.sapi-shipping-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sapi-primary, #c70032);
color: #fff;
font-weight: 800;
font-size: 0.92rem;
margin-bottom: 10px;
}
.sapi-shipping-step h3 { margin: 0 0 4px; font-size: 0.98rem; color: #111827; }
.sapi-shipping-step p { margin: 0; font-size: 0.88rem; color: #4b5563; line-height: 1.5; }
/* FAQ */
.sapi-shipping-faq { margin: 36px 0 44px; }
.sapi-shipping-faq h2 {
font-size: clamp(1.3rem, 2.2vw, 1.6rem);
font-weight: 700;
color: #111827;
margin: 0 0 20px;
text-align: center;
}
.sapi-shipping-faq-item {
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 10px;
background: #fff;
overflow: hidden;
}
.sapi-shipping-faq-item summary {
padding: 14px 18px;
cursor: pointer;
font-weight: 600;
color: #111827;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sapi-shipping-faq-item summary::-webkit-details-marker { display: none; }
.sapi-shipping-faq-item summary::after {
content: '+';
font-size: 1.5rem;
color: #9ca3af;
font-weight: 300;
line-height: 1;
transition: transform .2s;
}
.sapi-shipping-faq-item[open] summary::after { transform: rotate(45deg); }
.sapi-shipping-faq-item[open] summary { color: var(--sapi-primary, #c70032); }
.sapi-shipping-faq-item > div {
padding: 0 18px 16px;
color: #4b5563;
font-size: 0.92rem;
line-height: 1.55;
}
/* Trust footer strip */
.sapi-shipping-trust {
text-align: center;
padding: 26px;
background: #f9fafb;
border-radius: 12px;
margin-top: 36px;
}
.sapi-shipping-trust h3 { margin: 0 0 6px; font-size: 1.05rem; color: #111827; }
.sapi-shipping-trust p { margin: 0; color: #6b7280; font-size: 0.9rem; }
[x-cloak] { display: none !important; }
/* ============================================================
GUEST ORDER LOOKUP (/sales/guest/form/)
============================================================ */
.sapi-guest-order {
max-width: 1120px;
margin: 0 auto;
padding: clamp(14px, 2.5vw, 28px) clamp(12px, 2vw, 20px);
}
.sapi-guest-order-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
@media (max-width: 900px) {
.sapi-guest-order-layout { grid-template-columns: 1fr; }
}
.sapi-guest-order-form-wrap {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(20px, 3vw, 32px);
box-shadow: 0 8px 24px rgba(15,34,76,0.05);
}
.sapi-guest-order-header { text-align: center; margin-bottom: 22px; }
.sapi-guest-order-icon {
width: 60px;
height: 60px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #fef3f4 0%, #fee2e4 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sapi-primary, #c70032);
}
.sapi-guest-order-header h1 {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
font-weight: 800;
color: #111827;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.sapi-guest-order-header p {
color: #6b7280;
font-size: 0.95rem;
max-width: 540px;
margin: 0 auto;
line-height: 1.55;
}
.sapi-guest-order-form { margin-top: 14px; }
.sapi-guest-order-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 18px;
}
@media (max-width: 640px) {
.sapi-guest-order-grid { grid-template-columns: 1fr; }
}
.sapi-guest-order-field--full { grid-column: 1 / -1; }
.sapi-guest-order-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin-bottom: 5px;
}
.sapi-guest-order-input {
width: 100%;
padding: 11px 13px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 0.95rem;
color: #111827;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.sapi-guest-order-input:focus {
outline: none;
border-color: var(--sapi-primary, #c70032);
box-shadow: 0 0 0 3px rgba(199,0,50,.12);
}
.sapi-guest-order-field small {
display: block;
margin-top: 6px;
font-size: 0.78rem;
color: #9ca3af;
}
.sapi-guest-order-btn {
width: 100%;
padding: 13px 20px;
border: none;
border-radius: 10px;
background: var(--sapi-primary, #c70032);
color: #fff;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
transition: filter .15s, transform .1s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sapi-guest-order-btn:hover { filter: brightness(1.08); }
.sapi-guest-order-btn:active { transform: translateY(1px); }
/* Help sidebar */
.sapi-guest-order-help { display: grid; gap: 14px; }
.sapi-guest-order-help-block {
background: #f9fafb;
border: 1px solid #f3f4f6;
border-radius: 12px;
padding: 18px 20px;
}
.sapi-guest-order-help-block h3 {
margin: 0 0 10px;
font-size: 0.95rem;
font-weight: 700;
color: #111827;
display: flex;
align-items: center;
}
.sapi-guest-order-help-block ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.sapi-guest-order-help-block li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.88rem;
color: #374151;
line-height: 1.5;
}
.sapi-guest-order-help-block li svg { flex-shrink: 0; margin-top: 3px; }
.sapi-guest-order-help-contact p {
margin: 0 0 12px;
font-size: 0.88rem;
color: #6b7280;
}
.sapi-guest-order-contact {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
border-radius: 8px;
background: #fff;
border: 1px solid #e5e7eb;
color: #111827;
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
margin-right: 6px;
margin-bottom: 6px;
transition: border-color .15s, color .15s;
}
.sapi-guest-order-contact:hover {
color: var(--sapi-primary, #c70032);
border-color: var(--sapi-primary, #c70032);
}
.sapi-guest-order-contact--wa {
background: #25D366;
color: #fff;
border-color: #25D366;
}
.sapi-guest-order-contact--wa:hover {
filter: brightness(1.05);
color: #fff;
border-color: #25D366;
}
.sapi-guest-order-help-trust > div {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 0.9rem;
color: #065f46;
}
.sapi-guest-order-help-trust p { margin: 0; font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
/* ============================================================
CONTACT PAGE (/contact)
============================================================ */
.sapi-contact { max-width: 1200px; margin: 0 auto; padding: clamp(14px, 2.5vw, 28px) clamp(12px, 2vw, 20px); }
.sapi-contact-hero {
text-align: center;
padding: clamp(28px, 4.5vw, 48px) clamp(16px, 3vw, 32px);
background: linear-gradient(135deg, #1e2530 0%, #2e3744 100%);
color: #fff;
border-radius: 16px;
margin-bottom: 28px;
}
.sapi-contact-hero h1 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
margin: 0 0 10px;
color: #fff;
letter-spacing: -0.01em;
}
.sapi-contact-hero p {
max-width: 640px;
margin: 0 auto;
color: rgba(255,255,255,0.85);
font-size: 0.98rem;
line-height: 1.5;
}
.sapi-contact-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 22px;
}
.sapi-contact-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 13px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
color: #fff;
font-size: 0.8rem;
font-weight: 600;
backdrop-filter: blur(4px);
}
.sapi-contact-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
@media (max-width: 900px) {
.sapi-contact-layout { grid-template-columns: 1fr; }
}
.sapi-contact-form-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(22px, 3vw, 32px);
box-shadow: 0 8px 24px rgba(15,34,76,0.05);
}
.sapi-contact-form-card h2 {
font-size: clamp(1.1rem, 2vw, 1.35rem);
font-weight: 700;
color: #111827;
margin: 0 0 6px;
display: flex;
align-items: center;
}
.sapi-contact-form-intro {
color: #6b7280;
font-size: 0.92rem;
margin: 0 0 22px;
line-height: 1.5;
}
.sapi-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 16px;
}
@media (max-width: 640px) {
.sapi-contact-grid { grid-template-columns: 1fr; }
}
.sapi-contact-field--full { grid-column: 1 / -1; }
.sapi-contact-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin-bottom: 5px;
}
.sapi-contact-field .req { color: var(--sapi-primary, #c70032); }
.sapi-contact-input {
width: 100%;
padding: 11px 13px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 0.95rem;
font-family: inherit;
color: #111827;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.sapi-contact-input:focus {
outline: none;
border-color: var(--sapi-primary, #c70032);
box-shadow: 0 0 0 3px rgba(199,0,50,.12);
}
.sapi-contact-textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.sapi-contact-submit-wrap {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: 8px;
}
.sapi-contact-btn {
padding: 13px 24px;
border: none;
border-radius: 10px;
background: var(--sapi-primary, #c70032);
color: #fff;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
transition: filter .15s, transform .1s;
display: inline-flex;
align-items: center;
}
.sapi-contact-btn:hover { filter: brightness(1.08); }
.sapi-contact-btn:active { transform: translateY(1px); }
.sapi-contact-privacy { font-size: 0.78rem; color: #9ca3af; max-width: 360px; }
/* Sidebar */
.sapi-contact-side-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
}
.sapi-contact-side-head {
text-align: center;
padding: 24px 20px 18px;
border-bottom: 1px solid #f3f4f6;
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.sapi-contact-side-icon {
width: 56px;
height: 56px;
margin: 0 auto 10px;
background: linear-gradient(135deg, #fef3f4 0%, #fee2e4 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--sapi-primary, #c70032);
}
.sapi-contact-side-head h3 {
margin: 0 0 6px;
font-size: 1.05rem;
font-weight: 700;
color: #111827;
}
.sapi-contact-side-head address {
font-style: normal;
color: #6b7280;
font-size: 0.88rem;
line-height: 1.5;
}
.sapi-contact-side-channels {
display: grid;
gap: 1px;
background: #f3f4f6;
}
.sapi-contact-channel {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
background: #fff;
text-decoration: none;
color: inherit;
transition: background .15s;
}
.sapi-contact-channel:hover { background: #fafafa; }
.sapi-contact-channel-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
.sapi-contact-channel-icon--blue { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); }
.sapi-contact-channel-icon--green { background: #25D366; }
.sapi-contact-channel-icon--red { background: linear-gradient(135deg, #c70032 0%, #8f0022 100%); }
.sapi-contact-channel-label {
display: block;
font-size: 0.72rem;
color: #9ca3af;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.03em;
margin-bottom: 2px;
}
.sapi-contact-channel-value {
display: block;
color: #111827;
font-size: 0.92rem;
font-weight: 700;
word-break: break-word;
}
.sapi-contact-side-hours { padding: 18px 20px 22px; }
.sapi-contact-side-hours h4 {
margin: 0 0 8px;
font-size: 0.85rem;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.sapi-contact-side-hours ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 4px;
}
.sapi-contact-side-hours li {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 0.88rem;
}
.sapi-contact-side-hours li span { color: #6b7280; }
.sapi-contact-side-hours li strong { color: #111827; font-weight: 600; }
/* ============================================================
AUTH PAGES (login / register)
============================================================ */
.sapi-auth {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: clamp(14px, 2.5vw, 28px) clamp(12px, 2vw, 24px);
box-sizing: border-box;
}
.sapi-auth-layout {
display: grid;
grid-template-columns: 60fr 40fr; /* 60% form / 40% benefits */
gap: clamp(18px, 2.5vw, 32px);
align-items: start;
}
@media (max-width: 900px) { .sapi-auth-layout { grid-template-columns: 1fr; } }
/* ---- Login / Register full-width + centering override ---- */
body.customer-account-login .page-main,
body.customer-account-create .page-main,
body.customer-account-login main,
body.customer-account-create main,
body.customer-account-login .columns,
body.customer-account-create .columns,
body.customer-account-login .column.main,
body.customer-account-create .column.main,
body.customer-account-login .login-container {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure the auth card itself is centered */
body.customer-account-login .sapi-auth,
body.customer-account-create .sapi-auth {
margin-left: auto !important;
margin-right: auto !important;
}
/* The stock Magento "login-container" div just wraps children — make it span full width + not shrink content */
body.customer-account-login .login-container {
display: block !important;
max-width: 100% !important;
}
/* Hero (register only) */
.sapi-auth-hero {
grid-column: 1 / -1;
text-align: center;
padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 28px);
background: linear-gradient(135deg, #1e2530 0%, #2e3744 100%);
color: #fff;
border-radius: 16px;
margin-bottom: 20px;
}
.sapi-auth-hero-icon {
width: 62px; height: 62px; margin: 0 auto 12px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 18px;
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.sapi-auth-hero h1 {
margin: 0 0 10px;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
}
.sapi-auth-hero p {
max-width: 540px; margin: 0 auto;
color: rgba(255,255,255,0.85);
font-size: 0.98rem;
line-height: 1.5;
}
.sapi-auth-hero-trust {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px;
}
.sapi-auth-hero-trust span {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
color: #fff; font-size: 0.78rem; font-weight: 600;
}
/* Form card */
.sapi-auth-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(22px, 3vw, 32px);
box-shadow: 0 8px 24px rgba(15,34,76,0.05);
}
.sapi-auth-head { text-align: center; margin-bottom: 22px; }
.sapi-auth-icon {
width: 56px; height: 56px; margin: 0 auto 12px;
background: linear-gradient(135deg, #fef3f4 0%, #fee2e4 100%);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
color: var(--sapi-primary, #c70032);
}
.sapi-auth-head h1 {
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
font-weight: 800;
color: #111827;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.sapi-auth-head p { color: #6b7280; font-size: 0.95rem; margin: 0; line-height: 1.5; }
.sapi-auth-form { display: grid; gap: 16px; }
.sapi-auth-field label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #374151;
margin-bottom: 5px;
}
.sapi-auth-input {
width: 100%;
padding: 12px 13px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
font-size: 0.95rem;
color: #111827;
box-sizing: border-box;
transition: border-color .15s, box-shadow .15s;
}
.sapi-auth-input:focus {
outline: none;
border-color: var(--sapi-primary, #c70032);
box-shadow: 0 0 0 3px rgba(199,0,50,.12);
}
.sapi-auth-password { position: relative; display: flex; align-items: stretch; }
.sapi-auth-password .sapi-auth-input { padding-right: 48px; }
.sapi-auth-password-toggle {
position: absolute;
right: 4px; top: 50%; transform: translateY(-50%);
border: none; background: transparent; cursor: pointer;
padding: 10px 12px; border-radius: 8px;
color: #9ca3af;
transition: color .15s, background .15s;
}
.sapi-auth-password-toggle:hover { color: var(--sapi-primary, #c70032); background: #f9fafb; }
.sapi-auth-field-footer { display: flex; justify-content: flex-end; margin-top: 6px; }
.sapi-auth-link {
color: var(--sapi-primary, #c70032);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
}
.sapi-auth-link:hover { text-decoration: underline; }
.sapi-auth-btn {
width: 100%;
padding: 13px 20px;
border: none;
border-radius: 10px;
background: var(--sapi-primary, #c70032);
color: #fff;
font-weight: 700;
font-size: 0.98rem;
cursor: pointer;
transition: filter .15s, transform .1s;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.sapi-auth-btn:hover { filter: brightness(1.08); color: #fff; }
.sapi-auth-btn:active { transform: translateY(1px); }
.sapi-auth-btn--ghost {
background: #fff;
border: 1.5px solid var(--sapi-primary, #c70032);
color: var(--sapi-primary, #c70032);
}
.sapi-auth-btn--ghost:hover { background: #fef3f4; color: var(--sapi-primary, #c70032); filter: none; }
.sapi-auth-divider {
display: flex; align-items: center; gap: 12px;
margin: 22px 0 14px;
color: #9ca3af; font-size: 0.82rem;
}
.sapi-auth-divider::before,
.sapi-auth-divider::after {
content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.sapi-auth-error {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 14px;
background: #fef2f2; border: 1px solid #fecaca;
border-radius: 10px; color: #991b1b;
font-size: 0.88rem;
}
.sapi-auth-recaptcha { margin-top: 16px; font-size: 0.8rem; color: #6b7280; }
.sapi-auth-recaptcha p { margin: 0; }
.sapi-auth-recaptcha a { color: var(--sapi-primary, #c70032); }
/* Sidebar */
.sapi-auth-side {
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(20px, 3vw, 26px);
min-height: 100%;
}
.sapi-auth-side h3 {
margin: 0 0 18px;
font-size: 0.95rem;
font-weight: 700;
color: #111827;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sapi-auth-benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sapi-auth-benefits li { display: flex; gap: 12px; align-items: flex-start; }
.sapi-auth-benefit-icon {
flex-shrink: 0;
width: 36px; height: 36px;
background: linear-gradient(135deg, #fef3f4 0%, #fee2e4 100%);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--sapi-primary, #c70032);
}
.sapi-auth-benefits strong {
display: block;
color: #111827;
font-size: 0.92rem;
font-weight: 700;
margin-bottom: 2px;
}
.sapi-auth-benefits p { margin: 0; color: #6b7280; font-size: 0.85rem; line-height: 1.45; }
.sapi-auth-side-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f3f4f6; font-size: 0.88rem; color: #6b7280; }
.sapi-auth-side-foot a { color: var(--sapi-primary, #c70032); font-weight: 600; }
/* Register form layout
Structure on page:
.column.main
├─ #sapi-register-hero (full-width header)
├─ div.mb-8 (Magento's register form wrapper)
│ └─ form
│ ├─ fieldset.create.info (Personal Information — full width)
│ └─ .sapi-register-row (injected by JS)
│ ├─ fieldset.create.account (Sign-in Information — 60%)
│ └─ #sapi-register-side (Benefits — 40%, same height as Sign-in)
*/
body.customer-account-create .column.main {
display: block !important; /* single column — fieldsets stack */
max-width: 1080px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: clamp(14px, 2.5vw, 28px) clamp(12px, 2vw, 24px) !important;
box-sizing: border-box;
}
body.customer-account-create .column.main > div.mb-8 {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: clamp(22px, 3vw, 32px);
box-shadow: 0 8px 24px rgba(15,34,76,0.05);
min-width: 0;
}
/* Row that wraps the Sign-in fieldset + benefits aside */
body.customer-account-create .sapi-register-row {
display: grid;
grid-template-columns: 60fr 40fr;
gap: clamp(18px, 2.5vw, 32px);
align-items: stretch;
margin-top: clamp(16px, 2.5vw, 28px);
}
body.customer-account-create .sapi-register-row > fieldset { min-width: 0; margin: 0; }
body.customer-account-create .sapi-register-row > #sapi-register-side { margin-top: 0; height: 100%; box-sizing: border-box; }
@media (max-width: 900px) {
body.customer-account-create .sapi-register-row { grid-template-columns: 1fr; }
}
/* ============================================================
REGISTER — account-type switch, fieldsets, grid
============================================================ */
body.customer-account-create .sapi-auth {
max-width: 1120px;
padding-top: clamp(16px, 2vw, 24px);
}
body.customer-account-create .sapi-auth-hero { margin-bottom: 24px; }
body.customer-account-create .sapi-auth-card {
margin: 0;
padding: clamp(22px, 3vw, 36px);
display: grid;
gap: clamp(18px, 2vw, 28px);
}
/* Account type switch */
.sapi-acctype-switch {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 640px) { .sapi-acctype-switch { grid-template-columns: 1fr; } }
.sapi-acctype {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
border: 2px solid #e5e7eb;
border-radius: 14px;
background: #fff;
text-align: left;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.sapi-acctype:hover { border-color: #d1d5db; }
.sapi-acctype.is-active {
border-color: var(--sapi-primary, #c70032);
background: #fef3f4;
box-shadow: 0 0 0 4px rgba(199,0,50,0.1);
}
.sapi-acctype svg {
width: 28px; height: 28px;
color: var(--sapi-primary, #c70032);
flex-shrink: 0;
}
.sapi-acctype strong { display: block; color: #111827; font-size: 0.98rem; font-weight: 700; }
.sapi-acctype small { display: block; color: #6b7280; font-size: 0.82rem; margin-top: 2px; }
/* Fieldset layout */
.sapi-fieldset {
border: 1px solid #f3f4f6;
border-radius: 12px;
padding: clamp(16px, 2vw, 22px);
background: #fcfcfd;
margin: 0;
display: grid;
gap: 14px;
min-width: 0;
}
.sapi-fieldset legend {
display: block;
padding: 0 8px;
color: #111827;
font-size: 0.98rem;
font-weight: 700;
margin-bottom: 4px;
margin-left: -8px; /* align with container edge */
}
.sapi-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 640px) { .sapi-grid-2 { grid-template-columns: 1fr; } }
.sapi-auth-hint { color: #9ca3af; font-size: 0.78rem; margin-top: 6px; display: block; }
.sapi-auth-err { color: #b91c1c; font-size: 0.82rem; margin-top: 6px; display: block; }
/* Password strength bar (reset-password / register) */
.sapi-auth-pwstrength {
display: flex; align-items: center; gap: 10px;
margin-top: 8px;
font-size: 0.78rem;
color: #6b7280;
}
.sapi-auth-pwbar {
flex: 1; height: 5px; border-radius: 999px;
background: #e5e7eb; position: relative; overflow: hidden;
transition: background .2s;
}
.sapi-auth-pwbar::before {
content: ""; position: absolute; inset: 0;
width: 0%; border-radius: 999px;
transition: width .25s ease, background .25s ease;
}
.sapi-auth-pwbar.is-lvl-1::before { width: 25%; background: #dc2626; }
.sapi-auth-pwbar.is-lvl-2::before { width: 50%; background: #f59e0b; }
.sapi-auth-pwbar.is-lvl-3::before { width: 75%; background: #10b981; }
.sapi-auth-pwbar.is-lvl-4::before { width: 100%; background: #059669; }
.sapi-auth-btn[disabled],
.sapi-auth-btn:disabled { opacity: .55; cursor: not-allowed; }
.sapi-auth-check {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.92rem;
color: #374151;
cursor: pointer;
}
.sapi-auth-check input[type="checkbox"] {
flex-shrink: 0;
margin-top: 3px;
width: 18px; height: 18px;
accent-color: var(--sapi-primary, #c70032);
}
/* Register-row is now the sign-in + benefits grid inside register.phtml */
body.customer-account-create .sapi-register-row {
display: grid;
grid-template-columns: 60fr 40fr;
gap: clamp(16px, 2vw, 24px);
align-items: stretch;
}
body.customer-account-create .sapi-register-row > .sapi-fieldset,
body.customer-account-create .sapi-register-row > .sapi-auth-side {
margin: 0;
min-width: 0;
}
@media (max-width: 900px) {
body.customer-account-create .sapi-register-row { grid-template-columns: 1fr; }
}
[x-cloak] { display: none !important; }
/* Forgot password — narrow centered card */
.sapi-auth.sapi-auth--narrow { max-width: 560px; }
.sapi-auth.sapi-auth--narrow .sapi-auth-card { margin: 0 auto; }
body.customer-account-forgotpassword .page-main,
body.customer-account-forgotpassword main,
body.customer-account-forgotpassword .columns,
body.customer-account-forgotpassword .column.main {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.customer-account-forgotpassword .sapi-auth { margin-left: auto !important; margin-right: auto !important; }
/* ============================================================
PRIVACY TOOLS (Swissup GDPR)
============================================================ */
.sapi-privacy-block {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
margin-bottom: 24px;
overflow: hidden;
}
.sapi-privacy-block--danger { border-color: #fecaca; }
.sapi-privacy-head {
display: flex; align-items: flex-start; gap: 14px;
padding: clamp(18px, 2.5vw, 24px);
background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
border-bottom: 1px solid #e5e7eb;
}
.sapi-privacy-head--danger {
background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
border-bottom-color: #fecaca;
}
.sapi-privacy-head h2 {
margin: 0 0 4px;
font-size: 1.15rem;
font-weight: 700;
color: #111827;
}
.sapi-privacy-lede { margin: 0; color: #6b7280; font-size: 0.92rem; }
.sapi-privacy-icon {
flex: 0 0 44px; width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: #eef2ff; color: #4f46e5;
}
.sapi-privacy-icon--danger { background: #fee2e2; color: #dc2626; }
.sapi-privacy-body { padding: clamp(18px, 2.5vw, 24px); }
.sapi-privacy-consents { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 16px; }
.sapi-privacy-consent-group h3 {
margin: 0 0 8px;
font-size: 0.85rem; font-weight: 700;
color: #374151; text-transform: uppercase; letter-spacing: 0.03em;
}
.sapi-privacy-consent-group > ul {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 6px;
}
.sapi-privacy-consent-group > ul li {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px;
font-size: 0.92rem; color: #111827;
}
.sapi-privacy-consent-group > ul li.is-accepted .sapi-privacy-status { color: #059669; }
.sapi-privacy-consent-group > ul li.is-pending .sapi-privacy-status { color: #d97706; }
/* Notice banners */
.sapi-privacy-notice {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
border-radius: 12px;
font-size: 0.92rem; line-height: 1.5;
margin-top: 16px;
}
.sapi-privacy-notice p { margin: 0 0 6px; }
.sapi-privacy-notice p:last-child { margin-bottom: 0; }
.sapi-privacy-notice--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.sapi-privacy-notice--info svg { color: #2563eb; flex-shrink: 0; }
.sapi-privacy-notice--warning { background: #fffbeb; border: 1px solid #fde68a; color: #7c2d12; }
.sapi-privacy-notice--warning svg { color: #d97706; flex-shrink: 0; }
/* ---- Generic SAPI button ---- */
.sapi-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 20px;
border-radius: 10px;
font-size: 0.95rem; font-weight: 600;
border: 1px solid transparent;
cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s;
text-decoration: none;
}
.sapi-btn[disabled], .sapi-btn:disabled { opacity: .55; cursor: not-allowed; }
.sapi-btn--danger { background: #dc2626; color: #fff; }
.sapi-btn--danger:hover:not([disabled]) { background: #b91c1c; }
.sapi-btn--ghost { background: #fff; color: #374151; border-color: #d1d5db; }
.sapi-btn--ghost:hover { background: #f9fafb; }
/* ---- Modal ---- */
.sapi-modal-backdrop {
position: fixed; inset: 0;
background: rgba(17, 24, 39, 0.55);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
padding: 16px;
}
.sapi-modal {
background: #fff;
width: 100%; max-width: 560px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
display: flex; flex-direction: column;
max-height: 90vh;
}
.sapi-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #e5e7eb;
}
.sapi-modal-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #111827; }
.sapi-modal-close {
background: transparent; border: none; cursor: pointer; color: #6b7280;
padding: 4px; border-radius: 8px;
}
.sapi-modal-close:hover { background: #f3f4f6; color: #111827; }
.sapi-modal-body { padding: 20px; overflow-y: auto; color: #374151; font-size: 0.94rem; }
.sapi-modal-body p { margin: 0 0 10px; }
.sapi-modal-body p:last-of-type { margin-bottom: 16px; }
.sapi-modal-confirm {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px;
background: #f9fafb; cursor: pointer; font-size: 0.92rem;
}
.sapi-modal-confirm input[type="checkbox"] { margin-top: 3px; }
.sapi-modal-foot {
display: flex; justify-content: flex-end; gap: 10px;
padding: 14px 20px;
border-top: 1px solid #e5e7eb;
background: #f9fafb;
}
/* ============================================================
CUSTOMER ACCOUNT — SIDEBAR NAVIGATION
============================================================ */
.sapi-acctnav {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
position: sticky; top: 20px;
}
/* Header with avatar + greeting */
.sapi-acctnav-header {
display: flex; align-items: center; gap: 12px;
padding: 18px 18px 16px;
background: linear-gradient(135deg, #1e2530 0%, #2e3744 100%);
color: #fff;
}
.sapi-acctnav-avatar {
flex: 0 0 42px; width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
}
.sapi-acctnav-hello {
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sapi-acctnav-name {
font-size: 1.02rem;
font-weight: 700;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
}
/* Link list */
.sapi-acctnav-nav ul { list-style: none; margin: 0; padding: 10px 10px; }
.sapi-acctnav-item { margin: 2px 0; }
.sapi-acctnav-link {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
font-size: 0.94rem;
font-weight: 500;
color: #374151;
border-radius: 10px;
text-decoration: none;
transition: background .15s, color .15s;
position: relative;
}
.sapi-acctnav-link:hover {
background: #f3f4f6;
color: var(--sapi-primary, #c70032);
}
.sapi-acctnav-item.is-current > .sapi-acctnav-link {
background: linear-gradient(90deg, rgba(199,0,50,0.10) 0%, rgba(199,0,50,0.02) 100%);
color: var(--sapi-primary, #c70032);
font-weight: 600;
}
.sapi-acctnav-item.is-current > .sapi-acctnav-link::before {
content: "";
position: absolute; left: 0; top: 8px; bottom: 8px;
width: 3px; border-radius: 3px;
background: var(--sapi-primary, #c70032);
}
.sapi-acctnav-icon {
flex: 0 0 22px; width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
color: #6b7280;
}
.sapi-acctnav-item.is-current > .sapi-acctnav-link .sapi-acctnav-icon,
.sapi-acctnav-link:hover .sapi-acctnav-icon { color: var(--sapi-primary, #c70032); }
.sapi-acctnav-label { flex: 1 1 auto; }
.sapi-acctnav-dot {
flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%;
background: var(--sapi-primary, #c70032);
}
/* Section divider */
.sapi-acctnav-divider {
list-style: none;
border-bottom: 1px dashed #e5e7eb;
margin: 8px 8px;
}
/* Logout */
.sapi-acctnav-logout {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 0 12px 14px;
padding: 10px;
font-size: 0.9rem;
font-weight: 600;
color: #dc2626;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
text-decoration: none;
transition: background .15s, color .15s;
}
.sapi-acctnav-logout:hover { background: #fee2e2; color: #b91c1c; }
/* Hide Hyva/Magento stock wrapper to let our clean card breathe */
.block.account-nav > .title { display: none; }
.block.account-nav > .content { padding: 0; }
.block.account-nav .content .account-nav { background: none; }
@media (max-width: 767px) {
.sapi-acctnav { position: static; }
}
/* ============================================================
404 / no-route page redesign — engaging, branded, animated.
Scope: every element under .sapi-404 (CMS page body).
============================================================ */
.sapi-404 {
max-width: 880px;
margin: 3rem auto 5rem;
padding: 0 1.5rem;
text-align: center;
color: var(--sapi-text);
font-family: inherit;
}
.sapi-404-graphic {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 220px;
margin-bottom: 1.25rem;
}
.sapi-404-number {
font-size: clamp(7rem, 18vw, 12rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--sapi-dark) 0%, var(--sapi-primary) 60%, #ff5e7a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
animation: sapi404-pop 0.6s cubic-bezier(.22,1.5,.36,1) both;
}
.sapi-404-number::after {
content: '';
position: absolute;
inset: auto 0 -8px 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--sapi-primary), transparent);
border-radius: 99px;
opacity: 0.4;
animation: sapi404-line 2.4s ease-in-out infinite;
}
.sapi-404-dust {
position: absolute;
inset: 0;
pointer-events: none;
overflow: visible;
}
.sapi-404-dust span {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sapi-primary);
opacity: 0;
animation: sapi404-dust 4s linear infinite;
}
.sapi-404-dust span:nth-child(1) { left: 12%; top: 20%; animation-delay: 0s; background: var(--sapi-primary); }
.sapi-404-dust span:nth-child(2) { left: 28%; top: 70%; animation-delay: 0.6s; background: var(--sapi-emerald); }
.sapi-404-dust span:nth-child(3) { left: 50%; top: 15%; animation-delay: 1.2s; background: var(--sapi-dark); }
.sapi-404-dust span:nth-child(4) { left: 72%; top: 60%; animation-delay: 1.8s; background: var(--sapi-primary); }
.sapi-404-dust span:nth-child(5) { left: 88%; top: 30%; animation-delay: 2.4s; background: var(--sapi-emerald); }
.sapi-404-dust span:nth-child(6) { left: 8%; top: 55%; animation-delay: 3.0s; background: var(--sapi-dark); }
.sapi-404 h1 {
font-size: clamp(1.5rem, 3.2vw, 2.25rem);
font-weight: 700;
margin: 0 0 0.5rem;
color: var(--sapi-dark);
letter-spacing: -0.02em;
}
.sapi-404 .sapi-404-lead {
font-size: 1.05rem;
color: #4b5563;
max-width: 540px;
margin: 0 auto 1.5rem;
line-height: 1.55;
}
.sapi-404-search {
display: flex;
max-width: 520px;
margin: 0 auto 2.5rem;
background: #fff;
border: 1.5px solid var(--sapi-border);
border-radius: 99px;
overflow: hidden;
box-shadow: var(--sapi-shadow);
transition: border-color 0.2s, box-shadow 0.2s;
}
.sapi-404-search:focus-within {
border-color: var(--sapi-primary);
box-shadow: 0 0 0 3px rgba(199, 0, 50, 0.12);
}
.sapi-404-search input[type="search"] {
flex: 1;
border: 0;
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
background: transparent;
outline: none;
color: var(--sapi-text);
}
.sapi-404-search button {
border: 0;
padding: 0 1.5rem;
background: var(--sapi-primary);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.sapi-404-search button:hover {
background: #a4002a;
}
.sapi-404-search button svg {
width: 16px;
height: 16px;
}
.sapi-404-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
max-width: 720px;
margin: 0 auto;
}
.sapi-404-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.25rem 1rem;
background: #fff;
border: 1.5px solid var(--sapi-border);
border-radius: var(--sapi-radius);
text-decoration: none;
color: var(--sapi-dark);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.sapi-404-card:hover {
transform: translateY(-2px);
border-color: var(--sapi-primary);
box-shadow: var(--sapi-shadow);
color: var(--sapi-primary);
}
.sapi-404-card svg {
width: 28px;
height: 28px;
color: var(--sapi-primary);
}
.sapi-404-card h3 {
font-size: 0.95rem;
font-weight: 600;
margin: 0;
color: inherit;
}
.sapi-404-card p {
font-size: 0.8rem;
color: #6b7280;
margin: 0;
}
@keyframes sapi404-pop {
0% { opacity: 0; transform: scale(0.6) rotate(-3deg); }
60% { opacity: 1; transform: scale(1.03) rotate(0); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes sapi404-line {
0%, 100% { transform: scaleX(0.4); opacity: 0.2; }
50% { transform: scaleX(1); opacity: 0.6; }
}
@keyframes sapi404-dust {
0% { opacity: 0; transform: translate(0,0) scale(0.6); }
20% { opacity: 0.85; }
100% { opacity: 0; transform: translate(40px, -90px) scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
.sapi-404-number, .sapi-404-number::after, .sapi-404-dust span {
animation: none;
}
}
/* ============================================================
DEBUG/DIAGNOSTIC: body-level font-weight reset for DE homepage
The user reports that the entire DE homepage looks bolded while
other locales look normal. CSS files are byte-for-byte identical
across locales, HTML structures are identical — but DE clearly
renders heavier in the browser. Apply an aggressive normal-weight
reset on cms-home-de body (excluding elements that are designed
bold) to test whether the cause is "something requesting heavier
weight" vs "something rendering at the right weight but looking
heavy due to font fallback or rendering."
If this normalises DE → cause is somewhere asking for >400 weight.
If it does NOT normalise → cause is font-rendering / font-fallback,
not weight-rule, and we need a different approach.
============================================================ */
body.cms-home-de,
body.cms-home-de p,
body.cms-home-de span:not([class*="strong"]):not([class*="bold"]):not([class*="heading"]),
body.cms-home-de div:not([class*="header"]):not([class*="footer"]),
body.cms-home-de a:not([class*="btn"]):not([class*="button"]):not([class*="strong"]) {
font-weight: 400 !important;
font-synthesis: none !important;
-webkit-font-synthesis: none;
}
/* Keep designed-bold elements bold (override the reset above) */
body.cms-home-de h1,
body.cms-home-de h2,
body.cms-home-de h3,
body.cms-home-de h4,
body.cms-home-de strong,
body.cms-home-de b,
body.cms-home-de .footer-heading,
body.cms-home-de [class*="heading"],
body.cms-home-de [class*="strong"],
body.cms-home-de [class*="bold"] {
font-weight: 700 !important;
}
/* === Cart qty toggler (Swissup_CheckoutCart) ============================
The Swissup template emits 24x24 SVGs with no inline width/height, so on
Hyva (no Swissup CSS loaded) the icons render at full intrinsic size.
Constrain them to a small, button-shaped control.
=========================================================================== */
.qty-wrapper {
display: inline-flex;
align-items: stretch;
border: 1px solid rgb(209 213 219);
border-radius: 6px;
overflow: hidden;
background: #fff;
height: 36px;
width: max-content;
}
.qty-wrapper .qty {
width: 48px;
text-align: center;
border: 0;
background: transparent;
font-weight: 600;
-moz-appearance: textfield;
padding: 0;
}
.qty-wrapper .qty::-webkit-outer-spin-button,
.qty-wrapper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 100%;
cursor: pointer;
color: #374151;
background: #f9fafb;
user-select: none;
transition: background-color .15s ease;
}
.qty-toggler:hover { background: #e5e7eb; }
.qty-toggler:active { background: #d1d5db; }
.qty-toggler.qty-less { border-right: 1px solid rgb(209 213 219); }
.qty-toggler.qty-more { border-left: 1px solid rgb(209 213 219); }
.qty-toggler svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
pointer-events: none;
}
/* ---- Responsive tables in product descriptions ---------------------------
Legacy product descriptions contain inline-styled elements with
fixed pixel widths (e.g. "width: 536px"), which overflow on mobile. Force
them to fit the parent container without rewriting every DB row. ----- */
.catalog-product-view table,
.cms-page-view table,
.page-product-view table {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
table-layout: auto;
word-break: break-word;
overflow-wrap: anywhere;
}
.catalog-product-view table img,
.cms-page-view table img,
.page-product-view table img {
max-width: 100%;
height: auto;
}
.catalog-product-view table td,
.catalog-product-view table th,
.cms-page-view table td,
.cms-page-view table th {
height: auto !important;
min-width: 0;
}
/* For very dense tables, allow horizontal scroll instead of cropping */
@media (max-width: 640px) {
.catalog-product-view table,
.cms-page-view table,
.page-product-view table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: normal;
}
}
/* ---- Legacy Bootstrap grid + button shim ---------------------------------
Many older CMS blocks (block_id 452, 659, 733, 740, 782, 305, etc.) and
two CMS pages (popup-newsletter, gewinnspiel-newsletter) were written
when this storefront ran a Bootstrap-based theme. Hyvä replaced Bootstrap
with Tailwind, so classes like .col-md-6 and .btn-danger silently became
no-ops, causing rows to stack and buttons to lose styling.
These shim rules restore just enough of Bootstrap 4's grid + button styles
to make those legacy blocks render correctly without rewriting their
HTML. Scoped to be conservative — no global side effects observed in the
current Hyvä build (verified: none of these class names are defined by
Hyvä or compiled by Tailwind JIT). */
.container-fluid {
width: 100%;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row > [class*="col-"] {
padding-right: 15px;
padding-left: 15px;
box-sizing: border-box;
}
.row-padding > [class*="col-"] {
padding: 15px;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
width: 100%;
flex: 0 0 auto;
}
/* Mobile: every col is full-width (col-xs-* would already imply this) */
/* md+ (≥768px): apply md breakpoint columns */
@media (min-width: 768px) {
.col-md-1 { width: 8.3333%; }
.col-md-2 { width: 16.6666%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.3333%; }
.col-md-5 { width: 41.6666%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.3333%; }
.col-md-8 { width: 66.6666%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.3333%; }
.col-md-11 { width: 91.6666%; }
.col-md-12 { width: 100%; }
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
/* same as md for our purposes */
}
.col-sm-6 { width: 50%; }
.col-sm-12 { width: 100%; }
.col-lg-6 { width: 50%; }
.col-lg-12 { width: 100%; }
}
/* Legacy Bootstrap buttons used in old CMS blocks */
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.5rem 1rem;
font-size: 0.95rem;
line-height: 1.5;
border-radius: 0.375rem;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-md { padding: 0.5rem 1rem; font-size: 0.95rem; }
.btn-block { display: block; width: 100%; }
.btn-danger { background-color: #c70032; border-color: #c70032; color: #fff; }
.btn-danger:hover { background-color: #a30029; border-color: #a30029; color: #fff; }
.btn-success { background-color: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background-color: #15803d; border-color: #15803d; color: #fff; }
.btn-primary { background-color: #2563eb; border-color: #2563eb; color: #fff; }
.btn-primary:hover { background-color: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-warning:hover { background-color: #d97706; border-color: #d97706; color: #fff; }
/* Old blocks often have inline `` + tight stacking — give them air */
.cms-page-view .container-fluid,
.catalog-product-view .container-fluid,
.catalog-category-view .container-fluid {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* ============================================================
Localized "incl. VAT" price suffix per store.
The base rules inject ' inkl. MwSt.' (German) via ::after content, which
leaks on every non-DE store (CSS content can't be i18n'd). Scope by the
attribute so each store shows its own label. The price NUMBER is
already server-rendered with the correct per-store tax rate; only the label.
============================================================ */
html[lang="en"] .price-wrapper.price-including-tax .price::after,
html[lang="en"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="en"] .price-box .final-price .price::after,
html[lang="en"] .sapi-drawer-price .price-including-tax .price::after { content: ' incl. VAT' !important; }
html[lang="it"] .price-wrapper.price-including-tax .price::after,
html[lang="it"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="it"] .price-box .final-price .price::after,
html[lang="it"] .sapi-drawer-price .price-including-tax .price::after { content: ' IVA inclusa' !important; }
html[lang="es"] .price-wrapper.price-including-tax .price::after,
html[lang="es"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="es"] .price-box .final-price .price::after,
html[lang="es"] .sapi-drawer-price .price-including-tax .price::after { content: ' IVA incluido' !important; }
html[lang="nl"] .price-wrapper.price-including-tax .price::after,
html[lang="nl"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="nl"] .price-box .final-price .price::after,
html[lang="nl"] .sapi-drawer-price .price-including-tax .price::after { content: ' incl. btw' !important; }
html[lang="pl"] .price-wrapper.price-including-tax .price::after,
html[lang="pl"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="pl"] .price-box .final-price .price::after,
html[lang="pl"] .sapi-drawer-price .price-including-tax .price::after { content: ' z VAT' !important; }
html[lang="sk"] .price-wrapper.price-including-tax .price::after,
html[lang="sk"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="sk"] .price-box .final-price .price::after,
html[lang="sk"] .sapi-drawer-price .price-including-tax .price::after { content: ' s DPH' !important; }
html[lang="cs"] .price-wrapper.price-including-tax .price::after,
html[lang="cs"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="cs"] .price-box .final-price .price::after,
html[lang="cs"] .sapi-drawer-price .price-including-tax .price::after { content: ' vč. DPH' !important; }
html[lang="hr"] .price-wrapper.price-including-tax .price::after,
html[lang="hr"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="hr"] .price-box .final-price .price::after,
html[lang="hr"] .sapi-drawer-price .price-including-tax .price::after { content: ' s PDV-om' !important; }
html[lang="sl"] .price-wrapper.price-including-tax .price::after,
html[lang="sl"] .sapi-cart-prices span.price-including-tax .price::after,
html[lang="sl"] .price-box .final-price .price::after,
html[lang="sl"] .sapi-drawer-price .price-including-tax .price::after { content: ' z DDV' !important; }