/* Compos CSS bundle — generated 2026-05-29T14:47:38+00:00 */

/* ===== compos-brand-vars ===== */
:root {
--cp-accent: #3f5163;
--cp-accent-hover: #33424F;
--cp-accent-rgb: 63,81,99;
--cp-accent-text: #ffffff;
--cp-accent-30: rgba(63,81,99, 0.30);
--cp-accent-15: rgba(63,81,99, 0.15);
--cp-accent-08: rgba(63,81,99, 0.08);
--cp-bg: #0e1628;
--cp-surface: #1a2332;
--cp-elevated: #243042;
--cp-border: rgba(255,255,255,0.10);
--cp-border-strong: rgba(255,255,255,0.20);
--cp-text-heading: #ffffff;
--cp-text: #e2e8f0;
--cp-text-muted: rgba(255,255,255,0.65);
--cp-text-faint: rgba(255,255,255,0.40);
--cp-dark: #0e1628;
--cp-dark-rgb: 14,22,40;
--cp-mid: #1a2332;
--cp-hover-alpha: rgba(255,255,255,0.04);
--cp-surface-alpha: rgba(255,255,255,0.05);
--cp-overlay: rgba(0,0,0,0.60);
--cp-card-bg: #1a2332;
--cp-card-border: rgba(255,255,255,0.10);
--cp-input-bg: #243042;
--cp-text-on-input: #ffffff;
--cp-text-on-input-rgb: 255,255,255;
--cp-widget-bg: #0e1628;
--cp-header-bg: #1d1a23;
--cp-header-bg-scrolled: #1d1a23;
--cp-header-text: rgba(255,255,255,0.92);
--cp-header-text-hover: #ffa500;
--cp-header-text-active: #ffa500;
--cp-header-border: rgba(255,255,255,0.06);
--cp-header-dropdown-bg-start: #1d1a23;
--cp-header-dropdown-bg-end: #0d1020;
--cp-header-dropdown-text: #ffffff;
--cp-header-dropdown-text-hover: #ffffff;
--cp-header-dropdown-hover: #2e2938;
--cp-header-dropdown-border: rgba(255,255,255,0.06);
--cp-header-mega-bg-start: #1d1a23;
--cp-header-mega-bg-mid: #0e1628;
--cp-header-mega-bg-end: #0a0a0a;
--cp-header-mega-border: #ffa500;
--cp-header-mega-heading: rgba(255,255,255,0.40);
--cp-header-mega-item-text: rgba(255,255,255,0.85);
--cp-header-mega-item-hover: rgba(255,255,255,0.04);
--cp-header-mobile-bg: var(--cp-header-bg);
--cp-header-mobile-border: var(--cp-header-border);
--cp-header-mobile-item-hover: var(--cp-header-dropdown-hover, rgba(255,255,255,0.04));
--cp-header-nav-font-size: 18px;
--cp-header-submenu-font-size: 16px;
--cp-header-topbar-bg: rgba(0,0,0,0.30);
--cp-header-topbar-text: rgba(255,255,255,0.70);
--cp-header-topbar-border: rgba(255,255,255,0.08);
--cp-header-gradient-start: #ffffff;
--cp-header-gradient-end: #ffffff;
--cp-header-accent-line: #c8ff00;
--cp-header-icon-hover: rgba(255,255,255,0.06);
--cp-header-avatar-border: rgba(255,255,255,0.06);
--cp-header-balance-text: rgba(255,255,255,0.92);
--cp-footer-bg: #0e1628;
--cp-footer-text: rgba(255,255,255,0.65);
--cp-footer-heading: #ffffff;
--cp-footer-border: rgba(255,255,255,0.08);
--cp-footer-link: rgba(255,255,255,0.85);
--cp-footer-surface: rgba(255,255,255,0.04);
--cp-footer-link-hover: var(--cp-accent);
--cp-toast-bg: var(--cp-header-bg);
--cp-toast-text: var(--cp-header-text);
--cp-toast-border: var(--cp-header-border);
--cp-toast-heading-bg: var(--cp-header-bg);
--cp-font-heading: inherit;
--cp-font-body: "Plus Jakarta Sans", -apple-system, sans-serif;
--cp-font-size-base: 18px;
--cp-font-size-h1: clamp(2rem, 4vw, 3rem);
--cp-font-size-h2: clamp(1.5rem, 3vw, 2.25rem);
--cp-font-size-h3: clamp(1.25rem, 2.5vw, 1.75rem);
--cp-font-size-h4: clamp(1.1rem, 2vw, 1.5rem);
--cp-font-size-h5: 1.1rem;
--cp-font-size-h6: 1rem;
--cp-font-size-body: 1rem;
--cp-font-size-lead: 1.125rem;
--cp-font-size-small: 0.875rem;
--cp-font-size-xs: 0.6875rem;
--cp-font-size-badge: 0.75em;
--cp-font-size-label: 0.75rem;
--cp-font-size-nav: 0.875rem;
--cp-font-size-button: 0.875rem;
--cp-font-size-caption: 0.75rem;
--cp-input-font-size: var(--cp-font-size-body);
--cp-line-height-heading: 1.2;
--cp-line-height-body: 1.6;
--cp-letter-spacing-heading: 0em;
--cp-letter-spacing-body: 0em;
--cp-font-weight-heading: 600;
--cp-font-weight-body: 400;
--cp-font-style-heading: normal;
--cp-text-transform-heading: none;
--cp-radius-none: 0px;
--cp-radius-small: 4px;
--cp-radius-medium: 8px;
--cp-radius-large: 16px;
--cp-radius-pill: 999px;
--cp-radius-sm: var(--cp-radius-small);
--cp-radius-md: var(--cp-radius-medium);
--cp-radius-lg: var(--cp-radius-large);
--cp-radius-xl: var(--cp-radius-pill);
--cp-widget-radius: 0;
--cp-card-radius: 0;
--cp-btn-radius: 999px;
--cp-input-radius: 4px;
--cp-image-radius: 0;
--cp-space-xxs: 6px;
--cp-space-xs:  8px;
--cp-space-sm:  12px;
--cp-space-md:  18px;
--cp-space-lg:  28px;
--cp-space-xl:  44px;
--cp-space-2xl: 64px;
--cp-widget-padding: 40px;
--cp-widget-pad-y: 30px;
--cp-widget-pad-x: 0;
--cp-card-padding: 20px;
--cp-card-pad: var(--cp-card-padding);
--cp-card-gap: var(--cp-space-md);
--cp-stack-gap: var(--cp-space-sm);
--cp-item-gap: var(--cp-space-xs);
--cp-section-gap: var(--cp-space-lg);
--cp-btn-min-h: 44px;
--cp-btn-min-h-sm: 36px;
--cp-btn-min-h-lg: 54px;
--cp-input-bg: var(--cp-elevated);
--cp-input-text: var(--cp-text-on-input);
--cp-input-placeholder: var(--cp-text-muted);
--cp-input-border: var(--cp-border);
--cp-input-border-width: 1px;
--cp-input-focus-border: var(--cp-accent);
--cp-input-focus-ring: rgba(var(--cp-accent-rgb), 0.25);
--cp-input-focus-ring-width: 3px;
--cp-input-focus-bg: var(--cp-elevated);
--cp-input-error-border: var(--cp-status-error);
--cp-input-error-bg: var(--cp-elevated);
--cp-input-error-ring: rgba(var(--cp-status-error-rgb), 0.20);
--cp-input-success-border: var(--cp-status-success);
--cp-input-radius: 4px;
--cp-input-height: 44px;
--cp-input-padding-x: 0.875rem;
--cp-input-font-size: var(--cp-font-size-body);
--cp-textarea-min-height: 120px;
--cp-textarea-resize: vertical;
--cp-surface-text: var(--cp-text);
--cp-surface-text-muted: var(--cp-text-muted);
--cp-surface-bg: var(--cp-bg);
--cp-surface-border: var(--cp-border);
--cp-surface-card: var(--cp-surface);
--cp-btn-padding-x: 1.5rem;
--cp-btn-padding-y: 0.625rem;
--cp-btn-font-weight: 700;
--cp-btn-letter-spacing: 0.02em;
--cp-btn-primary-bg: var(--cp-accent);
--cp-btn-primary-text: #ffffff;
--cp-btn-primary-border: transparent;
--cp-btn-primary-hover-bg: var(--cp-accent-hover);
--cp-btn-primary-shadow: 0 8px 24px rgba(0,0,0,0.25);
--cp-btn-secondary-bg: transparent;
--cp-btn-secondary-border-width: 1.5px;
--cp-btn-secondary-text: var(--cp-accent);
--cp-btn-secondary-border: var(--cp-accent);
--cp-btn-secondary-hover-bg: var(--cp-accent);
--cp-btn-secondary-hover-text: #ffffff;
--cp-shadow-sm: 0 1px 2px rgba(0,0,0,0.075), 0 1px 3px rgba(0,0,0,0.15);
--cp-shadow-md: 0 4px 6px rgba(0,0,0,0.105), 0 2px 4px rgba(0,0,0,0.09);
--cp-shadow-lg: 0 10px 25px rgba(0,0,0,0.225), 0 4px 10px rgba(0,0,0,0.12);
--cp-shadow-elevated: 0 20px 50px rgba(0,0,0,0.375), 0 8px 20px rgba(0,0,0,0.225);
--cp-shadow-card: 0 1px 3px rgba(0,0,0,0.12);
--cp-shadow-none: none;
--cp-status-success: #22c55e;
--cp-status-success-rgb: 34,197,94;
--cp-status-success-bg: rgba(34,197,94, 0.12);
--cp-status-warning: #f59e0b;
--cp-status-warning-rgb: 245,158,11;
--cp-status-warning-bg: rgba(245,158,11, 0.12);
--cp-status-error: #ef4444;
--cp-status-error-rgb: 239,68,68;
--cp-status-error-bg: rgba(239,68,68, 0.12);
--cp-status-info: #3b82f6;
--cp-status-info-rgb: 59,130,246;
--cp-status-info-bg: rgba(59,130,246, 0.12);
--cp-success: var(--cp-status-success);
--cp-success-bg: var(--cp-status-success-bg);
--cp-warning: var(--cp-status-warning);
--cp-warning-bg: var(--cp-status-warning-bg);
--cp-error: var(--cp-status-error);
--cp-error-bg: var(--cp-status-error-bg);
--cp-info: var(--cp-status-info);
--cp-info-bg: var(--cp-status-info-bg);
--cp-green: var(--cp-status-success);
--cp-badge-live-bg: var(--cp-status-error);
--cp-badge-live-text: #ffffff;
--cp-badge-free-bg: var(--cp-status-success);
--cp-badge-free-text: #ffffff;
--cp-badge-new-bg: var(--cp-status-info);
--cp-badge-new-text: #ffffff;
--cp-badge-hot-bg: var(--cp-accent);
--cp-badge-hot-text: #ffffff;
--cp-text-on-dark: #ffffff;
--cp-text-on-dark-rgb: 255,255,255;
--cp-text-on-light: #0e1628;
--cp-text-on-light-rgb: 14,22,40;
--cp-text-on-accent: #ffffff;
--cp-text-on-accent-rgb: 255,255,255;
--cp-text-muted-on-dark: rgba(255,255,255,0.65);
--cp-text-muted-on-dark-low: rgba(255,255,255,0.40);
--cp-text-muted-on-light: rgba(14,22,40,0.65);
--cp-surface-light: #f5f5f5;
--cp-gradient-dark-start: var(--cp-bg);
--cp-gradient-dark-end: var(--cp-surface);
--cp-gradient-surface-overlay: linear-gradient(180deg, var(--cp-bg), var(--cp-surface));
--cp-type-cash-accent: #3b82f6;
--cp-type-cash-rgb: 59,130,246;
--cp-type-cash-badge: #3b82f6;
--cp-type-cash-text: #ffffff;
--cp-type-coins-accent: #fbbf24;
--cp-type-coins-rgb: 251,191,36;
--cp-type-coins-badge: #fbbf24;
--cp-type-coins-text: #ffffff;
--cp-type-free-accent: #22c55e;
--cp-type-free-rgb: 34,197,94;
--cp-type-free-badge: #22c55e;
--cp-type-free-text: #ffffff;
--cp-type-voucher-accent: #8b5cf6;
--cp-type-voucher-rgb: 139,92,246;
--cp-type-voucher-badge: #8b5cf6;
--cp-type-voucher-text: #ffffff;
--cp-type-experience-accent: #f59e0b;
--cp-type-experience-rgb: 245,158,11;
--cp-type-experience-badge: #f59e0b;
--cp-type-experience-text: #ffffff;
--cp-type-physical-accent: #06b6d4;
--cp-type-physical-rgb: 6,182,212;
--cp-type-physical-badge: #06b6d4;
--cp-type-physical-text: #ffffff;
--cp-admin-bg: #0e1117;
--cp-admin-surface: #161b26;
--cp-admin-elevated: #1e2535;
--cp-admin-border: rgba(255,255,255,0.08);
--cp-admin-hover: rgba(255,255,255,0.04);
--cp-admin-active: rgba(255,255,255,0.08);
--cp-admin-text: #e2e8f0;
--cp-admin-text-muted: rgba(255,255,255,0.55);
--cp-admin-text-faint: rgba(255,255,255,0.30);
--cp-admin-input-bg: #1e2535;
--cp-global-overlay: linear-gradient(180deg, rgba(255,255,255,0), rgba(20,20,20,1));
}
body.compos-admin-light-mode {
--cp-admin-bg: #f4f6fb;
--cp-admin-surface: #ffffff;
--cp-admin-elevated: #f8fafc;
--cp-admin-border: rgba(14,22,40,0.08);
--cp-admin-hover: rgba(14,22,40,0.04);
--cp-admin-active: rgba(var(--cp-accent-rgb,255,101,14),0.10);
--cp-admin-text: #0e1628;
--cp-admin-text-muted: rgba(14,22,40,0.62);
--cp-admin-text-faint: rgba(14,22,40,0.38);
--cp-admin-input-bg: #ffffff;
}
body.compos-admin-light-mode.compos-admin-shell { background: var(--cp-admin-bg); color: var(--cp-admin-text); }
body.compos-admin-light-mode #compos-rail { background: var(--cp-admin-elevated); border-right: 1px solid var(--cp-admin-border); }
body.compos-admin-light-mode #compos-topbar { background: var(--cp-admin-elevated); border-bottom: 1px solid var(--cp-admin-border); }
body.compos-admin-light-mode #compos-canvas, body.compos-admin-light-mode #compos-canvas-inner { background: var(--cp-admin-bg); color: var(--cp-admin-text); }
body.compos-admin-light-mode #compos-panel { background: var(--cp-admin-surface); border-right: 1px solid var(--cp-admin-border); }
body.compos-admin-light-mode #compos-rail .compos-rail-icon { color: rgba(14,22,40,0.65); }
body.compos-admin-light-mode #compos-rail .compos-rail-icon:hover, body.compos-admin-light-mode #compos-rail .compos-rail-icon:focus-visible { color: #0e1628; background: rgba(14,22,40,0.06); }
body.compos-admin-light-mode #compos-rail .compos-rail-icon.is-active { color: var(--cp-accent); background: rgba(var(--cp-accent-rgb,255,101,14),0.12); }
body.compos-admin-light-mode #compos-rail hr.compos-rail-divider { background: var(--cp-admin-border); }
body.compos-admin-light-mode #compos-topbar .compos-topbar-btn { color: rgba(14,22,40,0.7); }
body.compos-admin-light-mode #compos-topbar .compos-topbar-btn:hover { background: rgba(14,22,40,0.06); color: #0e1628; }
body.compos-admin-light-mode .compos-setup { background: var(--cp-admin-bg); color: var(--cp-admin-text); }
:root{
--cp-dark-heading: #ffffff;
--cp-dark-text: rgba(255,255,255,0.86);
--cp-dark-muted: rgba(255,255,255,0.62);
--cp-dark-surface: rgba(255,255,255,0.04);
--cp-dark-border: rgba(255,255,255,0.10);
--cp-light-heading: #0e1628;
--cp-light-text: #1e293b;
--cp-light-muted: rgba(14,22,40,0.65);
--cp-light-surface: #ffffff;
--cp-light-border: rgba(0,0,0,0.10);
--cp-accent-heading: #ffffff;
--cp-accent-text: #ffffff;
--cp-accent-muted: rgba(255,255,255,0.85);
--cp-accent-surface: rgba(255,255,255,0.12);
--cp-accent-border: rgba(255,255,255,0.25);
}

/* ===== compos-toast ===== */
.compos-toast-stack {
position: fixed;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: 360px;
}
.compos-toast-stack--top-right    { top: 20px;    right: 20px;  }
.compos-toast-stack--top-left     { top: 20px;    left: 20px;   }
.compos-toast-stack--top-center   { top: 20px;    left: 50%; transform: translateX(-50%); }
.compos-toast-stack--bottom-right { bottom: 20px; right: 20px;  flex-direction: column-reverse; }
.compos-toast-stack--bottom-left  { bottom: 20px; left: 20px;   flex-direction: column-reverse; }
.compos-toast-stack--bottom-center{ bottom: 20px; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
.compos-toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px 12px 14px;
border-radius: var(--cp-radius-md, 10px);
background: var(--cp-header-bg, #1f2a44);
color: var(--cp-header-text, #e2e8f0);
border-left: 4px solid var(--cp-status-info, #3b82f6);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
font-family: var(--cp-font-body, system-ui, -apple-system, sans-serif);
font-size: 13px;
line-height: 1.5;
pointer-events: auto;
max-width: 100%;
word-break: break-word;
}
.compos-toast--success { border-left-color: var(--cp-status-success, #10b981); }
.compos-toast--info    { border-left-color: var(--cp-status-info,    #3b82f6); }
.compos-toast--warn    { border-left-color: var(--cp-status-warn,    #d97706); }
.compos-toast--error   { border-left-color: var(--cp-status-error,   #ef4444); }
.compos-toast__icon { flex: 0 0 18px; font-size: 16px; line-height: 1.2; margin-top: 1px; }
.compos-toast__icon--success { color: var(--cp-status-success, #10b981); }
.compos-toast__icon--info    { color: var(--cp-status-info,    #3b82f6); }
.compos-toast__icon--warn    { color: var(--cp-status-warn,    #d97706); }
.compos-toast__icon--error   { color: var(--cp-status-error,   #ef4444); }
.compos-toast__body { flex: 1; min-width: 0; }
.compos-toast__body a { color: inherit; text-decoration: underline; }
.compos-toast__close {
flex: 0 0 20px;
background: transparent;
border: 0;
color: var(--cp-header-text, #94a3b8);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
opacity: 0.6;
}
.compos-toast__close:hover { opacity: 1; }
.compos-toast--enter-slide { animation: compos-toast-slide 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.compos-toast--enter-fade  { animation: compos-toast-fade  180ms ease-out; }
.compos-toast--enter-scale { animation: compos-toast-scale 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.compos-toast--exit  { animation: compos-toast-exit  180ms ease-in forwards; }
@keyframes compos-toast-slide { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes compos-toast-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes compos-toast-scale { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes compos-toast-exit  { to   { opacity: 0; transform: translateY(-6px); } }
.compos-toast-stack--top-left  .compos-toast--enter-slide,
.compos-toast-stack--bottom-left .compos-toast--enter-slide { animation-name: compos-toast-slide-left; }
@keyframes compos-toast-slide-left { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.compos-toast { animation: none !important; transition: none !important; }
}

/* ===== compos-wishlist ===== */
.compos-wishlist-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
cursor: pointer;
transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
font-family: inherit;
font-size: 18px;
}
.compos-wishlist-btn:hover {
transform: translateY(-2px);
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
}
.compos-wishlist-btn.is-active {
background: var(--cp-accent, #ff650e);
border-color: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
animation: compos-wishlist-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.compos-wishlist-btn.is-active:hover {
background: var(--cp-accent-hover, #e55410);
border-color: var(--cp-accent-hover, #e55410);
}
.compos-wishlist-btn i { line-height: 1; }
.compos-wishlist-btn__label {
font-size: var(--cp-font-size-small, 13px);
font-weight: 600;
margin-left: 4px;
}
.compos-wishlist-btn--with-label {
width: auto;
height: auto;
padding: 8px 14px;
border-radius: var(--cp-radius-md, 10px);
}
@keyframes compos-wishlist-pop {
0%   { transform: scale(0.85); }
60%  { transform: scale(1.18); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.compos-wishlist-btn { animation: none !important; transition: none !important; }
}
.compos-wishlist-page {
padding: 30px 0;
}
.compos-wishlist-empty {
text-align: center;
padding: 60px 20px;
background: var(--cp-surface, #fff);
border: 1px dashed var(--cp-border, rgba(0, 0, 0, 0.10));
border-radius: var(--cp-radius-lg, 16px);
}
.compos-wishlist-empty i {
font-size: 48px;
color: var(--cp-text-faint, rgba(14, 22, 40, 0.35));
margin-bottom: 12px;
display: block;
}
.compos-wishlist-empty h3 {
margin: 0 0 8px;
font-size: var(--cp-font-size-h3, 1.25rem);
color: var(--cp-text-heading, var(--cp-text, #0e1628));
font-family: var(--cp-font-heading, inherit);
}
.compos-wishlist-empty p {
margin: 0 0 20px;
color: var(--cp-text-muted, rgba(14, 22, 40, 0.65));
font-size: var(--cp-font-size-body, 15px);
}
.compos-wishlist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 24px;
margin-top: 20px;
}
.compos-wishlist-page[data-columns="2"] .compos-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compos-wishlist-page[data-columns="3"] .compos-wishlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compos-wishlist-page[data-columns="4"] .compos-wishlist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compos-wishlist-page[data-columns="5"] .compos-wishlist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.compos-wishlist-page[data-columns="6"] .compos-wishlist-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .compos-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .compos-wishlist-grid { grid-template-columns: 1fr !important; } }
.compos-wishlist-card {
display: flex;
flex-direction: column;
background: var(--cp-surface, #fff);
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.08));
border-radius: var(--cp-radius-md, 12px);
overflow: hidden;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.compos-wishlist-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
.compos-wishlist-card__media {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--cp-elevated, #f8f9fa);
}
.compos-wishlist-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 350ms ease;
}
.compos-wishlist-card:hover .compos-wishlist-card__media img { transform: scale(1.04); }
.compos-wishlist-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.compos-wishlist-card__title {
color: var(--cp-text-heading, var(--cp-text, #0e1628));
font-family: var(--cp-font-heading, inherit);
font-weight: 700;
font-size: var(--cp-font-size-body, 15px);
line-height: 1.3;
text-decoration: none;
margin: 0;
}
.compos-wishlist-card__title:hover { color: var(--cp-accent, #ff650e); }
.compos-wishlist-card__price {
color: var(--cp-accent, #ff650e);
font-weight: 700;
font-size: var(--cp-font-size-body, 15px);
}
.compos-wishlist-card__price del { color: var(--cp-text-muted, rgba(14, 22, 40, 0.55)); font-weight: 500; opacity: 0.7; margin-right: 6px; }
.compos-wishlist-card__actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: auto;
padding-top: 12px;
}
.compos-wishlist-card__cta {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--cp-radius-sm, 8px);
background: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
font-weight: 700;
font-size: var(--cp-font-size-button, 13px);
text-decoration: none;
transition: background 150ms ease;
border: 0;
cursor: pointer;
}
.compos-wishlist-card__cta:hover { background: var(--cp-accent-hover, #e55410); color: var(--cp-text-on-accent, #fff); }
.compos-wishlist-card__remove {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: transparent;
color: var(--cp-text-muted, rgba(14, 22, 40, 0.55));
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 150ms ease, color 150ms ease;
}
.compos-wishlist-card__remove:hover {
background: rgba(239, 68, 68, 0.10);
border-color: var(--cp-status-error, #ef4444);
color: var(--cp-status-error, #ef4444);
}
.compos-rv { margin: 40px 0; }
.compos-rv__title {
font-family: var(--cp-font-heading, inherit);
font-size: var(--cp-font-size-h3, 1.25rem);
color: var(--cp-text-heading, var(--cp-text, #0e1628));
margin: 0 0 20px;
font-weight: 700;
}
.compos-rv__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: 18px;
}
.compos-rv[data-columns="3"] .compos-rv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compos-rv[data-columns="4"] .compos-rv__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compos-rv[data-columns="5"] .compos-rv__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.compos-rv[data-columns="6"] .compos-rv__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .compos-rv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .compos-rv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.compos-rv__card {
display: flex;
flex-direction: column;
background: var(--cp-surface, #fff);
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.08));
border-radius: var(--cp-radius-md, 12px);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.compos-rv__card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); }
.compos-rv__media {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--cp-elevated, #f8f9fa);
}
.compos-rv__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease; }
.compos-rv__card:hover .compos-rv__media img { transform: scale(1.04); }
.compos-rv__body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.compos-rv__name {
color: var(--cp-text, #0e1628);
font-weight: 600;
font-size: var(--cp-font-size-small, 13px);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.compos-rv__price {
color: var(--cp-accent, #ff650e);
font-weight: 700;
font-size: var(--cp-font-size-small, 13px);
}

/* ===== compos-compare ===== */
.compos-compare-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
cursor: pointer;
transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
font-size: 16px;
}
.compos-compare-btn:hover {
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
transform: translateY(-2px);
}
.compos-compare-btn.is-active {
background: var(--cp-accent, #ff650e);
border-color: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
}
.compos-compare-btn--with-label {
width: auto;
height: auto;
padding: 8px 14px;
border-radius: var(--cp-radius-md, 10px);
}
.compos-compare-btn__label { font-size: var(--cp-font-size-small, 13px); font-weight: 600; margin-left: 4px; }
.compos-compare-drawer {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 999px;
background: var(--cp-header-bg, #1f2a44);
color: var(--cp-header-text, #fff);
border: 1px solid var(--cp-header-border, rgba(255, 255, 255, 0.10));
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.30);
animation: compos-compare-slide-up 220ms ease;
max-width: calc(100vw - 24px);
}
@keyframes compos-compare-slide-up {
from { transform: translate(-50%, 24px); opacity: 0; }
to   { transform: translate(-50%, 0);    opacity: 1; }
}
.compos-compare-drawer[hidden] { display: none !important; }
.compos-compare-drawer__count { font-weight: 700; font-size: var(--cp-font-size-small, 13px); white-space: nowrap; }
.compos-compare-drawer__chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; max-width: 200px; }
.compos-compare-drawer__chip {
display: inline-block;
padding: 4px 10px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.10);
font-size: var(--cp-font-size-caption, 11px);
font-weight: 600;
}
.compos-compare-drawer__actions { display: flex; gap: 6px; }
.compos-compare-drawer__open,
.compos-compare-drawer__clear {
border: 0;
border-radius: 99px;
padding: 8px 14px;
cursor: pointer;
font-weight: 700;
font-size: var(--cp-font-size-small, 13px);
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 150ms ease, transform 150ms ease;
}
.compos-compare-drawer__open {
background: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
}
.compos-compare-drawer__open:hover { background: var(--cp-accent-hover, #e55410); transform: translateY(-1px); }
.compos-compare-drawer__clear {
background: rgba(255, 255, 255, 0.10);
color: var(--cp-header-text, #fff);
width: 36px;
padding: 8px;
justify-content: center;
}
.compos-compare-drawer__clear:hover { background: rgba(255, 255, 255, 0.20); }
@media (max-width: 600px) {
.compos-compare-drawer { bottom: 12px; padding: 8px 12px; }
.compos-compare-drawer__chips { display: none; }
}
.compos-compare-modal { position: fixed; inset: 0; z-index: 100000; }
.compos-compare-modal[hidden] { display: none !important; }
.compos-compare-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 41, 0.65);
animation: compos-compare-fade 180ms ease;
}
@keyframes compos-compare-fade { from { opacity: 0; } to { opacity: 1; } }
.compos-compare-modal__panel {
position: relative;
margin: 5vh auto;
max-width: min(1200px, 94vw);
max-height: 90vh;
overflow: auto;
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
border-radius: var(--cp-radius-lg, 16px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
padding: 30px 30px 36px;
}
.compos-compare-modal__close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
transition: background 150ms ease, color 150ms ease;
}
.compos-compare-modal__close:hover { background: var(--cp-accent, #ff650e); color: #fff; border-color: var(--cp-accent, #ff650e); }
.compos-compare__loading { padding: 60px 20px; text-align: center; font-size: 32px; color: var(--cp-text-faint, rgba(14,22,40,0.45)); }
.compos-compare__loading i { animation: compos-compare-spin 1s linear infinite; display: inline-block; }
@keyframes compos-compare-spin { to { transform: rotate(360deg); } }
.compos-compare__empty {
padding: 40px 20px;
text-align: center;
color: var(--cp-text-muted, rgba(14, 22, 40, 0.55));
}
.compos-compare-page { padding: 30px 0; }
.compos-compare-page__title {
font-family: var(--cp-font-heading, inherit);
font-size: var(--cp-font-size-h2, 1.625rem);
font-weight: 800;
color: var(--cp-text-heading, var(--cp-text, #0e1628));
margin: 0 0 8px;
}
.compos-compare-page__subtitle {
color: var(--cp-text-muted, rgba(14, 22, 40, 0.65));
margin: 0 0 24px;
font-size: var(--cp-font-size-body, 15px);
}
.compos-compare__empty-state {
text-align: center;
padding: 60px 20px;
background: var(--cp-surface, #fff);
border: 1px dashed var(--cp-border, rgba(0, 0, 0, 0.10));
border-radius: var(--cp-radius-lg, 16px);
}
.compos-compare__empty-state i {
font-size: 48px;
color: var(--cp-text-faint, rgba(14, 22, 40, 0.35));
margin-bottom: 12px;
display: block;
}
.compos-compare__empty-state h3 {
margin: 0 0 8px;
font-size: var(--cp-font-size-h3, 1.25rem);
color: var(--cp-text-heading, var(--cp-text, #0e1628));
font-family: var(--cp-font-heading, inherit);
}
.compos-compare__empty-state p {
margin: 0 0 20px;
color: var(--cp-text-muted, rgba(14, 22, 40, 0.65));
font-size: var(--cp-font-size-body, 15px);
}
.compos-compare__table { width: 100%; border-collapse: collapse; font-size: var(--cp-font-size-small, 13px); }
.compos-compare__table th,
.compos-compare__table td {
padding: 12px 14px;
border-bottom: 1px solid var(--cp-border, rgba(0, 0, 0, 0.06));
vertical-align: top;
text-align: left;
}
.compos-compare__table th[scope="row"] {
width: 130px;
background: var(--cp-elevated, #f8f9fa);
font-weight: 700;
color: var(--cp-text-heading, var(--cp-text, #0e1628));
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: var(--cp-font-size-caption, 11px);
}
.compos-compare__rowlabel { background: var(--cp-elevated, #f8f9fa); }
.compos-compare__col { position: relative; }
.compos-compare__remove {
position: absolute;
top: 6px; right: 6px;
width: 28px; height: 28px;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0,0,0,0.10));
background: var(--cp-surface, #fff);
cursor: pointer;
color: var(--cp-text-muted, rgba(14,22,40,0.55));
display: flex; align-items: center; justify-content: center;
transition: background 150ms ease, color 150ms ease;
z-index: 2;
}
.compos-compare__remove:hover { background: rgba(239,68,68,0.10); color: var(--cp-status-error, #ef4444); border-color: var(--cp-status-error, #ef4444); }
.compos-compare__img img { width: 100%; max-width: 160px; height: auto; border-radius: var(--cp-radius-sm, 8px); }
.compos-compare__name { font-weight: 700; color: var(--cp-text-heading, var(--cp-text, #0e1628)); text-decoration: none; }
.compos-compare__name:hover { color: var(--cp-accent, #ff650e); }
.compos-compare__price { color: var(--cp-accent, #ff650e); font-weight: 700; font-size: var(--cp-font-size-body, 15px); }
.compos-compare__instock { color: var(--cp-status-success, #16a34a); font-weight: 700; }
.compos-compare__oos { color: var(--cp-status-error, #ef4444); font-weight: 700; }
.compos-compare__rating { color: var(--cp-accent, #ff650e); font-weight: 700; }
.compos-compare__muted { color: var(--cp-text-muted, rgba(14,22,40,0.45)); }
.compos-compare__cta { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
.compos-compare-modal__panel { padding: 20px 14px 24px; margin: 0; max-width: 100vw; max-height: 100vh; border-radius: 0; }
.compos-compare__table th[scope="row"] { width: 90px; padding: 10px 8px; font-size: 10px; }
.compos-compare__table th, .compos-compare__table td { padding: 10px 8px; }
.compos-compare__img img { max-width: 100px; }
}

/* ===== rt-icons ===== */
@font-face {
font-family: 'rt-icons';
src: url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.eot?43910631");
src: url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.eot?43910631#iefix") format('embedded-opentype'),
url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.woff2?43910631") format('woff2'),
url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.woff?43910631") format('woff'),
url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.ttf?43910631") format('truetype'),
url("https://envywebsites.com/wp-content/themes/compos-theme/assets/font/rt-icons.svg?43910631#rt-icons") format('svg');
font-weight: normal;
font-style: normal;
}
[class^="rt-"]:before, [class*=" rt-"]:before {
font-family: "rt-icons";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.rt-linkedin-in:before { content: '\e800'; }
.rt-location-dot:before { content: '\e801'; }
.rt-message:before { content: '\e802'; }
.rt-phone-flip:before { content: '\e803'; }
.rt-play:before { content: '\e804'; }
.rt-plus:before { content: '\e805'; }
.rt-quote-left:before { content: '\e806'; }
.rt-twitter:before { content: '\e807'; }
.rt-user:before { content: '\e808'; }
.rt-angle-down:before { content: '\e809'; }
.rt-angle-right:before { content: '\e80a'; }
.rt-angles-up:before { content: '\e80b'; }
.rt-arrow-left:before { content: '\e80c'; }
.rt-arrow-left-long:before { content: '\e80d'; }
.rt-arrow-right:before { content: '\e80e'; }
.rt-arrow-right-long:before { content: '\e80f'; }
.rt-book:before { content: '\e810'; }
.rt-calendar-days:before { content: '\e811'; }
.rt-check:before { content: '\e812'; }
.rt-chevrons-left:before { content: '\e813'; }
.rt-chevrons-right:before { content: '\e814'; }
.rt-comments:before { content: '\e815'; }
.rt-envelope:before { content: '\e816'; }
.rt-facebook-f:before { content: '\e817'; }
.rt-instagram:before { content: '\e818'; }
.rt-magnifying-glass:before { content: '\e819'; }
.rt-xmark:before { content: '\e81a'; }
.rt-thumbtack:before { content: '\e81b'; }
.rt-user-1:before { content: '\e81c'; }
.rt-heart:before { content: '\e81d'; }
.rt-cart-shopping:before { content: '\e81e'; }
.rt-star-sharp:before { content: '\e81f'; }
.rt-star-half:before { content: '\e820'; }
.rt-star:before { content: '\e821'; }
.rt-star-sharp-half:before { content: '\e822'; }
.rt-truck:before { content: '\e823'; }
.rt-basket-shopping:before { content: '\e824'; }
.rt-store:before { content: '\e825'; }
.rt-user-2:before { content: '\e826'; }
.rt-cart:before { content: '\e827'; }
.rt-search:before { content: '\e828'; }
.rt-heart-big:before { content: '\e829'; }
.rt-star-half-stroke-solid:before { content: '\e82a'; }
.rt-star-regular:before { content: '\e82b'; }
.rt-arrow-down-long:before { content: '\e82c'; }
.rt-arrow-up-long:before { content: '\e82d'; }
.rt-angle-left:before { content: '\e82e'; }
.rt-angle-up:before { content: '\e82f'; }
.rt-check-1:before { content: '\e830'; }
.rt-download:before { content: '\e831'; }
.rt-chart-column:before { content: '\e832'; }
.rt-heart-1:before { content: '\e833'; }
.rt-spin4:before { content: '\e834'; }
.rt-list:before { content: '\e835'; }
.rt-grid-2-plus:before { content: '\e836'; }
.rt-sliders-simple:before { content: '\e837'; }
.rt-filter-list:before { content: '\e838'; }
.rt-spin6:before { content: '\e839'; }
.rt-grid-2:before { content: '\e83a'; }
.rt-phone-volume:before { content: '\e83b'; }
.rt-tags:before { content: '\e83c'; }
.rt-clock-regular:before { content: '\e83d'; }
.rt-circle-user-regular:before { content: '\e83e'; }
.rt-circle-check:before { content: '\e83f'; }
.rt-solutions:before { content: '\e840'; }
.rt-headset:before { content: '\e841'; }
.rt-angles-right:before { content: '\e842'; }
.rt-angles-right-1:before { content: '\e843'; }
.rt-minus:before { content: '\e844'; }
.rt-minus-1:before { content: '\e845'; }
.rt-minus-2:before { content: '\e846'; }
.rt-ok-circled:before { content: '\e853'; }
.rt-quote:before { content: '\ea59'; }
.rt-location-dot-1:before { content: '\ea5a'; }
.rt-envelope-1:before { content: '\ea5b'; }
.rt-phone-flip-1:before { content: '\ea5c'; }
.rt-icon-check:before { content: '\ea5d'; }
.rt-phone-office:before { content: '\ea5e'; }
.rt-plus-regular:before { content: '\ea5f'; }
.rt-minus-regular:before { content: '\ea60'; }
.rt-arrow-right-regular:before { content: '\ea61'; }
.rt-map-location-dot:before { content: '\ea62'; }
.rt-headset-1:before { content: '\ea63'; }
.rt-envelope-open-text:before { content: '\ea64'; }
.rt-arrow-up-right:before { content: '\ea65'; }

/* ===== compos-style ===== */
*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
font-family: var(--cp-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
font-size: var(--cp-font-size-base, 16px);
line-height: var(--cp-line-height-body, 1.6);
background-color: var(--cp-bg);
color: var(--cp-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5em;
font-family: var(--cp-font-heading, inherit);
font-weight: var(--cp-font-weight-heading, 700);
line-height: var(--cp-line-height-heading, 1.2);
color: var(--cp-text);
}
p { margin-top: 0; margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
a {
color: var(--cp-accent);
text-decoration: none;
transition: color 200ms ease;
}
a:hover { opacity: 0.85; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img {
max-width: 100%;
height: auto;
display: block;
}
button { cursor: pointer; }
input, textarea, select, button {
font-family: inherit;
font-size: inherit;
}
.alignwide {
margin-left: -2rem;
margin-right: -2rem;
}
.alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
.wp-block-image img { height: auto; }
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: 1px solid var(--cp-border);
background: var(--cp-input-bg);
color: var(--cp-text);
border-radius: var(--cp-input-radius, 4px);
padding: 0.5rem 0.75rem;
width: 100%;
transition: border-color 200ms ease;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--cp-accent);
}
::placeholder {
color: var(--cp-text-faint);
opacity: 1;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cp-surface); }
::-webkit-scrollbar-thumb {
background: var(--cp-border-strong);
border-radius: 4px;
transition: background 220ms ease;
}
html:hover ::-webkit-scrollbar-thumb,
html:focus-within ::-webkit-scrollbar-thumb {
background: var(--cp-text-muted);
}
::-webkit-scrollbar-thumb:hover { background: var(--cp-accent); }
html { scrollbar-width: thin; scrollbar-color: var(--cp-border-strong) var(--cp-surface); }
html:hover, html:focus-within { scrollbar-color: var(--cp-text-muted) var(--cp-surface); }
::selection {
background: var(--cp-accent-30);
color: var(--cp-text);
}
:focus-visible {
outline: 2px solid var(--cp-accent);
outline-offset: 2px;
}
.admin-bar .compos-mega-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .compos-mega-header {
top: 46px;
}
}
.main-contain {
min-height: 50vh;
}
.woocommerce img { height: auto; }
.woocommerce table { border-collapse: collapse; width: 100%; }
.woocommerce table th,
.woocommerce table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--cp-border);
color: var(--cp-text);
}
.woocommerce .quantity .qty {
width: 60px;
text-align: center;
}
.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-item { margin: 0; }
.gallery-caption { font-size: 0.85em; color: var(--cp-text-muted); }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85em; color: var(--cp-text-muted); margin-top: 0.5em; }
.hidden, [hidden] { display: none; }
@media print {
body { background: #fff; color: #000; }
.compos-mega-header, .compos-footer, .compos-header-spacer { display: none; }
}

/* ===== compos-header-styles ===== */


/* ===== compos-link-modal ===== */
.cp-modal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + var(--cp-modal-header-offset, 0px));background:rgba(0,0,0,0.78);opacity:0;transition:opacity .25s ease;--cp-modal-header-offset:0px}
.cp-modal.is-open{display:flex;opacity:1}
.cp-modal-frame{max-height:calc(100vh - 48px - var(--cp-modal-header-offset, 0px))}
.cp-modal[data-size="sm"] .cp-modal-frame{max-width:480px}
.cp-modal[data-size="md"] .cp-modal-frame{max-width:760px}
.cp-modal[data-size="lg"] .cp-modal-frame{max-width:1080px}
.cp-modal[data-size="xl"] .cp-modal-frame{max-width:1400px}
.cp-modal[data-size="full"] .cp-modal-frame{max-width:none;width:92vw;height:calc(100vh - 64px - var(--cp-modal-header-offset, 0px));max-height:calc(100vh - 64px - var(--cp-modal-header-offset, 0px))}
.cp-modal{
--cp-modal-bar-bg: var(--cp-header-bg, #0e1628);
--cp-modal-bar-text: var(--cp-header-text, #fff);
--cp-modal-bar-text-muted: var(--cp-header-text-muted, rgba(255,255,255,0.65));
--cp-modal-bar-border: var(--cp-header-border, rgba(255,255,255,0.1));
--cp-modal-frame-bg: var(--cp-bg, #fff);
--cp-modal-accent: var(--cp-accent, #ff650e);
--cp-modal-accent-rgb: var(--cp-accent-rgb, 255,101,14);
}
.cp-modal[data-theme="dark"]{
--cp-modal-bar-bg: #0e1628;
--cp-modal-bar-text: #fff;
--cp-modal-bar-text-muted: rgba(255,255,255,0.65);
--cp-modal-bar-border: rgba(255,255,255,0.1);
--cp-modal-frame-bg: #0e1628;
}
.cp-modal[data-theme="light"]{
--cp-modal-bar-bg: #fff;
--cp-modal-bar-text: #0e1628;
--cp-modal-bar-text-muted: rgba(14,22,40,0.65);
--cp-modal-bar-border: rgba(0,0,0,0.08);
--cp-modal-frame-bg: #fff;
}
.cp-modal[data-theme="accent"]{
--cp-modal-bar-bg: var(--cp-accent, #ff650e);
--cp-modal-bar-text: #fff;
--cp-modal-bar-text-muted: rgba(255,255,255,0.8);
--cp-modal-bar-border: rgba(255,255,255,0.18);
--cp-modal-frame-bg: var(--cp-bg, #fff);
}
.cp-modal-frame{position:relative;width:100%;background:var(--cp-modal-frame-bg);border-radius:var(--cp-radius-md,16px);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,0.5);transform:translateY(16px) scale(0.98);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cp-modal.is-open .cp-modal-frame{transform:translateY(0) scale(1)}
.cp-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--cp-modal-bar-bg);border-bottom:1px solid var(--cp-modal-bar-border);flex-shrink:0;min-height:48px}
.cp-modal-title{font-family:var(--cp-font-body,inherit);font-size:13px;font-weight:600;color:var(--cp-modal-bar-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cp-modal-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cp-modal-link{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;font-family:var(--cp-font-body,inherit);font-size:12px;font-weight:600;color:var(--cp-modal-bar-text-muted);text-decoration:none;background:transparent;border:1px solid var(--cp-modal-bar-border);transition:background .2s,color .2s,border-color .2s}
.cp-modal-link:hover{background:rgba(var(--cp-modal-accent-rgb),0.15);color:var(--cp-modal-accent);border-color:var(--cp-modal-accent)}
.cp-modal-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:transparent;border:0;color:var(--cp-modal-bar-text);cursor:pointer;font-size:22px;line-height:1;transition:background .2s,color .2s;opacity:0.85}
.cp-modal-close:hover{background:var(--cp-modal-bar-border);opacity:1}
.cp-modal-close:focus-visible{outline:2px solid var(--cp-modal-accent);outline-offset:2px}
.cp-modal-body{flex:1;position:relative;background:var(--cp-modal-frame-bg);min-height:300px;overflow:hidden}
.cp-modal-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--cp-modal-frame-bg)}
.cp-modal-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--cp-modal-bar-text-muted);font-family:var(--cp-font-body,inherit);font-size:13px;background:var(--cp-modal-frame-bg)}
.cp-modal-loading.is-hidden{display:none}
.cp-modal-spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--cp-modal-bar-border);border-top-color:var(--cp-modal-accent);animation:cp-modal-spin .8s linear infinite}
@keyframes cp-modal-spin{to{transform:rotate(360deg)}}
@media(max-width:640px){
.cp-modal{padding:0;padding-top:var(--cp-modal-header-offset, 0px)}
.cp-modal-frame,
.cp-modal[data-size] .cp-modal-frame{width:100vw;height:calc(100vh - var(--cp-modal-header-offset, 0px));max-width:none;max-height:calc(100vh - var(--cp-modal-header-offset, 0px));border-radius:0}
}
body.cp-modal-open{overflow:hidden}

/* ===== compos-widgets ===== */
[data-klarna-plugin-views-container],
[data-klarna-plugin-views-container] * {
outline: none !important;
border: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
#wpadminbar,
#wpadminbar *,
#wpadminbar a,
#wpadminbar a:hover,
#wpadminbar .ab-item,
#wpadminbar .ab-label,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar .ab-sub-wrapper .ab-item,
#wpadminbar .ab-submenu .ab-item,
#wpadminbar > #wp-toolbar span,
#wpadminbar > #wp-toolbar a {
color: #f0f0f1 !important;
}
#wpadminbar .ab-item:hover,
#wpadminbar .ab-item:focus,
#wpadminbar .ab-icon:hover::before,
#wpadminbar .ab-item:hover::before,
#wpadminbar .ab-submenu .ab-item:hover,
#wpadminbar a.ab-item:hover,
#wpadminbar a.ab-item:focus {
color: #72aee6 !important;
}
.sf-sort-select,
.sp-sort-select,
.compos-sort-select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: var(--sf-panel-bg, var(--cp-surface, #fff)) !important;
color: var(--sf-text, var(--cp-text, #0e1628)) !important;
border: 1px solid var(--sf-divider, var(--cp-border, rgba(0,0,0,0.12))) !important;
background-image: none !important;
padding-right: 36px !important;
position: relative !important;
}
.sf-sort-select,
.sp-sort-select,
.compos-sort-select {
-webkit-mask: none;
mask: none;
background-image:
linear-gradient(currentColor, currentColor),
linear-gradient(currentColor, currentColor) !important;
background-repeat: no-repeat !important;
background-size: 2px 8px, 8px 2px !important;
background-position:
right 17px top 50%,
right 17px top 50% !important;
}
.sf-sort-select,
.sp-sort-select,
.compos-sort-select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1628' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 12px 12px !important;
}
.sf-sort-select option,
.sp-sort-select option,
.compos-sort-select option {
background: var(--sf-panel-bg, var(--cp-surface, #fff)) !important;
color: var(--sf-text, var(--cp-text, #0e1628)) !important;
}
.xw-bg--dark .sf-sort-select,
.xw-bg--accent .sf-sort-select,
.xw-bg--dark .sp-sort-select,
.xw-bg--accent .sp-sort-select,
.xw-bg--dark .compos-sort-select,
.xw-bg--accent .compos-sort-select {
background-color: rgba(255,255,255,0.08) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.20) !important;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
}
.xw-bg--dark .sf-sort-select option,
.xw-bg--accent .sf-sort-select option,
.xw-bg--dark .sp-sort-select option,
.xw-bg--accent .sp-sort-select option,
.xw-bg--dark .compos-sort-select option,
.xw-bg--accent .compos-sort-select option {
background: #1a1a1a !important;
color: #fff !important;
}
.xw-wrap { box-sizing: border-box; }
.xw-bg--dark-solid {
background: var(--cp-elevated, #111828);
padding: 40px 32px;
border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--light-solid {
background: var(--cp-surface-light, #f5f5f5);
padding: 40px 32px;
border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--accent-fill {
background: var(--cp-accent, #ff650e);
padding: 40px 32px;
border-radius: var(--cp-radius-md, 16px);
}
.xw-bg--transparent,
.xw-bg--dark-on-image,
.xw-bg--light-on-image { background: transparent; }
@media (max-width: 1024px) {
.xw-bg--dark-solid,
.xw-bg--light-solid,
.xw-bg--accent-fill { padding: 32px 24px; }
}
@media (max-width: 640px) {
.xw-bg--dark-solid,
.xw-bg--light-solid,
.xw-bg--accent-fill { padding: 24px 16px; }
}
.xw-heading {
font-family: var(--cp-font-heading, inherit);
color: var(--cp-text-heading, #ffffff);
}
.xw-subheading { color: var(--cp-text-muted, rgba(255,255,255,0.75)); }
.xw-card-title {
font-family: var(--cp-font-heading, inherit);
color: var(--cp-text-heading, #ffffff);
}
.xw-card-body  { color: var(--cp-text, #e2e8f0); }
.xw-label      { color: var(--cp-text-muted); }
.xw-meta       { color: var(--cp-text-muted); }
.xw-excerpt    { color: var(--cp-text-muted); }
.xw-stat-value { color: var(--cp-text-heading); }
.xw-stat-label { color: var(--cp-text-muted); }
.xw-price      { color: var(--cp-accent, #ff650e); }
.xw-eyebrow    { color: var(--cp-accent, #ff650e); }
.xw-bg--dark-on-image .xw-heading,
.xw-bg--dark-on-image .xw-card-title,
.xw-bg--dark-on-image .xw-subheading,
.xw-bg--dark-on-image .xw-card-body,
.xw-bg--dark-on-image .xw-label,
.xw-bg--dark-on-image .xw-meta { color: #ffffff; }
.xw-bg--light-on-image .xw-heading,
.xw-bg--light-on-image .xw-card-title { color: #0e1628; }
.xw-bg--light-on-image .xw-subheading,
.xw-bg--light-on-image .xw-card-body,
.xw-bg--light-on-image .xw-label,
.xw-bg--light-on-image .xw-meta { color: rgba(14,22,40,0.70); }
.xw-bg--accent-fill .xw-heading,
.xw-bg--accent-fill .xw-card-title,
.xw-bg--accent-fill .xw-subheading,
.xw-bg--accent-fill .xw-card-body,
.xw-bg--accent-fill .xw-label,
.xw-bg--accent-fill .xw-meta { color: #ffffff; }
body.elementor-editor-active,
body.elementor-preview-mode {
overflow-anchor: none;
}
body.elementor-editor-active .elementor-element:has(.compos-widget),
body.elementor-editor-active .elementor-widget-container:has(.compos-widget),
body.elementor-editor-active .compos-widget {
background-color: var(--cp-bg);
}
.elementor-element:has(.xw-bg--dark),
.elementor-widget-container:has(.xw-bg--dark),
.compos-widget.xw-bg--dark,
.compos-widget:has(.xw-bg--dark)   { background-color: var(--cp-text-on-light, #0e1628) !important; }
.elementor-element:has(.xw-bg--light),
.elementor-widget-container:has(.xw-bg--light),
.compos-widget.xw-bg--light,
.compos-widget:has(.xw-bg--light)  { background-color: var(--cp-text-on-dark, #ffffff) !important; }
.elementor-element:has(.xw-bg--accent),
.elementor-widget-container:has(.xw-bg--accent),
.compos-widget.xw-bg--accent,
.compos-widget:has(.xw-bg--accent) { background-color: var(--cp-accent, #ff650e) !important; }
.xw-text--* blocks below.
*
* NEVER put max-width on .xw-intro — the parent Elementor column
* governs width. See feedback_layout_regressions.md §3. */
.xw-intro    { display: flex; flex-direction: column; gap: 8px; margin: 0 0 15px; }
.xw-intro-eb { font-family: var(--cp-font-body, inherit); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-accent, #ff650e); }
.xw-intro-h  { font-family: var(--cp-font-heading, inherit); font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.xw-intro-p  { font-family: var(--cp-font-body, inherit); font-size: 15px; line-height: 1.6; opacity: .8; margin: 0; }
.cp-intro-align--center .xw-intro-eb,
.cp-intro-align--center .xw-intro-h,
.cp-intro-align--center .xw-intro-p { text-align: center; }
.cp-intro-align--center .xw-intro-eb { display: block; width: fit-content; align-self: center; margin-inline: auto; }
.xw-bg--dark .xw-heading,
.xw-bg--dark .xw-card-title,
.xw-bg--dark .xw-card-heading,
.xw-bg--dark .xw-name,
.xw-bg--dark .xw-title,
.xw-bg--dark .xw-stat-value,
.xw-bg--dark .xw-stat-num,
.xw-bg--dark .xw-author-name,
.xw-bg--dark .xw-intro-h,
.xw-bg--dark .xw-step-title { color: var(--cp-text-on-dark, #fff); }
.xw-bg--dark .xw-subheading,
.xw-bg--dark .xw-card-body,
.xw-bg--dark .xw-card-text,
.xw-bg--dark .xw-body,
.xw-bg--dark .xw-bio,
.xw-bg--dark .xw-excerpt,
.xw-bg--dark .xw-desc,
.xw-bg--dark .xw-role,
.xw-bg--dark .xw-feature-text,
.xw-bg--dark .xw-intro-p,
.xw-bg--dark .xw-step-body { color: var(--cp-text-on-dark-muted, rgba(255,255,255,0.78)); }
.xw-bg--dark .xw-meta,
.xw-bg--dark .xw-label,
.xw-bg--dark .xw-stat-label,
.xw-bg--dark .xw-caption { color: var(--cp-text-on-dark-faint, rgba(255,255,255,0.62)); }
.xw-bg--light .xw-heading,
.xw-bg--light .xw-card-title,
.xw-bg--light .xw-card-heading,
.xw-bg--light .xw-name,
.xw-bg--light .xw-title,
.xw-bg--light .xw-stat-value,
.xw-bg--light .xw-stat-num,
.xw-bg--light .xw-author-name,
.xw-bg--light .xw-intro-h,
.xw-bg--light .xw-step-title { color: var(--cp-text-on-light, #0e1628); }
.xw-bg--light .xw-subheading,
.xw-bg--light .xw-card-body,
.xw-bg--light .xw-card-text,
.xw-bg--light .xw-body,
.xw-bg--light .xw-bio,
.xw-bg--light .xw-excerpt,
.xw-bg--light .xw-desc,
.xw-bg--light .xw-role,
.xw-bg--light .xw-feature-text,
.xw-bg--light .xw-intro-p,
.xw-bg--light .xw-step-body { color: var(--cp-text-on-light-muted, rgba(14,22,40,0.78)); }
.xw-bg--light .xw-meta,
.xw-bg--light .xw-label,
.xw-bg--light .xw-stat-label,
.xw-bg--light .xw-caption { color: var(--cp-text-on-light-faint, rgba(14,22,40,0.60)); }
.xw-bg--accent .xw-heading,
.xw-bg--accent .xw-card-title,
.xw-bg--accent .xw-card-heading,
.xw-bg--accent .xw-name,
.xw-bg--accent .xw-title,
.xw-bg--accent .xw-stat-value,
.xw-bg--accent .xw-stat-num,
.xw-bg--accent .xw-author-name,
.xw-bg--accent .xw-intro-h,
.xw-bg--accent .xw-intro-p,
.xw-bg--accent .xw-intro-eb,
.xw-bg--accent .xw-step-title,
.xw-bg--accent .xw-subheading,
.xw-bg--accent .xw-card-body,
.xw-bg--accent .xw-card-text,
.xw-bg--accent .xw-body,
.xw-bg--accent .xw-bio,
.xw-bg--accent .xw-excerpt,
.xw-bg--accent .xw-desc,
.xw-bg--accent .xw-role,
.xw-bg--accent .xw-feature-text,
.xw-bg--accent .xw-step-body { color: var(--cp-text-on-accent, #ffffff); }
.xw-bg--accent .xw-meta,
.xw-bg--accent .xw-label,
.xw-bg--accent .xw-stat-label,
.xw-bg--accent .xw-caption { color: var(--cp-text-on-accent-muted, rgba(255,255,255,0.85)); }
.xw-text--light .xw-heading,
.xw-text--light .xw-card-title,
.xw-text--light .xw-card-heading,
.xw-text--light .xw-name,
.xw-text--light .xw-title,
.xw-text--light .xw-stat-value,
.xw-text--light .xw-stat-num,
.xw-text--light .xw-author-name,
.xw-text--light .xw-intro-h,
.xw-text--light .xw-step-title { color: var(--cp-text-on-dark, #fff); }
.xw-text--light .xw-subheading,
.xw-text--light .xw-card-body,
.xw-text--light .xw-card-text,
.xw-text--light .xw-body,
.xw-text--light .xw-bio,
.xw-text--light .xw-excerpt,
.xw-text--light .xw-desc,
.xw-text--light .xw-role,
.xw-text--light .xw-feature-text,
.xw-text--light .xw-intro-p,
.xw-text--light .xw-step-body { color: var(--cp-text-on-dark-muted, rgba(255,255,255,0.85)); }
.xw-text--light .xw-meta,
.xw-text--light .xw-label,
.xw-text--light .xw-stat-label,
.xw-text--light .xw-caption { color: var(--cp-text-on-dark-faint, rgba(255,255,255,0.70)); }
.xw-text--dark .xw-heading,
.xw-text--dark .xw-card-title,
.xw-text--dark .xw-card-heading,
.xw-text--dark .xw-name,
.xw-text--dark .xw-title,
.xw-text--dark .xw-stat-value,
.xw-text--dark .xw-stat-num,
.xw-text--dark .xw-author-name,
.xw-text--dark .xw-intro-h,
.xw-text--dark .xw-step-title { color: var(--cp-text-on-light, #0e1628); }
.xw-text--dark .xw-subheading,
.xw-text--dark .xw-card-body,
.xw-text--dark .xw-card-text,
.xw-text--dark .xw-body,
.xw-text--dark .xw-bio,
.xw-text--dark .xw-excerpt,
.xw-text--dark .xw-desc,
.xw-text--dark .xw-role,
.xw-text--dark .xw-feature-text,
.xw-text--dark .xw-intro-p,
.xw-text--dark .xw-step-body { color: var(--cp-text-on-light-muted, rgba(14,22,40,0.78)); }
.xw-text--dark .xw-meta,
.xw-text--dark .xw-label,
.xw-text--dark .xw-stat-label,
.xw-text--dark .xw-caption { color: var(--cp-text-on-light-faint, rgba(14,22,40,0.60)); }
.xw-card,
.xw-panel,
.xw-chip,
.xw-pill,
.xw-plan-box,
.xw-accordion-item,
.xw-search-input {
background: var(--cp-surface, #111828);
border-color: var(--cp-border, rgba(255,255,255,0.10));
}
.xw-card {
transition: border-color 250ms ease;
}
.xw-ov {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.xw-bg--dark .xw-ov,
.xw-bg--dark-on-image .xw-ov,
.xw-bg--transparent .xw-ov {
background: linear-gradient(to top,
rgba(14,22,40, clamp(0, calc(var(--xw-ov-strength, .55) + .20), 1)) 0%,
rgba(14,22,40, clamp(0, var(--xw-ov-strength, .55), 1)) 55%,
rgba(14,22,40, clamp(0, calc(var(--xw-ov-strength, .55) - .20), 1)) 100%);
}
.xw-bg--light .xw-ov,
.xw-bg--light-on-image .xw-ov {
background: linear-gradient(to top,
rgba(240,240,240, clamp(0, calc(var(--xw-ov-strength, .55) + .20), 1)) 0%,
rgba(240,240,240, clamp(0, var(--xw-ov-strength, .55), 1)) 55%,
rgba(240,240,240, clamp(0, calc(var(--xw-ov-strength, .55) - .20), 1)) 100%);
}
.xw-bg--accent .xw-ov {
background: rgba(var(--cp-accent-rgb, 255,101,14), clamp(0, var(--xw-ov-strength, .55), 1));
}
.compos-widget .xw-media,
.compos-widget .xw-tb__bg img,
.compos-widget .xw-hero-bg { border-radius: 0 !important; }
.compos-widget .xw-item img,
.compos-widget .xw-gal-item .xw-gal-img { border-radius: inherit !important; }
.compos-widget [class*="xw-"][class$="-img"] > img,
.compos-widget [class*="xw-"][class$="-photos"] > img { border-radius: inherit; }
.xw-img-ov {
background: linear-gradient(to bottom, transparent 40%, rgba(14,22,40,0.85) 100%);
}
.xw-anim { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.xw-visible .xw-anim { opacity: 1; transform: none; }
.xw-visible .xw-anim:nth-child(1) { transition-delay: 0s; }
.xw-visible .xw-anim:nth-child(2) { transition-delay: 0.12s; }
.xw-visible .xw-anim:nth-child(3) { transition-delay: 0.22s; }
.xw-visible .xw-anim:nth-child(4) { transition-delay: 0.32s; }
.xw-visible .xw-anim:nth-child(5) { transition-delay: 0.40s; }
.xw-visible .xw-anim:nth-child(6) { transition-delay: 0.46s; }
.xw-eyebrow {
font-size: var(--cp-font-size-xs, 0.75rem);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cp-accent, #ff650e);
}
.xw-author-name  { color: var(--cp-text-heading); font-weight: 600; }
.xw-step-title   { color: var(--cp-text-heading); font-weight: 700; }
.xw-step-body    { color: var(--cp-text-muted); }
.xw-feature-text { color: var(--cp-text); }
.xw-tab-panel,
.xw-badge-item,
.xw-timeline-item,
.xw-stat-block,
.xw-team-card,
.xw-testimonial-card,
.xw-service-card,
.xw-feature-card,
.xw-pricing-card,
.xw-step-card {
background: var(--cp-surface, #111828);
border-color: var(--cp-border, rgba(255,255,255,0.10));
}
.xw-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--cp-btn-padding-y, 10px) var(--cp-btn-padding-x, 22px);
background: var(--cp-btn-primary-bg, var(--cp-accent, #ff650e));
color: var(--cp-btn-primary-text, #ffffff);
border: 1px solid var(--cp-btn-primary-border, transparent);
border-radius: var(--cp-btn-radius, var(--cp-radius-sm, 8px));
font-family: var(--cp-font-body, inherit);
font-weight: var(--cp-btn-font-weight, 700);
font-size: var(--cp-font-size-sm, 0.875rem);
letter-spacing: var(--cp-btn-letter-spacing, 0.01em);
text-decoration: none;
cursor: pointer;
transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
white-space: nowrap;
}
.xw-btn-primary:hover {
opacity: 0.88;
transform: translateY(-1px);
box-shadow: var(--cp-btn-primary-hover-shadow, 0 4px 16px rgba(var(--cp-accent-rgb, 255,101,14), 0.35));
color: var(--cp-btn-primary-text, #ffffff);
}
.xw-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--cp-btn-padding-y, 10px) var(--cp-btn-padding-x, 22px);
background: transparent;
color: var(--cp-btn-secondary-text, var(--cp-text-heading, #ffffff));
border: var(--cp-btn-secondary-border-width, 2px) solid var(--cp-btn-secondary-border, var(--cp-border, rgba(255,255,255,0.2)));
border-radius: var(--cp-btn-radius, var(--cp-radius-sm, 8px));
font-family: var(--cp-font-body, inherit);
font-weight: var(--cp-btn-font-weight, 700);
font-size: var(--cp-font-size-sm, 0.875rem);
text-decoration: none;
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.xw-btn-ghost:hover {
background: var(--cp-btn-secondary-hover-bg, rgba(var(--cp-accent-rgb, 255,101,14), 0.1));
border-color: var(--cp-accent, #ff650e);
color: var(--cp-btn-secondary-hover-text, var(--cp-accent, #ff650e));
}
.xw-input {
height: var(--cp-input-height, 44px);
padding: 0 var(--cp-input-padding-x, 0.875rem);
background: var(--cp-surface, #111828);
border: var(--cp-input-border-width, 1px) solid var(--cp-border, rgba(255,255,255,0.10));
border-radius: var(--cp-input-radius, 6px);
color: var(--cp-text, #e2e8f0);
font-family: var(--cp-font-body, inherit);
font-size: var(--cp-font-size-sm, 0.875rem);
width: 100%;
box-sizing: border-box;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.xw-input:focus {
outline: none;
border-color: var(--cp-input-focus-border, var(--cp-accent, #ff650e));
box-shadow: 0 0 0 var(--cp-input-focus-ring-width, 3px) var(--cp-input-focus-ring, rgba(var(--cp-accent-rgb, 255,101,14), 0.25));
}
.xw-input::placeholder { color: var(--cp-text-faint, rgba(255,255,255,0.40)); }
.xw-chip, .xw-filter-btn {
padding: 6px 16px;
border-radius: 99px;
border: 1px solid var(--cp-border);
background: var(--cp-surface);
color: var(--cp-text-muted);
font-size: var(--cp-font-size-sm, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 200ms ease;
font-family: var(--cp-font-body, inherit);
white-space: nowrap;
}
.xw-chip:hover, .xw-filter-btn:hover {
border-color: var(--cp-border-strong);
color: var(--cp-text-heading);
}
.xw-chip.is-active, .xw-filter-btn.is-active {
background: var(--cp-accent, #ff650e);
border-color: var(--cp-accent, #ff650e);
color: #fff;
}
.xw-empty       { text-align: center; padding: 60px 20px; color: var(--cp-text-faint); }
.xw-empty-icon  { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.xw-empty-title { font-size: var(--cp-font-size-md, 1rem); color: var(--cp-text-muted); margin: 0 0 8px; font-weight: 600; }
.xw-empty-text  { font-size: var(--cp-font-size-sm, 0.875rem); color: var(--cp-text-faint); margin: 0; }
.xw-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.xw-pagination a,
.xw-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: var(--cp-radius-sm, 8px);
background: var(--cp-surface);
border: 1px solid var(--cp-border);
color: var(--cp-text-muted);
text-decoration: none;
font-size: var(--cp-font-size-sm, 0.875rem);
font-weight: 600;
transition: all 200ms ease;
white-space: nowrap;
}
.xw-pagination a:hover {
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.1);
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
}
.xw-pagination .current,
.xw-pagination .xw-page-current {
background: var(--cp-accent, #ff650e);
border-color: var(--cp-accent, #ff650e);
color: #fff;
}
.xw-divider { border: none; border-top: 1px solid var(--cp-border); margin: 24px 0; }
.compos-widget {
background: transparent;
color: var(--cp-text);
border-color: var(--cp-border);
}
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6 {
color: var(--cp-text-heading);
}
.compos-widget p,
.compos-widget li,
.compos-widget span:not(.cp-accent-text):not(.xw-intro-eb):not(.xw-eyebrow):not(.xw-price):not([class*="xw-intro-eb"]) {
color: var(--cp-text);
}
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6,
.compos-widget .xw-heading,
.compos-widget .xw-card-title {
font-family: var(--cp-font-heading, inherit);
text-transform: var(--cp-heading-text-transform, capitalize);
}
h1, h2, h3, h4, h5, h6,
.cp-h, .cp-heading,
.cp-acc-modal-title, .cp-acc-h h2,
.compos-mega-header h1, .compos-mega-header h2, .compos-mega-header h3,
.compos-footer h1, .compos-footer h2, .compos-footer h3 {
text-transform: var(--cp-heading-text-transform, capitalize);
}
.cp-no-cap, h1 .cp-no-cap, h2 .cp-no-cap, h3 .cp-no-cap, h4 .cp-no-cap, h5 .cp-no-cap, h6 .cp-no-cap {
text-transform: none !important;
}
.compos-widget p,
.compos-widget li,
.compos-widget .xw-card-body,
.compos-widget .xw-subheading,
.compos-widget .xw-meta,
.compos-widget .xw-excerpt {
font-family: var(--cp-font-body, inherit);
}
.compos-widget[style*="--cp-bg:"] {
background: var(--cp-bg) !important;
}
.compos-widget[style*="--cp-surface:"] h1,
.compos-widget[style*="--cp-surface:"] h2,
.compos-widget[style*="--cp-surface:"] h3,
.compos-widget[style*="--cp-surface:"] h4,
.compos-widget[style*="--cp-surface:"] h5,
.compos-widget[style*="--cp-surface:"] h6 {
color: var(--cp-text-heading);
}
.compos-widget[style*="--cp-widget-bg-image"] {
background-image: var(--cp-widget-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.compos-widget[style*="--cp-widget-bg-image"]::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.compos-widget[style*="--cp-overlay-style:dark"]::before {
background: rgba(14,22,40, var(--cp-overlay-opacity, 0.55));
}
.compos-widget[style*="--cp-overlay-style:light"]::before {
background: rgba(255,255,255, var(--cp-overlay-opacity, 0.55));
}
.compos-widget[style*="--cp-overlay-style:accent"]::before {
background: rgba(var(--cp-accent-rgb, 255,101,14), var(--cp-overlay-opacity, 0.55));
}
.compos-widget[style*="--cp-overlay-style:none"]::before {
display: none;
}
.compos-widget[style*="--cp-widget-bg-image"] > * {
position: relative;
z-index: 1;
}
.compos-widget[style*="--cp-grad-color1"] {
background:
linear-gradient(
calc(var(--cp-grad-angle, 135) * 1deg),
var(--cp-grad-color1, #1A1A1A),
var(--cp-grad-color2, transparent)
),
var(--cp-widget-bg-image, none) center / cover no-repeat !important;
}
.ch-modal-box,
.cdn-modal-box,
.cmc-modal,
.cmc-modal-content,
.dg-modal-box,
.se-modal-box,
.wh-modal-box,
.compos-modal,
.compos-modal-box,
.compos-modal-content,
[class*="modal-box"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-content"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-panel"]:not([class^="cv7"]):not([class*=" cv7"]) {
background: var(--cp-header-bg, #0e1628);
color: var(--cp-header-text, #ffffff);
border-color: var(--cp-header-border, rgba(255,255,255,0.08));
}
.ch-modal-box h1, .ch-modal-box h2, .ch-modal-box h3, .ch-modal-box h4, .ch-modal-box h5, .ch-modal-box h6,
.cdn-modal-box h1, .cdn-modal-box h2, .cdn-modal-box h3, .cdn-modal-box h4, .cdn-modal-box h5, .cdn-modal-box h6,
.cmc-modal h1, .cmc-modal h2, .cmc-modal h3, .cmc-modal h4, .cmc-modal h5, .cmc-modal h6,
.dg-modal-box h1, .dg-modal-box h2, .dg-modal-box h3,
.se-modal-box h1, .se-modal-box h2, .se-modal-box h3,
.wh-modal-box h1, .wh-modal-box h2, .wh-modal-box h3,
.compos-modal h1, .compos-modal h2, .compos-modal h3, .compos-modal h4, .compos-modal h5, .compos-modal h6,
[class*="modal-box"]:not([class^="cv7"]) h1, [class*="modal-box"]:not([class^="cv7"]) h2, [class*="modal-box"]:not([class^="cv7"]) h3 {
color: var(--cp-header-text, #ffffff);
font-family: var(--cp-font-heading, inherit);
}
.ch-modal-box p, .ch-modal-box li,
.cdn-modal-box p, .cdn-modal-box li,
.cmc-modal p, .cmc-modal li,
.dg-modal-box p, .dg-modal-box li,
.se-modal-box p, .se-modal-box li,
.wh-modal-box p, .wh-modal-box li,
.compos-modal p, .compos-modal li,
[class*="modal-box"]:not([class^="cv7"]) p, [class*="modal-box"]:not([class^="cv7"]) li {
color: var(--cp-header-text, #ffffff);
font-family: var(--cp-font-body, inherit);
}
.ch-modal-box small, .ch-modal-box .xw-meta, .ch-modal-box .xw-label,
.cmc-modal small, .cmc-modal .cp-muted,
.compos-modal small, .compos-modal .cp-muted,
[class*="modal-box"]:not([class^="cv7"]) small,
[class*="modal-box"]:not([class^="cv7"]) .cp-muted {
color: var(--cp-header-text, #ffffff);
opacity: 0.65;
}
.ch-modal-box [class*="-card"], .ch-modal-box [class*="-stat"], .ch-modal-box [class*="-panel"],
.cmc-modal [class*="-card"], .cmc-modal [class*="-stat"],
.compos-modal [class*="-card"], .compos-modal [class*="-stat"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-card"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-stat"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-panel"] {
background: var(--cp-header-dropdown-bg-start, #111828);
border-color: var(--cp-header-border, rgba(255,255,255,0.08));
color: var(--cp-header-text, #ffffff);
}
.ch-modal-box [class*="-card"] [class*="-label"],
.ch-modal-box [class*="-stat"] [class*="-label"],
.cmc-modal [class*="-card"] [class*="-label"],
.compos-modal [class*="-card"] [class*="-label"],
[class*="modal-box"]:not([class^="cv7"]) [class*="-card"] small,
[class*="modal-box"]:not([class^="cv7"]) [class*="-stat"] small {
color: var(--cp-header-text, #ffffff);
opacity: 0.6;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: var(--cp-font-size-xs, 0.75rem);
}
[class*="modal-header"]:not([class^="cv7"]) {
border-bottom-color: var(--cp-header-border, rgba(255,255,255,0.08));
}
[class*="modal-footer"]:not([class^="cv7"]) {
border-top-color: var(--cp-header-border, rgba(255,255,255,0.08));
background: var(--cp-header-dropdown-bg-end, #0d1020);
}
[class*="modal-close"]:not([class^="cv7"]) {
color: var(--cp-header-text, #ffffff);
opacity: 0.6;
transition: opacity 200ms ease;
}
[class*="modal-close"]:not([class^="cv7"]):hover { opacity: 1; }
.ch-modal-ov,
.cdn-modal-overlay,
.cmc-modal-overlay,
.cmc-modal-backdrop,
.dg-modal-overlay,
.se-modal-overlay,
.wh-modal-overlay,
.compos-modal-backdrop,
.compos-modal-overlay,
[class*="modal-backdrop"]:not([class^="cv7"]):not([class*=" cv7"]),
[class*="modal-overlay"]:not([class^="cv7"]):not([class*=" cv7"]) {
background: rgba(0,0,0,0.80);
backdrop-filter: blur(4px);
}
.compos-mini-cart-sidebar,
.widget_shopping_cart,
.woocommerce-mini-cart {
background: var(--cp-header-bg, #0e1628);
color: var(--cp-header-text, #ffffff);
border-color: var(--cp-header-border, rgba(255,255,255,0.08));
}
.compos-mini-cart-header,
.compos-mini-cart-footer {
background: var(--cp-header-dropdown-bg-end, #0d1020);
border-color: var(--cp-header-border, rgba(255,255,255,0.08));
color: var(--cp-header-text, #ffffff);
}
.compos-mini-cart-header h1,
.compos-mini-cart-header h2,
.compos-mini-cart-header h3,
.woocommerce-mini-cart__total {
color: var(--cp-header-text, #ffffff);
font-family: var(--cp-font-heading, inherit);
}
.compos-mini-cart-body,
.woocommerce-mini-cart-item {
background: var(--cp-header-dropdown-bg-start, #111828);
border-color: var(--cp-header-border, rgba(255,255,255,0.08));
color: var(--cp-header-text, #ffffff);
}
.woocommerce-mini-cart-item a,
.compos-mini-cart-body a { color: var(--cp-header-text, #ffffff); }
.compos-mini-cart-subtotal,
.compos-mini-cart-total,
.woocommerce-mini-cart__total .amount {
color: var(--cp-accent, #ff650e);
}
.compos-mini-cart-overlay {
background: rgba(0,0,0,0.80);
backdrop-filter: blur(4px);
}
.compos-toast,
.cp-toast,
.cp-notification,
.compos-notification,
[class*="cp-toast"]:not([class*="__"]),
[class*="compos-toast"]:not([class*="__"]):not([class*="-stack"]),
[class*="cp-notify"] {
background: var(--cp-header-bg, #0e1628);
color: var(--cp-header-text, #ffffff);
border: 1px solid var(--cp-header-border, rgba(255,255,255,0.08));
border-radius: var(--cp-radius-md, 14px);
box-shadow: 0 8px 32px rgba(0,0,0,0.40);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.compos-toast [class*="-icon"],
[class*="cp-toast"] [class*="-icon"] { color: var(--cp-accent, #ff650e); }
.compos-toast [class*="-title"],
.compos-toast strong,
[class*="cp-toast"] [class*="-title"],
[class*="cp-toast"] strong {
color: var(--cp-header-text, #ffffff);
font-family: var(--cp-font-heading, inherit);
font-weight: 700;
}
.compos-toast p, .compos-toast [class*="-body"], .compos-toast [class*="-message"],
[class*="cp-toast"] p, [class*="cp-toast"] [class*="-body"], [class*="cp-toast"] [class*="-message"] {
color: var(--cp-header-text, #ffffff);
opacity: 0.85;
font-family: var(--cp-font-body, inherit);
}
.compos-toast [class*="-close"],
[class*="cp-toast"] [class*="-close"] {
color: var(--cp-header-text, #ffffff);
opacity: 0.55;
transition: opacity 200ms ease;
}
.compos-toast [class*="-close"]:hover,
[class*="cp-toast"] [class*="-close"]:hover { opacity: 1; }
.compos-toast [class*="-value"], .compos-toast [class*="-amount"],
[class*="cp-toast"] [class*="-value"], [class*="cp-toast"] [class*="-amount"] {
color: var(--cp-accent, #ff650e);
font-weight: 700;
}
.compos-toast [class*="-progress"],
[class*="cp-toast"] [class*="-progress"] {
background: var(--cp-accent, #ff650e);
opacity: 0.6;
}
.cp-toast--success, [class*="cp-toast"][class*="success"] { border-left: 3px solid #10b981;  }
.cp-toast--error,   [class*="cp-toast"][class*="error"]   { border-left: 3px solid #ef4444;  }
.cp-toast--warning, [class*="cp-toast"][class*="warning"] { border-left: 3px solid #d97706;  }
.compos-toast > *,
.cp-toast > *,
[class*="cp-toast"]:not([class*="__"]) > *,
[class*="compos-toast"]:not([class*="__"]):not([class*="-stack"]) > * {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
}
.compos-toast,
.cp-toast,
[class*="cp-toast"]:not([class*="__"]),
[class*="compos-toast"]:not([class*="__"]):not([class*="-stack"]) {
border-radius: var(--cp-radius-md, 14px) !important;
overflow: hidden !important;
}
.compos-toast > *:last-child,
.cp-toast > *:last-child,
[class*="cp-toast"]:not([class*="__"]) > *:last-child,
[class*="compos-toast"]:not([class*="__"]):not([class*="-stack"]) > *:last-child {
border-bottom: 0 !important;
border-radius: 0 !important;
}
.compos-toast [class*="-progress"],
.compos-toast [class*="-bar"],
[class*="cp-toast"] [class*="-progress"],
[class*="cp-toast"] [class*="-bar"] {
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
}
.compos-toast-content,
.compos-toast-title,
.compos-toast-text,
.compos-toast-icon {
border-radius: 0 !important;
}
.gamipress_notifyjs-corner,
.gamipress_notifyjs-wrapper,
.gamipress_notifyjs-container {
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
.compos-toast-container:empty,
[class*="toast-container"]:empty {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
outline: none !important;
pointer-events: none !important;
}
.gamipress-notification h4,
.gamipress-notification .toast-title,
.gamipress-notification .compos-toast-title,
.gamipress-notification .compos-toast-text {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 0 4px 0 !important;
color: var(--cp-header-text, #ffffff) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
display: block !important;
width: auto !important;
}
.gamipress-notification h4::before,
.gamipress-notification h4::after,
.gamipress-notification .toast-title::before,
.gamipress-notification .toast-title::after {
display: none !important;
content: none !important;
}
[class*="cpg-modal-box-"] [class*="hud"],
[class*="cpg-modal-box-"] [class*="stats-bar"],
[class*="cpg-modal-box-"] [class*="status-bar"],
[class*="dg-modal-box"] [class*="hud"],
[class*="dg-modal-box"] [class*="stats-bar"],
[class*="dg-modal-box"] [class*="status-bar"] {
background: var(--cp-header-dropdown-bg-start, #111828) !important;
border: 1px solid var(--cp-header-border, rgba(255,255,255,0.08)) !important;
border-radius: 8px !important;
color: var(--cp-header-text, #ffffff) !important;
}
[class*="cpg-modal-box-"] [class*="hud"] [class*="-label"],
[class*="cpg-modal-box-"] [class*="hud"] [class*="-title"],
[class*="dg-modal-box"] [class*="hud"] [class*="-label"],
[class*="dg-modal-box"] [class*="hud"] [class*="-title"] {
color: var(--cp-header-text, #ffffff) !important;
opacity: 0.6 !important;
}
[class*="cpg-modal-box-"] [class*="hud"] [class*="-value"],
[class*="cpg-modal-box-"] [class*="hud"] [class*="-number"],
[class*="dg-modal-box"] [class*="hud"] [class*="-value"],
[class*="dg-modal-box"] [class*="hud"] [class*="-number"] {
color: var(--cp-header-text, #ffffff) !important;
font-weight: 700 !important;
}
.compos-widget {
position: relative;
overflow: visible;
margin: 0 !important;
padding: 0 !important;
border-radius: 0;
box-sizing: border-box;
width: 100%;
isolation: auto;
font-family: var(--cp-font-body, -apple-system, BlinkMacSystemFont, sans-serif);
font-size: var(--cp-font-size-base, 16px);
line-height: var(--cp-line-height-body, 1.6);
}
.e-con:has(.compos-widget),
.elementor-section:has(.compos-widget),
.elementor-container:has(.compos-widget),
.elementor-column:has(.compos-widget) {
--container-default-padding-top: 0px !important;
--container-default-padding-bottom: 0px !important;
--container-default-padding-left: 0px !important;
--container-default-padding-right: 0px !important;
padding: 0 !important;
gap: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.elementor-column-gap-default > .elementor-column > .elementor-element-populated:has(.compos-widget) {
padding: 0 !important;
}
.elementor-widget:has(> .elementor-widget-container > .compos-widget) {
padding: 0 !important;
margin: 0 !important;
}
.elementor-widget-container > .compos-widget {
margin: 0 !important;
}
#content,
.main-contain,
.offcontents,
.container-fluid,
.container,
.row,
.col-lg-12,
.woocommerce-page .container,
.woocommerce .container,
.single-product .container,
.single-product .content-area,
.single-product #primary {
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.compos-widget-content {
position: relative;
z-index: auto;
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
border-radius: var(--cp-widget-radius, 0px);
overflow: hidden;
}
.compos-widget.compos-header {
padding: 0 !important;
margin: 0 !important;
}
.compos-widget.compos-dashboard-nav {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.compos-widget.compos-dashboard-nav .compos-widget-content {
overflow: visible;
}
.compos-widget.compos-homepage-hero,
.compos-widget.compos-seller-landing,
.compos-widget.compos-stb-main,
.compos-widget.compos-stb-page {
background: transparent !important;
padding: 0 !important;
margin: -10px 0 0 0 !important;
}
.compos-widget.compos-homepage-hero > .compos-widget-content {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.compos-widget.compos-homepage-hero .compos-widget-inner,
.compos-widget.compos-homepage-hero .compos-widget-body {
padding: 0 !important;
margin: 0 !important;
}
.compos-widget.compos-homepage-hero .compos-widget-body > div[id] {
padding: 10px 0 0 0 !important;
margin: 0 !important;
}
.compos-widget-inner {
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.compos-widget-body {
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.compos-widget [data-animate],
[data-animate]{opacity:0;transition:opacity .6s ease, transform .6s ease}
[data-animate="fade-up"]{transform:translateY(30px)}
[data-animate="fade-in"]{transform:none}
[data-animate="slide-left"]{transform:translateX(-30px)}
[data-animate="slide-right"]{transform:translateX(30px)}
[data-animate="zoom-in"]{transform:scale(0.95)}
[data-animate].animated{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
[data-animate]{opacity:1;transform:none;transition:none}
}
.compos-widget-body > div[id] {
padding: var(--cp-widget-padding, 40px) 36px;
box-sizing: border-box;
width: 100%;
}
@media (max-width: 1023px) {
.compos-widget-body > div[id] {
padding: var(--cp-widget-padding, 40px) 24px;
}
}
@media (max-width: 767px) {
.compos-widget-body > div[id] {
padding: var(--cp-widget-padding, 32px) 16px;
}
}
body.elementor-editor-active .compos-widget-body > div[id]:not([class*="xw-bg--"]),
body.elementor-page .compos-widget-body > div[id]:not([class*="xw-bg--"]),
body.elementor-default .compos-widget-body > div[id]:not([class*="xw-bg--"]),
body[class*="elementor-page-"] .compos-widget-body > div[id]:not([class*="xw-bg--"]) {
background: var(--cp-bg);
}
.compos-widget.compos-dashboard-nav .compos-widget-body > div[id],
.compos-widget.compos-homepage-hero .compos-widget-body > div[id],
.compos-widget.compos_live_draw_viewer .compos-widget-body > div[id],
.compos-widget.compos-merchant-profile .compos-widget-body > div[id],
.compos-widget.compos-seller-landing .compos-widget-body > div[id],
.compos-widget.compos-header .compos-widget-body > div[id],
.compos-widget.compos-product-page .compos-widget-body > div[id],
.compos-widget.compos-hero-split .compos-widget-body > div[id],
.compos-widget.compos-page-banner .compos-widget-body > div[id],
.compos-widget.compos-hospitality-hero .compos-widget-body > div[id],
.compos-widget.compos-hf-hero .compos-widget-body > div[id],
.compos-widget.compos-ls-hero .compos-widget-body > div[id],
.compos-widget.compos-ecommerce-storefront-hero .compos-widget-body > div[id] {
padding: 0 !important;
}
.compos-widget .cp-edge-bleed {
top: calc(-1 * var(--cp-widget-padding, 40px)) !important;
bottom: calc(-1 * var(--cp-widget-padding, 40px)) !important;
left: calc(50% - 50vw) !important;
width: 100vw !important;
right: auto !important;
max-width: none !important;
}
.compos-widget:has(.cp-edge-bleed),
.compos-widget:has(.cp-edge-bleed).xw-bg--dark,
.compos-widget:has(.cp-edge-bleed).xw-bg--light,
.compos-widget:has(.cp-edge-bleed).xw-bg--accent {
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.compos-widget:has(.cp-edge-bleed) .compos-widget-content {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.compos-light-mode .compos-widget:has(.cp-edge-bleed),
body.compos-dark-mode  .compos-widget:has(.cp-edge-bleed) {
background-color: transparent !important;
border: 0 !important;
}
.compos-widget.compos-hospitality-hero .compos-widget-content,
.compos-widget.compos-hf-hero .compos-widget-content,
.compos-widget.compos-ls-hero .compos-widget-content,
.compos-widget.compos-ecommerce-storefront-hero .compos-widget-content,
.compos-widget.compos-hero-split .compos-widget-content,
.compos-widget.compos-homepage-hero .compos-widget-content,
.compos-widget.compos-page-banner .compos-widget-content {
border-radius: 0 !important;
}
.compos-widget .xw-hero-bg,
.compos-widget .xw-hero-bg img,
.compos-widget .xw-hero-img,
.compos-widget .xw-hero-img img {
border-radius: 0 !important;
}
.compos-widget.compos_live_draw_viewer {
margin-top: -20px !important;
padding-bottom: 40px !important;
}
.compos-widget h1,
.compos-widget h2,
.compos-widget h3,
.compos-widget h4,
.compos-widget h5,
.compos-widget h6 {
color: inherit;
font-family: var(--cp-font-heading);
font-weight: var(--cp-font-weight-heading);
font-style: var(--cp-font-style-heading);
letter-spacing: var(--cp-letter-spacing-heading);
line-height: var(--cp-line-height-heading);
text-transform: var(--cp-text-transform-heading);
}
.compos-widget h1 { font-size: var(--cp-font-size-h1); }
.compos-widget h2 { font-size: var(--cp-font-size-h2); }
.compos-widget h3 { font-size: var(--cp-font-size-h3); }
.compos-widget h4 { font-size: var(--cp-font-size-h4); }
.compos-widget p,
.compos-widget li,
.compos-widget td,
.compos-widget th {
font-family: var(--cp-font-body);
font-size: var(--cp-font-size-body);
font-weight: var(--cp-font-weight-body);
font-style: var(--cp-font-style-body);
line-height: var(--cp-line-height-body, 1.6);
letter-spacing: var(--cp-letter-spacing-body, 0);
}
.compos-widget span {
font-family: var(--cp-font-body);
}
.compos-widget .compos-label {
font-family: var(--cp-font-body);
font-size: var(--cp-font-size-label, 11px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cp-text-muted-on-dark);
}
.compos-widget .compos-btn,
.compos-widget .cp-btn,
.compos-widget button {
font-size: var(--cp-font-size-button);
font-family: var(--cp-font-heading);
}
.compos-widget .cp-lead {
font-size: var(--cp-font-size-lead);
font-family: var(--cp-font-body);
line-height: var(--cp-line-height-body, 1.6);
}
.compos-widget small,
.compos-widget .cp-small {
font-size: var(--cp-font-size-small);
font-family: var(--cp-font-body);
}
.compos-widget .compos-badge {
font-size: var(--cp-font-size-badge);
}
.compos-widget figcaption,
.compos-widget .cp-caption {
font-size: var(--cp-font-size-caption);
font-family: var(--cp-font-body);
color: var(--cp-text-muted);
}
.compos-widget .cp-overline {
font-size: var(--cp-font-size-overline);
font-family: var(--cp-font-body);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.compos-widget .cp-text-muted {
opacity: 0.5;
}
.compos-widget .cp-text-subtle {
opacity: 0.35;
}
.compos-widget .compos-card {
border-radius: var(--cp-card-radius);
overflow: hidden;
}
.compos-widget .compos-badge {
border-radius: var(--cp-radius-small);
padding: 2px 8px;
font-size: var(--cp-font-size-badge);
font-weight: 600;
display: inline-block;
}
.compos-type-cash .compos-type-badge,
.compos-badge-cash {
background: var(--cp-type-cash-badge);
color: var(--cp-type-cash-text);
}
.compos-type-coins .compos-type-badge,
.compos-badge-coins {
background: var(--cp-type-coins-badge);
color: var(--cp-type-coins-text);
}
.compos-type-free .compos-type-badge,
.compos-badge-free {
background: var(--cp-type-free-badge);
color: var(--cp-type-free-text);
}
.compos-type-physical .compos-type-badge,
.compos-badge-physical {
background: var(--cp-type-physical-badge);
color: var(--cp-type-physical-text);
}
.compos-type-voucher .compos-type-badge,
.compos-badge-voucher {
background: var(--cp-type-voucher-badge);
color: var(--cp-type-voucher-text);
}
.compos-type-experience .compos-type-badge,
.compos-badge-experience {
background: var(--cp-type-experience-badge);
color: var(--cp-type-experience-text);
}
.compos-widget .compos-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: var(--cp-btn-padding-y) var(--cp-btn-padding-x);
border-radius: var(--cp-btn-radius);
font-size: var(--cp-btn-font-size);
font-weight: var(--cp-btn-font-weight);
letter-spacing: var(--cp-btn-letter-spacing);
font-family: var(--cp-font-body);
line-height: 1;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: var(--cp-btn-transition);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.compos-widget .compos-btn-primary {
background: var(--cp-btn-primary-bg);
color: var(--cp-btn-primary-text);
border-color: var(--cp-btn-primary-border);
box-shadow: var(--cp-btn-primary-shadow);
}
.compos-widget .compos-btn-primary:hover,
.compos-widget .compos-btn-primary:focus-visible {
background: var(--cp-btn-primary-hover-bg);
color: var(--cp-btn-primary-hover-text);
box-shadow: var(--cp-btn-primary-hover-shadow);
}
.compos-widget .compos-btn-secondary {
background: var(--cp-btn-secondary-bg);
color: var(--cp-btn-secondary-text);
border-color: var(--cp-btn-secondary-border);
border-width: var(--cp-btn-secondary-border-width);
}
.compos-widget .compos-btn-secondary:hover,
.compos-widget .compos-btn-secondary:focus-visible {
background: var(--cp-btn-secondary-hover-bg);
color: var(--cp-btn-secondary-hover-text);
border-color: var(--cp-btn-secondary-hover-bg);
}
.compos-widget .compos-btn-ghost {
background: transparent;
color: var(--cp-text-muted);
border-color: var(--cp-border);
}
.compos-widget .compos-btn-ghost:hover,
.compos-widget .compos-btn-ghost:focus-visible {
background: var(--cp-surface);
color: var(--cp-text);
}
.compos-widget .compos-btn-destructive {
background: var(--cp-status-error);
color: #FFFFFF;
}
.compos-widget .compos-btn-destructive:hover,
.compos-widget .compos-btn-destructive:focus-visible {
background: rgba(var(--cp-status-error-rgb), 0.85);
}
.compos-widget .compos-btn:disabled,
.compos-widget .compos-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.compos-widget .compos-btn-sm {
padding: calc(var(--cp-btn-padding-y) * 0.7) calc(var(--cp-btn-padding-x) * 0.75);
font-size: 0.875em;
}
.compos-widget .compos-btn-lg {
padding: calc(var(--cp-btn-padding-y) * 1.4) calc(var(--cp-btn-padding-x) * 1.3);
font-size: 1.0625em;
}
.compos-widget .compos-btn-full {
width: 100%;
}
.compos-widget .compos-btn-loading {
position: relative;
color: transparent;
pointer-events: none;
}
.compos-widget .compos-btn-loading::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: compos-btn-spin 0.6s linear infinite;
color: var(--cp-btn-primary-text);
}
@keyframes compos-btn-spin {
to { transform: rotate(360deg); }
}
.compos-widget .compos-btn-cash {
background: var(--cp-type-cash-accent);
color: var(--cp-type-cash-text);
}
.compos-widget .compos-btn-coins {
background: var(--cp-type-coins-accent);
color: var(--cp-type-coins-text);
}
.compos-widget .compos-input,
.compos-widget .compos-textarea,
.compos-widget .compos-select {
width: 100%;
box-sizing: border-box;
background: var(--cp-input-bg);
color: var(--cp-input-text, var(--cp-text));
border: var(--cp-input-border-width) solid var(--cp-input-border, var(--cp-border));
border-radius: var(--cp-input-radius);
padding: 0 var(--cp-input-padding-x);
font-size: var(--cp-input-font-size);
font-family: var(--cp-font-body);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.compos-widget .compos-input,
.compos-widget .compos-select {
height: var(--cp-input-height);
line-height: var(--cp-input-height);
}
.compos-widget .compos-input::placeholder,
.compos-widget .compos-textarea::placeholder {
color: var(--cp-input-placeholder, var(--cp-text-muted));
opacity: 1;
}
.compos-widget .compos-input:focus,
.compos-widget .compos-textarea:focus,
.compos-widget .compos-select:focus {
border-color: var(--cp-input-focus-border);
box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
background: var(--cp-input-focus-bg);
}
.compos-widget .compos-input.compos-input-error,
.compos-widget .compos-textarea.compos-input-error,
.compos-widget .compos-select.compos-input-error {
border-color: var(--cp-input-error-border);
background: var(--cp-input-error-bg);
}
.compos-widget .compos-input.compos-input-error:focus,
.compos-widget .compos-textarea.compos-input-error:focus,
.compos-widget .compos-select.compos-input-error:focus {
box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-error-ring);
}
.compos-widget .compos-input.compos-input-success,
.compos-widget .compos-select.compos-input-success {
border-color: var(--cp-input-success-border);
}
.compos-widget .compos-input:disabled,
.compos-widget .compos-textarea:disabled,
.compos-widget .compos-select:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.compos-widget .compos-textarea {
height: auto;
min-height: var(--cp-textarea-min-height);
padding-top: 0.75rem;
padding-bottom: 0.75rem;
line-height: 1.5;
resize: var(--cp-textarea-resize);
}
.compos-widget .compos-select {
--cp-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
background-image: var(--cp-chev);
background-repeat: no-repeat;
background-position: right 0.875rem center;
background-size: 12px 12px;
padding-right: 2.5rem;
cursor: pointer;
}
.compos-widget .compos-select::-ms-expand {
display: none;
}
body.compos-light-mode .compos-widget .compos-select,
.compos-widget.xw-bg--light .compos-select,
.compos-widget .xw-bg--light .compos-select,
.compos-widget.xw-text--dark .compos-select,
.compos-widget .xw-text--dark .compos-select {
--cp-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e1628' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
body.compos-light-mode .compos-widget.xw-bg--dark .compos-select,
body.compos-light-mode .compos-widget .xw-bg--dark .compos-select,
body.compos-light-mode .compos-widget.xw-bg--accent .compos-select,
body.compos-light-mode .compos-widget .xw-bg--accent .compos-select,
.compos-widget.xw-text--light .compos-select,
.compos-widget .xw-text--light .compos-select {
--cp-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.compos-widget .compos-select option {
background-color: #1a2332;
color: #ffffff;
}
body.compos-light-mode .compos-widget .compos-select option,
.compos-widget.xw-bg--light .compos-select option,
.compos-widget .xw-bg--light .compos-select option,
.compos-widget.xw-text--dark .compos-select option,
.compos-widget .xw-text--dark .compos-select option {
background-color: #ffffff;
color: #0e1628;
}
body.compos-light-mode .compos-widget.xw-bg--dark .compos-select option,
body.compos-light-mode .compos-widget .xw-bg--dark .compos-select option,
body.compos-light-mode .compos-widget.xw-bg--accent .compos-select option,
body.compos-light-mode .compos-widget .xw-bg--accent .compos-select option,
.compos-widget.xw-text--light .compos-select option,
.compos-widget .xw-text--light .compos-select option {
background-color: #1a2332;
color: #ffffff;
}
.compos-widget .compos-input,
.compos-widget .compos-textarea,
.compos-widget .compos-select {
color-scheme: dark;
}
body.compos-light-mode .compos-widget .compos-input,
body.compos-light-mode .compos-widget .compos-textarea,
body.compos-light-mode .compos-widget .compos-select,
.compos-widget.xw-bg--light .compos-input,
.compos-widget.xw-bg--light .compos-textarea,
.compos-widget.xw-bg--light .compos-select,
.compos-widget .xw-bg--light .compos-input,
.compos-widget .xw-bg--light .compos-textarea,
.compos-widget .xw-bg--light .compos-select,
.compos-widget.xw-text--dark .compos-input,
.compos-widget.xw-text--dark .compos-textarea,
.compos-widget.xw-text--dark .compos-select,
.compos-widget .xw-text--dark .compos-input,
.compos-widget .xw-text--dark .compos-textarea,
.compos-widget .xw-text--dark .compos-select {
color-scheme: light;
}
body.compos-light-mode .compos-widget.xw-bg--dark .compos-input,
body.compos-light-mode .compos-widget.xw-bg--dark .compos-textarea,
body.compos-light-mode .compos-widget.xw-bg--dark .compos-select,
body.compos-light-mode .compos-widget .xw-bg--dark .compos-input,
body.compos-light-mode .compos-widget .xw-bg--dark .compos-textarea,
body.compos-light-mode .compos-widget .xw-bg--dark .compos-select,
body.compos-light-mode .compos-widget.xw-bg--accent .compos-input,
body.compos-light-mode .compos-widget.xw-bg--accent .compos-textarea,
body.compos-light-mode .compos-widget.xw-bg--accent .compos-select,
body.compos-light-mode .compos-widget .xw-bg--accent .compos-input,
body.compos-light-mode .compos-widget .xw-bg--accent .compos-textarea,
body.compos-light-mode .compos-widget .xw-bg--accent .compos-select,
.compos-widget.xw-text--light .compos-input,
.compos-widget.xw-text--light .compos-textarea,
.compos-widget.xw-text--light .compos-select,
.compos-widget .xw-text--light .compos-input,
.compos-widget .xw-text--light .compos-textarea,
.compos-widget .xw-text--light .compos-select {
color-scheme: dark;
}
.compos-widget .compos-checkbox,
.compos-widget .compos-radio {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.compos-widget .compos-checkbox input[type="checkbox"],
.compos-widget .compos-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.compos-widget .compos-checkbox .compos-check-box,
.compos-widget .compos-radio .compos-radio-dot {
flex-shrink: 0;
width: var(--cp-checkbox-size);
height: var(--cp-checkbox-size);
border: var(--cp-input-border-width) solid var(--cp-checkbox-border);
background: var(--cp-input-bg);
transition: all 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.compos-widget .compos-checkbox .compos-check-box {
border-radius: var(--cp-checkbox-radius);
}
.compos-widget .compos-radio .compos-radio-dot {
border-radius: 50%;
}
.compos-widget .compos-checkbox input:checked ~ .compos-check-box,
.compos-widget .compos-radio input:checked ~ .compos-radio-dot {
background: var(--cp-checkbox-checked-bg);
border-color: var(--cp-checkbox-checked-border);
}
.compos-widget .compos-checkbox input:checked ~ .compos-check-box::after {
content: '';
width: 5px;
height: 9px;
border: 2px solid var(--cp-checkbox-tick);
border-top: none;
border-left: none;
transform: rotate(45deg) translateY(-1px);
}
.compos-widget .compos-checkbox input:focus-visible ~ .compos-check-box,
.compos-widget .compos-radio input:focus-visible ~ .compos-radio-dot {
box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
}
.compos-widget .compos-toggle {
position: relative;
display: inline-block;
width: var(--cp-toggle-width);
height: var(--cp-toggle-height);
flex-shrink: 0;
}
.compos-widget .compos-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.compos-widget .compos-toggle-track {
position: absolute;
inset: 0;
background: var(--cp-toggle-off-bg);
border-radius: var(--cp-toggle-height);
transition: var(--cp-toggle-transition);
cursor: pointer;
}
.compos-widget .compos-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: calc(var(--cp-toggle-height) - 6px);
height: calc(var(--cp-toggle-height) - 6px);
background: var(--cp-toggle-thumb);
border-radius: 50%;
transition: var(--cp-toggle-transition);
box-shadow: var(--cp-shadow-sm);
}
.compos-widget .compos-toggle input:checked ~ .compos-toggle-track {
background: var(--cp-toggle-on-bg);
}
.compos-widget .compos-toggle input:checked ~ .compos-toggle-thumb {
transform: translateX(calc(var(--cp-toggle-width) - var(--cp-toggle-height)));
}
.compos-widget .compos-toggle input:focus-visible ~ .compos-toggle-track {
box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring);
}
.compos-widget .compos-label {
display: block;
font-size: var(--cp-font-size-label);
font-weight: 600;
color: var(--cp-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.375rem;
}
.compos-widget .compos-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 1rem;
}
.compos-widget .compos-field-error {
font-size: var(--cp-font-size-small);
color: var(--cp-status-error);
margin-top: 0.25rem;
}
.compos-widget .compos-field-hint {
font-size: var(--cp-font-size-small);
color: var(--cp-text-muted);
margin-top: 0.25rem;
}
.woocommerce .woocommerce-Input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce input[type="tel"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-page .woocommerce-Input,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page input[type="tel"],
.woocommerce-page textarea,
.woocommerce-page select {
background: var(--cp-input-bg) !important;
color: var(--cp-input-text, var(--cp-text)) !important;
border: var(--cp-input-border-width) solid var(--cp-input-border, var(--cp-border)) !important;
border-radius: var(--cp-input-radius) !important;
height: auto;
min-height: var(--cp-input-height);
padding: 0 var(--cp-input-padding-x);
font-size: var(--cp-input-font-size);
font-family: var(--cp-font-body);
box-shadow: none !important;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-page input:focus,
.woocommerce-page select:focus,
.woocommerce-page textarea:focus {
border-color: var(--cp-input-focus-border) !important;
box-shadow: 0 0 0 var(--cp-input-focus-ring-width) var(--cp-input-focus-ring) !important;
}
.compos-widget .compos-progress {
height: 4px;
background: var(--cp-border);
border-radius: var(--cp-radius-pill);
overflow: hidden;
}
.compos-widget .compos-progress-bar {
height: 100%;
background: var(--cp-accent, #ff650e);
border-radius: var(--cp-radius-pill);
transition: width 0.3s ease;
}
.compos-widget .compos-countdown-box {
border-radius: var(--cp-radius-small);
background: var(--cp-mid);
padding: 8px 12px;
text-align: center;
min-width: 48px;
}
.compos-widget img {
max-width: 100%;
height: auto;
}
@media (max-width: 767px) {
.compos-widget .compos-card {
width: 100%;
}
.compos-widget .compos-countdown-box {
min-width: 36px;
padding: 6px 8px;
}
.compos-widget .compos-btn {
width: 100%;
text-align: center;
}
.compos-widget .compos-badge {
font-size: 0.7em;
padding: 2px 6px;
}
.compos-widget .compos-progress {
width: 100%;
}
.compos-decor-left,
.compos-decor-right {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.compos-decor-left,
.compos-decor-right {
max-width: 80px;
}
.compos-widget .compos-btn {
width: auto;
}
}
@media (min-width: 1024px) {
.compos-decor-left,
.compos-decor-right {
display: block;
}
.compos-widget .compos-btn {
width: auto;
}
}
@media (max-width: 767px) {
.compos-widget .compos-btn,
.compos-widget button:not(.compos-slider-dot):not(.compos-no-min-touch),
.compos-widget a.compos-btn {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
.compos-widget[style*="background-image"] {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.compos-compliance-footer,
.compos-compliance-footer span,
.compos-compliance-footer .compos-cf-age,
.compos-compliance-footer .compos-cf-helpline,
.compos-compliance-footer .compos-cf-licence,
.compos-compliance-footer .compos-cf-permit,
.compos-compliance-footer .compos-cf-nopurchase,
.compos-compliance-footer .compos-cf-sweep,
.compos-compliance-footer .compos-cf-operator {
font-family: var(--cp-font-body, inherit);
font-size: var(--cp-font-size-caption);
color: var(--cp-footer-copyright-text, var(--cp-footer-text, var(--cp-surface-text-muted))) !important;
text-align: center;
line-height: 1.6;
}
.compos-compliance-footer {
padding: 16px 20px;
}
.compos-compliance-footer a,
.compos-compliance-footer a span {
color: var(--cp-footer-copyright-link, var(--cp-footer-link, var(--cp-surface-text-muted))) !important;
text-decoration: none;
}
.compos-compliance-footer a:hover,
.compos-compliance-footer a:hover span {
color: var(--cp-footer-link-hover, var(--cp-surface-text)) !important;
}
.compos-cf-sep {
opacity: 0.3;
margin: 0 4px;
}
.compos-cf-age {
font-weight: 800;
}
.edit-link, span.edit-link, .entry-footer, .post-edit-link, .site-info, .site-description, .site-footer, footer.site-footer, #colophon, .footer-widgets, #footer { display: none !important;  }
@media (max-width: 767px) {
.compos-widget.hide-mobile { display: none !important;  }
}
@media (min-width: 768px) and (max-width: 1023px) {
.compos-widget.hide-tablet { display: none !important;  }
}
@media (min-width: 1024px) {
.compos-widget.hide-desktop { display: none !important;  }
}
@media (prefers-reduced-motion: reduce) {
.compos-widget * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
.compos-stats-title {
margin: 0 0 var(--cp-space-md, 1.5rem) 0;
font-size: var(--cp-font-size-h3);
text-align: center;
}
.compos-stats {
display: grid;
grid-template-columns: repeat(var(--stats-cols, 3), 1fr);
gap: var(--cp-space-md, 1.5rem);
}
.compos-stats--cols-2 { --stats-cols: 2; }
.compos-stats--cols-3 { --stats-cols: 3; }
.compos-stats--cols-4 { --stats-cols: 4; }
@media (max-width: 900px) {
.compos-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.compos-stats { grid-template-columns: 1fr; }
}
.compos-stat-item {
text-align: center;
padding: var(--cp-space-md, 1.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-stat-item .stat-icon {
font-size: 2rem;
color: var(--cp-accent, #ff650e);
margin-bottom: var(--cp-space-xs, 0.25rem);
display: block;
line-height: 1;
}
.compos-stat-item .stat-number {
font-family: var(--cp-font-heading), inherit;
font-size: clamp(2.25rem, 5vw, 3.25rem);
font-weight: 800;
color: var(--cp-accent, #ff650e);
line-height: 1;
display: block;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.compos-stat-item .stat-label {
font-size: var(--cp-font-size-sm);
color: var(--cp-text-muted);
margin-top: var(--cp-space-xs, 0.25rem);
display: block;
}
.compos-stats--dividers .compos-stat-item {
border-right: 1px solid var(--cp-border);
}
.compos-stats--dividers .compos-stat-item:last-child { border-right: 0; }
@media (max-width: 900px) {
.compos-stats--dividers .compos-stat-item { border-right: 0; }
}
.compos-team-member .member-social a:hover,
.compos-team-member .member-social a:focus-visible {
color: var(--cp-accent, #ff650e);
outline: none;
}
.compos-video {
position: relative;
width: 100%;
background: var(--cp-text-on-light, #000);
overflow: hidden;
border-radius: var(--cp-widget-radius, 0);
}
.compos-video--ratio-16-9 { aspect-ratio: 16 / 9; }
.compos-video--ratio-4-3  { aspect-ratio: 4 / 3; }
.compos-video--ratio-1-1  { aspect-ratio: 1; }
.compos-video iframe,
.compos-video video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.compos-video-poster {
position: absolute;
inset: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
padding: 0;
}
.compos-video-poster img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.compos-video-play-btn {
width: 72px;
height: 72px;
background: var(--cp-accent, #ff650e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 200ms ease;
position: relative;
z-index: 1;
}
.compos-video-poster:hover .compos-video-play-btn,
.compos-video-poster:focus-visible .compos-video-play-btn {
transform: scale(1.1);
outline: none;
}
.compos-video-play-btn i {
font-size: 2rem;
color: #fff;
line-height: 1;
}
.compos-video--play-minimal .compos-video-play-btn {
background: transparent;
border: 2px solid #fff;
}
.compos-video-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--cp-text-on-dark);
font-size: var(--cp-font-size-sm);
text-align: center;
padding: var(--cp-space-md, 1.5rem);
}
.compos-countdown-expired {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-body, 1rem);
font-weight: 500;
}
.compos-icon-list-REMOVED_v3 {
display: none;
display: flex;
flex-direction: column;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-icon-list--horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--cp-space-sm, 0.5rem);
}
.compos-icon-list--two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
}
@media (max-width: 540px) {
.compos-icon-list--two-column { grid-template-columns: 1fr; }
}
.compos-icon-list-item {
display: flex;
align-items: flex-start;
gap: var(--cp-space-xs, 0.25rem);
color: var(--cp-text);
line-height: 1.5;
}
.compos-icon-list-item i {
flex-shrink: 0;
margin-top: 2px;
line-height: 1;
}
.compos-icon-list--icon-accent  .compos-icon-list-item i { color: var(--cp-accent, #ff650e); }
.compos-icon-list--icon-success .compos-icon-list-item i { color: var(--cp-status-success); }
.compos-icon-list--icon-muted   .compos-icon-list-item i { color: var(--cp-text-muted); }
.compos-icon-list--icon-text    .compos-icon-list-item i { color: var(--cp-text); }
.compos-icon-list--size-sm .compos-icon-list-item i { font-size: 0.875rem; }
.compos-icon-list--size-md .compos-icon-list-item i { font-size: 1rem; }
.compos-icon-list--size-lg .compos-icon-list-item i { font-size: 1.25rem; }
.compos-icon-list--dividers .compos-icon-list-item {
padding-bottom: var(--cp-space-xs, 0.25rem);
border-bottom: 1px solid var(--cp-border);
}
.compos-icon-list--dividers .compos-icon-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.compos-icon-list-item a {
display: flex;
align-items: flex-start;
gap: var(--cp-space-xs, 0.25rem);
color: inherit;
text-decoration: none;
transition: color 150ms ease;
}
.compos-icon-list-item a:hover,
.compos-icon-list-item a:focus-visible {
color: var(--cp-accent, #ff650e);
outline: none;
}
.compos-tabs-nav {
display: flex;
gap: 2px;
margin: 0;
flex-wrap: wrap;
border-bottom: 1px solid var(--cp-border);
}
.compos-tab-btn {
background: transparent;
border: 0;
padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
cursor: pointer;
color: currentColor;
opacity: 0.65;
font-weight: 500;
font-size: var(--cp-font-size-sm);
transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease, border-color 150ms ease;
border-bottom: 2px solid transparent;
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: -1px;
font-family: inherit;
}
.compos-tab-btn i.ti { line-height: 1; }
.compos-tab-btn i,
.compos-tab-btn i::before,
.compos-tab-btn svg { color: currentColor; fill: currentColor; }
.compos-tab-btn:hover { opacity: 1; }
.compos-tab-btn.is-active {
color: var(--cp-accent, #ff650e);
opacity: 1;
border-bottom-color: var(--cp-accent, #ff650e);
}
.compos-tab-panel { display: none; padding: var(--cp-space-md, 1.5rem) var(--cp-space-sm, 1rem); }
.compos-tab-panel.is-active { display: block; }
.compos-tabs--boxed .compos-tabs-nav { border-bottom: 1px solid var(--cp-border); }
.compos-tabs--boxed .compos-tab-btn {
border: 1px solid var(--cp-border);
border-bottom-color: transparent;
border-radius: var(--cp-radius-sm) var(--cp-radius-sm) 0 0;
}
.compos-tabs--boxed .compos-tab-btn.is-active {
background: var(--cp-surface);
border-color: var(--cp-border);
border-bottom-color: var(--cp-surface);
color: var(--cp-text);
}
.compos-tabs--pill .compos-tabs-nav { border: 0; }
.compos-tabs--pill .compos-tab-btn {
border-radius: 99px;
padding: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
margin-bottom: 0;
}
.compos-tabs--pill .compos-tab-btn.is-active {
background: var(--cp-accent, #ff650e);
color: var(--cp-text-on-dark);
border-bottom-color: transparent;
}
.compos-tabs--pill .compos-tab-btn.is-active,
.compos-tabs--pill .compos-tab-btn.is-active i,
.compos-tabs--pill .compos-tab-btn.is-active i::before,
.compos-tabs--pill .compos-tab-btn.is-active svg { color: var(--cp-text-on-dark); fill: currentColor; }
.compos-tabs--horizontal-bottom { display: flex; flex-direction: column-reverse; }
.compos-tabs--vertical {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--cp-space-md, 1.5rem);
}
.compos-tabs--vertical .compos-tabs-nav {
flex-direction: column;
margin-bottom: 0;
border-right: 1px solid var(--cp-border);
border-bottom: 0;
}
.compos-tabs--vertical .compos-tab-btn {
text-align: left;
border-bottom: 0;
border-right: 2px solid transparent;
margin-bottom: 0;
margin-right: -1px;
justify-content: flex-start;
width: 100%;
}
.compos-tabs--vertical .compos-tab-btn.is-active {
border-right-color: var(--cp-accent, #ff650e);
}
.compos-tabs--vertical .compos-tab-panel {
padding: var(--cp-space-xs, 0.25rem) 0 var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
}
@media (max-width: 720px) {
.compos-tabs--vertical { grid-template-columns: 1fr; }
.compos-tabs--vertical .compos-tabs-nav { border-right: 0; border-bottom: 1px solid var(--cp-border); flex-direction: row; }
.compos-tabs--vertical .compos-tab-btn { border-right: 0; border-bottom: 2px solid transparent; }
.compos-tabs--vertical .compos-tab-btn.is-active { border-bottom-color: var(--cp-accent, #ff650e); border-right-color: transparent; }
.compos-tabs--vertical .compos-tab-panel { padding: var(--cp-space-md, 1.5rem) 0; }
}
.compos-cards-grid {
display: grid;
gap: var(--cp-space-md, 1.5rem);
}
.compos-cards-grid--equal { align-items: stretch; }
.compos-card-item {
background: var(--cp-surface);
border-radius: var(--cp-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.compos-cards-grid--bordered .compos-card-item { border: 1px solid var(--cp-border); }
.compos-card-item .card-image { flex-shrink: 0; overflow: hidden; }
.compos-card-item .card-image img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.compos-card-item:hover .card-image img { transform: scale(1.05); }
.compos-card-item .card-body {
padding: var(--cp-space-md, 1.5rem);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-card-item .card-eyebrow {
font-size: var(--cp-font-size-xs);
color: var(--cp-accent, #ff650e);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.compos-card-item h3 {
font-size: var(--cp-font-size-h3);
margin: 0;
color: var(--cp-text);
}
.compos-card-item p {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-sm);
flex: 1;
margin: 0;
}
.compos-card-item .card-action {
margin-top: auto;
padding-top: var(--cp-space-sm, 0.5rem);
}
.compos-cards-grid--img-left .compos-card-item {
flex-direction: row;
}
.compos-cards-grid--img-left .card-image {
width: 40%;
flex-shrink: 0;
}
.compos-cards-grid--img-left .card-image img {
height: 100%;
aspect-ratio: auto;
min-height: 100%;
}
@media (max-width: 540px) {
.compos-cards-grid--img-left .compos-card-item { flex-direction: column; }
.compos-cards-grid--img-left .card-image { width: 100%; }
.compos-cards-grid--img-left .card-image img { aspect-ratio: 16 / 9; height: auto; }
}
.compos-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--cp-text-on-dark);
}
.compos-hero--full-screen   { min-height: 100vh; }
.compos-hero--three-quarter { min-height: 75vh; }
.compos-hero--half          { min-height: 50vh; }
.compos-hero--auto          { min-height: 400px; }
.compos-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.compos-hero-bg video,
.compos-hero-bg iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
pointer-events: none;
}
.compos-hero--bg-gradient .compos-hero-bg {
background: linear-gradient(135deg, var(--cp-accent, #ff650e), var(--cp-accent2, var(--cp-accent, #ff650e)));
}
.compos-hero-overlay {
position: absolute;
inset: 0;
opacity: var(--hero-overlay-opacity, 0.5);
z-index: 1;
pointer-events: none;
}
.compos-hero--overlay-dark   .compos-hero-overlay {
background: linear-gradient(135deg,
rgba(var(--cp-text-on-light-rgb,14,22,40),1) 0%,
rgba(var(--cp-text-on-light-rgb,14,22,40),0.6) 100%);
}
.compos-hero--overlay-light  .compos-hero-overlay { background: rgba(255,255,255,0.6); }
.compos-hero--overlay-accent .compos-hero-overlay {
background: linear-gradient(135deg,
rgba(var(--cp-accent-rgb,255,101,14),0.9) 0%,
rgba(var(--cp-accent-rgb,255,101,14),0.5) 100%);
}
.compos-hero-bg { transition: transform 8s ease-out; }
.compos-hero:hover .compos-hero-bg { transform: scale(1.03); }
.compos-hero-content {
position: relative;
z-index: 2;
padding: var(--cp-space-xl, 4rem) var(--cp-space-md, 1.5rem);
width: 100%;
max-width: 900px;
}
.compos-hero--content-centre .compos-hero-content { margin: 0 auto; text-align: center; }
.compos-hero--content-left   .compos-hero-content { margin-right: auto; text-align: left; }
.compos-hero--content-right  .compos-hero-content { margin-left: auto; text-align: right; }
.compos-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--cp-font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cp-accent, #ff650e);
background: rgba(var(--cp-accent-rgb,255,101,14),0.12);
padding: 5px 14px;
border-radius: 99px;
margin-bottom: var(--cp-space-sm);
border: 1px solid rgba(var(--cp-accent-rgb,255,101,14),0.3);
}
.compos-hero-heading {
font-size: var(--cp-font-size-h1);
font-weight: 800;
color: var(--cp-text-on-dark);
line-height: 1.1;
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
letter-spacing: -0.02em;
}
.compos-hero-heading--xl { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.compos-hero-heading--lg { font-size: clamp(2rem,   4vw, 3.5rem); }
.compos-hero-heading--md { font-size: clamp(1.75rem,3vw, 2.5rem); }
.compos-hero-subheading {
font-size: clamp(1rem, 2vw, 1.25rem);
color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.8);
max-width: 680px;
margin: 0 0 var(--cp-space-lg, 3rem) 0;
line-height: 1.6;
}
.compos-hero--content-centre .compos-hero-subheading { margin-left: auto; margin-right: auto; }
.compos-hero--content-right  .compos-hero-subheading { margin-left: auto; }
.compos-hero-actions {
display: flex;
gap: var(--cp-space-sm, 0.5rem);
flex-wrap: wrap;
align-items: center;
}
.compos-hero--content-centre .compos-hero-actions { justify-content: center; }
.compos-hero--content-right  .compos-hero-actions { justify-content: flex-end; }
.compos-btn--white {
background: rgba(255,255,255,0.15);
color: #fff;
border: 2px solid rgba(255,255,255,0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.compos-btn--white:hover,
.compos-btn--white:focus-visible {
background: rgba(255,255,255,0.25);
color: #fff;
outline: none;
}
.compos-hero-scroll {
position: absolute;
bottom: var(--cp-space-md, 1.5rem);
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.6);
animation: compos-hero-bounce 2s infinite;
z-index: 2;
font-size: 1.5rem;
}
@keyframes compos-hero-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50%      { transform: translateX(-50%) translateY(8px); }
}
@media (max-width: 480px) {
.compos-hero-heading--xl { font-size: 2.25rem; }
.compos-hero-actions {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.compos-hero-actions .compos-btn { justify-content: center; }
}
.compos-hero-split {
display: grid;
align-items: center;
width: 100%;
overflow: hidden;
}
.compos-hero-split--auto                { min-height: auto; }
.compos-hero-split--viewport-half       { min-height: 50vh; }
.compos-hero-split--viewport-two-thirds { min-height: 66vh; }
.compos-hero-split--bg-dark    { background: var(--cp-text-on-light, #0e1628); color: var(--cp-text-on-dark); }
.compos-hero-split--bg-light   { background: var(--cp-light, #fff); color: var(--cp-text); }
.compos-hero-split--bg-surface { background: var(--cp-surface); color: var(--cp-text); }
.compos-hero-split--bg-dark .compos-hero-heading { color: var(--cp-text-on-dark); }
.compos-hero-split--bg-dark .compos-hero-subheading { color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.8); }
.compos-hero-split--bg-light .compos-hero-heading,
.compos-hero-split--bg-surface .compos-hero-heading { color: var(--cp-text); }
.compos-hero-split--bg-light .compos-hero-subheading,
.compos-hero-split--bg-surface .compos-hero-subheading { color: var(--cp-text-muted); }
.compos-hero-split-content {
padding: var(--cp-space-xl, 4rem) var(--cp-space-lg, 3rem);
}
.compos-hero-split-visual {
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.compos-hero-split-visual img,
.compos-hero-split-visual iframe {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 0;
}
.compos-hero-split--content-right .compos-hero-split-content { order: 2; }
.compos-hero-split--content-right .compos-hero-split-visual  { order: 1; }
.compos-hero-split--visual-contained .compos-hero-split-visual {
padding: var(--cp-space-lg, 3rem);
}
.compos-hero-split--visual-contained .compos-hero-split-visual img,
.compos-hero-split--visual-contained .compos-hero-split-visual iframe {
border-radius: var(--cp-radius-md);
box-shadow: var(--cp-shadow-lg);
height: auto;
}
.compos-hero-split--visual-floating .compos-hero-split-visual {
padding: var(--cp-space-lg, 3rem);
}
.compos-hero-split--visual-floating .compos-hero-split-visual img {
border-radius: var(--cp-radius-lg, 16px);
box-shadow: var(--cp-shadow-lg);
transform: rotate(-2deg);
transition: transform 300ms ease;
height: auto;
}
.compos-hero-split--visual-floating .compos-hero-split-visual:hover img { transform: rotate(0deg); }
.compos-hero-badges {
display: flex;
gap: var(--cp-space-sm, 0.5rem);
flex-wrap: wrap;
margin-top: var(--cp-space-md, 1.5rem);
}
.compos-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
}
.compos-hero-split--bg-dark .compos-hero-badge {
color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.65);
}
.compos-hero-badge i { color: var(--cp-accent, #ff650e); line-height: 1; }
.compos-hero-split-placeholder {
padding: var(--cp-space-lg, 3rem);
border: 2px dashed var(--cp-border);
border-radius: var(--cp-radius-md);
color: var(--cp-text-muted);
text-align: center;
background: var(--cp-surface);
}
@media (max-width: 900px) {
.compos-hero-split { grid-template-columns: 1fr; }
.compos-hero-split--content-right .compos-hero-split-content { order: 1; }
.compos-hero-split--content-right .compos-hero-split-visual  { order: 2; }
.compos-hero-split-visual { min-height: 280px; }
.compos-hero-split-content { padding: var(--cp-space-lg, 3rem) var(--cp-space-md, 1.5rem); }
}
.compos-section-intro {
margin-bottom: var(--cp-space-lg, 3rem);
}
.compos-section-intro--centre { text-align: center; margin-left: auto; margin-right: auto; }
.compos-section-intro--left   { text-align: left;   margin-right: auto; }
.compos-section-intro--right  { text-align: right;  margin-left: auto; }
.compos-section-intro--narrow { max-width: 480px; }
.compos-section-intro--medium { max-width: 640px; }
.compos-section-intro--wide   { max-width: 860px; }
.compos-section-intro--full   { max-width: 100%; }
.compos-section-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--cp-space-xs, 0.25rem);
font-size: var(--cp-font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cp-accent, #ff650e);
margin-bottom: var(--cp-space-sm, 0.5rem);
}
.compos-section-eyebrow.has-divider::before {
content: "";
display: block;
width: 32px;
height: 2px;
background: var(--cp-accent, #ff650e);
margin-right: var(--cp-space-xs, 0.25rem);
}
.compos-section-intro h1,
.compos-section-intro h2,
.compos-section-intro h3 {
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
font-weight: 700;
color: var(--cp-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
.compos-section-intro h1 { font-size: clamp(2rem, 4vw, 3rem); }
.compos-section-intro h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.compos-section-intro h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.compos-section-intro p {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-body, 1.0625rem);
line-height: 1.7;
margin: 0 0 var(--cp-space-md, 1.5rem) 0;
}
.compos-section-intro .compos-btn {
margin-top: var(--cp-space-xs, 0.25rem);
}
.compos-page-banner {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
width: 100%;
}
.compos-page-banner--sm { min-height: 200px; }
.compos-page-banner--md { min-height: 320px; }
.compos-page-banner--lg { min-height: 480px; }
.compos-page-banner-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.compos-page-banner--colour-surface .compos-page-banner-bg { background: var(--cp-surface); }
.compos-page-banner--colour-dark    .compos-page-banner-bg { background: var(--cp-text-on-light, #0e1628); }
.compos-page-banner--colour-accent  .compos-page-banner-bg { background: var(--cp-accent, #ff650e); }
.compos-page-banner--bg-gradient .compos-page-banner-bg {
background: linear-gradient(135deg, var(--cp-accent, #ff650e), var(--cp-accent2, var(--cp-accent, #ff650e)));
}
.compos-page-banner--bg-none { background: transparent; }
.compos-page-banner-overlay {
position: absolute;
inset: 0;
background: var(--cp-text-on-light, #0e1628);
opacity: var(--pb-overlay-opacity, 0.4);
z-index: 1;
pointer-events: none;
}
.compos-page-banner-content {
position: relative;
z-index: 2;
padding: var(--cp-space-lg, 3rem) var(--cp-space-md, 1.5rem);
width: 100%;
color: var(--cp-text-on-dark);
}
.compos-page-banner--bg-none .compos-page-banner-content,
.compos-page-banner--colour-surface .compos-page-banner-content {
color: var(--cp-text);
}
.compos-page-banner--centre .compos-page-banner-content { text-align: center; }
.compos-page-banner--left   .compos-page-banner-content { text-align: left; }
.compos-page-banner h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: 700;
color: inherit;
margin: 0 0 var(--cp-space-xs, 0.25rem) 0;
line-height: 1.2;
letter-spacing: -0.01em;
}
.compos-page-banner .page-subtitle {
color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.75);
font-size: var(--cp-font-size-body, 1rem);
margin: 0;
}
.compos-page-banner--bg-none .page-subtitle,
.compos-page-banner--colour-surface .page-subtitle {
color: var(--cp-text-muted);
}
.compos-divider { width: 100%; }
.compos-divider--pt-none { padding-top: 0; }
.compos-divider--pt-xs   { padding-top: var(--cp-space-xs, 0.25rem); }
.compos-divider--pt-sm   { padding-top: var(--cp-space-sm, 0.5rem); }
.compos-divider--pt-md   { padding-top: var(--cp-space-md, 1.5rem); }
.compos-divider--pt-lg   { padding-top: var(--cp-space-lg, 3rem); }
.compos-divider--pt-xl   { padding-top: var(--cp-space-xl, 4rem); }
.compos-divider--pb-none { padding-bottom: 0; }
.compos-divider--pb-xs   { padding-bottom: var(--cp-space-xs, 0.25rem); }
.compos-divider--pb-sm   { padding-bottom: var(--cp-space-sm, 0.5rem); }
.compos-divider--pb-md   { padding-bottom: var(--cp-space-md, 1.5rem); }
.compos-divider--pb-lg   { padding-bottom: var(--cp-space-lg, 3rem); }
.compos-divider--pb-xl   { padding-bottom: var(--cp-space-xl, 4rem); }
.compos-divider-line {
position: relative;
border-top-style: solid;
border-top-width: 1px;
border-top-color: var(--cp-border);
margin: 0;
}
.compos-divider-line--solid  { border-top-style: solid; }
.compos-divider-line--dashed { border-top-style: dashed; }
.compos-divider-line--dotted { border-top-style: dotted; }
.compos-divider-line--double { border-top-style: double; border-top-width: 3px; }
.compos-divider-line--thin   { border-top-width: 1px; }
.compos-divider-line--medium { border-top-width: 2px; }
.compos-divider-line--thick  { border-top-width: 4px; }
.compos-divider-line--double.compos-divider-line--thick { border-top-width: 6px; }
.compos-divider-line--full          { width: 100%; }
.compos-divider-line--three-quarter { width: 75%; margin: 0 auto; }
.compos-divider-line--half          { width: 50%; margin: 0 auto; }
.compos-divider-line--quarter       { width: 25%; margin: 0 auto; }
.compos-divider-line--border { border-top-color: var(--cp-border); }
.compos-divider-line--accent { border-top-color: var(--cp-accent, #ff650e); }
.compos-divider-line--muted  { border-top-color: var(--cp-text-muted); }
.compos-divider-line--text   { border-top-color: var(--cp-text); }
.compos-divider-line--with-icon { text-align: center; }
.compos-divider-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 var(--cp-space-sm, 0.5rem);
color: var(--cp-text-muted);
background: var(--cp-bg, var(--cp-surface));
line-height: 1;
font-size: 1rem;
}
.compos-divider-line--accent .compos-divider-icon { color: var(--cp-accent, #ff650e); }
.compos-divider-space--sm { height: 2rem; }
.compos-divider-space--md { height: 4rem; }
.compos-divider-space--lg { height: 6rem; }
.compos-divider-space--xl { height: 8rem; }
.compos-divider-dots {
display: flex;
justify-content: center;
gap: var(--cp-space-sm, 0.5rem);
}
.compos-divider-dots span {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cp-border);
}
.compos-divider-gradient {
height: 1px;
background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
}
.compos-post-featured {
margin-bottom: var(--cp-space-lg, 3rem);
}
.compos-post-featured--single-large .compos-featured-card--hero {
position: relative;
overflow: hidden;
border-radius: var(--cp-radius-md);
display: flex;
align-items: flex-end;
min-height: 480px;
background: var(--cp-surface);
}
.compos-post-featured--height-sm .compos-featured-card--hero { min-height: 320px; }
.compos-post-featured--height-md .compos-featured-card--hero { min-height: 400px; }
.compos-post-featured--height-lg .compos-featured-card--hero { min-height: 480px; }
.compos-featured-card--hero .featured-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.compos-featured-card--hero .featured-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(var(--cp-text-on-light-rgb, 14,22,40), 0.85) 0%, transparent 60%);
z-index: 1;
pointer-events: none;
}
.compos-featured-card--hero .featured-content {
position: relative;
z-index: 2;
padding: var(--cp-space-lg, 3rem);
width: 100%;
color: var(--cp-text-on-dark);
}
.compos-featured-card--hero .featured-title {
font-size: clamp(1.5rem, 3vw, var(--cp-font-size-h2, 2rem));
font-weight: 800;
color: var(--cp-text-on-dark);
line-height: 1.2;
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
letter-spacing: -0.01em;
}
.compos-featured-card--hero .featured-title a {
color: var(--cp-text-on-dark);
text-decoration: none;
}
.compos-featured-card--hero .featured-title a:hover { color: var(--cp-accent, #ff650e); }
.compos-featured-card--hero .featured-excerpt {
color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.85);
font-size: var(--cp-font-size-body, 1rem);
line-height: 1.6;
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
max-width: 720px;
}
.compos-featured-card--hero .compos-post-meta {
color: rgba(var(--cp-text-on-dark-rgb, 255,255,255), 0.75);
}
.compos-featured-card--hero .compos-post-meta i { color: var(--cp-accent, #ff650e); }
.compos-post-featured--two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cp-space-md, 1.5rem);
}
.compos-post-featured--one-plus-two {
display: grid;
grid-template-columns: 3fr 2fr;
gap: var(--cp-space-md, 1.5rem);
}
.compos-post-featured--one-plus-two .compos-featured-card--hero { min-height: 420px; }
.compos-post-featured--one-plus-two .featured-secondary {
display: flex;
flex-direction: column;
gap: var(--cp-space-md, 1.5rem);
}
.compos-featured-card--stacked,
.compos-featured-card--sidebar {
background: var(--cp-surface);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 200ms ease;
}
.compos-featured-card--stacked:hover,
.compos-featured-card--sidebar:hover { border-color: var(--cp-accent, #ff650e); }
.compos-featured-card--stacked .featured-thumb,
.compos-featured-card--sidebar .featured-thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
display: block;
}
.compos-featured-card--stacked .featured-thumb img,
.compos-featured-card--sidebar .featured-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.compos-featured-card--stacked:hover .featured-thumb img,
.compos-featured-card--sidebar:hover .featured-thumb img { transform: scale(1.04); }
.compos-featured-card--stacked .featured-body,
.compos-featured-card--sidebar .featured-body {
padding: var(--cp-space-md, 1.5rem);
display: flex;
flex-direction: column;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-featured-card--stacked .featured-title,
.compos-featured-card--sidebar .featured-title {
font-size: var(--cp-font-size-body, 1.125rem);
font-weight: 700;
color: var(--cp-text);
margin: 0;
line-height: 1.3;
}
.compos-featured-card--stacked .featured-title a,
.compos-featured-card--sidebar .featured-title a { color: inherit; text-decoration: none; }
.compos-featured-card--stacked .featured-title a:hover,
.compos-featured-card--sidebar .featured-title a:hover { color: var(--cp-accent, #ff650e); }
.compos-featured-card--sidebar { flex-direction: row; }
.compos-featured-card--sidebar .featured-thumb { width: 40%; flex-shrink: 0; aspect-ratio: auto; }
.compos-featured-card--sidebar .featured-thumb img { height: 100%; min-height: 100%; }
@media (max-width: 900px) {
.compos-post-featured--two-column,
.compos-post-featured--one-plus-two {
grid-template-columns: 1fr;
}
.compos-featured-card--sidebar { flex-direction: column; }
.compos-featured-card--sidebar .featured-thumb { width: 100%; aspect-ratio: 16 / 9; }
}
.compos-post-list-title {
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
font-size: var(--cp-font-size-h3);
color: var(--cp-text);
}
.compos-post-list-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.compos-post-list-item {
display: flex;
gap: var(--cp-space-sm, 0.5rem);
align-items: flex-start;
padding: var(--cp-space-sm, 0.5rem) 0;
}
.compos-post-list--divided .compos-post-list-item {
border-bottom: 1px solid var(--cp-border);
}
.compos-post-list--divided .compos-post-list-item:last-child { border-bottom: 0; }
.compos-post-list--card .compos-post-list-item {
background: var(--cp-surface);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-sm);
padding: var(--cp-space-sm, 0.5rem);
margin-bottom: var(--cp-space-xs, 0.25rem);
transition: border-color 150ms ease;
}
.compos-post-list--card .compos-post-list-item:hover { border-color: var(--cp-accent, #ff650e); }
.compos-post-list--minimal .compos-post-list-item {
padding: var(--cp-space-xs, 0.25rem) 0;
border: 0;
}
.post-list-thumb {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: var(--cp-radius-sm);
overflow: hidden;
background: var(--cp-elevated);
display: block;
}
.compos-post-list--thumb-medium .post-list-thumb { width: 80px; height: 80px; }
.post-list-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 300ms ease;
}
.compos-post-list-item:hover .post-list-thumb img { transform: scale(1.05); }
.post-list-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.post-list-title {
font-size: var(--cp-font-size-sm);
font-weight: 600;
color: var(--cp-text);
line-height: 1.3;
display: block;
text-decoration: none;
transition: color 150ms ease;
}
.post-list-title:hover { color: var(--cp-accent, #ff650e); }
.post-list-excerpt {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
line-height: 1.5;
display: block;
}
.post-list-meta {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
}
.compos-post-list-empty {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-sm);
margin: 0;
padding: var(--cp-space-sm, 0.5rem) 0;
}
.compos-author-bio .author-label {
display: block;
font-size: var(--cp-font-size-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cp-text-muted);
margin-bottom: var(--cp-space-sm, 0.5rem);
font-weight: 600;
}
.compos-author-bio-inner {
display: flex;
gap: var(--cp-space-md, 1.5rem);
align-items: flex-start;
}
.compos-author-bio--vertical { text-align: center; }
.compos-author-bio--vertical .compos-author-bio-inner {
flex-direction: column;
align-items: center;
}
.compos-author-bio--card {
background: var(--cp-surface);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md);
padding: var(--cp-space-md, 1.5rem);
}
.compos-author-bio .author-avatar img {
border-radius: 50%;
flex-shrink: 0;
display: block;
}
.compos-author-bio .author-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.compos-author-bio .author-name {
font-weight: 700;
font-size: var(--cp-font-size-body, 1rem);
color: var(--cp-text);
}
.compos-author-bio .author-post-count {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.compos-author-bio .author-bio {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-sm);
line-height: 1.6;
margin: var(--cp-space-xs, 0.25rem) 0 0 0;
}
.compos-author-bio .author-social {
display: flex;
gap: var(--cp-space-xs, 0.25rem);
margin-top: var(--cp-space-sm, 0.5rem);
}
.compos-author-bio--vertical .author-social { justify-content: center; }
.compos-author-bio .author-social a {
color: var(--cp-text-muted);
font-size: 1.25rem;
line-height: 1;
transition: color 150ms ease;
text-decoration: none;
}
.compos-author-bio .author-social a:hover,
.compos-author-bio .author-social a:focus-visible {
color: var(--cp-accent, #ff650e);
outline: none;
}
.compos-related-posts {
margin-top: var(--cp-space-xl, 4rem);
}
.compos-related-posts .section-title {
font-size: var(--cp-font-size-h3);
color: var(--cp-text);
margin: 0 0 var(--cp-space-md, 1.5rem) 0;
}
.compos-related-grid {
display: grid;
grid-template-columns: repeat(var(--related-cols, 3), 1fr);
gap: var(--cp-space-md, 1.5rem);
}
.compos-related-grid--cols-2 { --related-cols: 2; }
.compos-related-grid--cols-3 { --related-cols: 3; }
.compos-related-grid--cols-4 { --related-cols: 4; }
@media (max-width: 768px) { .compos-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .compos-related-grid { grid-template-columns: 1fr; } }
.compos-related-card {
background: var(--cp-surface);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 200ms ease, transform 200ms ease;
}
.compos-related-card .related-thumb {
aspect-ratio: 16 / 9;
overflow: hidden;
display: block;
}
.compos-related-card .related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
}
.compos-related-card:hover .related-thumb img { transform: scale(1.04); }
.compos-related-card .related-body {
padding: var(--cp-space-sm, 0.5rem);
display: flex;
flex-direction: column;
gap: 4px;
}
.compos-related-card .related-title {
font-weight: 600;
font-size: var(--cp-font-size-sm);
color: var(--cp-text);
text-decoration: none;
line-height: 1.3;
display: block;
transition: color 150ms ease;
}
.compos-related-card .related-title:hover { color: var(--cp-accent, #ff650e); }
.compos-related-card .related-excerpt {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
line-height: 1.5;
margin: 0;
}
.compos-related-card .related-date {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
}
.compos-slider-track-wrapper {
overflow: hidden;
position: relative;
width: 100%;
}
.compos-slider-track {
display: flex;
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.compos-slider-slide {
flex: 0 0 100%;
width: 100%;
min-width: 0;
}
.compos-slider--2up .compos-slider-slide { flex: 0 0 50%; }
.compos-slider--3up .compos-slider-slide { flex: 0 0 33.333%; }
.compos-slider--4up .compos-slider-slide { flex: 0 0 25%; }
@media (max-width: 1024px) {
.compos-slider--3up .compos-slider-slide,
.compos-slider--4up .compos-slider-slide { flex: 0 0 50%; }
}
@media (max-width: 767px) {
.compos-slider--2up .compos-slider-slide,
.compos-slider--3up .compos-slider-slide,
.compos-slider--4up .compos-slider-slide { flex: 0 0 100%; }
}
.compos-slider--fade .compos-slider-track { position: relative; }
.compos-slider--fade .compos-slider-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease;
flex: 0 0 100%;
pointer-events: none;
}
.compos-slider--fade .compos-slider-slide.is-active {
opacity: 1;
position: relative;
pointer-events: auto;
}
.compos-slider-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--cp-space-sm, 0.5rem);
margin-top: var(--cp-space-md, 1.5rem);
}
.compos-slider-btn {
width: 40px;
height: 40px;
min-width: 40px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--cp-surface);
border: 1px solid var(--cp-border);
color: var(--cp-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
flex-shrink: 0;
padding: 0;
font-family: inherit;
line-height: 1;
box-sizing: border-box;
}
.compos-slider-btn i { line-height: 1; }
.compos-slider-btn:hover,
.compos-slider-btn:focus-visible {
background: var(--cp-accent, #ff650e);
border-color: var(--cp-accent, #ff650e);
color: #fff;
outline: none;
}
.compos-slider-dots {
display: flex;
gap: 6px;
align-items: center;
}
.compos-slider-dot {
width: 8px;
height: 8px;
min-width: 8px;
min-height: 0;
max-height: 8px;
aspect-ratio: 1;
flex-shrink: 0;
border-radius: 50%;
box-sizing: border-box;
background: var(--cp-border);
cursor: pointer;
transition: background-color 200ms ease, transform 200ms ease;
border: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
appearance: none;
}
.compos-slider-dot.is-active {
background: var(--cp-accent, #ff650e);
transform: scale(1.3);
}
.compos-slider-dot:hover,
.compos-slider-dot:focus-visible {
background: var(--cp-accent, #ff650e);
outline: none;
}
.compos-slider-progress {
height: 2px;
background: var(--cp-border);
border-radius: 99px;
overflow: hidden;
margin-top: var(--cp-space-xs, 0.25rem);
}
.compos-slider-progress-bar {
height: 100%;
background: var(--cp-accent, #ff650e);
width: 0%;
}
.compos-hours-title {
margin: 0 0 var(--cp-space-sm, 0.5rem) 0;
font-size: var(--cp-font-size-h5, 1.125rem);
font-weight: 600;
color: var(--cp-text);
}
.compos-hours-status {
display: inline-flex;
align-items: center;
gap: var(--cp-space-xs, 0.25rem);
font-size: var(--cp-font-size-sm);
font-weight: 700;
padding: 4px 12px;
border-radius: 99px;
margin-bottom: var(--cp-space-sm, 0.5rem);
}
.compos-hours-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.compos-hours-status--open {
background: rgba(var(--cp-status-success-rgb, 16,185,129), 0.12);
color: var(--cp-status-success);
}
.compos-hours-status--closed {
background: rgba(var(--cp-status-error-rgb, 239,68,68), 0.12);
color: var(--cp-status-error);
}
.compos-hours-table {
width: 100%;
border-collapse: collapse;
font-size: var(--cp-font-size-sm);
}
.compos-hours-table tr { border-bottom: 1px solid var(--cp-border); }
.compos-hours-table tr:last-child { border-bottom: 0; }
.compos-hours-table td {
padding: var(--cp-space-xs, 0.25rem) var(--cp-space-sm, 0.5rem);
color: var(--cp-text-muted);
vertical-align: top;
}
.compos-hours-table td:first-child {
font-weight: 600;
color: var(--cp-text);
width: 40%;
}
.compos-hours-table tr.is-today td {
color: var(--cp-text);
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.06);
}
.compos-hours-table tr.is-today td:first-child {
color: var(--cp-accent, #ff650e);
font-weight: 700;
}
.compos-hours-closed {
color: var(--cp-text-muted);
font-style: italic;
}
.compos-hours-note {
font-size: var(--cp-font-size-xs);
color: var(--cp-text-muted);
display: block;
margin-top: 2px;
}
.compos-hours-list {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-hours-list-row {
display: grid;
grid-template-columns: 40% 1fr;
gap: var(--cp-space-sm, 0.5rem);
padding: var(--cp-space-xs, 0.25rem) 0;
border-bottom: 1px solid var(--cp-border);
}
.compos-hours-list-row:last-child { border-bottom: 0; }
.compos-hours-list-row dt { font-weight: 600; color: var(--cp-text); margin: 0; }
.compos-hours-list-row dd { margin: 0; color: var(--cp-text-muted); font-size: var(--cp-font-size-sm); }
.compos-hours-list-row.is-today dt { color: var(--cp-accent, #ff650e); }
.compos-hours-list-row.is-today dd { color: var(--cp-text); }
.compos-hours-compact {
font-size: var(--cp-font-size-sm);
color: var(--cp-text);
font-weight: 600;
}
.compos-share-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cp-space-xs, 0.25rem);
}
.compos-share-bar--centre { justify-content: center; }
.compos-share-bar--right  { justify-content: flex-end; }
.compos-share-bar-title {
font-size: var(--cp-font-size-sm);
font-weight: 600;
color: var(--cp-text-muted);
margin-right: var(--cp-space-xs, 0.25rem);
}
.compos-share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
padding: 6px 12px;
border-radius: var(--cp-radius-sm);
font-size: var(--cp-font-size-sm);
font-weight: 500;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
border: 1px solid var(--cp-border);
color: var(--cp-text-muted);
background: var(--cp-surface);
line-height: 1;
}
.compos-share-btn:hover,
.compos-share-btn:focus-visible {
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
outline: none;
}
.compos-share-btn i { font-size: 1rem; }
.compos-share-bar--icon-only .compos-share-btn {
padding: 0;
width: 36px;
height: 36px;
justify-content: center;
}
.compos-share-bar--icon-circle .compos-share-btn { border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; }
.compos-share-bar--icon-square .compos-share-btn { border-radius: var(--cp-radius-sm); }
.compos-share-bar--size-sm .compos-share-btn { padding: 4px 10px; font-size: var(--cp-font-size-xs); }
.compos-share-bar--size-lg .compos-share-btn { padding: 8px 16px; font-size: var(--cp-font-size-body, 1rem); }
.compos-share-bar--size-sm.compos-share-bar--icon-circle .compos-share-btn { width: 32px; height: 32px; }
.compos-share-bar--size-lg.compos-share-bar--icon-circle .compos-share-btn { width: 48px; height: 48px; }
.compos-share-btn--copy-link.is-copied {
color: var(--cp-status-success);
border-color: var(--cp-status-success);
}
.compos-notif-bar {
display: flex;
align-items: center;
justify-content: center;
gap: var(--cp-space-sm, 0.5rem);
padding: var(--cp-space-xs, 0.25rem) var(--cp-space-md, 1.5rem);
text-align: center;
flex-wrap: wrap;
position: relative;
transition: max-height 300ms ease, padding 300ms ease, opacity 300ms ease;
max-height: 200px;
overflow: hidden;
line-height: 1.4;
}
.compos-notif-bar.is-dismissed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
border: 0;
}
.compos-notif-bar--accent  { background: var(--cp-accent, #ff650e); }
.compos-notif-bar--dark    { background: var(--cp-elevated); }
.compos-notif-bar--surface { background: var(--cp-surface); border-bottom: 1px solid var(--cp-border); }
.compos-notif-bar--text-light { color: var(--cp-text-on-dark); }
.compos-notif-bar--text-dark  { color: var(--cp-text); }
.compos-notif-bar--sticky-top {
position: sticky;
top: 0;
z-index: 9998;
}
.compos-notif-inner {
display: flex;
align-items: center;
gap: var(--cp-space-sm, 0.5rem);
flex-wrap: wrap;
justify-content: center;
}
.compos-notif-message {
font-size: var(--cp-font-size-sm);
font-weight: 500;
}
.compos-notif-message a {
color: inherit;
text-decoration: underline;
}
.compos-notif-icon {
font-size: 1.125rem;
line-height: 1;
}
.compos-notif-dismiss {
position: absolute;
right: var(--cp-space-sm, 0.5rem);
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
opacity: 0.7;
font-size: 1.2rem;
padding: 4px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 150ms ease;
}
.compos-notif-dismiss:hover,
.compos-notif-dismiss:focus-visible {
opacity: 1;
outline: none;
}
.compos-comparison-title {
margin: 0 0 var(--cp-space-md, 1.5rem) 0;
font-size: var(--cp-font-size-h3);
color: var(--cp-text);
text-align: center;
}
.compos-comparison-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--cp-radius-md);
border: 1px solid var(--cp-border);
max-width: 100%;
}
.compos-comparison-table {
width: 100%;
border-collapse: collapse;
min-width: 500px;
}
.compos-comparison-table th {
padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
text-align: center;
font-weight: 700;
color: var(--cp-text);
border-bottom: 2px solid var(--cp-border);
background: var(--cp-surface);
vertical-align: middle;
}
.compos-comparison--sticky .compos-comparison-table th {
position: sticky;
top: 0;
z-index: 2;
}
.compos-comparison-table th:first-child {
text-align: left;
min-width: 180px;
}
.compos-comparison-table th.is-featured {
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.08);
color: var(--cp-accent, #ff650e);
}
.compos-comparison-table .comparison-badge {
display: inline-block;
font-size: var(--cp-font-size-xs);
background: var(--cp-accent, #ff650e);
color: #fff;
padding: 2px 8px;
border-radius: 99px;
margin-bottom: 4px;
font-weight: 600;
}
.compos-comparison-table td {
padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
text-align: center;
border-bottom: 1px solid var(--cp-border);
color: var(--cp-text-muted);
font-size: var(--cp-font-size-sm);
vertical-align: middle;
}
.compos-comparison-table tbody tr:last-child td { border-bottom: 0; }
.compos-comparison-table td:first-child {
text-align: left;
font-weight: 500;
color: var(--cp-text);
}
.compos-comparison-table td.is-featured {
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.04);
}
.compos-comparison-table tbody tr:hover td {
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.03);
}
.compos-comparison-yes i {
color: var(--cp-status-success);
font-size: 1.1rem;
line-height: 1;
}
.compos-comparison-no i {
color: var(--cp-text-muted);
opacity: 0.4;
font-size: 1.1rem;
line-height: 1;
}
.compos-comparison-table .comparison-cta-row td {
padding: var(--cp-space-md, 1.5rem);
border-bottom: 0;
background: transparent;
}
.compos-comparison-table .comparison-cta-row td.is-featured {
background: rgba(var(--cp-accent-rgb, 255,101,14), 0.04);
}
.compos-comparison-table .compos-btn {
width: 100%;
justify-content: center;
}
.compos-sticky-bar {
position: fixed;
left: 0;
right: 0;
z-index: var(--sticky-z, 9990);
padding: var(--cp-space-sm, 0.5rem) var(--cp-space-md, 1.5rem);
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease, transform 300ms ease;
}
.compos-sticky-bar--top    { top: 0; transform: translateY(-100%); }
.compos-sticky-bar--bottom { bottom: 0; transform: translateY(100%); }
.compos-sticky-bar.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.compos-sticky-bar.is-dismissed {
opacity: 0;
pointer-events: none;
}
.compos-sticky-bar--accent  { background: var(--cp-accent, #ff650e); color: var(--cp-text-on-dark); }
.compos-sticky-bar--dark    { background: var(--cp-elevated); color: var(--cp-text-on-dark); }
.compos-sticky-bar--surface { background: var(--cp-surface); color: var(--cp-text); }
.compos-sticky-bar--surface.compos-sticky-bar--top    { border-bottom: 1px solid var(--cp-border); }
.compos-sticky-bar--surface.compos-sticky-bar--bottom { border-top: 1px solid var(--cp-border); }
.compos-sticky-bar--blur {
background: rgba(var(--cp-text-on-light-rgb, 14,22,40), 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--cp-text-on-dark);
}
.compos-sticky-bar-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cp-space-md, 1.5rem);
flex-wrap: wrap;
}
.compos-sticky-bar--width-full .compos-sticky-bar-inner { max-width: none; }
.compos-sticky-bar .sticky-message {
font-weight: 500;
flex: 1;
font-size: var(--cp-font-size-sm);
}
.compos-sticky-bar .sticky-message a {
color: inherit;
text-decoration: underline;
}
.compos-sticky-dismiss {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
opacity: 0.7;
font-size: 1.25rem;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: opacity 150ms ease;
}
.compos-sticky-dismiss:hover,
.compos-sticky-dismiss:focus-visible {
opacity: 1;
outline: none;
}
.compos-widget.compos-back-top,
.compos-widget.compos-sticky-bar { padding: 0 !important; margin: 0 !important; height: 0; min-height: 0; overflow: visible !important; }
.compos-widget.compos-back-top .compos-widget-content,
.compos-widget.compos-back-top .compos-widget-inner,
.compos-widget.compos-back-top .compos-widget-body,
.compos-widget.compos-sticky-bar .compos-widget-content,
.compos-widget.compos-sticky-bar .compos-widget-inner,
.compos-widget.compos-sticky-bar .compos-widget-body { overflow: visible !important; padding: 0 !important; margin: 0 !important; height: 0; min-height: 0; }
.compos-widget.compos-search-bar .compos-widget-content,
.compos-widget.compos-search-bar .compos-widget-inner,
.compos-widget.compos-search-bar .compos-widget-body { overflow: visible !important; }
.compos-back-top {
position: fixed;
bottom: var(--btt-bottom, 24px);
z-index: 9985;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
border: 0;
transition: opacity 300ms ease, transform 300ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
box-shadow: var(--cp-shadow-md);
opacity: 0;
pointer-events: none;
padding: 0;
line-height: 1;
font-family: inherit;
}
.elementor-editor-active .compos-back-top { position: static; opacity: 1; pointer-events: auto; margin: 10px auto; display: flex; }
.elementor-editor-active .compos-widget.compos-back-top,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-content,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-inner,
.elementor-editor-active .compos-widget.compos-back-top .compos-widget-body { height: auto; min-height: auto; padding: 10px !important; }
.compos-back-top--bottom-right  { right: var(--btt-side, 24px); }
.compos-back-top--bottom-left   { left:  var(--btt-side, 24px); }
.compos-back-top--bottom-centre { left: 50%; transform: translateX(-50%); }
.compos-back-top.is-visible { opacity: 1; pointer-events: auto; }
.compos-back-top--bottom-centre.is-visible { transform: translateX(-50%); }
.compos-back-top--circle { border-radius: 50%; }
.compos-back-top--square { border-radius: var(--cp-radius-sm); }
.compos-back-top--pill   { border-radius: 99px; padding: 0 var(--cp-space-sm, 0.5rem); }
.compos-back-top--sm { width: 36px; height: 36px; font-size: 1rem; }
.compos-back-top--md { width: 48px; height: 48px; font-size: 1.25rem; }
.compos-back-top--lg { width: 56px; height: 56px; font-size: 1.5rem; }
.compos-back-top--pill.compos-back-top--sm { width: auto; height: 36px; padding: 0 var(--cp-space-sm, 0.5rem); }
.compos-back-top--pill.compos-back-top--md { width: auto; height: 48px; padding: 0 var(--cp-space-md, 1.5rem); }
.compos-back-top--pill.compos-back-top--lg { width: auto; height: 56px; padding: 0 var(--cp-space-md, 1.5rem); font-size: 1.25rem; }
.compos-back-top i { line-height: 1; }
.compos-back-top--accent {
background: var(--cp-accent, #ff650e);
color: #fff;
}
.compos-back-top--accent:hover,
.compos-back-top--accent:focus-visible { opacity: 0.9; outline: none; }
.compos-back-top--dark {
background: var(--cp-elevated);
color: var(--cp-text);
}
.compos-back-top--dark:hover,
.compos-back-top--dark:focus-visible {
background: var(--cp-accent, #ff650e);
color: #fff;
outline: none;
}
.compos-back-top--surface {
background: var(--cp-surface);
color: var(--cp-text);
border: 1px solid var(--cp-border);
}
.compos-back-top--surface:hover,
.compos-back-top--surface:focus-visible {
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
outline: none;
}
.btt-label {
font-size: var(--cp-font-size-xs);
font-weight: 600;
}
.compos-cart-item { display: flex; gap: var(--cp-space-sm); align-items: flex-start; padding: var(--cp-space-xs) 0; border-bottom: 1px solid var(--cp-border); }
.compos-cart-item:last-child { border-bottom: none; }
.compos-cart-item-thumb { width: 48px; height: 48px; border-radius: var(--cp-radius-sm); overflow: hidden; flex-shrink: 0; }
.compos-cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.compos-cart-total { display: flex; justify-content: space-between; align-items: center; padding: var(--cp-space-sm) 0; font-weight: 700; color: var(--cp-text); border-top: 2px solid var(--cp-border); margin-top: var(--cp-space-xs); }
.compos-cart-actions { display: flex; flex-direction: column; gap: var(--cp-space-xs); margin-top: var(--cp-space-sm); }
.compos-accordion { display: flex; flex-direction: column; }
.compos-accordion--bordered .compos-accordion-item { border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); margin-bottom: 4px; }
.compos-accordion--card .compos-accordion-item { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); margin-bottom: var(--cp-space-xs); }
.compos-accordion--minimal .compos-accordion-item { border-bottom: 1px solid var(--cp-border); }
.compos-accordion-trigger { width: 100%; display: flex; align-items: center; gap: var(--cp-space-sm); padding: var(--cp-space-sm) var(--cp-space-md); background: transparent; border: none; cursor: pointer; text-align: left; color: var(--cp-text); font-size: var(--cp-font-size-body); font-weight: 600; }
.compos-accordion-trigger:hover { color: var(--cp-accent, #ff650e); }
.compos-accordion-title { flex: 1; }
.compos-accordion-icon-lead { color: var(--cp-accent, #ff650e); }
.compos-accordion-icon-toggle { color: var(--cp-text-muted); transition: transform var(--acc-speed, 300ms) ease; }
.compos-accordion-item.is-open .compos-accordion-icon-toggle { transform: rotate(180deg); color: var(--cp-accent, #ff650e); }
.compos-accordion-answer { max-height: 0; overflow: hidden; transition: max-height var(--acc-speed, 300ms) ease; }
.compos-accordion-item.is-open .compos-accordion-answer { max-height: 1000px; }
.compos-accordion-answer-inner { padding: 0 var(--cp-space-md) var(--cp-space-md); color: var(--cp-text-muted); font-size: var(--cp-font-size-body); line-height: 1.6; }
.compos-data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.compos-data-table { width: 100%; border-collapse: collapse; font-size: var(--cp-font-size-small); text-align: left; }
.compos-data-table-caption { text-align: left; padding: var(--cp-space-xs) 0; color: var(--cp-text-muted); font-size: var(--cp-font-size-small); caption-side: top; }
.compos-data-table th { padding: 10px 16px; font-weight: 700; color: var(--cp-text); background: var(--cp-surface); border-bottom: 2px solid var(--cp-border); white-space: nowrap; cursor: default; }
.compos-data-table th.is-sortable { cursor: pointer; }
.compos-data-table th.is-sortable:hover { color: var(--cp-accent, #ff650e); }
.compos-data-table td { padding: 10px 16px; color: var(--cp-text-muted); border-bottom: 1px solid var(--cp-border); vertical-align: middle; }
.compos-data-table .align-left { text-align: left; }
.compos-data-table .align-centre { text-align: center; }
.compos-data-table .align-right { text-align: right; }
.compos-data-table-sort-icon { margin-left: 4px; font-size: 0.9em; opacity: 0.7; }
.compos-data-table--striped tbody tr:nth-child(even) td { background: rgba(var(--cp-accent-rgb,255,101,14),0.03); }
.compos-data-table--hover tbody tr:hover td { background: rgba(var(--cp-accent-rgb,255,101,14),0.05); }
.compos-data-table--bordered td, .compos-data-table--bordered th { border: 1px solid var(--cp-border); }
.compos-sitemap-title { font-size: var(--cp-font-size-h3); color: var(--cp-text); margin: 0 0 var(--cp-space-md); }
.compos-sitemap-grid { display: grid; gap: var(--cp-space-lg); }
.compos-sitemap--cols-1 .compos-sitemap-grid { grid-template-columns: 1fr; }
.compos-sitemap--cols-2 .compos-sitemap-grid { grid-template-columns: repeat(2, 1fr); }
.compos-sitemap--cols-3 .compos-sitemap-grid { grid-template-columns: repeat(3, 1fr); }
.compos-sitemap-group h3 { font-size: var(--cp-font-size-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cp-text-muted); margin-bottom: var(--cp-space-sm); padding-bottom: var(--cp-space-xs); border-bottom: 1px solid var(--cp-border); }
.compos-sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.compos-sitemap-group li { padding: 3px 0; }
.compos-sitemap-group a { color: var(--cp-text); text-decoration: none; font-size: var(--cp-font-size-small); }
.compos-sitemap-group a:hover { color: var(--cp-accent, #ff650e); }
.compos-sitemap-group ul ul { padding-left: var(--cp-space-sm); border-left: 2px solid var(--cp-border); margin-left: var(--cp-space-xs); margin-top: 4px; }
.compos-sitemap-date { color: var(--cp-text-muted); font-size: var(--cp-font-size-xs); margin-left: 6px; }
@media (max-width: 640px) { .compos-sitemap--cols-2 .compos-sitemap-grid, .compos-sitemap--cols-3 .compos-sitemap-grid { grid-template-columns: 1fr; } }
.compos-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.compos-breadcrumb li { display: flex; align-items: center; gap: 4px; font-size: var(--cp-font-size-xs); color: var(--cp-text-muted); }
.compos-breadcrumb li a { color: var(--cp-accent, #ff650e); text-decoration: none; }
.compos-breadcrumb li a:hover { color: var(--cp-accent-hover, var(--cp-accent, #ff650e)); text-decoration: underline; }
.xw-bg--dark .compos-breadcrumb li, .xw-bg--accent .compos-breadcrumb li,
[class*="hero"] .compos-breadcrumb li, .compos-page-banner .compos-breadcrumb li { color: rgba(255,255,255,0.75); }
.xw-bg--dark .compos-breadcrumb li[aria-current="page"] span, .xw-bg--accent .compos-breadcrumb li[aria-current="page"] span,
.xw-bg--dark .compos-breadcrumb li:last-child span, .xw-bg--accent .compos-breadcrumb li:last-child span,
[class*="hero"] .compos-breadcrumb li:last-child span, .compos-page-banner .compos-breadcrumb li:last-child span { color: #fff; }
.xw-bg--dark .compos-breadcrumb li:not(:last-child)::after, .xw-bg--accent .compos-breadcrumb li:not(:last-child)::after,
[class*="hero"] .compos-breadcrumb li:not(:last-child)::after, .compos-page-banner .compos-breadcrumb li:not(:last-child)::after { color: rgba(255,255,255,0.5); }
.compos-breadcrumb li[aria-current="page"] span, .compos-breadcrumb li:last-child span { color: var(--cp-text); font-weight: 500; }
.compos-breadcrumb li:not(:last-child)::after { content: '/'; color: var(--cp-text-muted); opacity: 0.5; margin-left: 4px; }
.compos-breadcrumb--sep-chevron li:not(:last-child)::after { content: '›'; }
.compos-breadcrumb--sep-arrow li:not(:last-child)::after { content: '→'; }
.compos-breadcrumb--sep-dot li:not(:last-child)::after { content: '·'; }
.compos-card,
.compos-post-card,
.compos-kpi-card,
.compos-service-card,
.compos-pricing-card,
.compos-team-member,
.compos-testimonial-card,
.compos-flip-front,
.compos-flip-back,
.compos-countdown-unit,
.compos-related-card,
.compos-comparison-card {
background: var(--cp-surface);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md, 12px);
}
.compos-card--elevated,
.compos-post-card:hover,
.compos-service-card:hover,
.compos-pricing-card:hover,
.compos-team-member:hover {
background: var(--cp-elevated, var(--cp-surface));
border-color: var(--cp-accent, #ff650e);
box-shadow: var(--cp-shadow-md);
transform: translateY(-2px);
transition: all 200ms ease-out;
}
.compos-card--accent-top { border-top: 3px solid var(--cp-accent, #ff650e); }
.compos-widget-title {
font-size: var(--cp-font-size-h2);
font-weight: 800;
color: var(--cp-text);
margin-bottom: var(--cp-space-md);
line-height: 1.15;
letter-spacing: -0.02em;
}
.compos-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--cp-font-size-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--cp-accent, #ff650e);
margin-bottom: var(--cp-space-sm);
}
.compos-eyebrow::before {
content: '';
display: inline-block;
width: 20px;
height: 2px;
background: var(--cp-accent, #ff650e);
border-radius: 1px;
}
.compos-widget-header { margin-bottom: var(--cp-space-lg); display: flex; flex-direction: column; gap: var(--cp-space-xs); }
.compos-widget-header--centre { text-align: center; align-items: center; }
.compos-widget-header--centre .compos-eyebrow { margin-left: auto; margin-right: auto; }
.compos-widget-header--left   { text-align: left; align-items: flex-start; }
.compos-widget-heading {
font-family: var(--cp-font-heading), inherit;
font-size: clamp(24px, 4vw, 40px);
font-weight: 800;
color: var(--cp-text);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
}
.compos-widget-subheading {
color: var(--cp-text-muted);
font-size: var(--cp-font-size-lead);
line-height: 1.55;
margin: 0;
max-width: 680px;
}
.compos-widget-header--centre .compos-widget-subheading { margin-left: auto; margin-right: auto; }
.compos-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 99px;
font-size: var(--cp-font-size-xs);
font-weight: 700;
letter-spacing: 0.04em;
}
.compos-pill--accent  { background: rgba(var(--cp-accent-rgb,255,101,14),0.15);            color: var(--cp-accent, #ff650e); }
.compos-pill--success { background: rgba(var(--cp-status-success-rgb,16,185,129),0.15);    color: var(--cp-status-success); }
.compos-pill--warning { background: rgba(var(--cp-status-warning-rgb,217,119,6),0.15);     color: var(--cp-status-warning); }
.compos-pill--error   { background: rgba(var(--cp-status-error-rgb,239,68,68),0.15);       color: var(--cp-status-error); }
.compos-pill--muted   { background: var(--cp-border);                                       color: var(--cp-text-muted); }
.compos-overlay-gradient {
background: linear-gradient(
0deg,
rgba(var(--cp-text-on-light-rgb,14,22,40),0.92) 0%,
rgba(var(--cp-text-on-light-rgb,14,22,40),0.5) 50%,
transparent 100%
);
}
.compos-post-grid,
.compos-cards-grid,
.compos-product-grid,
.compos-category-grid,
.compos-team,
.compos-services,
.compos-pricing,
.compos-counters,
.compos-flip-grid,
.compos-related-grid,
.compos-social-proof-grid {
width: 100%;
overflow: hidden;
}
.compos-post-card,
.compos-product-card,
.compos-service-card,
.compos-team-member,
.compos-pricing-card,
.compos-flip-card,
.compos-related-card {
min-width: 0;
overflow: hidden;
}
.post-thumbnail,
.compos-post-card .product-thumbnail,
.compos-gallery-item,
.fh-visual { overflow: hidden; }
.compos-post-card img,
.compos-team-member img,
.compos-gallery-item img,
.compos-related-card img {
width: 100%;
display: block;
object-fit: cover;
}
.compos-widget {
position: relative;
}
.compos-divider-shape {
pointer-events: none;
z-index: 1;
}
.compos-divider-shape svg {
display: block;
}
.widget-area .widget,
.dynamic-sidebar .widget {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--cp-surface) 0%, var(--cp-elevated) 100%);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md, 12px);
padding: var(--cp-space-md, 20px);
margin-bottom: var(--cp-space-md, 20px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px rgba(0, 0, 0, 0.06);
}
.widget-area .widget::before,
.dynamic-sidebar .widget::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(var(--cp-accent-rgb, 255, 101, 14), 0.45) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.widget-area .widget .widget-title,
.dynamic-sidebar .widget .widget-title {
font-family: var(--cp-font-heading, inherit);
font-size: var(--cp-font-size-h5, 1.125rem);
font-weight: 800;
color: var(--cp-text-heading);
margin: 0 0 var(--cp-space-sm, 12px);
letter-spacing: -0.01em;
}
.compos-widget [class$="-card"],
.compos-widget [class*="-card "],
.compos-widget [class$="-tile"],
.compos-widget [class*="-tile "],
.compos-widget [class$="-panel"],
.compos-widget [class*="-panel "] {
position: relative;
}
.compos-widget [class$="-card"]::before,
.compos-widget [class*="-card "]::before,
.compos-widget [class$="-tile"]::before,
.compos-widget [class*="-tile "]::before,
.compos-widget [class$="-panel"]::before,
.compos-widget [class*="-panel "]::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(var(--cp-accent-rgb, 255, 101, 14), 0.45) 50%,
transparent 100%
);
pointer-events: none;
z-index: 1;
}
.compos-widget [class$="-card"].cp-no-shine::before,
.compos-widget [class*="-card "].cp-no-shine::before,
.compos-widget [class$="-tile"].cp-no-shine::before,
.compos-widget [class*="-tile "].cp-no-shine::before,
.compos-widget [class$="-panel"].cp-no-shine::before,
.compos-widget [class*="-panel "].cp-no-shine::before {
display: none;
}
.compos-widget [class$="-card"],
.compos-widget [class*="-card "],
.compos-widget [class$="-tile"],
.compos-widget [class*="-tile "],
.compos-widget [class$="-panel"],
.compos-widget [class*="-panel "] {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.compos-widget [class$="-card"].cp-no-shadow,
.compos-widget [class*="-card "].cp-no-shadow,
.compos-widget [class$="-tile"].cp-no-shadow,
.compos-widget [class*="-tile "].cp-no-shadow,
.compos-widget [class$="-panel"].cp-no-shadow,
.compos-widget [class*="-panel "].cp-no-shadow {
box-shadow: none;
}
.compos-widget [class$="-mini"],
.compos-widget [class*="-mini "],
.compos-widget [class$="-thumb"],
.compos-widget [class*="-thumb "],
.compos-widget [class$="-thumbnail"],
.compos-widget [class*="-thumbnail "],
.compos-widget [class$="-sup-card"],
.compos-widget [class*="-sup-card "],
.compos-widget [class$="-sub-card"],
.compos-widget [class*="-sub-card "],
.compos-widget [class$="-rest-card"],
.compos-widget [class*="-rest-card "] {
transition: border-color 250ms ease;
}
@media (hover: hover) {
.compos-widget [class$="-mini"]:hover,
.compos-widget [class*="-mini "]:hover,
.compos-widget [class$="-thumb"]:hover,
.compos-widget [class*="-thumb "]:hover,
.compos-widget [class$="-thumbnail"]:hover,
.compos-widget [class*="-thumbnail "]:hover,
.compos-widget [class$="-sup-card"]:hover,
.compos-widget [class*="-sup-card "]:hover,
.compos-widget [class$="-sub-card"]:hover,
.compos-widget [class*="-sub-card "]:hover,
.compos-widget [class$="-rest-card"]:hover,
.compos-widget [class*="-rest-card "]:hover {
border-color: rgba(var(--cp-accent-rgb, 255, 101, 14), 0.40);
}
}
.elementor-panel-get-pro-elements,
.elementor-panel-get-pro-elements-sticky,
#elementor-panel-get-pro-elements,
#elementor-panel-get-pro-elements-sticky,
.e-panel-get-pro-features,
.elementor-promotion,
.elementor-nerd-box,
.elementor-panel-categories .elementor-element-pro-promo,
.elementor-panel-elements-search-area + .elementor-panel-get-pro-elements,
[data-elementor-promotion="true"] {
display: none !important;
visibility: hidden !important;
}
.compos-ad-slot {
display: block;
width: 100%;
margin: clamp(20px, 3vw, 36px) 0;
text-align: center;
line-height: 1;
}
.compos-ad-slot:empty,
.compos-ad-slot[hidden],
.compos-ad-slot--blocked { display: none !important; }
.compos-ad-slot > * { max-width: 100%; margin-left: auto; margin-right: auto; }
.compos-ad-slot img, .compos-ad-slot iframe { display: inline-block; max-width: 100%; height: auto; }
.compos-ad-slot--header-topbar {
margin: 0;
padding: 6px 0;
background: var(--cp-surface, transparent);
border-bottom: 1px solid var(--cp-border, rgba(128,128,128,0.10));
}
.compos-ad-slot--footer-banner {
margin: 0;
padding: clamp(16px, 2.4vw, 32px) 0;
background: var(--cp-elevated, transparent);
}
.ba-card--ad {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
padding: 0 !important;
text-align: center;
}
.bs-side-rail > .compos-ad-slot {
background: var(--bs-panel-bg, var(--cp-surface, transparent));
border: 1px solid var(--bs-panel-border, var(--cp-border, rgba(128,128,128,0.15)));
border-radius: var(--bs-radius, 14px);
padding: 20px;
margin: 0;
box-sizing: border-box;
}
.sp-sidebar > .compos-ad-slot {
background: var(--sp-panel-bg, var(--cp-surface, transparent));
border: 1px solid var(--sp-panel-border, var(--cp-border, rgba(128,128,128,0.15)));
border-radius: var(--sp-radius, 14px);
padding: 18px;
margin: 16px 0 0;
box-sizing: border-box;
}
.cp-summary > .compos-ad-slot,
.cp-shell .cp-summary + .compos-ad-slot,
.kp-shell .kp-summary > .compos-ad-slot,
.cf-shell .cf-summary > .compos-ad-slot,
.kf-shell .kf-summary > .compos-ad-slot {
background: var(--cp-surface, transparent);
border: 1px solid var(--cp-border, rgba(128,128,128,0.15));
border-radius: var(--cp-radius-md, 14px);
padding: 16px;
margin: 16px 0 0;
box-sizing: border-box;
}
.ty-shell > .compos-ad-slot {
background: var(--cp-surface, transparent);
border: 1px solid var(--cp-border, rgba(128,128,128,0.15));
border-radius: var(--cp-radius-md, 14px);
padding: clamp(16px, 2vw, 24px);
margin: clamp(20px, 3vw, 32px) auto 0;
max-width: 720px;
box-sizing: border-box;
}
.sr-shell > .compos-ad-slot {
background: var(--sr-panel-bg, var(--cp-surface, transparent));
border: 1px solid var(--sr-panel-border, var(--cp-border, rgba(128,128,128,0.15)));
border-radius: var(--sr-radius, 14px);
padding: 14px;
margin: 0 0 var(--sr-gap, 20px);
box-sizing: border-box;
}
.nf-shell > .compos-ad-slot {
background: var(--nf-panel-bg, var(--cp-surface, transparent));
border: 1px solid var(--nf-panel-border, var(--cp-border, rgba(128,128,128,0.15)));
border-radius: var(--nf-radius, 14px);
padding: clamp(16px, 2vw, 24px);
margin: clamp(24px, 3vw, 36px) auto;
max-width: 720px;
box-sizing: border-box;
}
.compos-ad-slot--card {
background: var(--cp-surface, transparent);
border: 1px solid var(--cp-border, rgba(128,128,128,0.15));
border-radius: var(--cp-radius-md, 14px);
padding: clamp(16px, 2vw, 24px);
box-sizing: border-box;
}
.compos-ad-slot[data-cp-ad-slot]::before {
content: '';
}
.bs-side-rail > .compos-ad-slot::before,
.sp-sidebar > .compos-ad-slot::before,
.ty-shell > .compos-ad-slot::before,
.sr-shell > .compos-ad-slot::before,
.nf-shell > .compos-ad-slot::before,
.compos-ad-slot--card::before {
content: 'Sponsored';
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cp-text-faint, rgba(128,128,128,0.6));
margin-bottom: 10px;
text-align: left;
}
.compos-widget label:has(> input[required])    > span:first-child::after,
.compos-widget label:has(> textarea[required]) > span:first-child::after,
.compos-widget label:has(> select[required])   > span:first-child::after,
.compos-widget label:has(+ input[required])::after,
.compos-widget label:has(+ textarea[required])::after,
.compos-widget label:has(+ select[required])::after {
content: ' *';
color: var(--cp-accent, #ff650e);
font-weight: 700;
margin-inline-start: 2px;
speak: none;
}
.compos-widget .xw-formlay {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.compos-widget .xw-formlay__form-wrap,
.compos-widget .xw-formlay__panel {
min-width: 0;
}
.compos-widget .xw-formlay--stacked-compact .xw-formlay__form-wrap {
max-width: 560px;
margin-inline: auto;
}
.compos-widget .xw-formlay--stacked-compact input,
.compos-widget .xw-formlay--stacked-compact textarea,
.compos-widget .xw-formlay--stacked-compact select {
font-size: 13.5px;
}
.compos-widget .xw-formlay--stacked-compact button[type="submit"],
.compos-widget .xw-formlay--stacked-compact [data-cp-confirm] {
min-height: 40px;
}
@media (min-width: 768px) {
.compos-widget .xw-formlay--half-form-left,
.compos-widget .xw-formlay--half-form-right {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.compos-widget .xw-formlay--half-form-right > .xw-formlay__form-wrap {
order: 2;
}
.compos-widget .xw-formlay--half-form-right > .xw-formlay__panel {
order: 1;
}
}
.compos-widget .xw-formlay__panel {
display: flex;
flex-direction: column;
gap: 16px;
}
.compos-widget .xw-formlay__panel-imgwrap {
overflow: hidden;
border-radius: 14px;
background: var(--cp-surface-alpha, rgba(0,0,0,0.04));
}
.compos-widget .xw-formlay__panel-img {
display: block;
width: 100%;
aspect-ratio: var(--xw-formlay-img-ar, 3/2);
object-fit: cover;
}
.compos-widget .xw-formlay__panel-h {
font-family: var(--cp-font-heading, inherit);
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 800;
line-height: 1.2;
margin: 0;
color: var(--cp-text-heading, var(--cp-text));
}
.compos-widget .xw-formlay__panel-p {
font-family: var(--cp-font-body, inherit);
font-size: 14.5px;
line-height: 1.65;
margin: 0;
color: var(--cp-text);
white-space: pre-line;
}
.compos-widget .xw-formlay__panel-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border: 1.5px solid var(--cp-border);
border-radius: 10px;
color: var(--cp-text);
text-decoration: none;
font-family: var(--cp-font-body, inherit);
font-weight: 600;
font-size: 13.5px;
align-self: flex-start;
transition: border-color 180ms ease, color 180ms ease;
}
.compos-widget .xw-formlay__panel-cta:hover,
.compos-widget .xw-formlay__panel-cta:focus-visible {
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
}
.compos-widget .xw-tile {
box-sizing: border-box;
min-width: 0;
display: flex;
flex-direction: column;
}
.compos-widget .xw-tile--card {  }
.compos-widget .xw-tile--image {
overflow: hidden;
border-radius: 14px;
margin: 0;
background: var(--cp-surface-alpha, rgba(0,0,0,0.04));
}
.compos-widget .xw-tile--image .xw-tile__img {
display: block;
width: 100%;
aspect-ratio: var(--xw-img-ar, 3/2);
object-fit: cover;
}
.compos-widget .xw-tile--image .xw-tile__caption {
padding: 8px 12px;
font-family: var(--cp-font-body, inherit);
font-size: 12.5px;
color: var(--cp-text-muted);
}
.compos-widget .xw-tile--image-empty {
aspect-ratio: var(--xw-img-ar, 3/2);
border: 1.5px dashed var(--cp-border);
border-radius: 14px;
background: var(--cp-surface-alpha, rgba(0,0,0,0.04));
}
.compos-widget .xw-tile--quote {
padding: 24px 20px;
margin: 0;
border-left: 3px solid var(--cp-accent, #ff650e);
background: var(--cp-surface-alpha, rgba(0,0,0,0.03));
border-radius: 4px;
justify-content: center;
}
.compos-widget .xw-tile--quote .xw-tile__quote-body {
font-family: var(--cp-font-heading, inherit);
font-size: clamp(17px, 1.8vw, 22px);
line-height: 1.4;
font-weight: 500;
color: var(--cp-text-heading, var(--cp-text));
margin: 0 0 12px;
}
.compos-widget .xw-tile--quote .xw-tile__quote-body::before { content: "“"; }
.compos-widget .xw-tile--quote .xw-tile__quote-body::after  { content: "”"; }
.compos-widget .xw-tile--quote .xw-tile__quote-attrib {
font-family: var(--cp-font-body, inherit);
font-size: 13px;
font-style: normal;
color: var(--cp-text-muted);
display: block;
}
.compos-widget .xw-tile--quote .xw-tile__quote-attrib::before { content: "— "; }
.compos-widget .xw-tile--text {
padding: 8px 4px;
gap: 10px;
justify-content: center;
}
.compos-widget .xw-tile--text .xw-tile__text-h {
font-family: var(--cp-font-heading, inherit);
font-size: clamp(18px, 2vw, 24px);
font-weight: 800;
line-height: 1.25;
margin: 0;
color: var(--cp-text-heading, var(--cp-text));
}
.compos-widget .xw-tile--text .xw-tile__text-p {
font-family: var(--cp-font-body, inherit);
font-size: 14.5px;
line-height: 1.6;
margin: 0;
color: var(--cp-text);
}
.compos-widget .xw-tile--stat {
padding: 20px 16px;
gap: 6px;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 14px;
background: var(--cp-surface-alpha, rgba(0,0,0,0.04));
}
.compos-widget .xw-tile--stat .xw-tile__stat-value {
font-family: var(--cp-font-heading, inherit);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 900;
line-height: 1;
color: var(--cp-accent, #ff650e);
letter-spacing: -0.02em;
}
.compos-widget .xw-tile--stat .xw-tile__stat-label {
font-family: var(--cp-font-body, inherit);
font-size: 13px;
font-weight: 600;
color: var(--cp-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.compos-widget .xw-tile--spacer {
background: transparent;
min-height: 1px;
}

/* ===== compos-gdpr ===== */
#compos-cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 9999;
max-width: 440px;
background: var(--cp-header-bg);
color: var(--cp-header-text);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg, 16px);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
padding: 18px 22px;
font-size: var(--cp-font-size-body);
animation: compos-cookie-banner-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
#compos-cookie-banner[hidden] { display: none; }
@keyframes compos-cookie-banner-in {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.compos-cookie-banner-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.compos-cookie-message {
margin: 0;
line-height: 1.55;
font-size: 14px;
color: var(--cp-header-text);
}
.compos-cookie-message a {
color: var(--cp-accent, #ff650e);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.compos-cookie-message a:hover {
color: var(--cp-accent-hover, var(--cp-accent, #ff650e));
}
.compos-cookie-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.compos-cookie-actions .compos-btn {
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
border-radius: var(--cp-radius-pill, 999px);
min-height: 36px;
}
.compos-cookie-actions .compos-btn--primary {
background: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
border: 0;
}
.compos-cookie-actions .compos-btn--secondary {
background: transparent;
color: var(--cp-header-text);
border: 1px solid var(--cp-border-strong, var(--cp-border));
}
.compos-cookie-actions .compos-btn--ghost {
background: transparent;
color: var(--cp-header-text);
border: 0;
opacity: 0.8;
text-decoration: underline;
text-underline-offset: 2px;
}
.compos-cookie-actions .compos-btn:hover {
transform: translateY(-1px);
transition: transform 200ms ease;
}
@media (max-width: 720px) {
#compos-cookie-banner {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
}
@media (max-width: 540px) {
#compos-cookie-banner {
left: 0;
right: 0;
bottom: 0;
border-radius: var(--cp-radius-lg, 16px) var(--cp-radius-lg, 16px) 0 0;
border-left: 0;
border-right: 0;
border-bottom: 0;
padding: 18px 20px env(safe-area-inset-bottom, 18px);
}
}
#compos-cookie-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: compos-cookie-modal-in 240ms ease;
}
#compos-cookie-modal[hidden] { display: none; }
@keyframes compos-cookie-modal-in {
from { opacity: 0; }
to   { opacity: 1; }
}
.compos-cookie-modal-inner {
width: 100%;
max-width: 520px;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--cp-header-bg);
color: var(--cp-header-text);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg, 16px);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
animation: compos-cookie-modal-card-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes compos-cookie-modal-card-in {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.compos-cookie-modal-title {
margin: 0;
font-family: var(--cp-font-heading, inherit);
font-size: 20px;
font-weight: 800;
color: var(--cp-header-text);
}
.compos-cookie-modal-desc {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--cp-text-muted-on-dark, var(--cp-header-text));
opacity: 0.85;
}
.compos-cookie-cats {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.compos-cookie-cat {
background: var(--cp-surface-alpha, rgba(255, 255, 255, 0.04));
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-md, 10px);
padding: 12px 14px;
transition: border-color 200ms ease;
}
.compos-cookie-cat:hover {
border-color: var(--cp-accent, #ff650e);
}
.compos-cookie-toggle {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
}
.compos-cookie-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.compos-cookie-toggle-track {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
background: var(--cp-border-strong, rgba(255, 255, 255, 0.22));
border-radius: 999px;
transition: background 220ms ease;
flex: 0 0 auto;
order: 2;
}
.compos-cookie-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: var(--cp-text-on-dark, #fff);
border-radius: 50%;
transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.compos-cookie-toggle input:checked ~ .compos-cookie-toggle-track {
background: var(--cp-accent, #ff650e);
}
.compos-cookie-toggle input:checked ~ .compos-cookie-toggle-track::after {
transform: translateX(16px);
}
.compos-cookie-toggle input:focus-visible ~ .compos-cookie-toggle-track {
outline: 2px solid var(--cp-accent, #ff650e);
outline-offset: 3px;
}
.compos-cookie-toggle input:disabled ~ .compos-cookie-toggle-track {
opacity: 0.5;
cursor: not-allowed;
}
.compos-cookie-cat-label {
font-weight: 700;
font-size: 14px;
color: var(--cp-header-text);
order: 1;
}
#compos-cookie-modal .compos-cookie-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 4px;
}
#compos-cookie-modal .compos-cookie-actions .compos-btn {
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
border-radius: var(--cp-radius-pill, 999px);
}
#compos-cookie-modal .compos-cookie-actions .compos-btn--primary {
background: var(--cp-accent, #ff650e);
color: var(--cp-text-on-accent, #fff);
border: 0;
}
#compos-cookie-modal .compos-cookie-actions .compos-btn--ghost {
background: transparent;
color: var(--cp-header-text);
border: 1px solid var(--cp-border);
}
@media (max-width: 540px) {
.compos-cookie-modal-inner {
padding: 22px 20px;
max-height: calc(100vh - 24px);
}
.compos-cookie-modal-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
#compos-cookie-banner,
#compos-cookie-modal,
.compos-cookie-modal-inner,
.compos-cookie-toggle-track,
.compos-cookie-toggle-track::after,
.compos-cookie-actions .compos-btn {
animation: none !important;
transition: none !important;
}
}

/* ===== compos-fsp ===== */
.compos-fsp {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
border-radius: var(--cp-radius-md, 10px);
background: var(--cp-elevated, #f8f9fa);
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.08));
margin: 0 0 14px;
font-family: var(--cp-font-body, system-ui, sans-serif);
}
.compos-fsp__msg {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--cp-font-size-small, 13px);
font-weight: 600;
color: var(--cp-text, #0e1628);
}
.compos-fsp__msg i { color: var(--cp-accent, #ff650e); font-size: 16px; }
.compos-fsp__msg .amount { color: var(--cp-accent, #ff650e); font-weight: 700; }
.compos-fsp__track {
height: 6px;
border-radius: 99px;
background: var(--cp-border, rgba(0, 0, 0, 0.08));
overflow: hidden;
}
.compos-fsp__fill {
height: 100%;
background: linear-gradient(90deg, var(--cp-accent, #ff650e), var(--cp-accent-hover, #e55410));
transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compos-fsp.is-qualified {
background: var(--cp-status-success-bg, rgba(16, 163, 74, 0.10));
border-color: var(--cp-status-success, #16a34a);
}
.compos-fsp.is-qualified .compos-fsp__msg i,
.compos-fsp.is-qualified .compos-fsp__msg { color: var(--cp-status-success, #16a34a); }
.compos-fsp.is-qualified .compos-fsp__fill { background: var(--cp-status-success, #16a34a); }
.cmc-panel .compos-fsp--minicart,
.compos-mini-cart-sidebar .compos-fsp--minicart {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.10);
}
.cmc-panel .compos-fsp--minicart .compos-fsp__msg,
.compos-mini-cart-sidebar .compos-fsp--minicart .compos-fsp__msg {
color: var(--cp-header-text, #fff);
}
.cmc-panel .compos-fsp--minicart .compos-fsp__track,
.compos-mini-cart-sidebar .compos-fsp--minicart .compos-fsp__track {
background: rgba(255, 255, 255, 0.10);
}
.compos-fsp-banner-wrap {
position: sticky;
top: 0;
z-index: 100;
}
.compos-fsp--banner {
margin: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
border-top: 0;
text-align: center;
padding: 8px 14px;
}
.compos-fsp--banner .compos-fsp__track { display: none; }
.compos-fsp--banner.is-qualified .compos-fsp__msg { justify-content: center; }

/* ===== compos-quickview ===== */
.compos-quickview-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
cursor: pointer;
transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
font-size: 16px;
}
.compos-quickview-btn:hover {
border-color: var(--cp-accent, #ff650e);
color: var(--cp-accent, #ff650e);
transform: translateY(-2px);
}
.compos-quickview-btn--with-label {
width: auto; height: auto; padding: 8px 14px; border-radius: var(--cp-radius-md, 10px);
}
.compos-quickview-btn__label { font-size: var(--cp-font-size-small, 13px); font-weight: 600; margin-left: 4px; }
.compos-quickview-modal { position: fixed; inset: 0; z-index: 100000; }
.compos-quickview-modal[hidden] { display: none !important; }
.compos-quickview-modal__overlay {
position: absolute; inset: 0;
background: rgba(15, 23, 41, 0.65);
animation: compos-qv-fade 180ms ease;
}
@keyframes compos-qv-fade { from { opacity: 0; } to { opacity: 1; } }
.compos-quickview-modal__panel {
position: relative;
margin: 5vh auto;
max-width: min(960px, 94vw);
max-height: 90vh;
overflow: hidden;
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
border-radius: var(--cp-radius-lg, 16px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30);
}
.compos-quickview-modal__close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--cp-border, rgba(0, 0, 0, 0.10));
background: var(--cp-surface, #fff);
color: var(--cp-text, #0e1628);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
z-index: 10;
}
.compos-quickview-modal__close:hover { background: var(--cp-accent, #ff650e); color: #fff; border-color: var(--cp-accent, #ff650e); }
.compos-quickview-modal__body { max-height: 90vh; overflow: auto; }
.compos-quickview__loading {
padding: 80px 20px;
text-align: center;
font-size: 32px;
color: var(--cp-text-faint, rgba(14,22,40,0.45));
}
.compos-quickview__loading i { animation: compos-qv-spin 1s linear infinite; display: inline-block; }
@keyframes compos-qv-spin { to { transform: rotate(360deg); } }
.compos-qv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 30px;
}
@media (max-width: 720px) { .compos-qv { grid-template-columns: 1fr; gap: 18px; padding: 20px; } }
.compos-qv__main {
aspect-ratio: 1 / 1;
background: var(--cp-elevated, #f8f9fa);
border-radius: var(--cp-radius-md, 12px);
overflow: hidden;
}
.compos-qv__main-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 150ms ease; }
.compos-qv__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.compos-qv__thumb { width: 60px; height: 60px; padding: 0; border: 2px solid var(--cp-border, rgba(0,0,0,0.10)); border-radius: var(--cp-radius-sm, 8px); background: transparent; cursor: pointer; overflow: hidden; transition: border-color 150ms ease; }
.compos-qv__thumb img { width: 100%; height: 100%; object-fit: cover; }
.compos-qv__thumb.is-active { border-color: var(--cp-accent, #ff650e); }
.compos-qv__head { margin-bottom: 8px; }
.compos-qv__title {
font-family: var(--cp-font-heading, inherit);
font-size: var(--cp-font-size-h2, 1.625rem);
font-weight: 800;
color: var(--cp-text-heading, var(--cp-text, #0e1628));
margin: 0 0 4px;
}
.compos-qv__permalink { font-size: var(--cp-font-size-small, 13px); color: var(--cp-accent, #ff650e); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.compos-qv__permalink:hover { text-decoration: underline; }
.compos-qv__price { font-size: var(--cp-font-size-h3, 1.375rem); font-weight: 700; color: var(--cp-accent, #ff650e); margin: 12px 0; }
.compos-qv__price del { color: var(--cp-text-muted, rgba(14,22,40,0.55)); font-weight: 500; opacity: 0.7; margin-right: 8px; }
.compos-qv__short { color: var(--cp-text-muted, rgba(14,22,40,0.65)); font-size: var(--cp-font-size-body, 15px); line-height: 1.6; margin: 0 0 18px; }
.compos-qv__short p { margin: 0 0 10px; }
.compos-qv__form { margin-bottom: 14px; }
.compos-qv__qty-row { display: flex; gap: 12px; align-items: stretch; }
.compos-qv__qty {
display: flex;
align-items: center;
border: 1px solid var(--cp-border, rgba(0,0,0,0.10));
border-radius: var(--cp-radius-sm, 8px);
overflow: hidden;
}
.compos-qv__step { width: 36px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 16px; color: var(--cp-text); }
.compos-qv__step:hover { background: var(--cp-elevated, #f8f9fa); }
.compos-qv__qty-input {
width: 48px; text-align: center; border: 0; height: 44px;
font-size: var(--cp-font-size-body, 15px); font-weight: 700;
color: var(--cp-text); background: transparent;
-moz-appearance: textfield;
}
.compos-qv__qty-input::-webkit-outer-spin-button,
.compos-qv__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.compos-qv__atc { flex: 1; height: 44px; }
.compos-qv__variation-note { font-size: var(--cp-font-size-caption, 11px); color: var(--cp-text-muted, rgba(14,22,40,0.55)); margin: 8px 0 0; }
.compos-qv__oos { color: var(--cp-status-error, #ef4444); font-weight: 700; padding: 12px; background: rgba(239,68,68,0.10); border-radius: var(--cp-radius-sm, 8px); }
.compos-qv__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
.compos-qv__actions .compos-wishlist-btn,
.compos-qv__actions .compos-compare-btn { width: auto; height: auto; padding: 8px 14px; border-radius: var(--cp-radius-md, 10px); }
.compos-qv__meta { font-size: var(--cp-font-size-small, 13px); color: var(--cp-text-muted, rgba(14,22,40,0.65)); margin-top: 6px; }
.compos-qv__meta-label { color: var(--cp-text); font-weight: 700; margin-right: 4px; }
.compos-qv__meta a { color: var(--cp-accent, #ff650e); text-decoration: none; }
.compos-qv__meta a:hover { text-decoration: underline; }
.compos-qv__error { padding: 40px 20px; text-align: center; color: var(--cp-status-error, #ef4444); }