/* * .screen-reader-text — visually hidden (WordPress standard pattern) * Fix 2026-04-24: WC emite Prețul inițial a fost: * în markup preț sale. Fără această regulă, textul apare inline în product cards. */ .screen-reader-text, .screen-reader-text span { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #eee; clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* * Flavor Starter — Main Stylesheet * Design Direction: "Calm Authority" (ooz Design System) * * Architecture: * 1. Design tokens (custom properties) * 2. Reset / base * 3. Layout utilities * 4. Buttons / Forms / Badges * 5. Header * 6. Hero / Need routing * 7. Trust bar * 8. Category cards * 9. Product cards * 10. Value tier block * 11. Brand strip * 12. FAQ accordion * 13. Content blocks / Testimonials / Wizard teaser * 14. Footer * 15. PDP * 16. Breadcrumbs * 17. Filter panel / Toolbar * 18. Cart * 19. Account * 20. Checkout * 21. Utility classes * * Mobile-first: all base rules target small screens. * Larger breakpoints use min-width media queries. * * Breakpoints: * 480px — small phones * 768px — tablets * 1024px — small desktops * 1280px — desktops (container max) * 1440px — large desktops * * @package FlavorStarter * Version: 2.0.0 */ /* ========================================================================= 1. Design Tokens ========================================================================= */ :root { /* ── Brand Colors ── */ --color-primary: #0D6B6E; --color-primary-hover: #0A5557; --color-primary-dark: #094F51; --color-primary-light: #E8EFEB; --color-primary-lighter:#F2F7F4; --color-accent: #C67B5C; --color-accent-hover: #B36A4D; --color-accent-dark: #A8624A; --color-accent-light: #F5E6DE; --color-accent-lighter: #FBF3EF; /* ── Neutrals ── */ --color-neutral-900: #1A1A1A; --color-neutral-800: #2D2D2D; --color-neutral-700: #404040; --color-neutral-600: #525252; --color-neutral-500: #737373; --color-neutral-400: #A3A3A3; --color-neutral-300: #D4D4D4; --color-neutral-200: #E5E5E5; --color-neutral-100: #F5F5F5; --color-neutral-50: #FAFAF8; --color-white: #FFFFFF; /* ── Semantic ── */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-error: #DC2626; --color-error-light: #FEE2E2; --color-info: #0D6B6E; --color-info-light: #E8EFEB; /* ── Sale / Star ── */ --color-sale-bg: #C67B5C; --color-sale-text: #FFFFFF; --color-star: #F59E0B; /* ── Typography ── */ --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --leading-tight: 1.2; --leading-snug: 1.35; --leading-base: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.05em; /* ── Spacing ── */ --space-0: 0; --space-px: 1px; --space-0\.5: 0.125rem; --space-1: 0.25rem; --space-1\.5: 0.375rem; --space-2: 0.5rem; --space-2\.5: 0.625rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ── Border Radius ── */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.05); --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.04); /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ── Layout ── */ --container-max: 1280px; --container-pad: 1rem; /* ── Semantic aliases ── Short names used throughout plugin/partial stylesheets that need a stable, meaning-based token rather than picking a specific neutral shade. Defined in terms of the palette above so a future rebrand changes values in one place. */ --color-bg: var(--color-white); --color-bg-subtle: var(--color-neutral-50); --color-bg-muted: var(--color-neutral-100); --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); --color-text: var(--color-neutral-900); --color-text-muted: var(--color-neutral-600); --color-text-subtle: var(--color-neutral-500); } @media (min-width: 768px) { :root { --container-pad: 1.5rem; } } /* ========================================================================= 2. Reset / Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-neutral-900); background: var(--color-neutral-50); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-neutral-900); } /* ========================================================================= 3. Layout Utilities ========================================================================= */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-8); } @media (min-width: 768px) { .section { padding-block: var(--space-12); } } @media (min-width: 1024px) { .section { padding-block: var(--space-16); } } .section--alt { background: var(--color-primary-lighter); } .section__header { margin-bottom: var(--space-6); } .section__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); } @media (min-width: 768px) { .section__title { font-size: var(--text-3xl); } } .section__subtitle { font-size: var(--text-lg); color: var(--color-neutral-600); max-width: 60ch; } /* Screen-reader only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= 4. Buttons / Forms / Badges ========================================================================= */ /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding-inline: var(--space-6); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast); white-space: nowrap; } .btn--primary { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-white); } .btn--secondary { background: var(--color-white); color: var(--color-primary); border-color: var(--color-primary); } .btn--secondary:hover { background: var(--color-primary-light); } .btn--ghost { background: transparent; color: var(--color-primary); border-color: transparent; } .btn--ghost:hover { background: var(--color-primary-light); } .btn--sm { height: 36px; padding-inline: var(--space-4); font-size: var(--text-xs); } .btn--full { width: 100%; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } /* ── Inputs / Forms ── */ .input { display: block; width: 100%; min-width: 0; height: 48px; padding-inline: var(--space-3); border: 2px solid var(--color-neutral-400); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-neutral-900); background: var(--color-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); outline: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); box-sizing: border-box; } .input:hover { border-color: var(--color-neutral-500); } .input:focus, .input:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13,107,110,0.15); } .input:disabled { background: var(--color-neutral-50); color: var(--color-neutral-500); cursor: not-allowed; } .input:not(:placeholder-shown):not(:focus):valid { border-color: var(--color-neutral-400); } .input.has-error, .input[aria-invalid="true"], .woocommerce-invalid .input { border-color: var(--color-error, #dc2626); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); } .input::placeholder { color: var(--color-neutral-500); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23737373' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-neutral-700); margin-bottom: var(--space-1\.5); } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; height: 24px; padding-inline: var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); white-space: nowrap; } .badge--sale { background: var(--color-sale-bg); color: var(--color-sale-text); } .badge--new { background: var(--color-primary); color: var(--color-white); } .badge--stock { background: var(--color-success-light); color: var(--color-success); } .badge--out { background: var(--color-neutral-100); color: var(--color-neutral-500); } /* ── Card (base) ── */ .card { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } /* ========================================================================= 5. Header ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-white); box-shadow: var(--shadow-sm); } /* Row 1: Utility */ .header-utility { background: var(--color-neutral-100); border-bottom: 1px solid var(--color-neutral-200); } .header-utility__inner { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: var(--space-4); } .header-utility__left, .header-utility__right { display: flex; align-items: center; gap: var(--space-3); } .header-utility a, .header-utility span { font-size: var(--text-xs); color: var(--color-neutral-600); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); } .header-utility a:hover { color: var(--color-primary); } .header-utility__sep { color: var(--color-neutral-300); user-select: none; } .header-utility__trust { color: var(--color-primary-dark); font-weight: var(--font-semibold); } .header-utility__trust svg { width: 14px; height: 14px; } .header-utility__right { display: none; } @media (min-width: 768px) { .header-utility__right { display: flex; } } /* Row 2: Main bar */ .header-main { padding-block: var(--space-2); border-bottom: 1px solid var(--color-neutral-200); } .header-main__inner { display: flex; align-items: center; gap: var(--space-3); } .custom-logo-link { flex-shrink: 0; display: flex; align-items: center; } .header-main .custom-logo-link img.custom-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; } @media (min-width: 768px) { .header-main .custom-logo-link img.custom-logo { height: 48px; max-width: 200px; } } .header-brand { flex-shrink: 0; text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; } .header-brand__name { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--color-primary); letter-spacing: var(--tracking-tight); } .header-brand__tagline { font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; } .header-search { flex: 1; max-width: 560px; display: none; } @media (min-width: 768px) { .header-search { display: block; } } .header-search__form { display: flex; border: 2px solid var(--color-neutral-200); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); transition: border-color var(--transition-fast); } .header-search__form:focus-within { border-color: var(--color-primary); } .header-search__cat { display: none; border: none; border-right: 1px solid var(--color-neutral-200); padding: var(--space-2) var(--space-3); background: var(--color-neutral-100); font-size: var(--text-sm); color: var(--color-neutral-700); min-width: 100px; cursor: pointer; } @media (min-width: 1024px) { .header-search__cat { display: block; } } .header-search__input { flex: 1; border: none; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); outline: none; min-width: 0; } .header-search__btn { display: flex; align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-primary); color: var(--color-white); border: none; cursor: pointer; transition: background var(--transition-fast); } .header-search__btn:hover { background: var(--color-primary-hover); } .header-search__btn svg { width: 18px; height: 18px; } .header-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0; } .header-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-1); border-radius: var(--radius-md); color: var(--color-neutral-700); text-decoration: none; position: relative; transition: opacity var(--transition-fast); } .header-action:hover { color: var(--color-primary); background: var(--color-primary-light); } .header-action svg { width: 22px; height: 22px; } .header-action__label { font-size: 10px; font-weight: var(--font-semibold); display: none; } @media (min-width: 1024px) { .header-action__label { display: block; } } .header-action--account { display: none; } @media (min-width: 768px) { .header-action--account { display: flex; } } .header-cart-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding-inline: 4px; background: var(--color-accent); color: var(--color-white); border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-bold); display: flex; align-items: center; justify-content: center; } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: var(--space-2); background: transparent; border: none; cursor: pointer; border-radius: var(--radius-md); flex-shrink: 0; } .hamburger span { display: block; width: 100%; height: 2px; background: var(--color-neutral-800); border-radius: 2px; } @media (min-width: 1024px) { .hamburger { display: none; } } /* Row 3: Category nav */ .header-catnav { background: var(--color-primary); display: none; } @media (min-width: 768px) { .header-catnav { display: block; } } .header-catnav__inner { display: flex; align-items: center; justify-content: space-between; } .header-catnav { position: relative; z-index: 40; } .header-catnav__inner { overflow: visible; } .header-catnav__menu { display: flex; align-items: center; list-style: none; flex: 1; overflow: visible; } .header-catnav__menu a { display: block; padding: var(--space-3); color: var(--color-white); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); white-space: nowrap; text-decoration: none; transition: background var(--transition-fast); } @media (min-width: 1280px) { .header-catnav__menu a { font-size: var(--text-sm); padding: var(--space-3) var(--space-4); } } .header-catnav__menu a:hover { background: var(--color-primary-hover); } .header-catnav__menu .is-active a { background: var(--color-primary-hover); } .header-catnav__phone { display: none; align-items: center; gap: var(--space-2); color: var(--color-white); font-weight: var(--font-bold); font-size: var(--text-sm); white-space: nowrap; padding-left: var(--space-4); } .header-catnav__phone a { color: var(--color-white); text-decoration: none; } .header-catnav__phone svg { width: 16px; height: 16px; } @media (min-width: 1024px) { .header-catnav__phone { display: flex; } } /* Catnav dropdowns (dynamic category menu) */ .header-catnav__menu li { position: relative; list-style: none; } .header-catnav__item--has-children > a::after { content: " \25BE"; margin-left: 4px; font-size: 10px; opacity: .85; } .header-catnav__submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 280px; background: var(--color-white); color: var(--color-text, #222); box-shadow: 0 10px 28px rgba(0,0,0,.14); border-radius: 0 0 8px 8px; padding: 6px 0; z-index: 50; } .header-catnav__item--has-children:hover > .header-catnav__submenu, .header-catnav__item--has-children:focus-within > .header-catnav__submenu { display: block; } .header-catnav__submenu a { color: var(--color-text, #222); text-transform: none; letter-spacing: normal; font-weight: var(--font-medium, 500); font-size: var(--text-sm); padding: 10px 16px; display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; } .header-catnav__submenu a:hover { background: var(--color-neutral-100, #f5f7fa); color: var(--color-primary); } .header-catnav__count { color: var(--color-neutral-500, #8a8a8a); font-size: 11px; font-weight: 400; } /* Footer product column — grouped subtitles */ .footer-col--products .footer-col__subtitle { font-weight: 700; margin: 14px 0 6px; font-size: .95rem; color: var(--color-white, inherit); } .footer-col--products .footer-col__subtitle:first-of-type { margin-top: 6px; } .footer-col--products .footer-col__subtitle a { color: inherit; text-decoration: none; } .footer-col--products .footer-col__subtitle a:hover { text-decoration: underline; } .footer-col--products .footer-col__links { margin-bottom: 8px; } /* Mobile menu groups */ .mobile-menu__group-title { font-weight: 700; display: block; padding: 10px 0 6px; color: var(--color-primary); } .mobile-menu__sublinks { list-style: none; padding-left: 12px; margin: 0 0 10px; } .mobile-menu__sublinks li a { display: block; padding: 6px 0; font-size: .92rem; } /* Mini-cart overlay */ .mini-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .mini-cart-overlay.is-open { opacity: 1; pointer-events: auto; } .mini-cart-panel { position: fixed; top: 0; right: 0; width: min(400px, 90vw); height: 100vh; background: var(--color-white); box-shadow: var(--shadow-xl); z-index: 201; transform: translateX(100%); transition: transform var(--transition-slow); overflow-y: auto; } .mini-cart-panel.is-open { transform: translateX(0); } .mini-cart-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-neutral-200); } .mini-cart-panel__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); } .mini-cart-panel__close { background: none; border: none; cursor: pointer; color: var(--color-neutral-500); padding: var(--space-1); } .mini-cart-panel__close:hover { color: var(--color-neutral-900); } /* Padding aplicat si direct pe `.widget_shopping_cart_content` deoarece WC AJAX fragments (add_to_cart response) inlocuieste elementul `
` cu `
` din template WC, pierzand clasa noastra. Bug vizual: dupa AJAX add-to-cart (cand cosul era gol), continutul se lipea de margini. Dupa reload arata ok pentru ca HTML-ul server-rendered include ambele clase. */ .mini-cart-panel__body, .mini-cart-panel > .widget_shopping_cart_content { padding: var(--space-4) var(--space-6); } .mini-cart-panel__footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-200); } /* ========================================================================= 6. Hero / Need Routing ========================================================================= */ .hero { background: linear-gradient(160deg, var(--color-primary-lighter) 0%, var(--color-neutral-50) 60%); padding-block: var(--space-10); } @media (min-width: 768px) { .hero { padding-block: var(--space-16); } } .hero__content { max-width: 640px; margin-bottom: var(--space-8); } .hero__title { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); } @media (min-width: 768px) { .hero__title { font-size: var(--text-5xl); } } .hero__subtitle { font-size: var(--text-lg); color: var(--color-neutral-600); line-height: var(--leading-base); } .hero__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 480px) { .hero__cards { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .hero__cards { grid-template-columns: repeat(3, 1fr); } } .routing-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-neutral-900); transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .routing-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .routing-card__icon { width: 40px; height: 40px; color: var(--color-primary); } .routing-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); } .routing-card__desc { font-size: var(--text-sm); color: var(--color-neutral-600); } .routing-card__cta { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-accent); margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1); } /* ========================================================================= 7. Trust Bar ========================================================================= */ .trust-bar { background: var(--color-white); border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); padding-block: var(--space-5); } .trust-bar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .trust-bar__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .trust-bar__grid { grid-template-columns: repeat(5, 1fr); } } .trust-bar__item { display: flex; align-items: flex-start; gap: var(--space-3); } .trust-bar__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); border-radius: var(--radius-md); color: var(--color-primary); } .trust-bar__icon svg { width: 20px; height: 20px; } .trust-bar__text { display: flex; flex-direction: column; } .trust-bar__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-neutral-900); } .trust-bar__desc { font-size: var(--text-xs); color: var(--color-neutral-500); margin-top: 2px; } /* ========================================================================= 8. Category Cards ========================================================================= */ .categories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } } .category-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--color-neutral-900); transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .category-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .category-card__img { aspect-ratio: 4/3; background: var(--color-neutral-100); overflow: hidden; } .category-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .category-card:hover .category-card__img img { transform: scale(1.03); } .category-card__body { padding: var(--space-4); } .category-card__name { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .category-card__count { font-size: var(--text-xs); color: var(--color-neutral-500); } .category-card__cta { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-accent); margin-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); } /* ========================================================================= 9. Product Cards ========================================================================= */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } .product-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .product-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .product-card__img { position: relative; aspect-ratio: 1; background: var(--color-neutral-100); overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-card__img img { width: 80%; height: 80%; object-fit: contain; } .product-card__badges { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); } .product-card__body { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; } .product-card__brand { font-size: var(--text-xs); color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-weight: var(--font-semibold); } .product-card__name { font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: var(--leading-snug); } .product-card__name a { color: var(--color-neutral-900); text-decoration: none; } .product-card__name a:hover { color: var(--color-primary); } .product-card__meta { font-size: var(--text-xs); color: var(--color-neutral-500); } .product-card__rating { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-star); } .product-card__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); } .product-card__price-current { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-neutral-900); } .product-card__price-old { font-size: var(--text-sm); color: var(--color-neutral-600); text-decoration: line-through; } .product-card__stock { font-size: var(--text-xs); font-weight: var(--font-semibold); display: inline-flex; align-items: center; gap: var(--space-1); } .product-card__stock--in { color: var(--color-success); } .product-card__stock--out { color: var(--color-error); } .product-card__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-neutral-100); margin-top: auto; } .product-card__atc { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 40px; background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; transition: background var(--transition-fast); text-decoration: none; } .product-card__atc:hover { background: var(--color-accent-hover); color: var(--color-white); } .product-card__atc svg { width: 16px; height: 16px; } .product-card__atc--secondary { background: var(--color-neutral-100); color: var(--color-neutral-700); } .product-card__atc--secondary:hover { background: var(--color-neutral-200); color: var(--color-neutral-800); } /* ========================================================================= 10. Value Tier Block ========================================================================= */ .value-tiers { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .value-tiers { grid-template-columns: repeat(3, 1fr); } } .tier-card { display: flex; flex-direction: column; padding: var(--space-6); background: var(--color-white); border: 2px solid var(--color-neutral-200); border-radius: var(--radius-lg); text-align: center; transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); text-decoration: none; color: var(--color-neutral-900); } .tier-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .tier-card--featured { border-color: var(--color-primary); position: relative; } .tier-card--featured::before { content: 'Recomandat'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--color-primary); color: var(--color-white); font-size: var(--text-xs); font-weight: var(--font-bold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); } .tier-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-neutral-500); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } .tier-card__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); } .tier-card__desc { font-size: var(--text-sm); color: var(--color-neutral-600); margin-bottom: var(--space-4); } .tier-card__price { font-size: var(--text-sm); color: var(--color-neutral-500); margin-bottom: var(--space-4); } .tier-card__price strong { font-size: var(--text-lg); color: var(--color-neutral-900); } /* ========================================================================= 11. Brand Strip ========================================================================= */ .brand-strip { padding-block: var(--space-6); border-top: 1px solid var(--color-neutral-200); } .brand-strip__title { text-align: center; font-size: var(--text-sm); color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); } .brand-strip__logos { display: flex; align-items: center; justify-content: center; gap: var(--space-8); flex-wrap: wrap; } .brand-strip__logo { height: 32px; opacity: 0.5; transition: opacity var(--transition-fast); filter: grayscale(1); } .brand-strip__logo:hover { opacity: 1; filter: grayscale(0); } /* ========================================================================= 12. FAQ Accordion ========================================================================= */ .faq-list { max-width: 800px; margin-inline: auto; } .faq-item { border-bottom: 1px solid var(--color-neutral-200); } .faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) 0; background: transparent; border: none; text-align: left; font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-neutral-900); cursor: pointer; } .faq-item__q:hover { color: var(--color-primary); } .faq-item__q svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--color-neutral-600); transition: transform var(--transition-base); } .faq-item[open] .faq-item__q svg { transform: rotate(180deg); } .faq-item__a { padding-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-neutral-600); line-height: var(--leading-base); } /* ========================================================================= 13. Content Blocks / Testimonials / Wizard Teaser ========================================================================= */ .content-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .content-cards { grid-template-columns: repeat(3, 1fr); } } .content-card { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--color-neutral-900); transition: all var(--transition-base); } .content-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary); } .content-card__img { aspect-ratio: 16/9; background: var(--color-neutral-100); overflow: hidden; display: block; } .content-card__img img { width: 100%; height: 100%; object-fit: cover; } .content-card__body { padding: var(--space-4); } .content-card__tag { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-2); } .content-card__title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } .content-card__excerpt { font-size: var(--text-sm); color: var(--color-neutral-600); } .testimonial { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); } .testimonial__stars { color: var(--color-star); font-size: var(--text-lg); margin-bottom: var(--space-3); } .testimonial__text { font-size: var(--text-base); color: var(--color-neutral-700); font-style: italic; margin-bottom: var(--space-4); line-height: var(--leading-base); } .testimonial__author { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-neutral-900); } .testimonial__role { font-size: var(--text-xs); color: var(--color-neutral-500); } .wizard-teaser { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-10); background: var(--color-primary-lighter); border-radius: var(--radius-xl); } @media (min-width: 768px) { .wizard-teaser { flex-direction: row; text-align: left; gap: var(--space-8); } } .wizard-teaser__content { flex: 1; } .wizard-teaser__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); } .wizard-teaser__desc { font-size: var(--text-base); color: var(--color-neutral-600); margin-bottom: var(--space-4); max-width: 50ch; } /* ========================================================================= 14. Footer ========================================================================= */ .site-footer { background: var(--color-neutral-800); color: var(--color-neutral-400); } .footer-top { padding-block: var(--space-12); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; } } .footer-col__title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); } .footer-col__links li { margin-bottom: var(--space-2); } .footer-col__links a { color: var(--color-neutral-400); font-size: var(--text-sm); text-decoration: none; transition: color var(--transition-fast); } .footer-col__links a:hover { color: var(--color-white); } .footer-brand__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-extrabold); color: var(--color-primary); margin-bottom: var(--space-2); } .footer-brand__desc { font-size: var(--text-sm); line-height: var(--leading-base); margin-bottom: var(--space-4); } .footer-newsletter { display: flex; gap: var(--space-2); } .footer-newsletter .input { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--color-white); } .footer-newsletter .input::placeholder { color: rgba(255,255,255,0.6); } .footer-newsletter .btn { flex-shrink: 0; } .footer-trust { padding-block: var(--space-6); border-top: 1px solid rgba(255,255,255,0.1); } .footer-trust__badges { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; } .footer-trust__badge { height: 28px; opacity: 0.6; } .footer-bottom { padding-block: var(--space-4); border-top: 1px solid rgba(255,255,255,0.1); } .footer-bottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-neutral-300); } /* ========================================================================= 15. PDP (Product Detail Page) ========================================================================= */ .pdp-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .pdp-hero { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } .pdp-gallery { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow: hidden; } .pdp-gallery__main { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); } .pdp-gallery__main img { max-width: 80%; max-height: 80%; object-fit: contain; } .pdp-gallery__thumbs { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-neutral-200); } .pdp-gallery__thumb { width: 64px; height: 64px; border: 2px solid var(--color-neutral-200); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; transition: border-color var(--transition-fast); } .pdp-gallery__thumb--active, .pdp-gallery__thumb:hover { border-color: var(--color-primary); } .pdp-summary { display: flex; flex-direction: column; gap: var(--space-4); } .pdp-summary__brand { font-size: var(--text-sm); color: var(--color-neutral-500); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--font-semibold); } .pdp-summary__title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); } @media (min-width: 768px) { .pdp-summary__title { font-size: var(--text-3xl); } } .pdp-summary__rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-600); } .pdp-summary__price { display: flex; align-items: baseline; gap: var(--space-3); } .pdp-summary__price-current { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--color-neutral-900); } .pdp-summary__price-old { font-size: var(--text-lg); color: var(--color-neutral-600); text-decoration: line-through; } .pdp-summary__price-per { font-size: var(--text-sm); color: var(--color-neutral-500); } .pdp-options { display: flex; flex-direction: column; gap: var(--space-3); } .pdp-option { display: flex; flex-direction: column; gap: var(--space-1\.5); } .pdp-option__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; } .pdp-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 40px; padding-inline: var(--space-3); border: 2px solid var(--color-neutral-200); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-neutral-700); cursor: pointer; transition: all var(--transition-fast); background: var(--color-white); } .pdp-chip:hover { border-color: var(--color-primary); } .pdp-chip--active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: var(--font-semibold); } .pdp-atc { display: flex; gap: var(--space-3); align-items: stretch; } .pdp-qty { width: 80px; text-align: center; } .pdp-atc-btn { flex: 1; } .btn--atc { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .btn--atc:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-white); } /* Stock status */ .pdp-stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-success, #16a34a); } .pdp-stock__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success, #16a34a); flex-shrink: 0; } .pdp-stock--out { color: var(--color-neutral-600); } .pdp-stock--out .pdp-stock__dot { background: var(--color-neutral-600); } /* Sale badge */ .pdp-sale-badge { display: inline-flex; align-items: center; height: 24px; padding-inline: var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-bold); background: var(--color-sale-bg, #fef2f2); color: var(--color-sale-text, #dc2626); } /* Price meta (per-piece + pack size) */ .pdp-price-meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .pdp-price-meta__item { font-size: var(--text-sm); color: var(--color-neutral-500); } .pdp-price-meta__item strong { color: var(--color-neutral-700); } /* Option labels */ .pdp-option__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-neutral-700); } .pdp-option__sublabel { font-size: var(--text-xs); color: var(--color-neutral-600); } /* Rating stars */ .pdp-stars { color: var(--color-star, #f59e0b); letter-spacing: 1px; } /* Price inside summary — override WC default price styling */ .pdp-summary .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; } /* Reassurance box */ .pdp-reassurance { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-primary-lighter, #f0fafa); border-radius: var(--radius-lg); } .pdp-reassurance__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-700); } .pdp-reassurance__item svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; } /* PDP section dividers */ .pdp-section { padding-block: var(--space-8); } .pdp-section + .pdp-section { border-top: 1px solid var(--color-neutral-200); } .pdp-section__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-4); } /* PDP benefits row */ .pdp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-block: var(--space-8); border-top: 1px solid var(--color-neutral-200); } @media (min-width: 768px) { .pdp-benefits { grid-template-columns: repeat(4, 1fr); } } .pdp-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4); } .pdp-benefit__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); border-radius: var(--radius-lg); color: var(--color-primary); } .pdp-benefit__icon svg { width: 24px; height: 24px; } .pdp-benefit__title { font-size: var(--text-sm); font-weight: var(--font-semibold); } .pdp-benefit__desc { font-size: var(--text-xs); color: var(--color-neutral-500); } /* PDP sizing guide */ .sizing-guide { overflow-x: auto; } .sizing-guide table { width: 100%; border-collapse: collapse; text-align: center; } .sizing-guide th, .sizing-guide td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-200); font-size: var(--text-sm); } .sizing-guide th { background: var(--color-primary); color: white; font-weight: var(--font-semibold); } .sizing-guide td { background: var(--color-white); } .sizing-guide tr.active td { background: var(--color-primary-lighter, #f0fafa); font-weight: var(--font-semibold); color: var(--color-primary-dark); } /* PDP specs table */ .specs-table { width: 100%; border-collapse: collapse; } .specs-table tr { border-bottom: 1px solid var(--color-neutral-100); } .specs-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-neutral-500); width: 40%; background: var(--color-neutral-50); } .specs-table td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } /* PDP delivery/return info */ .delivery-info { background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); } .delivery-info h3, .delivery-info__heading { font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-4); } .delivery-info__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .delivery-info__grid { grid-template-columns: 1fr 1fr; } } .delivery-info__item { display: flex; gap: var(--space-3); } .delivery-info__item svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; } .delivery-info__item h4 { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .delivery-info__item p { font-size: var(--text-xs); color: var(--color-neutral-600); } .delivery-info__icon { display: none; } /* Hide old icon wrapper in favor of inline SVG */ /* Complementary products section */ .complementary-section { padding-block: var(--space-8); border-top: 1px solid var(--color-neutral-200); } .complementary-section .section__header { margin-bottom: var(--space-6); } /* WooCommerce gallery overrides for PDP */ .pdp-gallery .woocommerce-product-gallery { opacity: 1 !important; max-width: 100%; } .pdp-gallery .woocommerce-product-gallery__wrapper { display: flex; align-items: center; justify-content: center; } .pdp-gallery .woocommerce-product-gallery__image a { display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .pdp-gallery .woocommerce-product-gallery__image img { max-width: 100%; height: auto; object-fit: contain; } /* Hide WC default related products section (replaced by complementary-products component) */ .site-main--product .related.products { display: none; } /* Hide WC default stock text (replaced by custom pdp-stock) */ .pdp-summary .stock { display: none; } /* ATC form inside PDP summary: remove default form spacing */ .pdp-summary .cart { display: contents; } /* ATC button full width with icon */ .pdp-atc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); } .pdp-atc-btn svg { flex-shrink: 0; } /* QTY input styling */ .pdp-qty, .pdp-summary .quantity input[type="number"] { width: 80px; text-align: center; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-base); } /* PDP description content styling */ .pdp-summary .woocommerce-product-details__short-description { font-size: var(--text-sm); color: var(--color-neutral-600); line-height: var(--leading-base); } /* PDP sticky CTA (functional enhancement, not in prototype; hidden by default) */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--color-white); border-top: 1px solid var(--color-neutral-200); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); transform: translateY(100%); transition: transform var(--transition-base); } .sticky-cta[hidden] { display: none; } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); } .sticky-cta .btn--atc { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius-md); font-weight: var(--font-semibold); text-decoration: none; white-space: nowrap; } .sticky-cta .btn--atc:hover { background: var(--color-accent-dark, var(--color-accent)); } /* ========================================================================= 16. Breadcrumbs ========================================================================= */ .breadcrumbs { padding-block: var(--space-3); font-size: var(--text-sm); color: var(--color-neutral-500); } .breadcrumbs a { color: var(--color-neutral-500); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-primary); } .breadcrumbs__sep { margin-inline: var(--space-1); } /* Plugin-emitted breadcrumb markup (.flavor-breadcrumbs__*) */ .flavor-breadcrumbs { font-size: var(--text-sm); color: var(--color-neutral-500); } .flavor-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .flavor-breadcrumbs__item { display: inline-flex; align-items: center; margin: 0; padding: 0; } .flavor-breadcrumbs__item a { color: var(--color-neutral-500); text-decoration: none; } .flavor-breadcrumbs__item a:hover { color: var(--color-primary); text-decoration: underline; } .flavor-breadcrumbs__item [aria-current="page"] { color: var(--color-text, #222); font-weight: var(--font-medium, 500); } .flavor-breadcrumbs__separator { color: var(--color-neutral-400, #bbb); user-select: none; } /* Subcategory cards grid (parent category pages) */ .category-children { padding: var(--space-4) 0 var(--space-6); } .category-children__title { font-family: var(--font-heading, inherit); font-size: var(--text-lg, 1.125rem); font-weight: 700; margin: 0 0 var(--space-4); color: var(--color-text, #222); } .category-children__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } @media (min-width: 640px) { .category-children__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 960px) { .category-children__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 1280px) { .category-children__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .category-children__item { margin: 0; } .category-card { display: flex; flex-direction: column; background: var(--color-white, #fff); border: 1px solid var(--color-neutral-200, #e8ecef); border-radius: var(--radius-md, 10px); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; height: 100%; } .category-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: var(--color-primary); } .category-card__img { aspect-ratio: 4/3; background: var(--color-neutral-100, #f5f7fa); overflow: hidden; display: flex; align-items: center; justify-content: center; } .category-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .category-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f5f7fa, #e8ecef); } .category-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; } .category-card__name { font-size: var(--text-sm, .9rem); font-weight: 600; color: var(--color-text, #222); line-height: 1.3; } .category-card__count { font-size: 11px; color: var(--color-neutral-500, #8a8a8a); } /* ========================================================================= 17. Filter Panel / Toolbar ========================================================================= */ /* PLP page section padding — mirrors design-prototype/category.html */ .plp-section { padding-block: var(--space-8); } .plp-layout { display: flex; gap: var(--space-6); } .plp-main { flex: 1; min-width: 0; } /* Category intro block (title + description) */ .category-intro { margin-bottom: var(--space-4); } .category-intro h1 { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); } .category-intro p { font-size: var(--text-base); color: var(--color-neutral-600); max-width: 70ch; margin: 0; } .category-intro__hero { aspect-ratio: 3; overflow: hidden; border-radius: var(--radius-lg); margin-bottom: var(--space-4); } .category-intro__hero img { width: 100%; height: 100%; object-fit: cover; } .toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--color-neutral-200); margin-bottom: var(--space-4); flex-wrap: wrap; } .toolbar__count { font-size: var(--text-sm); color: var(--color-neutral-500); } .toolbar__right { display: flex; align-items: center; gap: var(--space-3); } .toolbar__sort { display: flex; align-items: center; gap: var(--space-2); } .toolbar__sort label { margin: 0; white-space: nowrap; font-size: var(--text-sm); } .toolbar__sort select, .toolbar__sort .select { height: 40px; font-size: var(--text-sm); width: auto; } .toolbar__filter-btn { display: flex; } @media (min-width: 1024px) { .toolbar__filter-btn { display: none; } } .filter-sidebar { display: none; flex-direction: column; gap: var(--space-4); width: 260px; flex-shrink: 0; } @media (min-width: 1024px) { .filter-sidebar { display: flex; } } .filter-sidebar__filters { display: flex; flex-direction: column; gap: var(--space-4); } .filter-group { border-bottom: 1px solid var(--color-neutral-200); padding-bottom: var(--space-4); } .filter-group__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-neutral-900); margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.03em; } .filter-group__options { display: flex; flex-direction: column; gap: var(--space-2); } .filter-group__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); } .filter-item { margin: 0; } .filter-link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-700); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .filter-link:hover { background: var(--color-neutral-100); color: var(--color-neutral-900); } .filter-checkbox { width: 16px; height: 16px; border: 2px solid var(--color-neutral-300); border-radius: 3px; flex-shrink: 0; background: var(--color-white); position: relative; } .filter-item.is-active .filter-checkbox { background: var(--color-primary); border-color: var(--color-primary); } .filter-item.is-active .filter-checkbox::after { content: ''; position: absolute; inset: 2px; border-right: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); transform: rotate(45deg) translate(-1px, -1px); width: 5px; height: 9px; } .filter-item.is-active .filter-link { color: var(--color-primary-dark); font-weight: var(--font-semibold); } .filter-label { flex: 1; } .filter-count { color: var(--color-neutral-600); font-size: var(--text-xs); } .filter-clear-wrap { padding-top: var(--space-2); } .filter-clear { color: var(--color-primary); font-size: var(--text-sm); text-decoration: underline; } .filter-option { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-700); cursor: pointer; } .filter-option__count { color: var(--color-neutral-600); font-size: var(--text-xs); } .active-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-bottom: var(--space-3); } .active-filters:empty { display: none; } .active-filters__label { font-size: var(--text-xs); color: var(--color-neutral-500); font-weight: var(--font-semibold); } .active-filter { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--color-primary-light); color: var(--color-primary-dark); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); } .active-filter__remove { background: none; border: none; color: var(--color-primary); cursor: pointer; font-size: var(--text-sm); line-height: 1; } .active-filters__clear { font-size: var(--text-xs); color: var(--color-neutral-500); text-decoration: underline; white-space: nowrap; background: none; border: none; cursor: pointer; padding: 0; } .active-filters__clear:hover { color: var(--color-error); } /* Filter option (checkbox row) */ .filter-option input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; } .filter-option label { display: flex; align-items: center; gap: var(--space-2); width: 100%; cursor: pointer; font-size: var(--text-sm); color: var(--color-neutral-700); } .filter-option label:hover { color: var(--color-primary); } /* Filter price range */ .filter-range { display: flex; flex-direction: column; gap: var(--space-2); } .filter-range__values { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-neutral-500); } .filter-range input[type="range"] { width: 100%; accent-color: var(--color-primary); } .plp-active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .plp-active-filter { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); background: var(--color-primary-light); color: var(--color-primary-dark); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); text-decoration: none; transition: background var(--transition-fast); } .plp-active-filter:hover { background: var(--color-primary); color: var(--color-white); } .plp-active-filter__x { font-size: var(--text-base); line-height: 1; } /* PDP family-variant chips as links */ a.pdp-chip { text-decoration: none; color: var(--color-neutral-700); } a.pdp-chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); } .pdp-option__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1\.5); } /* PLP product grid — narrower due to sidebar */ .plp-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; } @media (min-width: 768px) { .plp-product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .plp-product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .plp-product-grid { grid-template-columns: repeat(4, 1fr); } } /* Equalize card heights across the row regardless of title length, price variants, badges, or stock status. Grid rows already stretch items; we make each grid-item wrapper a flex container so the inner .product-card fills its full box, and the card's own flex column layout (flex:1 on __body, margin-top:auto on __footer) then pushes the Add-to-Cart button to the same baseline on every card in the row. */ .plp-product-grid > [role="listitem"], .plp-product-grid > li.product, .plp-product-grid > .product { display: flex; } .plp-product-grid > [role="listitem"] > .product-card, .plp-product-grid > li.product > .product-card, .plp-product-grid > .product > .product-card { flex: 1 1 auto; width: 100%; min-width: 0; } .plp-product-grid .product-card__name { min-height: calc(var(--text-sm) * var(--leading-snug) * 2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Category guide teaser (inside .plp-main) */ .category-guide { background: var(--color-primary-lighter); border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-8); } .category-guide h3 { font-family: var(--font-heading); font-size: var(--text-xl); margin-bottom: var(--space-2); } .category-guide p { font-size: var(--text-sm); color: var(--color-neutral-600); margin-bottom: var(--space-4); max-width: 60ch; } /* SEO body copy (inside .plp-main) */ .seo-body { padding-block: var(--space-6); border-top: 1px solid var(--color-neutral-200); margin-top: var(--space-8); } .seo-body h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); } .seo-body p { font-size: var(--text-sm); color: var(--color-neutral-600); line-height: var(--leading-base); max-width: 70ch; margin-bottom: var(--space-3); } .seo-body p + p { margin-top: var(--space-3); } /* Category FAQ (inside .plp-main) */ .category-faq { padding-block: var(--space-6); border-top: 1px solid var(--color-neutral-200); margin-top: var(--space-4); } .category-faq h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); } /* ========================================================================= 18. Cart (mirrors design-prototype/cart.html 1:1) ========================================================================= */ .cart-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 1024px) { .cart-layout { grid-template-columns: 1fr 380px; } } .cart-items { display: flex; flex-direction: column; gap: var(--space-4); } /* 3-column row: image (fixed) | info (fluid, can shrink to 0) | actions (hard-capped). The actions column MUST have an explicit width — WooCommerce's own woocommerce_quantity_input() outputs
with no width constraint and WC frontend CSS can expand it to fill the available track, which otherwise pushes the info column to 0px. */ .cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) 200px; gap: var(--space-4); padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); align-items: center; } .cart-item__img { width: 96px; height: 96px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-100); display: flex; align-items: center; justify-content: center; } .cart-item__img img { width: 100%; height: 100%; object-fit: contain; } .cart-item__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .cart-item__brand { font-size: var(--text-xs); color: var(--color-neutral-600); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--font-semibold); } .cart-item__name { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-neutral-900); } .cart-item__name a { color: inherit; text-decoration: none; } .cart-item__name a:hover { color: var(--color-primary); } .cart-item__meta { font-size: var(--text-xs); color: var(--color-neutral-500); margin: 0; } .cart-item__remove { font-size: var(--text-xs); color: var(--color-neutral-600); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; align-self: flex-start; transition: color var(--transition-fast); } .cart-item__remove:hover { color: var(--color-error); } .cart-item__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); width: 100%; } .cart-item__actions .cart-item__price, .cart-item__actions .cart-item__unit { text-align: right; } .cart-item__actions .quantity { width: auto; max-width: 140px; } .cart-item__actions .quantity input.qty, .cart-item__actions .quantity input[type="number"] { width: 56px; max-width: 56px; min-width: 0; } .cart-item__price { font-weight: var(--font-bold); font-size: var(--text-lg); color: var(--color-neutral-900); white-space: nowrap; } .cart-item__unit { font-size: var(--text-xs); color: var(--color-neutral-600); white-space: nowrap; } .cart-item__qty { display: flex; align-items: center; gap: var(--space-1); } .cart-item__qty > .quantity { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; } .cart-item__qty button, .cart-item__qty .minus, .cart-item__qty .plus, .cart-item__qty .flavor-qty-minus, .cart-item__qty .flavor-qty-plus, .flavor-qty-minus, .flavor-qty-plus { width: 36px; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-white); cursor: pointer; font-size: 18px; font-weight: 600; color: var(--color-neutral-800); line-height: 1; padding: 0; user-select: none; transition: all 0.15s ease; flex-shrink: 0; } .cart-item__qty button:hover, .flavor-qty-minus:hover, .flavor-qty-plus:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-lighter, #eef5ff); } .cart-item__qty button:active, .flavor-qty-minus:active, .flavor-qty-plus:active { transform: scale(0.95); } .cart-item__qty input, .cart-item__qty .qty, .cart-item__qty input[type="number"], .woocommerce-cart-form input[type="number"], input.qty[type="number"], input.qty { width: 48px; height: 36px; text-align: center; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-neutral-900); -moz-appearance: textfield !important; appearance: textfield !important; padding: 0; } /* GLOBAL: ascunde săgețile native din TOATE input-urile de cantitate (+/- custom e universal). Selectori multiple pentru compat Webkit, Firefox, Edge. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button, .qty::-webkit-outer-spin-button, .qty::-webkit-inner-spin-button, .cart-item__qty input[type="number"]::-webkit-outer-spin-button, .cart-item__qty input[type="number"]::-webkit-inner-spin-button, .cart-item__qty input::-webkit-outer-spin-button, .cart-item__qty input::-webkit-inner-spin-button, .cart-item__qty .qty::-webkit-outer-spin-button, .cart-item__qty .qty::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; width: 0 !important; height: 0 !important; } .cart-item__qty input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } /* Loading state (AJAX în curs) — feedback vizual instant */ .cart-item__qty.is-updating { opacity: 0.6; pointer-events: none; } .cart-item__qty.is-updating input { background: #f5f5f5; } /* Subtotal / summary zones în tranziție AJAX */ .cart-summary.is-updating, .cart-item__price.is-updating { opacity: 0.6; transition: opacity 0.15s ease; } /* Tablet reflow: narrower actions column so info still fits comfortably. */ @media (max-width: 900px) { .cart-item { grid-template-columns: 80px minmax(0, 1fr) 160px; gap: var(--space-3); padding: var(--space-3); } .cart-item__img { width: 80px; height: 80px; } } /* Mobile reflow: image + info on first row, actions on second full-width row. */ @media (max-width: 600px) { .cart-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); } .cart-item__img { width: 72px; height: 72px; } .cart-item__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; max-width: none; } } .cart-shipping-bar { background: var(--color-primary-lighter); border-radius: var(--radius-lg); padding: var(--space-4); } .cart-shipping-bar__text { font-size: var(--text-sm); color: var(--color-neutral-700); margin-bottom: var(--space-2); text-align: center; } .cart-shipping-bar__progress { height: 6px; background: var(--color-neutral-200); border-radius: var(--radius-full); overflow: hidden; } .cart-shipping-bar__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width var(--transition-slow); } /* Cart actions row (coupon + update cart) */ .cart-actions-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-4); } .cart-actions-row .coupon { display: flex; gap: var(--space-2); align-items: center; } .cart-actions-row .coupon .input { width: 200px; height: 40px; } .cart-summary { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 160px; } .cart-summary__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-4); } .cart-summary__row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-2); font-size: var(--text-sm); color: var(--color-neutral-600); } .cart-summary__row--total { border-top: 2px solid var(--color-neutral-800); padding-top: var(--space-3); margin-top: var(--space-2); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-neutral-900); } /* Cart summary: trust notes + payment icons */ .cart-trust-note { font-size: var(--text-xs); color: var(--color-neutral-500); text-align: center; margin-top: var(--space-3); display: flex; align-items: center; justify-content: center; gap: var(--space-1); } .cart-trust-note svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; } .cart-summary__payments { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-100); } .cart-summary__payments-label { font-size: var(--text-xs); color: var(--color-neutral-500); margin-bottom: var(--space-2); } .cart-summary__payments-list { display: flex; gap: var(--space-2); flex-wrap: wrap; } .cart-summary__payment { width: 52px; height: 32px; border-radius: 4px; background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-200)); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-500); font-size: 10px; font-weight: var(--font-semibold); } /* Cross-sell below cart items */ .cart-page-crosssell { padding-block: var(--space-10); border-top: 1px solid var(--color-neutral-200); margin-top: var(--space-8); } .cart-page-crosssell__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-6); } .cart-page-crosssell__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .cart-page-crosssell__grid { grid-template-columns: repeat(3, 1fr); } } /* Cart page title ("Cosul tau") */ .cart-page-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-6); color: var(--color-neutral-900); } .cart-page-title__count { font-size: var(--text-lg); font-weight: var(--font-normal); color: var(--color-neutral-500); } /* ========================================================================= 19. Account ========================================================================= */ .account-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .account-layout { grid-template-columns: 240px 1fr; } } .account-nav { display: flex; flex-direction: column; gap: var(--space-1); } .account-nav a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-neutral-700); text-decoration: none; transition: all var(--transition-fast); } .account-nav a:hover { background: var(--color-primary-light); color: var(--color-primary); } .account-nav a.active { background: var(--color-primary); color: var(--color-white); } .account-nav svg { width: 18px; height: 18px; } .account-panel { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); } .account-panel__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-4); } .orders-table { width: 100%; border-collapse: collapse; } .orders-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-neutral-500); border-bottom: 2px solid var(--color-neutral-200); } .orders-table td { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-bottom: 1px solid var(--color-neutral-100); } .orders-table tr:hover td { background: var(--color-neutral-50); } .order-status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); } .order-status--processing { background: var(--color-warning-light); color: var(--color-warning); } .order-status--completed { background: var(--color-success-light); color: var(--color-success); } .order-status--shipped { background: var(--color-info-light); color: var(--color-info); } .reorder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (min-width: 768px) { .reorder-grid { grid-template-columns: repeat(3, 1fr); } } .reorder-card { display: flex; gap: var(--space-3); padding: var(--space-3); background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); } .reorder-card__img { width: 60px; height: 60px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-neutral-100); flex-shrink: 0; } .reorder-card__img img { width: 100%; height: 100%; object-fit: contain; } .reorder-card__info { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; } .reorder-card__name { font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reorder-card__price { font-size: var(--text-sm); font-weight: var(--font-bold); } .doc-list { display: flex; flex-direction: column; gap: var(--space-3); } .doc-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-neutral-50); border-radius: var(--radius-md); } .doc-item__info { display: flex; align-items: center; gap: var(--space-3); } .doc-item__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light); border-radius: var(--radius-md); color: var(--color-primary); } .doc-item__icon svg { width: 18px; height: 18px; } .doc-item__name { font-size: var(--text-sm); font-weight: var(--font-semibold); } .doc-item__date { font-size: var(--text-xs); color: var(--color-neutral-500); } /* Stat cards — legacy .stat-cards wrapper kept for compatibility */ .stat-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); } @media (max-width: 767px) { .stat-cards { grid-template-columns: 1fr; } } .stat-card { background: var(--color-primary-lighter); padding: var(--space-4); border-radius: var(--radius-lg); text-align: center; } .stat-card__value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); } .stat-card__label { font-size: var(--text-xs); color: var(--color-neutral-600); margin-top: var(--space-1); } .stat-card--accent { background: var(--color-accent-lighter, #fdf1ea); } .stat-card--accent .stat-card__value { color: var(--color-accent); } /* Account dashboard — prototype 1:1 classes */ .account-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-neutral-200); } .account-welcome__greeting { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-1); } .account-welcome__last-order { font-size: var(--text-sm); color: var(--color-neutral-500); } .account-welcome__last-order a { color: var(--color-primary); text-decoration: none; } .account-welcome__last-order a:hover { text-decoration: underline; } .account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-8); } @media (max-width: 600px) { .account-stats { grid-template-columns: 1fr 1fr; } } .panel-section { margin-bottom: var(--space-8); } .panel-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .panel-section__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); } .panel-section__link { font-size: var(--text-sm); color: var(--color-primary); text-decoration: none; } .panel-section__link:hover { color: var(--color-primary-hover, var(--color-primary)); text-decoration: underline; } /* Account nav section label + divider + logout variant */ .account-nav__section { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-neutral-600); padding: var(--space-3) var(--space-4) var(--space-1); display: block; } .account-nav__divider { height: 1px; background: var(--color-neutral-200); margin: var(--space-2) var(--space-4); } .account-nav a.logout { color: var(--color-error); } .account-nav a.logout:hover { background: var(--color-error-light, rgba(220,38,38,0.08)); color: var(--color-error); } /* Mobile: stack account layout nav on top as a horizontal strip */ @media (max-width: 767px) { .account-layout { gap: var(--space-4); } .account-nav { flex-direction: row; flex-wrap: wrap; background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-2); } .account-nav a { flex: 1 0 auto; text-align: center; justify-content: center; font-size: var(--text-xs); padding: var(--space-2) var(--space-3); } .account-nav__section, .account-nav__divider { display: none; } } /* Orders table responsive wrapper */ .orders-table-wrap { overflow-x: auto; } /* Reorder card quick-add button */ .reorder-card__add { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-primary); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; } .reorder-card__add:hover { color: var(--color-primary-hover, var(--color-primary)); text-decoration: underline; } .reorder-card__add svg { width: 14px; height: 14px; } /* Doc download link */ .doc-item__download { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); text-decoration: none; white-space: nowrap; } .doc-item__download:hover { color: var(--color-primary-hover, var(--color-primary)); text-decoration: underline; } .doc-item__download svg { width: 16px; height: 16px; } /* Logged-out account: login + register cards */ .account-auth { max-width: 980px; margin: 0 auto; padding-block: var(--space-6); } .account-auth__intro { text-align: center; margin-bottom: var(--space-6); } .account-auth__heading { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 0 0 var(--space-2); color: var(--color-neutral-900); } .account-auth__lead { font-size: var(--text-sm); color: var(--color-neutral-600); max-width: 60ch; margin: 0 auto; line-height: 1.55; } .account-auth__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .account-auth__grid--two { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .account-auth__grid--one { max-width: 460px; margin: 0 auto; } .account-auth__card { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: var(--space-3); } .account-auth__card--register { background: var(--color-primary-lighter, #f0f7fa); border-color: var(--color-primary-light, #b8dde8); } .account-auth__card-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-neutral-900); margin: 0 0 var(--space-2); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-primary); display: inline-block; align-self: flex-start; } .account-auth__card .form-row, .account-auth__card .form-group { margin-bottom: var(--space-3); } .account-auth__card .input, .account-auth__card .woocommerce-Input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--color-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .account-auth__card .input:focus, .account-auth__card .woocommerce-Input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-lighter, rgba(30,144,170,.15)); } .account-auth__card .label { display: block; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-neutral-700); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; } .account-auth__actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .account-auth__actions .btn { min-width: 160px; } .account-auth__card .woocommerce-form-login__rememberme { font-size: var(--text-xs); color: var(--color-neutral-600); display: inline-flex; align-items: center; gap: 6px; margin: 0; } .account-auth__card .woocommerce-form-login__rememberme input { accent-color: var(--color-primary); } .account-auth__card .lost_password { margin: 0; font-size: var(--text-xs); } .account-auth__card .lost_password a { color: var(--color-primary); text-decoration: none; } .account-auth__card .lost_password a:hover { text-decoration: underline; } .account-auth__hint { font-size: var(--text-xs); color: var(--color-neutral-600); background: var(--color-white); border: 1px dashed var(--color-neutral-300); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); } .account-auth .woocommerce-privacy-policy-text { font-size: 11px; color: var(--color-neutral-500); } .account-auth .woocommerce-privacy-policy-text a { color: var(--color-primary); } /* Hide default Woo unstyled column wrappers if they still appear */ .woocommerce .u-columns.col2-set { display: block; } .woocommerce .u-columns.col2-set .u-column1, .woocommerce .u-columns.col2-set .u-column2 { width: 100%; float: none; } /* ========================================================================= 20. Checkout ========================================================================= */ /* ───────────────────────────────────────────────────────────── Simplified checkout header (used only on /finalizare/). 1:1 with design-prototype/checkout.html (.checkout-header block). ───────────────────────────────────────────────────────────── */ .checkout-header { background: var(--color-white); border-bottom: 1px solid var(--color-neutral-200); padding-block: var(--space-4); } .checkout-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .checkout-header__back { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-neutral-500); text-decoration: none; transition: color var(--transition-fast); } .checkout-header__back:hover { color: var(--color-primary); } .checkout-header__back svg { width: 16px; height: 16px; } .checkout-steps { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); } .checkout-steps__step { color: var(--color-neutral-600); } .checkout-steps__step a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } .checkout-steps__step a:hover { color: var(--color-primary); } .checkout-steps__step--active { color: var(--color-neutral-900); font-weight: var(--font-semibold); } .checkout-steps__sep { color: var(--color-neutral-300); } @media (max-width: 767px) { .checkout-header__back span { display: none; } .checkout-header .header-brand__tagline { display: none; } .checkout-header__inner { gap: var(--space-2); } } /* Checkout container + page title — matches prototype h1 inline styles */ .site-main--checkout { background: var(--color-neutral-50); min-height: calc(100vh - 64px); padding-bottom: var(--space-8); } .site-main--checkout .checkout-container { padding-top: var(--space-6); } .site-main--checkout h1.page-title, .site-main--checkout .entry-title, .woocommerce-checkout main h1.page-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--font-bold); margin: 0 0 var(--space-6); color: var(--color-neutral-900); } .checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 1024px) { .checkout-layout { grid-template-columns: 1fr 400px; } } .checkout-details { display: flex; flex-direction: column; gap: var(--space-6); } .checkout-section { background: var(--color-white); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); padding: var(--space-6); } .checkout-section__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); } .checkout-section__title .step-number { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-bold); } .form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; } .form-row:last-child { margin-bottom: 0; } /* Kill WooCommerce core's clearfix pseudo-elements on .form-row — they become grid items and occupy cells, pushing real fields off-row. */ .woocommerce-checkout form.checkout .form-row::before, .woocommerce-checkout form.checkout .form-row::after, .woocommerce form .form-row::before, .woocommerce form .form-row::after { content: none !important; display: none !important; } .form-row--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 560px) { .form-row--2col { grid-template-columns: 1fr; } } .form-group { display: flex; flex-direction: column; gap: var(--space-1\.5); min-width: 0; } .form-group > .input, .form-group > .select { width: 100%; } .checkout-trust { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-primary-lighter); border-radius: var(--radius-lg); } .checkout-trust__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-neutral-700); line-height: 1.35; } .checkout-trust__item svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; } /* Billing type toggle (PF / PJ) */ .billing-type-toggle { display: inline-flex; border: 2px solid var(--color-primary); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); } .billing-type-toggle input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .billing-type-toggle label { display: flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; background: var(--color-white); color: var(--color-primary); transition: background var(--transition-fast), color var(--transition-fast); user-select: none; line-height: 1.4; } .billing-type-toggle label + label { border-left: 2px solid var(--color-primary); } .billing-type-toggle input[type="radio"]:checked + label { background: var(--color-primary); color: var(--color-white); } /* ───────────────────────────────────────────────────────────── Checkout — prototype fidelity (1:1 with design-prototype/checkout.html) Template renders prototype markup directly (.input, .label, .form-row, .form-group). No WC output adaptation needed. ───────────────────────────────────────────────────────────── */ /* Section container spacing + left-column flow */ .woocommerce-checkout .checkout-sections { display: flex; flex-direction: column; gap: var(--space-4); } /* Prototype PF/PJ visibility (JS also toggles inline) */ .woocommerce-checkout .billing-pj { display: none; } /* Prototype shipping-fields visibility (JS also toggles inline) */ .woocommerce-checkout .shipping-fields { display: none; margin-top: var(--space-4); } /* Inputs + selects inside the prototype form pick up .input from base styles. Ensure native