/* assets/css/global.css */

@import url('_variables.css'); /* Importiert die Variablen */

html {
    scroll-behavior: smooth;
    height: 100%; /* Sicherstellen, dass html den vollen Viewport nutzt */
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--shop-secondary-color); /* Haupt-Hintergrundfarbe der Seite */
    color: var(--shop-dark-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh; /* Mindesthöhe des Bodys auf den Viewport setzen */
    display: flex; /* Für Sticky Footer oder Gesamtlayout */
    flex-direction: column; /* Elemente untereinander anordnen */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--shop-dark-text);
    margin-top: 0.8em;
    margin-bottom: 0.4em;
    font-weight: 600;
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--shop-primary-color);
    text-decoration: none;
    transition: color var(--shop-transition-speed);
}

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

/* KORRIGIERT: Allgemeine Container-Klasse für die Inhaltsbreite und Zentrierung */
/* Diese Klasse definiert den maximalen Inhaltsbereich für alle Haupt-Layout-Elemente.
   Sie sollte INNERHALB von Sektionen platziert werden, die Full-Width sind, oder
   direkt um den Inhalt von Seiten, die eine begrenzte Breite haben sollen. */
.container {
    max-width: 1200px; /* Konsistente maximale Breite für den Hauptinhalt */
    margin: 0 auto; /* Zentrierung des Containers */
    padding: 0 20px; /* Standard-Innenabstand an den Seiten */
    box-sizing: border-box; /* Padding ist in der Breite enthalten */
}

/* KORRIGIERT: Allgemeine Button-Stile (Components) */
/* Diese Regeln wurden um die -elegant Klassen erweitert, um die Darstellung auf der Homepage zu korrigieren. */
.button, .button-elegant,
.product-card .button,
.add-to-cart-form button,
.cart-actions .button,
.cart-summary .button,
.account-card .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 25px;
    border-radius: var(--shop-border-radius-round);
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--shop-transition-speed) ease;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: none;
    line-height: 1;
}

.button-large, .button-large-elegant {
    padding: 15px 35px;
    font-size: 1.15em;
    border-radius: var(--shop-border-radius-round);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.button-large:hover, .button-large-elegant:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    transform: translateY(-3px);
}

.button-primary, .button-primary-elegant,
.product-card .button,
.add-to-cart-form button,
.cart-summary .button.button-primary {
    background-color: var(--shop-primary-color);
    color: var(--shop-light-text);
}

.button-primary:hover, .button-primary-elegant:hover,
.product-card .button:hover,
.add-to-cart-form button:hover,
.cart-summary .button.button-primary:hover {
    background-color: var(--shop-primary-color-dark);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.button-secondary, .button-secondary-elegant,
.cart-actions .button,
.cart-summary .button.button-secondary {
    background-color: transparent;
    color: var(--shop-dark-text);
    border: 2px solid var(--shop-dark-text);
    box-shadow: none;
}

.button-secondary:hover, .button-secondary-elegant:hover,
.cart-actions .button:hover,
.cart-summary .button.button-secondary:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--shop-dark-text);
    border-color: var(--shop-dark-text);
    transform: translateY(-1px);
}

.button-danger {
    background-color: #dc3545;
    color: var(--shop-light-text);
    border: 1px solid #dc3545;
    box-shadow: none;
}

.button-danger:hover {
    background-color: #c82333;
    transform: none;
}

.button-small {
    padding: 8px 15px;
    font-size: 0.85em;
    border-radius: var(--shop-border-radius-round);
    box-shadow: none;
}
.button-small:hover {
    box-shadow: none;
    transform: none;
}

/* Form Element Styles (Components) - Allgemeine Stile */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--shop-dark-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"], /* HIER WURDE DIE ÄNDERUNG GEMACHT */
.form-group select,
.form-group textarea,
.quantity-input,
.purchase-type-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--shop-border-color);
    border-radius: var(--shop-border-radius-soft);
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color var(--shop-transition-speed), box-shadow var(--shop-transition-speed);
}

.form-group input[type="number"],
.quantity-input,
.purchase-type-select {
    width: auto;
    min-width: 80px;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="tel"]:focus, /* HIER WURDE DIE ÄNDERUNG GEMACHT */
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--shop-primary-color);
    box-shadow: 0 0 0 3px rgba(var(--shop-primary-color-rgb), 0.2);
    outline: none;
}

/* Message Styles (Components) */
.message {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: var(--shop-border-radius-soft);
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shop-box-shadow-light);
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* --- KORRIGIERT: Allgemeine Styles für den Hauptinhaltsbereich der Seiten --- */
/* .shop-content definiert die allgemeinen Eigenschaften für den Hauptbereich einer View/Seite.
   Es sollte den Hintergrund und das vertikale Padding setzen, aber KEINE maximale Breite. */
.shop-content {
    background-color: var(--shop-secondary-color); /* Hintergrund für den gesamten Inhaltsbereich */
    padding: 0; /* Vertikales Padding kommt in den Sektionen */
    flex-grow: 1; /* Lässt den main-content-wrapper den verfügbaren Platz ausfüllen */
    display: flex;
    flex-direction: column; /* Sektionen untereinander anordnen */
}

/* Allgemeine Styles für H1 Titel auf allen Seiten (ausser Hero) */
/* Diese H1s sollten IMMER INNERHALB eines .container platziert werden */
.shop-content h1 {
    font-size: 2.8em;
    font-weight: 800 !important;
    color: var(--shop-primary-color) !important;
    text-align: center;
    margin-bottom: 0.5em;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    position: relative;
    padding-bottom: 20px;
}

/* Stile für Lead-Beschreibung und alle P-Tags direkt unter H1 in shop-content */
/* Diese sollten ebenfalls INNERHALB eines .container platziert werden, wenn sie eine begrenzte Breite haben sollen. */
.shop-content .lead-description,
.shop-content > p { /* Für direkte p-Tags unter .shop-content */
    font-size: 1.3em;
    color: var(--shop-dark-text) !important;
    text-align: center;
    max-width: 800px; /* Begrenzung der Breite */
    margin: 0.5em auto 3em auto;
    line-height: 1.6;
}

/* Allgemeine Regel für Strong-Tags im Hauptinhaltsbereich, damit sie rot und fett werden */
.shop-content strong {
    color: var(--shop-primary-color) !important;
    font-weight: 700 !important;
}
/* Allgemeine Regel für Em-Tags im Hauptinhaltsbereich (um Kursiv zu entfernen und fett zu machen) */
.shop-content em {
    font-style: normal !important;
    font-weight: 600 !important;
}

/* KORRIGIERT: Der Haupt-Wrapper für Header, Content und Footer */
/* Dieser Wrapper stellt sicher, dass der Footer unten klebt. */
.main-content-wrapper {
    flex-grow: 1; /* Lässt den Hauptinhalt den verfügbaren Platz ausfüllen */
    display: flex; /* Damit shop-header, shop-content, shop-footer untereinander sind */
    flex-direction: column;
}


/* NEUE STILE FÜR DIE REVOLUTIONIERTE STARTSEITE (home.php) */

/* Hero Section (immer Full-Width) */
.hero-section {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-light-text);
    overflow: hidden;
    padding: 0; /* Kein Padding hier, da der Inhalt im .container ist */
    margin: 0;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-video, .hero-fallback-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    /* Nutzt .container im HTML für die Inhaltsbreite */
}

.hero-content h1 {
    font-size: 3.8em;
    font-weight: 800 !important;
    color: var(--shop-light-text) !important;
    margin-bottom: 20px;
    line-height: 1.1;
    text-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.hero-subline {
    font-size: 1.6em;
    margin-bottom: 40px;
    color: var(--shop-light-text) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-cta {
    transform: scale(1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.hero-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(var(--shop-primary-color-rgb), 0.4);
}

/* Country Selector im Hero-Bereich */
.country-selector-wrapper {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.country-select {
    padding: 8px 15px;
    border: 1px solid var(--shop-light-text);
    border-radius: var(--shop-border-radius-soft);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--shop-light-text);
    font-size: 0.9em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

.country-select option {
    background-color: var(--shop-primary-color);
    color: var(--shop-light-text);
}


/* Problem-Solution Section */
.problem-solution-section {
    padding: 60px 0;
    background-color: var(--shop-light-text);
    text-align: center;
}
.problem-solution-section .container {
    max-width: 900px;
}

.problem-solution-section h2 {
    font-size: 2.5em;
    color: var(--shop-primary-color);
    margin-bottom: 0.5em;
}

.problem-solution-section .lead-description {
    max-width: 900px;
    margin: 0.5em auto 3em auto;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.scenario-card {
    background-color: var(--shop-secondary-color);
    padding: 30px;
    border-radius: var(--shop-border-radius-soft);
    box-shadow: var(--shop-box-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scenario-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shop-box-shadow-medium);
}

.scenario-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 8px rgba(var(--shop-primary-color-rgb), 0.3));
}

.scenario-card h3 {
    font-size: 1.5em;
    color: var(--shop-primary-color);
    margin-bottom: 15px;
}

.scenario-card p {
    font-size: 1em;
    color: var(--shop-dark-text);
}

.solution-bridge {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--shop-dark-text) !important;
    margin-top: 40px;
}

.solution-bridge strong {
    color: var(--shop-primary-color) !important;
}


/* How It Works Section */
.how-it-works-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--shop-primary-color) 0%, var(--shop-primary-color-dark) 100%);
    color: var(--shop-light-text);
    text-align: center;
}
.how-it-works-section .container {
    max-width: 1000px;
}

.how-it-works-section h2 {
    font-size: 2.8em;
    color: var(--shop-light-text);
    margin-bottom: 60px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.step-card {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 35px;
    border-radius: var(--shop-border-radius-soft);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.step-card:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--shop-light-text);
    color: var(--shop-primary-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 3px solid var(--shop-primary-color-dark);
}

.step-icon {
    width: 90px;
    height: 90px;
    margin-top: 20px;
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

.step-card h3 {
    font-size: 1.6em;
    color: var(--shop-light-text);
    margin-bottom: 15px;
}

.step-card p {
    font-size: 1.05em;
    color: var(--shop-light-text);
    opacity: 0.9;
}


/* Trust Section */
.trust-section {
    padding: 80px 0;
    background-color: var(--shop-dark-text);
    color: var(--shop-light-text);
    text-align: center;
}
.trust-section .container {
    max-width: 1000px;
}

.trust-section h2 {
    font-size: 2.5em;
    color: var(--shop-light-text);
    margin-bottom: 60px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.testimonial-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: var(--shop-border-radius-soft);
    font-style: italic;
    font-size: 1.1em;
    line-height: 1.8;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.testimonial-card span {
    display: block;
    margin-top: 15px;
    font-weight: 600;
    font-style: normal;
    color: var(--shop-primary-color);
}

.security-info p {
    font-size: 1.1em;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
}

.security-info strong {
    color: var(--shop-primary-color) !important;
}

.security-info a {
    color: var(--shop-primary-color);
    text-decoration: underline;
}


/* Final Call-to-Action Section */
.final-cta-section {
    padding: 80px 0;
    background: var(--shop-secondary-color);
    text-align: center;
}
.final-cta-section .container {
    max-width: 900px;
}

.final-cta-section h2 {
    font-size: 2.8em;
    color: var(--shop-primary-color);
    margin-bottom: 30px;
}

.final-cta-section .lead-description {
    margin-bottom: 50px;
    color: var(--shop-dark-text) !important;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}


/* Responsive Anpassungen für Home-Seite */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 3em;
    }
    .hero-subline {
        font-size: 1.4em;
    }
    .problem-solution-section h2, .how-it-works-section h2, .product-highlights-section h2, .trust-section h2, .final-cta-section h2 {
        font-size: 2em;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: 80vh;
    }
    .hero-content h1 {
        font-size: 2.5em;
    }
    .hero-subline {
        font-size: 1.2em;
    }
    .country-selector-wrapper {
        top: 10px;
        right: 10px;
    }
    .scenario-grid, .steps-grid, .testimonials-grid, .cta-buttons {
        grid-template-columns: 1fr;
    }
    .problem-solution-section, .how-it-works-section, .trust-section, .final-cta-section {
        padding: 40px 15px;
    }
    .step-number {
        font-size: 1.5em;
        width: 40px;
        height: 40px;
        top: -15px;
    }
    .step-icon {
        width: 90px;
        height: 90px;
        margin-top: 20px;
        margin-bottom: 25px;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    }
    .step-card h3 {
        font-size: 1.6em;
        color: var(--shop-light-text);
        margin-bottom: 15px;
    }
    .step-card p {
        font-size: 1.05em;
        color: var(--shop-light-text);
        opacity: 0.9;
    }
}

/* KORRIGIERT: Keine .main-content-area mehr, da wir keine Sidebar haben */
/* Die CSS-Regeln für .main-content-area und .main-content-area.has-sidebar werden nicht mehr benötigt,
   da die Sidebar komplett entfernt wurde und das Layout direkt über .shop-content gesteuert wird.
   Wenn diese Klassen in index.php nicht mehr verwendet werden, können sie hier auch entfernt werden.
   Für den Moment kommentieren wir sie aus, falls sie noch irgendwo referenziert werden. */
/*
.main-content-area {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
}
.main-content-area.has-sidebar {
    justify-content: flex-start;
    align-items: flex-start;
}
*/

/* KORRIGIERT: Wrapper für CMS-Seiteninhalt als eigenständige Kachel */
.shop-content.cms-page-content {
    flex-grow: 1;
    max-width: 900px;
    background-color: var(--shop-light-text);
    padding: 40px;
    border-radius: var(--shop-border-radius-soft);
    box-shadow: var(--shop-box-shadow-medium);
    margin: 30px auto;
}

/* Responsive Anpassungen für CMS-Seiten (Kacheln) */
@media (max-width: 992px) {
    .shop-content.cms-page-content {
        max-width: 100%;
        padding: 20px 15px;
        margin: 20px auto;
    }
}


/* --- NEUE STILE FÜR REAL LIFE CASES AUF DER HOMEPAGE (mit Bildern) --- */
.real-life-cases-home-section {
    padding: 80px 0;
    background-color: var(--shop-light-text);
    text-align: center;
}
.real-life-cases-home-section .container {
    max-width: 1000px;
}

.real-life-cases-home-section h2 {
    font-size: 2.5em;
    color: var(--shop-primary-color);
    margin-bottom: 0.5em;
}

.real-life-cases-home-section .lead-description {
    max-width: 900px;
    margin: 0.5em auto 3em auto;
    color: var(--shop-dark-text) !important;
}

.use-cases-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--shop-secondary-color);
    border-radius: var(--shop-border-radius-soft);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

.story-item:hover {
    transform: translateY(-15px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}


.story-image-container {
    width: 100%;
    height: 350px;
    overflow: hidden;
    flex-shrink: 0;
}

.story-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease-out;
}

.story-item:hover .story-image-container img {
    transform: scale(1.05);
}

.story-content {
    padding: 30px;
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.story-content h3 {
    font-size: 1.8em;
    color: var(--shop-primary-color);
    margin-top: 0;
    margin-bottom: 15px;
}

.story-content p {
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--shop-dark-text);
    margin-bottom: 15px;
}

.story-content strong {
    color: var(--shop-primary-color) !important;
}
.story-content em {
    font-style: normal !important;
    font-weight: 600 !important;
}


/* Layout-Wechsel für abwechselnde Darstellung (Bild links/rechts) */
@media (min-width: 768px) {
    .use-cases-story-grid {
        grid-template-columns: 1fr;
    }
    .story-item {
        flex-direction: row;
        text-align: left;
    }
    .story-item .story-image-container {
        flex: 1 1 50%;
        height: 350px;
    }
    .story-item .story-content {
        flex: 1 1 50%;
        padding: 40px;
    }

    .story-item.reverse-layout {
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    .story-item .story-image-container {
        height: 250px;
    }
    .story-item .story-content {
        padding: 20px;
    }
    .story-content h3 {
        font-size: 1.5em;
    }
    .story-content p {
        font-size: 1em;
    }
}

/* Stil für die Kacheln auf der my_account Seite */
.info-box-my-account {
    background-color: var(--shop-light-text); /* Hintergrundfarbe */
    border: 1px solid var(--shop-border-color); /* Leichter Rand */
    border-radius: var(--shop-border-radius-soft);
    padding: 20px;
    box-shadow: var(--shop-box-shadow-light); /* Leichter Schatten */
    transition: all var(--shop-transition-speed);
}
.info-box-my-account:hover {
    box-shadow: var(--shop-box-shadow-medium);
    transform: translateY(-2px);
}

.info-grid-my-account {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drei gleichmässige Spalten */
    gap: 25px; /* Abstand zwischen den Kacheln */
}

/* Einbettung des my_account-spezifischen CSS in die global.css für einfache Handhabung */
/* Das ist der Stil, der die Kacheln formatiert, die in my_account.php verwendet werden */
.my-account-page .info-box-my-account {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.my-account-page .info-box-my-account h3 {
    color: #DA4453;
    font-size: 1.15em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}
.my-account-page .data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 0.95em;
}
.my-account-page .data-row:last-child {
    border-bottom: none;
}
.my-account-page .data-row span:first-child {
    font-weight: 600;
    color: #333;
}
.my-account-page .data-row span:last-child {
    flex-grow: 1;
    text-align: right;
    color: #666;
}