/* ========================================================================== CC Product Showcase Widget — Multi-Preset Card Design Full light / dark mode via [data-theme] on . 4 Presets: Glassmorphism, Flat, Elevated, Outlined ========================================================================== */ /* ── CSS Custom Properties — powered by global --cc-* theme palette ── */ .cc-ps-wrap { --cc-ps-card-bg: var(--cc-surface); --cc-ps-card-border: var(--cc-border); --cc-ps-card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07); --cc-ps-glass: linear-gradient(135deg, rgba(255,255,255,0.1), transparent, transparent); --cc-ps-text: var(--cc-heading); --cc-ps-muted: var(--cc-muted); --cc-ps-accent: var(--cc-accent); --cc-ps-accent-fg: var(--cc-btn-text); --cc-ps-overlay: color-mix(in srgb, var(--cc-bg) 80%, transparent); --cc-ps-action-bg: color-mix(in srgb, var(--cc-surface) 70%, transparent); --cc-ps-action-border: var(--cc-border); --cc-ps-action-color: var(--cc-muted); --cc-ps-btn-bg: var(--cc-cart-btn-bg, var(--cc-btn-bg)); --cc-ps-btn-color: var(--cc-cart-btn-text, var(--cc-btn-text)); --cc-ps-tab-border: var(--cc-border); --cc-ps-tab-text: var(--cc-muted); --cc-ps-input-bg: color-mix(in srgb, var(--cc-ps-card-bg) 78%, transparent); --cc-ps-input-border: var(--cc-ps-card-border); --cc-ps-input-text: var(--cc-ps-text); --cc-ps-arrow-border: var(--cc-border); --cc-ps-arrow-color: var(--cc-heading); --cc-ps-destructive: #ef4444; --cc-ps-img-placeholder: var(--cc-surface); /* Preset sub-option CSS variables (overridden by inline style from PHP) */ --cc-ps-blur: 12px; --cc-ps-glass-opacity: 0.1; --cc-ps-glass-border-opacity: 0.18; --cc-ps-flat-hover-scale: 1.02; --cc-ps-elevated-shadow-depth: medium; --cc-ps-elevated-hover-lift: 6px; --cc-ps-outlined-border-width: 2px; --cc-ps-outlined-border-style: solid; --cc-ps-outlined-hover-fill: 0.06; font-family: inherit; width: 100%; } /* ── Section Header ── */ .cc-ps-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .cc-ps-header__left { flex: 1 1 auto; min-width: 0; } .cc-ps-header__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .cc-ps-title { font-size: 1.75rem; font-weight: 700; font-family: var(--cc-font-heading, serif); font-style: italic; color: var(--cc-ps-text); margin: 0 0 8px; line-height: 1.2; } .cc-ps-title .cc-ps-accent { color: var(--cc-ps-accent); } .cc-ps-subtitle { font-size: 0.875rem; color: var(--cc-ps-muted); margin: 0; max-width: 28rem; } /* ── Header Category Icons ── */ .cc-ps-header__icons { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--cc-ps-accent); } .cc-ps-header__icons svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── Sort dropdown ── */ .cc-ps-sort-wrap { display: flex; align-items: center; gap: 8px; color: var(--cc-ps-muted); } .cc-ps-sort-icon { flex-shrink: 0; color: var(--cc-ps-muted); } .cc-ps-sort { appearance: none; -webkit-appearance: none; background-color: var(--cc-ps-input-bg); color: var(--cc-ps-input-text); border: 1px solid var(--cc-ps-input-border); border-radius: 6px; padding: 6px 28px 6px 12px; font-size: 0.75rem; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; transition: border-color 0.2s; } .cc-ps-sort:focus { outline: none; border-color: var(--cc-ps-accent); } /* Keep showcase sort control consistent in both themes (avoid global select overrides) */ html[data-theme] .cc-ps-wrap .cc-ps-sort { background-color: var(--cc-ps-input-bg) !important; border-color: var(--cc-ps-input-border) !important; color: var(--cc-ps-input-text) !important; } html[data-theme] .cc-ps-wrap .cc-ps-sort:focus { border-color: var(--cc-ps-accent) !important; outline: none; } /* Ensure native dropdown options match dark / light mode */ .cc-ps-sort option { background-color: var(--cc-ps-card-bg); color: var(--cc-ps-text); } /* ── Nav arrows ── */ .cc-ps-nav__arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cc-ps-arrow-border); background-color: var(--cc-ps-input-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cc-ps-arrow-color); cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.15s; flex-shrink: 0; padding: 0; line-height: 1; } .cc-ps-nav__arrow svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; } .cc-ps-nav__arrow:hover { background-color: var(--cc-ps-accent); color: var(--cc-ps-accent-fg); } .cc-ps-nav__arrow:active { transform: scale(0.92); } /* ── Filter Tabs ── */ .cc-ps-tabs { position: relative; display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 24px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; /* prevent cut-off focus ring */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%); } .cc-ps-tabs::-webkit-scrollbar { display: none; } .cc-ps-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--cc-ps-tab-border); background: var(--cc-ps-input-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cc-ps-tab-text); font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; flex-shrink: 0; scroll-snap-align: start; } .cc-ps-tab svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; color: var(--cc-icon-color, currentColor); } .cc-ps-tab__label { display: inline-block; line-height: 1; } .cc-ps-tab:hover { background: color-mix(in srgb, var(--cc-ps-accent) 10%, transparent); color: var(--cc-ps-accent); } .cc-ps-tab.is-active { background: var(--cc-ps-accent); border-color: var(--cc-ps-accent); color: var(--cc-ps-accent-fg); } .cc-ps-tab.is-active svg { color: var(--cc-ps-accent-fg); } .cc-ps-tab__count { font-size: 0.7rem; opacity: 0.7; } /* ── Stage (overflow container) ── */ .cc-ps-stage { position: relative; width: 100%; overflow: visible; } /* ── Carousel track ── */ .cc-ps-carousel { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 0 16px; margin-top: -8px; } .cc-ps-carousel::-webkit-scrollbar { display: none; } .cc-ps-carousel .cc-ps-card { flex: 0 0 260px; min-width: 0; } /* ── Grid track ── */ .cc-ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 8px 0 16px; margin-top: -8px; } /* ── No products ── */ .cc-ps-no-products { color: var(--cc-ps-muted); padding: 24px 0; } /* ── Equal Card Height ── */ .cc-ps-track--equal-height.cc-ps-carousel { align-items: stretch; } .cc-ps-track--equal-height.cc-ps-carousel .cc-ps-card { height: auto; align-self: stretch; } .cc-ps-track--equal-height.cc-ps-grid .cc-ps-card { height: 100%; } /* ========================================================================== Product Card — Base (shared across all presets) ========================================================================== */ .cc-ps-card { position: relative; background: var(--cc-ps-card-bg); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease; } .cc-ps-card.is-hidden { display: none; } /* ========================================================================== Preset 1: Glassmorphism — frosted glass effect ========================================================================== */ .cc-ps-card--glassmorphism { backdrop-filter: blur(var(--cc-ps-blur, 12px)); -webkit-backdrop-filter: blur(var(--cc-ps-blur, 12px)); /* Use the theme border token so the admin colour setting takes effect */ border: 1px solid var(--cc-border); box-shadow: var(--cc-ps-card-shadow), inset 0 1px 0 rgba(255, 255, 255, calc(var(--cc-ps-glass-opacity, 0.1) * 0.5)); } /* In dark mode, keep the subtle translucent glass edge */ [data-theme="dark"] .cc-ps-card--glassmorphism { border-color: rgba(255, 255, 255, calc(var(--cc-ps-glass-border-opacity, 0.18) * 0.5)); } .cc-ps-card--glassmorphism::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, var(--cc-ps-glass-opacity, 0.1)), transparent 50%, transparent); pointer-events: none; z-index: 1; } .cc-ps-card--glassmorphism:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2), 0 8px 16px -4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, calc(var(--cc-ps-glass-opacity, 0.1) * 0.8)); } [data-theme="dark"] .cc-ps-card--glassmorphism:hover { box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5), 0 8px 16px -4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ========================================================================== Preset 2: Flat — clean, no shadows, subtle hover ========================================================================== */ .cc-ps-card--flat { box-shadow: none; border: 1px solid transparent; background: var(--cc-ps-card-bg); } .cc-ps-card--flat::before { display: none; } .cc-ps-card--flat:hover { transform: scale(var(--cc-ps-flat-hover-scale, 1.02)); border-color: var(--cc-ps-card-border); background: var(--cc-ps-flat-hover-tint, var(--cc-ps-card-bg)); } [data-theme="dark"] .cc-ps-card--flat:hover { background: color-mix(in srgb, var(--cc-surface) 90%, var(--cc-accent)); } /* ========================================================================== Preset 3: Elevated — pronounced multi-layer shadow ========================================================================== */ .cc-ps-card--elevated { border: none; background: var(--cc-ps-card-bg); } .cc-ps-card--elevated::before { display: none; } /* Shadow depth: light */ .cc-ps-card--elevated[data-shadow="light"] { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04); } .cc-ps-card--elevated[data-shadow="light"]:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.06); } /* Shadow depth: medium (default) */ .cc-ps-card--elevated, .cc-ps-card--elevated[data-shadow="medium"] { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.04); } .cc-ps-card--elevated:hover, .cc-ps-card--elevated[data-shadow="medium"]:hover { transform: translateY(calc(-1 * var(--cc-ps-elevated-hover-lift, 6px))); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.1), 0 24px 56px rgba(0, 0, 0, 0.06); } /* Shadow depth: deep */ .cc-ps-card--elevated[data-shadow="deep"] { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.1), 0 24px 56px rgba(0, 0, 0, 0.08); } .cc-ps-card--elevated[data-shadow="deep"]:hover { transform: translateY(calc(-1 * var(--cc-ps-elevated-hover-lift, 6px))); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 20px 48px rgba(0, 0, 0, 0.15), 0 32px 72px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .cc-ps-card--elevated { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.12); } [data-theme="dark"] .cc-ps-card--elevated:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3), 0 24px 56px rgba(0, 0, 0, 0.2); } /* ========================================================================== Preset 4: Outlined — transparent bg, visible border, fill on hover ========================================================================== */ .cc-ps-card--outlined { background: transparent; border: var(--cc-ps-outlined-border-width, 2px) var(--cc-ps-outlined-border-style, solid) var(--cc-ps-outlined-border-color, var(--cc-ps-card-border)); box-shadow: none; } .cc-ps-card--outlined::before { display: none; } .cc-ps-card--outlined:hover { transform: translateY(-3px); border-color: var(--cc-ps-accent); background: rgba(var(--cc-accent-rgb, 212, 160, 23), var(--cc-ps-outlined-hover-fill, 0.06)); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08); } [data-theme="dark"] .cc-ps-card--outlined { border-color: var(--cc-ps-outlined-border-color, var(--cc-border)); } [data-theme="dark"] .cc-ps-card--outlined:hover { border-color: var(--cc-ps-accent); background: rgba(255, 255, 255, calc(var(--cc-ps-outlined-hover-fill, 0.06) * 0.8)); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3); } /* ========================================================================== Reduced motion — respect user preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cc-ps-card, .cc-ps-card__image-wrap img, .cc-ps-card__image-overlay, .cc-ps-card__actions, .cc-ps-badge--hot, .cc-ps-badge--low-stock { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ── Card Image ── */ .cc-ps-card__image-area { position: relative; aspect-ratio: 1; overflow: hidden; background-color: var(--cc-ps-img-placeholder); border-radius: 0; /* no rounding — card overflow:hidden clips the top corners */ } .cc-ps-card__image-wrap { position: relative; display: block; width: 100%; height: 100%; text-decoration: none; } .cc-ps-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; /* removes inline-img bottom gap */ border: none; /* no internal borders */ border-radius: 0; /* sharp edges — card handles rounding */ transition: transform 0.5s ease-out; } .cc-ps-card:hover .cc-ps-card__image-wrap img { transform: scale(1.1); } /* Image bottom gradient (visible on hover) */ .cc-ps-card__image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--cc-ps-overlay), transparent, transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .cc-ps-card:hover .cc-ps-card__image-overlay { opacity: 1; } /* ── Badges ── */ .cc-ps-badges { position: absolute; top: 16px; left: 16px; z-index: 10; display: flex; flex-direction: column; gap: 8px; } .cc-ps-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .cc-ps-badge--new { background: var(--cc-ps-accent); color: var(--cc-ps-accent-fg); } .cc-ps-badge--hot { background: var(--cc-ps-destructive); color: #ffffff; animation: cc-ps-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .cc-ps-badge--sale { background: rgba(0, 0, 0, 0.45); border-color: var(--cc-ps-accent); color: var(--cc-ps-accent); /* Ensure the outlined sale badge is readable over any image */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); } .cc-ps-badge--low-stock { background: rgba(0, 0, 0, 0.45); border-color: var(--cc-ps-destructive); color: var(--cc-ps-destructive); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); animation: cc-ps-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes cc-ps-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ── Hover Action Buttons (wishlist / quick view) ── */ .cc-ps-card__actions { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .cc-ps-card:hover .cc-ps-card__actions { opacity: 1; pointer-events: auto; } .cc-ps-action-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cc-ps-action-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--cc-ps-action-border); color: var(--cc-ps-action-color); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; text-decoration: none; padding: 0; line-height: 1; } .cc-ps-action-btn:hover { color: var(--cc-ps-accent); border-color: var(--cc-ps-accent); text-decoration: none; } .cc-ps-action-btn svg { width: 20px; height: 20px; flex-shrink: 0; } /* ── YITH Wishlist inside card actions — force circular icon-only button ── */ .cc-ps-card__actions .yith-wcwl-add-to-wishlist, .cc-ps-card__actions .yith-add-to-wishlist-button-block { width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; position: relative; overflow: hidden; border-radius: 50%; padding: 0 !important; margin: 0 !important; } /* Inner wrapper divs */ .cc-ps-card__actions .yith-wcwl-add-button, .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse { width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; } /* The actual clickable link / anchor / button */ .cc-ps-card__actions .yith-wcwl-add-to-wishlist a, .cc-ps-card__actions .yith-wcwl-add-to-wishlist button, .cc-ps-card__actions .yith-add-to-wishlist-button-block a, .cc-ps-card__actions .yith-add-to-wishlist-button-block button, .cc-ps-card__actions .yith-wcwl-add-to-wishlist-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--cc-ps-action-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--cc-ps-action-border) !important; color: var(--cc-ps-action-color) !important; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; text-decoration: none !important; padding: 0 !important; margin: 0 !important; line-height: 1; font-size: 0 !important; overflow: hidden; } .cc-ps-card__actions .yith-wcwl-add-to-wishlist a:hover, .cc-ps-card__actions .yith-wcwl-add-to-wishlist button:hover, .cc-ps-card__actions .yith-add-to-wishlist-button-block a:hover, .cc-ps-card__actions .yith-add-to-wishlist-button-block button:hover, .cc-ps-card__actions .yith-wcwl-add-to-wishlist-button:hover { color: var(--cc-ps-accent) !important; border-color: var(--cc-ps-accent) !important; } /* Show only the SVG icon, hide ALL text labels and tooltips */ .cc-ps-card__actions .yith-wcwl-add-to-wishlist a span:not(.yith-wcwl-icon), .cc-ps-card__actions .yith-wcwl-add-to-wishlist button span:not(.yith-wcwl-icon), .cc-ps-card__actions .yith-wcwl-add-to-wishlist a .yith-wcwl-add-to-wishlist-button__label, .cc-ps-card__actions .yith-wcwl-add-to-wishlist button .yith-wcwl-add-to-wishlist-button__label, .cc-ps-card__actions .yith-add-to-wishlist-button-block .yith-wcwl-add-to-wishlist-button__label, .cc-ps-card__actions .yith-wcwl-add-to-wishlist .feedback, .cc-ps-card__actions .yith-wcwl-add-to-wishlist .yith-wcwl-tooltip, .cc-ps-card__actions .yith-add-to-wishlist-button-block .feedback { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; clip: rect(0,0,0,0) !important; } /* SVG icon sizing */ .cc-ps-card__actions .yith-wcwl-add-to-wishlist a i, .cc-ps-card__actions .yith-wcwl-add-to-wishlist a svg, .cc-ps-card__actions .yith-add-to-wishlist-button-block svg, .cc-ps-card__actions .yith-wcwl-add-to-wishlist-button svg, .cc-ps-card__actions .yith-wcwl-icon { font-size: 18px !important; width: 20px !important; height: 20px !important; min-width: 20px; min-height: 20px; line-height: 1; color: inherit !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; flex-shrink: 0; } /* Hide YITH loader inside card */ .cc-ps-card__actions .yith-wcwl-add-to-wishlist .ajax-loading, .cc-ps-card__actions .yith-add-to-wishlist-button-block .ajax-loading { display: none !important; } /* ── Wishlist added / active state ── */ /* YITH swaps the inner wrapper from yith-wcwl-add-button → yith-wcwl-wishlistaddedbrowse when the item is already in the wishlist. Highlight the icon in accent colour. */ .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse a, .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse a:hover, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse a, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse a:hover { color: var(--cc-ps-accent) !important; border-color: var(--cc-ps-accent) !important; background: color-mix(in srgb, var(--cc-ps-accent) 15%, transparent) !important; } .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse svg, .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse i, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse svg, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse i { color: var(--cc-ps-accent) !important; fill: var(--cc-ps-accent) !important; stroke: var(--cc-ps-accent) !important; } /* Always show the action area (not just on hover) if item is wishlisted */ .cc-ps-card:has(.yith-wcwl-wishlistaddedbrowse) .cc-ps-card__actions, .cc-ps-card:has(.yith-wcwl-wishlistexistsbrowse) .cc-ps-card__actions { opacity: 1; pointer-events: auto; } /* Hide YITH "Added!" / "Browse wishlist" feedback text inside card */ .cc-ps-card__actions .yith-wcwl-wishlistaddedbrowse .feedback, .cc-ps-card__actions .yith-wcwl-wishlistexistsbrowse .feedback, .cc-ps-card__actions .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistaddedbrowse span:not(.yith-wcwl-icon), .cc-ps-card__actions .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistexistsbrowse span:not(.yith-wcwl-icon) { display: none !important; } /* ── Card Body ── */ .cc-ps-card__body { position: relative; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 2px; flex: 1; } .cc-ps-card__cat { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--cc-ps-accent); text-transform: uppercase; } .cc-ps-card__name { font-family: var(--cc-font-heading, serif); font-size: 1rem; font-weight: 600; color: var(--cc-ps-text); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; } .cc-ps-card__name a { color: inherit; text-decoration: none; } .cc-ps-card__name a:hover { color: var(--cc-ps-accent); } .cc-ps-card:hover .cc-ps-card__name { color: var(--cc-ps-accent); } .cc-ps-card__spec { font-size: 0.8125rem; color: var(--cc-ps-muted); margin: 0; min-height: 1.4em; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .cc-ps-card__spec--placeholder { opacity: 0; user-select: none; } /* ── Price ── */ .cc-ps-card__price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; } .cc-ps-card__price-current { font-size: 1rem; font-weight: 700; color: var(--cc-ps-accent); } .cc-ps-card__price-current .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; } .cc-ps-card__price-old { font-size: 0.8125rem; color: var(--cc-ps-muted); text-decoration: line-through; } .cc-ps-card__price-old .woocommerce-Price-amount { color: inherit; font-size: inherit; } /* Fallback: WooCommerce price_html rendered directly */ .cc-ps-card__price ins { text-decoration: none; color: var(--cc-ps-accent); font-weight: 700; } .cc-ps-card__price del { color: var(--cc-ps-muted); font-size: 0.875rem; opacity: 0.7; } /* No Price fallback */ .cc-ps-card__price--no-price { font-size: 0.875rem; font-weight: 500; font-style: italic; color: var(--cc-ps-muted); opacity: 0.8; } /* ── CTA Button ── */ .cc-ps-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--cc-ps-btn-bg); color: var(--cc-ps-btn-color); border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: opacity 0.2s, transform 0.15s; margin-top: 2px; width: 100%; text-align: center; } /* Override moved to the bottom "Theme-Mode Overrides" section with !important for maximum specificity against global rules. */ .cc-ps-card__btn:hover { opacity: 0.9; text-decoration: none; color: var(--cc-ps-btn-color); } .cc-ps-card__btn:active { transform: scale(0.97); } .cc-ps-card__btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* WhatsApp button variant (used in "both" mode) */ .cc-ps-card__btn--wa { background: transparent; color: #25d366; border: 1px solid rgba(37, 211, 102, 0.4); } .cc-ps-card__btn--wa:hover { background: rgba(37, 211, 102, 0.1); color: #25d366; opacity: 1; } /* WooCommerce AJAX add-to-cart states */ .cc-ps-card__btn.loading { pointer-events: none; } .cc-ps-card__btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: cc-ps-spin 0.6s linear infinite; margin-left: 4px; } /* Added state — keep theme colours, swap text via CSS */ .cc-ps-card__btn.added { background: var(--cc-ps-btn-bg); color: var(--cc-ps-btn-color); } /* Replace button text with "Added to cart" using visibility trick */ .cc-ps-card__btn.added svg { display: none; /* hide cart icon when added */ } .cc-ps-card__btn.added { font-size: 0; /* hide original text nodes */ } .cc-ps-card__btn.added::after { content: '\2713 Added to cart'; font-size: 0.8125rem; font-weight: 500; } /* Disabled / unavailable button */ .cc-ps-card__btn--disabled { background: var(--cc-ps-btn-bg); color: var(--cc-ps-btn-color) !important; opacity: 0.45; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4); } /* Hide the "View cart" link WooCommerce injects after AJAX add-to-cart — the button itself already shows the added state; the extra link breaks the card layout. */ .cc-ps-card a.added_to_cart, .cc-ps-card .added_to_cart { display: none !important; } @keyframes cc-ps-spin { to { transform: rotate(360deg); } } /* ── Responsive ── */ @media (min-width: 769px) and (max-width: 1024px) { .cc-ps-grid { grid-template-columns: repeat(3, 1fr); } .cc-ps-carousel .cc-ps-card { flex: 0 0 240px; } } @media (max-width: 768px) { .cc-ps-grid { grid-template-columns: repeat(2, 1fr); } .cc-ps-title { font-size: 1.5rem; } .cc-ps-header { flex-direction: column; align-items: flex-start; gap: 12px; } .cc-ps-carousel .cc-ps-card { flex: 0 0 220px; } .cc-ps-card__body { padding: 12px; gap: 6px; } .cc-ps-card__name { font-size: 1rem; } .cc-ps-card__actions { opacity: 1; } } @media (max-width: 480px) { .cc-ps-grid { grid-template-columns: 1fr; } .cc-ps-tabs { gap: 6px; margin-bottom: 18px; } .cc-ps-tab { padding: 5px 10px; font-size: 0.7rem; } .cc-ps-carousel .cc-ps-card { flex: 0 0 200px; } } /* ========================================================================== Theme-Mode Overrides — beat global dark-base.css / Elementor link rules. Uses html[data-theme] for highest specificity among attribute selectors. ========================================================================== */ /* ── CTA Button — both modes ── */ html[data-theme] .cc-ps-card a.cc-ps-card__btn, html[data-theme] .cc-ps-card a.cc-ps-card__btn:hover, html[data-theme] .cc-ps-card a.cc-ps-card__btn:focus, html[data-theme] .cc-ps-card span.cc-ps-card__btn { background-color: var(--cc-ps-btn-bg) !important; color: var(--cc-ps-btn-color) !important; border-color: var(--cc-ps-btn-bg) !important; text-decoration: none !important; } /* Disabled button */ html[data-theme] .cc-ps-card .cc-ps-card__btn--disabled { background-color: var(--cc-ps-btn-bg) !important; color: var(--cc-ps-btn-color) !important; opacity: 0.45; } /* ── Sort Dropdown — dark option colours ── */ [data-theme="dark"] .cc-ps-wrap .cc-ps-sort option { background-color: var(--cc-surface) !important; color: var(--cc-heading) !important; } /* ── Nav Arrows — both modes (use --cc-ps-arrow-color which adapts via custom props) ── */ html[data-theme] .cc-ps-wrap .cc-ps-nav__arrow { background-color: var(--cc-ps-input-bg) !important; border-color: var(--cc-ps-arrow-border) !important; color: var(--cc-ps-arrow-color) !important; } html[data-theme] .cc-ps-wrap .cc-ps-nav__arrow:hover { background-color: var(--cc-ps-accent) !important; color: var(--cc-ps-accent-fg) !important; } /* ── Filter Tabs — dark mode (ensure readable) ── */ [data-theme="dark"] .cc-ps-wrap .cc-ps-tab { background: var(--cc-ps-input-bg) !important; border-color: var(--cc-ps-tab-border) !important; color: var(--cc-ps-tab-text) !important; } [data-theme="dark"] .cc-ps-wrap .cc-ps-tab:hover { background: color-mix(in srgb, var(--cc-ps-accent) 10%, transparent) !important; color: var(--cc-ps-accent) !important; } /* ── Filter Tabs — active state (both modes) ── */ html[data-theme] .cc-ps-wrap .cc-ps-tab.is-active { background: var(--cc-ps-accent) !important; border-color: var(--cc-ps-accent) !important; color: var(--cc-ps-accent-fg) !important; } /* ── Sort icon — dark mode ── */ [data-theme="dark"] .cc-ps-wrap .cc-ps-sort-icon { color: var(--cc-ps-muted) !important; }