/*
Theme Name: Valpet
Theme URI: https://valpet-wp-site.elastoffice.net
Description: Prezentare SC Valpet SA — producător de prefabricate din beton vibropresat și agregate minerale.
Author: Elastoffice
Author URI: https://elastoffice.net
Template: storefront
Version: 1.2.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valpet
*/

/* ============================================
   Valpet — Color Palette
   ============================================ */
:root {
    /* Primary — Construction amber/gold */
    --vp-primary: #D4A017;
    --vp-primary-dark: #B8860B;
    --vp-primary-light: #E8BE4A;

    /* Secondary — Industrial dark blue */
    --vp-secondary: #2C3E50;
    --vp-secondary-light: #34495E;

    /* Neutrals */
    --vp-obsidian: #1A1A2E;
    --vp-slate: #334155;
    --vp-text-secondary: #6B7280;
    --vp-text-light: #94a3b8;
    --vp-pearl: #F5F5F0;
    --vp-silver: #E5E7EB;
    --vp-bg-tertiary: #f1f5f9;

    /* Semantic */
    --vp-success: #27AE60;
    --vp-warning: #f59e0b;
    --vp-error: #ef4444;

    /* Effects */
    --vp-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --vp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --vp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --vp-radius: 8px;
    --vp-radius-lg: 12px;
    --vp-transition: all 0.3s ease;
}

/* ============================================
   Base Typography
   ============================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--vp-obsidian);
    background-color: #ffffff;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--vp-obsidian);
    line-height: 1.2;
}

a {
    color: var(--vp-primary-dark);
    transition: var(--vp-transition);
}

a:hover {
    color: var(--vp-primary);
}

/* ============================================
   Header & Navigation
   ============================================ */
.site-header {
    background-color: var(--vp-secondary);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    /* Storefront adds ~2.6em top padding here, leaving a tall empty gap
       above the logo. Tighten it for a balanced, compact header. */
    padding-top: 1rem;
    /* Remove Storefront's header bottom margin so the full-width hero /
       slider sits flush under the menu on every page. */
    margin-bottom: 0 !important;
}

.site-branding {
    padding: 0.4rem 0;
    text-align: left;
}

/* Logo sizing — compact in header, on a clean white chip so the
   main-site wordmark reads well against the dark header. */
.site-branding img,
.custom-logo {
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
}

.site-header .custom-logo-link {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    max-width: max-content;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    transition: var(--vp-transition);
}

.custom-logo-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.site-branding h1.site-title a,
.site-branding p.site-title a,
.site-branding .site-title a {
    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    transition: var(--vp-transition);
}

.site-branding .site-title a:hover {
    color: var(--vp-primary);
}

.site-branding .site-description {
    color: var(--vp-text-light);
    font-size: 0.75rem;
}

/* Navigation */
.main-navigation {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--vp-secondary);
}

/* Horizontal nav bar — desktop/tablet only.
   On mobile the menu is the collapsible toggle list, so keep it block-flow. */
@media (min-width: 768px) {
    /* The header cart is hidden, so let the menu use the full row width
       instead of the ~74% slice Storefront reserves beside the (absent) cart.
       Matches Storefront's own selector specificity to override it. */
    .woocommerce-active .site-header .main-navigation,
    .storefront-primary-navigation .main-navigation,
    .main-navigation {
        width: 100%;
        float: none;
        clear: both;
        margin-right: 0;
    }

    .main-navigation ul.menu,
    .main-navigation ul.nav-menu {
        display: flex;
        flex-wrap: wrap;            /* if space is tight, whole items wrap — never mid-label */
        justify-content: center;
        align-items: center;
        gap: 0;
    }
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 0.7rem 0.95rem;
    transition: var(--vp-transition);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;            /* a label never breaks across lines */
    position: relative;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
}

/* Active item — highlight the current page AND its parent when on a child
   page. The centred amber bar is drawn as a background gradient so the
   ::after pseudo stays free for the dropdown caret below. */
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-parent > a,
.main-navigation ul.menu > li.current-menu-ancestor > a,
.main-navigation ul.nav-menu > li.current-menu-item > a,
.main-navigation ul.nav-menu > li.current-menu-parent > a,
.main-navigation ul.nav-menu > li.current-menu-ancestor > a {
    color: #ffffff;
    background-image: linear-gradient(var(--vp-primary), var(--vp-primary));
    background-size: 30px 3px;
    background-position: bottom center;
    background-repeat: no-repeat;
}

/* Caret on items that have a submenu */
@media (min-width: 768px) {
    .main-navigation ul.menu > li.menu-item-has-children > a {
        padding-right: 1.6rem;
    }
    .main-navigation ul.menu > li.menu-item-has-children > a::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0.7rem;
        width: 0;
        height: 0;
        margin-top: -2px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid rgba(255, 255, 255, 0.6);
        transition: var(--vp-transition);
    }
    .main-navigation ul.menu > li.menu-item-has-children:hover > a::after,
    .main-navigation ul.menu > li.menu-item-has-children.focus > a::after {
        border-top-color: var(--vp-primary);
    }
}

/* Dropdown menus.
   The background selector matches Storefront's Customizer inline rule
   (.main-navigation ul.menu ul.sub-menu) specificity so our dark colour
   wins — otherwise the submenu paints light grey and white text vanishes. */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul {
    border: none;
    border-top: 3px solid var(--vp-primary);
    border-radius: 0 0 var(--vp-radius) var(--vp-radius);
    box-shadow: var(--vp-shadow-lg);
    padding: 0.4rem 0;
    min-width: 220px;
}

.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.menu ul.children,
.main-navigation ul.nav-menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
    background-color: var(--vp-secondary-light);
}

.main-navigation ul.menu ul li,
.main-navigation ul.nav-menu ul li {
    width: 100%;
}

.main-navigation ul.menu ul a,
.main-navigation ul.nav-menu ul a {
    color: rgba(255, 255, 255, 0.85);
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
    width: auto;             /* override Storefront's fixed 200px */
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.main-navigation ul.menu ul a:hover,
.main-navigation ul.nav-menu ul a:hover {
    color: var(--vp-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Mobile (handheld) menu: hover doesn't work on touch, so Storefront uses
   collapsible submenus revealed by a JS .dropdown-toggle button. That button
   ships with no size or icon, so make it a real, tappable caret. */
@media (max-width: 767px) {
    .handheld-navigation ul.menu .menu-item-has-children {
        position: relative;
    }

    .handheld-navigation .dropdown-toggle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 3.2rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        background: transparent;
        cursor: pointer;
        z-index: 2;
    }

    .handheld-navigation .dropdown-toggle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        margin: -3px 0 0 -5px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--vp-primary);
    }

    /* Submenu links: indented so the hierarchy reads clearly when expanded. */
    .handheld-navigation ul.menu .sub-menu a {
        padding-left: 2rem;
        text-transform: none;
        color: rgba(255, 255, 255, 0.72);
    }
}

/* Secondary navigation & search hide */
.secondary-navigation,
.site-header-cart,
.site-header .site-search,
.site-header .widget_product_search {
    display: none;
}

/* Mobile menu */
.menu-toggle {
    border-color: #ffffff;
    color: #ffffff;
}

.menu-toggle:hover {
    background-color: var(--vp-primary);
    border-color: var(--vp-primary);
    color: var(--vp-obsidian);
}

/* ============================================
   Buttons
   ============================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link {
    background-color: var(--vp-primary);
    border-color: var(--vp-primary);
    color: var(--vp-obsidian);
    border-radius: var(--vp-radius);
    font-weight: 600;
    padding: 0.85rem 1.8rem;
    transition: var(--vp-transition);
    text-transform: none;
    letter-spacing: 0;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background-color: var(--vp-primary-dark);
    border-color: var(--vp-primary-dark);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.3);
}

.button-outline {
    background: transparent;
    border: 2px solid var(--vp-primary);
    color: var(--vp-primary);
}

.button-outline:hover {
    background-color: var(--vp-primary);
    color: var(--vp-obsidian);
}

.button-dark {
    background-color: var(--vp-secondary);
    border-color: var(--vp-secondary);
    color: #ffffff;
}

.button-dark:hover {
    background-color: var(--vp-obsidian);
    border-color: var(--vp-obsidian);
}

/* ============================================
   Homepage Hero
   ============================================ */
.vp-hero {
    background-size: cover;
    background-position: center 40%;
    position: relative;
    padding: 6rem 2rem;
    text-align: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.75) 0%, rgba(44, 62, 80, 0.6) 100%);
}

.vp-hero-content {
    position: relative;
    z-index: 1;
    max-width: 750px;
}

.vp-hero-label {
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--vp-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.vp-hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.vp-hero h1 mark {
    background-color: var(--vp-primary);
    color: var(--vp-obsidian);
    padding: 0 10px;
    border-radius: 4px;
}

.vp-hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.vp-hero .button {
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    margin: 0 0.5rem;
}

/* ============================================
   Section Titles
   ============================================ */
.vp-section {
    padding: 4.5rem 0;
}

.vp-section-alt {
    background-color: var(--vp-pearl);
}

.vp-section-label {
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--vp-primary-dark);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5rem;
}

.vp-section-title {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.75rem;
    color: var(--vp-obsidian);
}

.vp-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--vp-primary), var(--vp-primary-light));
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

.vp-section-desc {
    text-align: center;
    color: var(--vp-text-secondary);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
}

/* ============================================
   About Preview (2-column)
   ============================================ */
.vp-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.vp-about-text .vp-section-label,
.vp-about-text .vp-section-title {
    text-align: left;
}

.vp-about-text .vp-section-title::after {
    margin: 0.75rem 0 0;
}

.vp-about-text p {
    color: var(--vp-text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.vp-about-image img {
    width: 100%;
    height: auto;
    border-radius: var(--vp-radius-lg);
    box-shadow: var(--vp-shadow-lg);
    aspect-ratio: 3/4;
    object-fit: cover;
}

@media (max-width: 768px) {
    .vp-about {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================
   Product Category Cards
   ============================================ */
.vp-categories {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.vp-category-card {
    background-color: #ffffff;
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    box-shadow: var(--vp-shadow);
    transition: var(--vp-transition);
    text-decoration: none;
    display: block;
}

.vp-category-card:hover {
    box-shadow: var(--vp-shadow-lg);
    transform: translateY(-6px);
}

.vp-category-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: #f8f8f8;
    padding: 0.75rem;
    transition: transform 0.5s ease;
}

.vp-category-card:hover img {
    transform: scale(1.08);
}

.vp-category-card .card-body {
    padding: 1.25rem;
}

.vp-category-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vp-obsidian);
    margin: 0 0 0.4rem;
}

.vp-category-card p {
    font-size: 0.85rem;
    color: var(--vp-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.vp-category-count {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vp-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vp-category-card .card-image {
    overflow: hidden;
}

@media (max-width: 900px) {
    .vp-categories {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .vp-categories {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   Service Cards
   ============================================ */
.vp-services {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.vp-service-card {
    background: #ffffff;
    border-radius: var(--vp-radius-lg);
    padding: 2rem;
    box-shadow: var(--vp-shadow);
    transition: var(--vp-transition);
    position: relative;
}

.vp-service-card:hover {
    box-shadow: var(--vp-shadow-lg);
    transform: translateY(-4px);
}

.vp-service-card .number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--vp-primary);
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--vp-primary-dark);
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(212, 160, 23, 0.08) 0%, rgba(212, 160, 23, 0.02) 100%);
}

.vp-service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--vp-obsidian);
}

.vp-service-card p {
    color: var(--vp-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .vp-services {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 500px) {
    .vp-services {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   Portfolio Grid
   ============================================ */
.vp-portfolio {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.vp-portfolio-item {
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--vp-shadow);
    transition: var(--vp-transition);
}

.vp-portfolio-item:hover {
    box-shadow: var(--vp-shadow-lg);
    transform: translateY(-4px);
}

.vp-portfolio-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vp-portfolio-item:hover img {
    transform: scale(1.06);
}

.vp-portfolio-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #ffffff;
    transform: translateY(100%);
    transition: var(--vp-transition);
}

.vp-portfolio-item:hover .overlay {
    transform: translateY(0);
}

.vp-portfolio-item .overlay h4 {
    color: #ffffff;
    font-size: 1rem;
    margin: 0;
}

@media (max-width: 600px) {
    .vp-portfolio {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   CTA Sections
   ============================================ */
.vp-cta {
    background-color: var(--vp-primary);
    padding: 3.5rem 2rem;
    text-align: center;
    border-radius: var(--vp-radius-lg);
    margin: 0 auto;
    max-width: 1100px;
}

.vp-cta h2 {
    color: var(--vp-obsidian);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.vp-cta p {
    color: var(--vp-secondary);
    max-width: 600px;
    margin: 0 auto 1.5rem;
    font-size: 1.05rem;
}

/* Phone strip */
.vp-phone-strip {
    background-color: var(--vp-secondary);
    padding: 2rem;
    text-align: center;
    border-radius: var(--vp-radius-lg);
    max-width: 1100px;
    margin: 0 auto;
}

.vp-phone-strip p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 1rem;
}

.vp-phone-strip a {
    color: var(--vp-primary);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.vp-phone-strip a:hover {
    color: var(--vp-primary-light);
}

/* ============================================
   Timeline
   ============================================ */
.vp-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.vp-timeline-item {
    padding-left: 1.5rem;
    border-left: 3px solid var(--vp-primary);
}

.vp-timeline-item .year {
    font-size: 2rem;
    font-weight: 700;
    color: var(--vp-primary-dark);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.vp-timeline-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.vp-timeline-item p {
    color: var(--vp-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .vp-timeline {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Forms
   ============================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
.input-text {
    border: 1px solid var(--vp-silver);
    border-radius: var(--vp-radius);
    padding: 0.8rem 1rem;
    transition: var(--vp-transition);
    background-color: #ffffff;
    font-family: inherit;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--vp-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15);
}

/* CF7 form styling */
.wpcf7-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
}

.wpcf7-form .wpcf7-submit {
    margin-top: 0.5rem;
}

/* ============================================
   Footer
   ============================================ */
/* Modern footer: layered dark gradient with an amber glow + accent bar,
   readable text, and subtle depth. The credit bar blends into the gradient. */
.site-footer {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    background:
        radial-gradient(900px 260px at 50% -60px, rgba(212, 160, 23, 0.12), transparent 70%),
        linear-gradient(160deg, #2b3d50 0%, #20303f 45%, #161527 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-top: none;
}

/* Amber gradient accent bar across the very top */
.site-footer::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--vp-primary-dark), var(--vp-primary-light) 50%, var(--vp-primary-dark));
}

.site-footer .footer-widgets {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.site-footer h4,
.site-footer .widget-title,
.site-footer .widgettitle {
    color: #ffffff !important;
    border-bottom: none;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 1.1rem;
    padding-bottom: 0.65rem;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.site-footer .widget-title::after,
.site-footer .widgettitle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vp-primary), var(--vp-primary-light));
}

/* Scoped to the widget area + credit bar only — NOT the handheld footer
   bar (which lives inside .site-footer but has its own white background). */
.site-footer .footer-widgets,
.site-footer .footer-widgets p,
.site-footer .footer-widgets li,
.site-footer .footer-widgets .widget {
    color: rgba(255, 255, 255, 0.82) !important;
}

.site-footer .footer-widgets a {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none;
}

.site-footer .footer-widgets a:hover {
    color: var(--vp-primary-light) !important;
}

.site-info,
.site-info a {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer menu lists with a sliding amber chevron */
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .widget ul li {
    border: none;
    padding: 0;
    margin: 0;
}

.site-footer .widget ul li a {
    display: inline-block;
    padding: 0.35rem 0 0.35rem 1.1rem;
    position: relative;
    transition: var(--vp-transition);
}

.site-footer .widget ul li a::before {
    content: '\203A';
    position: absolute;
    left: 0;
    color: var(--vp-primary);
    font-weight: 700;
}

.site-footer .widget ul li a:hover {
    padding-left: 1.45rem;
    color: var(--vp-primary-light);
}

.site-footer .widget p {
    line-height: 1.85;
    margin: 0 0 0.75rem;
}

/* Credit bar blends into the footer gradient (no separate colour). */
.site-info {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ============================================
   Widgets
   ============================================ */
.widget {
    background-color: #ffffff;
    border-radius: var(--vp-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--vp-shadow);
}

/* Footer widgets are plain columns on the navy footer, not white cards. */
.site-footer .widget {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 1.5rem;
}

/* ============================================
   Breadcrumbs (Yoast)
   ============================================ */
.storefront-breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--vp-pearl);
}

.storefront-breadcrumb .col-full {
    padding: 0.5rem 0 !important;
}

.woocommerce-breadcrumb,
.yoast-breadcrumb {
    font-size: 0.8rem;
    color: var(--vp-text-secondary);
}

/* ============================================
   Page Styles
   ============================================ */
.hentry {
    margin: 0 !important;
    padding-top: 0 !important;
}

/* Page / shop title block — centred, with breathing room below the
   breadcrumb, matching valpet.ro. */
.page .entry-header,
.entry-header,
.woocommerce-products-header {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.entry-title,
.woocommerce-products-header__title {
    text-align: center;
}

/* ============================================
   "VA" brand accent above page titles
   (red letters with a red line through them, like valpet.ro)
   ============================================ */
.entry-title::before,
.woocommerce-products-header__title::before {
    content: "VA";
    display: block;
    width: 2.6rem;
    margin: 0 auto 0.55rem;
    text-align: center;
    color: #e3342a;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    background-image: linear-gradient(#e3342a, #e3342a);
    background-size: 100% 2px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Produse / Servicii submenu page content */
.vp-page {
    max-width: 820px;
}

.vp-page--wide {
    max-width: 1100px;
}

/* Produse product-type gallery (like valpet.ro) */
.vp-prod-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.vp-prod-item {
    margin: 0;
    background: #ffffff;
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    box-shadow: var(--vp-shadow);
    transition: var(--vp-transition);
}

.vp-prod-item:hover {
    box-shadow: var(--vp-shadow-lg);
    transform: translateY(-4px);
}

.vp-prod-item a {
    display: block;
    line-height: 0;
}

.vp-prod-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--vp-pearl);
}

.vp-prod-item figcaption {
    padding: 0.7rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vp-obsidian);
    text-align: center;
}

@media (max-width: 900px) {
    .vp-prod-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .vp-prod-gallery { grid-template-columns: repeat(2, 1fr); }
}

.vp-page .vp-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--vp-secondary);
    margin-bottom: 1.5rem;
}

/* Service page image — floated beside the text on wider screens. */
.vp-page-figure {
    margin: 0 0 1.5rem;
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    box-shadow: var(--vp-shadow-md);
    background: var(--vp-pearl);
}

.vp-page-figure img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .vp-page-figure {
        float: right;
        width: 360px;
        max-width: 42%;
        margin: 0 0 1.25rem 2rem;
    }
}

/* Keep the CTA buttons clear of the floated image. */
.vp-page-cta {
    clear: both;
}

.vp-page h2 {
    font-size: 1.4rem;
    margin: 2rem 0 1rem;
}

.vp-page p {
    color: var(--vp-text-secondary);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.vp-grid-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem 1.5rem;
}

.vp-grid-list li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--vp-slate);
    line-height: 1.5;
}

.vp-grid-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--vp-primary);
}

.vp-page-cta {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .vp-grid-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .vp-hero {
        padding: 3rem 1.5rem;
        min-height: 60vh;
    }

    .vp-hero h1 {
        font-size: 1.75rem;
    }

    .vp-hero p {
        font-size: 1rem;
    }

    .vp-hero .button {
        display: block;
        margin: 0.5rem 0;
    }

    .vp-section {
        padding: 3rem 0;
    }

    .vp-section-title {
        font-size: 1.5rem;
    }

    .vp-cta {
        border-radius: 0;
    }
}

/* ============================================
   Storefront Overrides
   ============================================ */
.storefront-full-width-content .content-area {
    width: 100%;
}

.col-full {
    max-width: 1200px;
}

#primary.content-area {
    padding-top: 0 !important;
}

#main.site-main {
    padding-top: 0 !important;
}

/* ============================================
   WooCommerce — match Valpet amber palette
   (Storefront already styles .button via --vp-primary;
    these cover accents it paints with its own default.)
   ============================================ */

/* Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--vp-primary-dark);
    font-weight: 600;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background-color: var(--vp-primary);
    color: #fff;
}

/* Storefront header cart amount / count */
.site-header-cart .amount,
.site-header-cart .count {
    color: var(--vp-primary);
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
    color: var(--vp-primary);
}

/* Result count / ordering active states, breadcrumb links */
.woocommerce-breadcrumb a,
.woocommerce a.added_to_cart {
    color: var(--vp-primary-dark);
}

/* YITH Wishlist "add to wishlist" link + icon */
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-wishlistaddedbrowse a,
.yith-wcwl-wishlistexistsbrowse a {
    color: var(--vp-primary-dark);
}
.yith-wcwl-add-to-wishlist a:hover {
    color: var(--vp-primary);
}

/* Message / info highlight bars to amber */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--vp-primary);
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--vp-primary);
}

/* ============================================
   Shop / catalog — uniform product cards
   ============================================ */

/* The page title (+ VA accent) isn't needed on the shop or on
   product category / tag archives — the breadcrumb already shows it. */
.woocommerce-shop .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header,
.tax-product_tag .woocommerce-products-header {
    display: none;
}

/* Equal-size product boxes via a grid of flex cards. */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 0 0 2rem;
    padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #ffffff;
    border: 1px solid var(--vp-silver);
    border-radius: var(--vp-radius-lg);
    box-shadow: var(--vp-shadow);
    transition: var(--vp-transition);
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--vp-shadow-lg);
    transform: translateY(-4px);
}

/* Uniform product image area */
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--vp-pearl);
    border-radius: var(--vp-radius);
    margin: 0 0 0.85rem;
}

/* Titles aligned to the same height (≈2 lines) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.35;
    padding: 0;
    margin: 0 0 0.35rem;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce ul.products li.product .price {
    display: block;
    margin: 0 0 0.85rem;
}

.woocommerce ul.products li.product .star-rating {
    margin: 0 auto 0.6rem;
}

/* Pin the add-to-cart button to the bottom so every card lines up. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    margin-top: auto;
    width: 100%;
}

/* Wishlist (heart) button under the add-to-cart button */
.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 430px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr;
    }
}

/* Wishlist add/remove feedback toast — readable, on-brand */
.yith-wcwl-add-to-wishlist__feedback,
.yith-wcwl-feedback-messages-container .yith-wcwl-add-to-wishlist__feedback {
    color: var(--vp-obsidian);
    background-color: #ffffff;
    box-shadow: var(--vp-shadow-lg);
    border: 1px solid var(--vp-silver);
    border-radius: var(--vp-radius);
    padding: 0.9rem 1.3rem;
    font-size: 0.9rem;
}

.yith-wcwl-add-to-wishlist__feedback a {
    color: var(--vp-primary-dark);
    font-weight: 600;
}

/* ============================================
   My Account — keep navigation (Dashboard, Orders, …) on the LEFT
   (the global left-sidebar layout, set for shop filters, otherwise
    flips Storefront's account nav to the right).
   ============================================ */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: left !important;
    margin-right: 5.8823529412% !important;
    margin-left: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: right !important;
    margin-right: 0 !important;
}

/* ============================================
   Page hero banner (inner pages) — full-width blurred image + title
   ============================================ */
.vp-page-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--vp-secondary);
    background-size: cover;
    background-position: center;
    padding: 3.25rem 0;
    text-align: center;
}

/* Blurred copy of the background image (so the title stays sharp) */
.vp-page-hero::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(7px) brightness(0.6);
    transform: scale(1.1);
    z-index: 0;
}

/* Dark brand gradient overlay for contrast */
.vp-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.78) 0%, rgba(44, 62, 80, 0.6) 100%);
    z-index: 0;
}

.vp-page-hero__inner {
    position: relative;
    z-index: 1;
}

.vp-page-hero__va {
    width: 2.6rem;
    margin: 0 auto 0.55rem;
    color: #e3342a;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    background-image: linear-gradient(#e3342a, #e3342a);
    background-size: 100% 2px;
    background-position: center;
    background-repeat: no-repeat;
}

.vp-page-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.15;
}

/* The banner now carries the page title, so hide the (otherwise empty)
   in-content page header — leaving it would add a large gap below the
   breadcrumb (e.g. on the My account page). */
body:not(.home) .hentry > .entry-header,
body:not(.home) .page > .entry-header,
body:not(.home) header.page-header {
    display: none;
}

/* Tighten the breadcrumb under the new banner */
.vp-page-hero + .storefront-breadcrumb,
.vp-page-hero + .col-full .storefront-breadcrumb {
    margin-top: 0;
}

@media (max-width: 768px) {
    .vp-page-hero {
        padding: 2.25rem 0;
    }
}

/* ============================================
   Homepage hero slider
   ============================================ */
.vp-slider {
    position: relative;
    overflow: hidden;
    /* Break out of the centred content column to span the full viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(420px, 56vh, 580px);
}

.vp-slider-track {
    position: relative;
    height: 100%;
}

/* Homepage: slider sits flush under the menu (no content padding/breadcrumb) */
.home #content.site-content,
.home #content.site-content > .col-full,
.home #primary.content-area,
.home #main.site-main {
    padding-top: 0 !important;
}

.home .storefront-breadcrumb {
    display: none;
}

.vp-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    z-index: 0;
}

.vp-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Ken Burns slow zoom on the active slide */
.vp-slide.is-active {
    animation: vp-kenburns 7s ease-out forwards;
}

@keyframes vp-kenburns {
    from { background-size: 108%; }
    to   { background-size: 118%; }
}

.vp-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.78) 0%, rgba(44, 62, 80, 0.55) 100%);
    z-index: 0;
}

.vp-slide-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
    opacity: 0;
    transform: translateY(20px);
}

.vp-slide.is-active .vp-slide-content {
    animation: vp-slide-in 0.9s ease-out 0.25s forwards;
}

@keyframes vp-slide-in {
    to { opacity: 1; transform: translateY(0); }
}

.vp-slide-content .vp-hero-label {
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--vp-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.vp-slide-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.vp-slide-content h1 mark {
    background-color: var(--vp-primary);
    color: var(--vp-obsidian);
    padding: 0 10px;
    border-radius: 4px;
}

.vp-slide-content p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

.vp-slide-content .button {
    font-size: 1.05rem;
    padding: 1rem 2.2rem;
    margin: 0 0.4rem;
}

.vp-slide-btn2 {
    border-color: #fff !important;
    color: #fff !important;
}

.vp-slide-btn2:hover {
    background-color: var(--vp-primary) !important;
    border-color: var(--vp-primary) !important;
    color: var(--vp-obsidian) !important;
}

/* Arrows */
.vp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 0 0.18em; /* optical centring of the chevron glyph */
    cursor: pointer;
    transition: var(--vp-transition);
    backdrop-filter: blur(4px);
}

.vp-slider-arrow:hover {
    background: var(--vp-primary);
    color: var(--vp-obsidian);
}

.vp-slider-prev { left: 1.5rem; }
.vp-slider-next { right: 1.5rem; }

/* Dots */
.vp-slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 0.6rem;
}

.vp-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: var(--vp-transition);
}

.vp-slider-dot.is-active {
    background: var(--vp-primary);
    border-color: var(--vp-primary);
    transform: scale(1.2);
}

@media (max-width: 768px) {
    .vp-slider { height: clamp(380px, 70vh, 520px); }
    .vp-slide { padding: 3rem 1.25rem; }
    .vp-slider-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
    .vp-slider-prev { left: 0.5rem; }
    .vp-slider-next { right: 0.5rem; }
    .vp-slide-content .button { display: block; margin: 0.5rem auto; max-width: 240px; }
}

/* ============================================
   Contact page — 2 columns + map
   ============================================ */
.vp-contact-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
    align-items: start;
}

.vp-contact-form h2,
.vp-contact-aside h3 {
    margin-top: 0;
}

.vp-contact-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.vp-contact-list li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--vp-silver);
    line-height: 1.6;
}

.vp-contact-list .vp-ci {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vp-primary-dark);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.vp-contact-map {
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    box-shadow: var(--vp-shadow-md);
    line-height: 0;
}

.vp-contact-map iframe {
    display: block;
    width: 100%;
}

@media (max-width: 768px) {
    .vp-contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ============================================
   Portfolio archive — modern grid with hover-overlay captions
   ============================================ */
.vp-portfolio--archive {
    margin-top: 1rem;
}

.vp-portfolio--archive .vp-portfolio-item {
    aspect-ratio: 4 / 3;
    display: block;
}

.vp-portfolio--archive .vp-portfolio-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vp-portfolio--archive .vp-portfolio-item:hover img {
    transform: scale(1.06);
}

.vp-portfolio--archive .overlay {
    position: absolute;
    inset: 0;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.3rem;
    background: linear-gradient(to top, rgba(26, 26, 46, 0.92) 0%, rgba(26, 26, 46, 0.35) 45%, transparent 78%);
}

.vp-portfolio--archive .overlay h4 {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
}

.vp-portfolio--archive .overlay p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease;
}

.vp-portfolio-more {
    display: inline-block;
    color: var(--vp-primary);
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 0.6rem;
    opacity: 0;
    transform: translateY(8px);
    transition: var(--vp-transition);
}

.vp-portfolio--archive .vp-portfolio-item:hover .overlay p {
    max-height: 7em;
    opacity: 1;
}

.vp-portfolio--archive .vp-portfolio-item:hover .vp-portfolio-more {
    opacity: 1;
    transform: none;
}

/* ============================================
   Header icon group — account / wishlist / cart
   ============================================ */
.main-navigation ul.menu > li.vp-icon-item > a.vp-icon-link,
.main-navigation ul.nav-menu > li.vp-icon-item > a.vp-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.55rem 0.6rem;
    color: #ffffff;
}

.vp-icon-item svg {
    color: var(--vp-primary);
    transition: var(--vp-transition);
}

.vp-icon-item a:hover svg {
    color: var(--vp-primary-light);
}

/* Subtle divider separating the icon group from the text menu (desktop) */
@media (min-width: 768px) {
    .main-navigation ul.menu > li.vp-account-menu {
        margin-left: 0.5rem;
        padding-left: 0.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }
}

/* Small superscript count badges on the icons */
.vp-cart-count,
.vp-wl-count {
    position: absolute;
    top: 0.15rem;
    right: 0.05rem;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vp-primary);
    color: var(--vp-obsidian);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* On the mobile handheld menu the icons sit inline in the list */
@media (max-width: 767px) {
    .handheld-navigation .vp-icon-item svg { vertical-align: middle; }
}

/* ============================================
   Single portfolio project — clean, centred layout
   ============================================ */
.vp-proiect {
    max-width: 940px;
    margin: 0 auto;
}

.vp-proiect-figure {
    max-width: 620px;
    margin: 0 auto 2.25rem;
    border-radius: var(--vp-radius-lg);
    overflow: hidden;
    box-shadow: var(--vp-shadow-lg);
    line-height: 0;
}

.vp-proiect-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.vp-proiect-content {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--vp-slate);
}

.vp-proiect-content p {
    margin: 0 0 1.1rem;
}

.vp-proiect-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
}