/* ============================================
   DERMA FARM - Complete Styles
   ============================================ */

/* ---------- Variables ---------- */
:root {
    --primary: #E02B74;
    --primary-dark: #C91F62;
    --primary-light: #FCE8F0;
    --primary-50: #FDF2F7;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --skin-light: #FDF8F9;
    --skin-default: #FAF3F5;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.1);
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s ease;
}

/* ---------- Reset ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--skin-light);
    color: var(--gray-800);
    line-height: 1.6;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gray-900);
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.25rem; }

p { color: var(--gray-600); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ---------- Container ---------- */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(224,43,116,0.3);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(224,43,116,0.35);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-lg { padding: 1rem 2.5rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-pink { background: var(--primary-100); color: var(--primary); }
.badge-danger { background: #FEE2E2; color: #DC2626; }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(224,43,116,0.06);
    transition: var(--transition);
}

.site-header.scrolled {
    box-shadow: var(--shadow);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.logo span { color: var(--primary); }
.logo-icon { margin-right: 0.5rem; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.main-nav a {
    color: var(--gray-600);
    font-weight: 500;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions button,
.header-actions a {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    padding: 0.5rem;
    border-radius: var(--radius-full);
    transition: var(--transition);
    position: relative;
}

.header-actions button:hover,
.header-actions a:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--primary);
    color: var(--white);
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--gray-50);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    transition: var(--transition);
}

.search-bar:focus-within {
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(224,43,116,0.08);
}

.search-bar input {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    width: 180px;
    outline: none;
}

.search-bar button {
    padding: 0.5rem 1rem;
    color: var(--gray-400);
}

/* ---------- Mobile Menu ---------- */
.mobile-menu-toggle {
    display: none;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    z-index: 999;
}

.mobile-menu.active { display: block; }

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-menu-inner a {
    color: var(--gray-700);
    font-weight: 500;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

/* ---------- Hero ---------- */
.hero {
    padding-top: 72px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-50), var(--skin-light), var(--white));
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem 0;
}

.hero-text h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-text h1 span {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.125rem;
    max-width: 480px;
    margin-bottom: 2.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image img {
    max-width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

.hero-trust-badges {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(224,43,116,0.1);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gray-500);
    font-size: 0.85rem;
}

/* ---------- Sections ---------- */
.section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header .subtitle {
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}

.section-header h2 {
    margin-bottom: 0.5rem;
}

.section-header p {
    color: var(--gray-500);
    max-width: 480px;
    margin: 0 auto;
}

/* ---------- Products ---------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.product-image {
    position: relative;
    padding-top: 100%;
    background: var(--skin-default);
    overflow: hidden;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.product-wishlist {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: var(--gray-400);
}

.product-wishlist:hover {
    background: var(--white);
    color: var(--primary);
}

.product-info {
    padding: 1.25rem 1.5rem 1.5rem;
}

.product-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
    font-weight: 600;
}

.product-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}

.product-name a { color: var(--gray-800); }
.product-name a:hover { color: var(--primary); }

.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stars {
    display: flex;
    gap: 0.1rem;
}

.product-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.product-price .current { color: var(--gray-900); }
.product-price .original {
    color: var(--gray-400);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 0.9rem;
}

.product-actions {
    margin-top: 1rem;
}

/* ---------- Categories ---------- */
.category-showcase { background: var(--white); }

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.category-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--skin-light);
    transition: var(--transition);
    border: 2px solid transparent;
}

.category-card:hover {
    border-color: var(--primary);
    background: var(--primary-50);
    transform: translateY(-4px);
}

.category-card .icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.category-card h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
}

.category-card p {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--skin-default); }

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.testimonial-card blockquote {
    font-style: italic;
    color: var(--gray-600);
    margin: 0.75rem 0 1rem;
}

.testimonial-card .author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.author-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--primary);
}

.author-info h5 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
}

.author-info span {
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ---------- Newsletter ---------- */
.newsletter {
    background: linear-gradient(135deg, var(--primary-50), var(--skin-light));
    padding: 4rem 0;
}

.newsletter-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: 0.95rem;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(224,43,116,0.08);
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--gray-900);
    color: var(--gray-300);
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand h3 {
    color: var(--white);
    font-size: 1.5rem;
}

.footer-brand h3 span { color: var(--primary); }

.footer-brand p {
    color: var(--gray-400);
    max-width: 320px;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--primary);
    color: var(--white);
}

.footer-col h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col ul a {
    color: var(--gray-400);
    transition: var(--transition);
}

.footer-col ul a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: var(--gray-500);
    font-size: 0.85rem;
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* ---------- Cart Sidebar ---------- */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100%;
    background: var(--white);
    z-index: 2001;
    transform: translateX(100%);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.cart-sidebar.active {
    transform: translateX(0);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.cart-header h3 {
    font-family: var(--font-body);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--gray-400);
    padding: 0.25rem;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.cart-empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--gray-400);
}

.cart-empty svg {
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.cart-item-image {
    width: 72px;
    height: 72px;
    border-radius: var(--radius);
    background: var(--skin-default);
    flex-shrink: 0;
    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
}

.cart-item-info .price {
    color: var(--primary);
    font-weight: 600;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cart-item-quantity button {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-quantity button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.cart-item-remove {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 0.25rem;
}

.cart-item-remove:hover {
    color: #EF4444;
}

.cart-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.cart-totals {
    margin-bottom: 1rem;
}

.cart-totals .row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.cart-totals .total {
    font-weight: 700;
    font-size: 1.1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

/* ---------- Auth Pages ---------- */
.auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0 60px;
    background: linear-gradient(135deg, var(--primary-50), var(--skin-light));
}

.auth-container {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.auth-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.75rem;
}

.auth-header p {
    color: var(--gray-500);
}

.auth-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.form-options .checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-100);
}

.alert {
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.alert-error {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

/* ---------- Product Detail ---------- */
.product-detail {
    padding: 100px 0 60px;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.product-gallery .gallery-main {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--skin-default);
}

.product-gallery .gallery-main img {
    width: 100%;
    height: auto;
}

.gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--skin-default);
}

.gallery-thumb.active {
    border-color: var(--primary);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.product-sku {
    color: var(--gray-400);
    font-size: 0.85rem;
}

.product-rating-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-price-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.product-price-detail .current {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900);
}

.product-price-detail .original {
    color: var(--gray-400);
    text-decoration: line-through;
    font-size: 1.25rem;
}

.product-price-detail .discount {
    background: #FEE2E2;
    color: #DC2626;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.85rem;
}

.product-description {
    margin: 1.5rem 0;
}

.product-availability {
    margin: 1rem 0;
}

.in-stock {
    color: #10B981;
    font-weight: 600;
}

.out-of-stock {
    color: #EF4444;
    font-weight: 600;
}

.product-actions-detail {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.quantity-selector button {
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    transition: var(--transition);
}

.quantity-selector button:hover {
    background: var(--primary-50);
    color: var(--primary);
}

.quantity-selector input {
    width: 60px;
    height: 44px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* ---------- Reviews ---------- */
.reviews-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--gray-200);
}

.reviews-summary {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.rating-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.review-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-author .author-avatar {
    width: 40px;
    height: 40px;
}

.review-date {
    color: var(--gray-400);
    font-size: 0.8rem;
}

.review-title {
    margin: 0.5rem 0;
    font-family: var(--font-body);
}

.review-comment {
    color: var(--gray-600);
}

/* ---------- FAQ ---------- */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--gray-100);
    padding: 1.5rem 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--gray-800);
    cursor: pointer;
    text-align: left;
}

.faq-question span {
    font-size: 1.5rem;
    transition: var(--transition);
}

.faq-item.active .faq-question span {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding-top: 1rem;
}

.faq-answer p {
    color: var(--gray-500);
}

/* ---------- Animations ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-text p { margin: 0 auto 2rem; }
    .hero-buttons { justify-content: center; }
    .hero-trust-badges { justify-content: center; flex-wrap: wrap; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    
    .main-nav { display: none; }
    .mobile-menu-toggle { display: block; }
    
    .search-bar input { width: 100px; }
    
    .hero { padding-top: 60px; }
    .hero-text h1 { font-size: 2.5rem; }
    
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .product-info { padding: 0.75rem 1rem 1rem; }
    .product-name { font-size: 0.9rem; }
    
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cart-sidebar { width: 100%; }
    
    .auth-card { padding: 1.5rem; }
    .auth-form .form-row { grid-template-columns: 1fr; }
    
    .product-actions-detail { flex-direction: column; }
    .quantity-selector { width: 100%; }
    .quantity-selector input { flex: 1; }
}

@media (max-width: 480px) {
    .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .hero-text h1 { font-size: 2rem; }
    .search-bar input { width: 60px; }
    .header-inner { height: 60px; }
}
/* ============================================
   DERMA FARM 2026 PREMIUM LAYER
   ============================================ */
:root{--primary:#b85f7c;--primary-dark:#93445f;--primary-50:#fbf1f4;--primary-100:#f6dfe7;--forest:#2f6f62;--forest-dark:#214e46;--ink:#17211f;--muted:#697572;--cream:#fbf8f5;--line:#e8e8e4;--shadow-soft:0 16px 50px rgba(36,42,40,.08);--shadow-card:0 10px 35px rgba(36,42,40,.07)}
body{background:#fbfaf8;color:var(--ink)}h1,h2,h3,h4,h5,h6{color:var(--ink);letter-spacing:-.025em}.container{max-width:1240px}.eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--forest)}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--primary)}.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}.text-link{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--ink)}.text-link:hover{color:var(--primary)}.btn-primary{background:var(--forest);box-shadow:0 10px 25px rgba(47,111,98,.18)}.btn-primary:hover{background:var(--forest-dark)}.btn-secondary{border:1px solid #d9dcd9;color:var(--ink);background:#fff}.btn-secondary:hover{border-color:var(--forest);background:#f5f8f7;color:var(--forest)}
.site-header{height:78px;background:rgba(251,250,248,.9);border-bottom:1px solid rgba(30,40,36,.07)}.header-inner{height:78px}.logo{font-size:1.35rem;letter-spacing:-.04em}.logo-icon{filter:grayscale(.2)}.main-nav{gap:1.75rem}.main-nav a{font-size:.88rem}.search-bar{background:#f2f3f1;border-radius:14px}.search-bar input{width:155px}.header-actions{gap:.45rem}.header-actions button,.header-actions a{color:#4f5b57}.cart-badge{background:var(--forest)}
.df-hero{position:relative;min-height:calc(100vh - 78px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 72% 40%,#f7e4ea 0,transparent 30%),linear-gradient(120deg,#f4f1eb 0%,#fbfaf8 55%,#eef4f1 100%)}.df-hero-glow{position:absolute;width:560px;height:560px;border-radius:50%;right:-170px;top:50px;background:#e3f0ec;filter:blur(5px);opacity:.7}.df-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:4rem;align-items:center;padding:5.5rem 1.5rem}.df-hero-copy h1{font-size:clamp(3.3rem,6vw,5.7rem);line-height:.98;margin:1.25rem 0 1.5rem;max-width:700px}.df-hero-copy h1 em{font-family:var(--font-display);font-weight:400;color:var(--primary)}.df-hero-lead{font-size:1.08rem;line-height:1.8;max-width:590px;color:#58645f}.df-hero-actions{display:flex;align-items:center;gap:1.4rem;margin-top:2rem;flex-wrap:wrap}.df-proof-row{display:flex;align-items:center;gap:1.4rem;margin-top:3rem}.df-proof-row div{display:flex;flex-direction:column}.df-proof-row strong{font-size:.95rem}.df-proof-row span{font-size:.72rem;color:#7b8581;margin-top:2px}.df-proof-row i{height:32px;width:1px;background:#d9dcd8}.df-hero-art{position:relative;max-width:570px;margin-left:auto}.df-hero-art>img{display:block;width:100%;position:relative;z-index:2;border-radius:38px;box-shadow:0 30px 80px rgba(48,62,56,.16)}.art-orbit{position:absolute;border:1px solid rgba(47,111,98,.15);border-radius:50%;z-index:1}.orbit-one{width:120%;aspect-ratio:1;left:-10%;top:-9%;}.orbit-two{width:82%;aspect-ratio:1;left:9%;top:9%;border-style:dashed}.floating-card{position:absolute;z-index:4;left:-38px;bottom:35px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid #fff;border-radius:18px;padding:14px 18px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-soft)}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:.8rem}.floating-card small{font-size:.7rem;color:var(--muted);margin-top:2px}.floating-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--primary-50);color:var(--primary)}
.trust-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.trust-strip-inner{display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 1.5rem;color:#69736f;font-size:.78rem;font-weight:700;letter-spacing:.02em}.section{padding:6.5rem 0}.section-heading-row{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:3rem}.section-heading-row h2,.section-header h2{font-size:clamp(2rem,3vw,3rem);margin:.6rem 0 .45rem}.section-heading-row p,.section-header p{max-width:560px}.section-header{margin-bottom:3rem}.df-products{gap:1.35rem}.df-product-card{border:1px solid #ecebe7;border-radius:24px;box-shadow:none;background:#fff}.df-product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}.df-product-card .product-image{padding-top:105%;background:#f4f1ec}.df-product-card .product-image img{object-fit:cover}.df-product-card .product-info{padding:1.15rem 1.2rem 1.25rem}.df-product-card .product-category{color:#88918d;font-size:.66rem}.df-product-card .product-name{font-family:var(--font-body);font-size:.98rem;letter-spacing:-.01em}.df-product-card .product-rating{font-size:.7rem;color:#8b9490}.product-bottom{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.85rem}.product-price{font-size:.95rem}.product-price strong{color:var(--ink)}.product-price del{color:#a7afab;font-size:.75rem;font-weight:400}.sale-pill{position:absolute;left:13px;top:13px;background:var(--primary);color:#fff;padding:6px 9px;border-radius:999px;font-size:.65rem;font-weight:800}.product-wishlist{width:38px;height:38px;background:#fff;border:1px solid #e7e7e4;color:#65706b;box-shadow:0 6px 15px #0000000b;font-size:1.2rem}.product-wishlist:hover{background:#fff;color:var(--primary);transform:scale(1.05)}
.skin-section{background:#f4f1ec}.df-category-grid{grid-template-columns:repeat(4,1fr);gap:1rem}.df-category-card{position:relative;text-align:left;background:#fff;border:1px solid #ebe9e4;border-radius:22px;padding:1.7rem;min-height:190px}.df-category-card:hover{border-color:#c8d8d3;background:#fff;transform:translateY(-5px)}.category-number{font-size:.7rem;color:#a1aaa6;font-weight:800}.category-icon{display:block;font-size:1.8rem;margin:1.2rem 0 .65rem}.df-category-card h3{font-family:var(--font-body);font-size:1rem}.df-category-card p{font-size:.75rem}.category-arrow{position:absolute;right:18px;bottom:18px;color:var(--forest);font-weight:800}
.expert-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:6rem;align-items:center}.expert-art{position:relative}.expert-art img{width:100%;border-radius:32px;box-shadow:var(--shadow-soft)}.expert-badge{position:absolute;right:-30px;bottom:30px;background:#fff;padding:16px 20px;border-radius:18px;box-shadow:var(--shadow-soft)}.expert-badge strong,.expert-badge small{display:block}.expert-badge strong{font-size:.82rem}.expert-badge small{font-size:.7rem;color:var(--muted);margin-top:3px}.expert-copy h2{font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.08;margin:1rem 0}.expert-copy>p{font-size:1rem;line-height:1.85;max-width:600px}.expert-points{margin:2rem 0}.expert-points>div{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.expert-points>div>span{color:var(--primary);font-weight:800;font-size:.72rem;padding-top:4px}.expert-points strong{font-size:.9rem}.expert-points p{font-size:.78rem;margin-top:3px}
.consult-section{padding-top:1rem}.consult-card{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;overflow:hidden;background:var(--forest-dark);border-radius:34px;color:#fff;padding:0 0 0 4rem;box-shadow:0 25px 70px rgba(47,111,98,.16)}.consult-card h2{color:#fff;font-size:clamp(2rem,3.5vw,3.2rem);line-height:1.08;margin:1rem 0}.consult-card p{color:#d8e4e0;max-width:500px}.consult-card .eyebrow{color:#b8d8cf}.consult-card img{width:100%;display:block;min-height:330px;object-fit:cover}.df-testimonials{background:#fff}.df-testimonial{border:1px solid #ecebe7;box-shadow:none;border-radius:22px}.df-testimonial blockquote{font-family:var(--font-display);font-size:1.18rem;line-height:1.55;color:#36413d}.df-testimonial .author strong,.df-testimonial .author span{display:block}.df-testimonial .author span{font-size:.7rem;color:#8a9490;margin-top:2px}.df-faq{background:#f6f3ef}.center-link{text-align:center;margin-top:2rem}.df-newsletter{padding:4rem 0;background:#fff}.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:2.4rem 2.7rem;background:#f1e4e8;border-radius:28px}.newsletter-inner h2{margin:.55rem 0}.newsletter-inner p{margin:0}.newsletter-form{display:flex;gap:.6rem;min-width:min(100%,460px)}.newsletter-form input{flex:1;border:1px solid #ddd8d6;background:#000;border-radius:999px;padding:.85rem 1.2rem;outline:none}.newsletter-form input:focus{border-color:var(--forest);box-shadow:0 0 0 4px rgba(47,111,98,.08)}
.order-detail-card,.auth-card{background:#fff;border:1px solid #ecebe7;border-radius:24px;box-shadow:var(--shadow-card)}.order-detail-card{max-width:800px;margin:auto;padding:2rem}.order-detail-row{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.order-detail-row.total{font-size:1.1rem}.auth-card{max-width:500px;margin:0 auto;padding:2.5rem}.auth-section{min-height:100vh;padding:130px 0 70px;background:linear-gradient(135deg,#f5efec,#eef4f1)}.auth-header{text-align:center;margin-bottom:2rem}.auth-header h1{margin:.6rem 0}.auth-note{text-align:center;margin-top:1.5rem}
.site-footer{background:#1c2724;color:#dbe4e0;border-top:none}.site-footer p,.site-footer a{color:#aebdb7}.footer-brand h3,.footer-col h4{color:#fff}.footer-brand h3 span{color:#c97893}.footer-bottom{border-top:1px solid #ffffff14}.footer-social a:hover{background:#ffffff12;color:#fff}
@media(max-width:900px){.df-hero-grid,.expert-grid,.consult-card{grid-template-columns:1fr}.df-hero-grid{padding-top:4rem}.df-hero-art{max-width:620px;margin:0 auto}.expert-grid{gap:3rem}.consult-card{padding:2.5rem}.df-category-grid{grid-template-columns:repeat(2,1fr)}.trust-strip-inner{flex-wrap:wrap;justify-content:center}.newsletter-inner{flex-direction:column;align-items:flex-start}.newsletter-form{width:100%}}
@media(max-width:768px){.main-nav,.search-bar{display:none}.header-actions{gap:.15rem}.mobile-menu-toggle{display:block}.df-hero{min-height:auto}.df-hero-copy h1{font-size:3.35rem}.df-proof-row{gap:.8rem;justify-content:space-between}.df-proof-row i{display:none}.df-proof-row span{font-size:.65rem}.section-heading-row{align-items:flex-start;flex-direction:column}.section{padding:4.5rem 0}.floating-card{left:12px;bottom:18px}.consult-card{padding:2rem}.consult-card img{min-height:220px}.newsletter-inner{padding:2rem}.footer-grid{grid-template-columns:1fr}}
@media(max-width:520px){.container{padding:0 1rem}.df-hero-grid{padding:3.5rem 1rem}.df-hero-copy h1{font-size:2.8rem}.df-hero-lead{font-size:.95rem}.df-proof-row{flex-wrap:wrap}.df-proof-row div{width:30%}.df-category-grid{grid-template-columns:1fr}.newsletter-form{flex-direction:column}.newsletter-form .btn{width:100%;justify-content:center}.df-product-card .product-bottom .btn{padding:.5rem .9rem}}
#notification-container{position:fixed;right:22px;bottom:22px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:360px}.df-toast{padding:13px 16px;border-radius:14px;background:#1d2925;color:#fff;box-shadow:0 18px 45px #0003;font-size:.84rem;font-weight:600;animation:dfToast .25s ease}.df-toast.error{background:#8d3f4f}@keyframes dfToast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}body.no-scroll{overflow:hidden}.cart-overlay{opacity:0;visibility:hidden;transition:.25s}.cart-overlay.active{opacity:1;visibility:visible}.product-wishlist.saved{color:var(--primary);background:var(--primary-50)}.payment-methods{display:grid;gap:12px}.payment-option{display:flex!important;align-items:center;gap:12px;text-align:left!important;border:1px solid #dfe4e1!important;background:#fff}.payment-option input{display:block!important;accent-color:var(--forest)}.payment-option strong,.payment-option small{display:block}.payment-option small{color:var(--muted);margin-top:3px}.payment-note{font-size:.78rem;color:var(--muted);padding:12px 14px;background:#f5f7f5;border-radius:12px}


/* ============================================================
   DERMA FARM — PREMIUM UI SYSTEM v2
   UI-only enhancement layer. PHP/business logic untouched.
   Brand palette sampled/derived from the supplied logo:
   deep berry • rose • blush • warm ivory • ink
   ============================================================ */

:root{
  --primary:#9B2F63;
  --primary-dark:#741F48;
  --primary-light:#F6E4ED;
  --primary-50:#FCF4F8;
  --accent:#C86A91;
  --ink:#241B22;
  --muted:#74666E;
  --paper:#FFFDFC;
  --cream:#FBF7F4;
  --line:rgba(62,38,49,.10);
  --shadow-soft:0 18px 55px rgba(55,29,43,.08);
  --shadow-card:0 12px 35px rgba(55,29,43,.08);
  --shadow-hover:0 24px 60px rgba(55,29,43,.14);
  --radius:16px;
  --radius-lg:24px;
  --radius-xl:32px;
}

/* Brand header */
.site-header{
  background:rgba(255,253,252,.82)!important;
  backdrop-filter:blur(22px)!important;
  border-bottom:1px solid rgba(155,47,99,.09)!important;
  box-shadow:0 4px 25px rgba(40,20,30,.025);
}
.header-inner{height:84px!important}
.logo{display:flex!important;align-items:center!important;line-height:0!important}
.brand-logo{
  width:76px!important;height:66px!important;object-fit:contain!important;
  display:block!important;filter:drop-shadow(0 5px 10px rgba(155,47,99,.10));
}
.main-nav{gap:2.35rem!important}
.main-nav a{
  color:#4F434A!important;font-size:.86rem!important;letter-spacing:.01em;
}
.main-nav a::after{height:2px!important;border-radius:4px}
.search-bar{
  border:1px solid rgba(65,42,53,.12)!important;
  background:#fff!important;border-radius:999px!important;
  box-shadow:0 6px 20px rgba(40,20,30,.04);
}
.search-bar input{background:transparent!important}
.header-actions{gap:.45rem!important}
.header-actions button,.header-actions>a{
  width:42px;height:42px;display:inline-flex!important;align-items:center;justify-content:center;
  border:1px solid transparent!important;
}
.header-actions button:hover,.header-actions a:hover{
  background:var(--primary-50)!important;border-color:rgba(155,47,99,.10)!important;
}
.cart-badge{background:var(--primary)!important;box-shadow:0 3px 10px rgba(155,47,99,.3)}

/* Global */
body{background:var(--paper)!important;color:var(--ink)!important}
p{color:var(--muted)!important}
h1,h2,h3,h4,h5,h6{color:var(--ink)!important;letter-spacing:-.025em}
.container{max-width:1320px!important}
.section{padding:100px 0!important}
.btn{
  min-height:46px;border-radius:999px!important;
  letter-spacing:.01em;box-shadow:none;
}
.btn-primary{
  background:linear-gradient(135deg,#9B2F63,#7F234E)!important;
  box-shadow:0 12px 28px rgba(155,47,99,.22)!important;
}
.btn-primary:hover{transform:translateY(-3px)!important;box-shadow:0 17px 34px rgba(155,47,99,.28)!important}
.btn-secondary{
  background:#fff!important;color:var(--primary)!important;
  border:1px solid rgba(155,47,99,.22)!important;
}
.btn-secondary:hover{background:var(--primary-50)!important;color:var(--primary)!important}
.eyebrow{
  color:var(--primary)!important;font-size:.70rem!important;font-weight:800!important;
  letter-spacing:.16em!important;text-transform:uppercase;
}
.section-header{max-width:760px;margin:0 auto 50px!important}
.section-header h2,.section-heading-row h2{
  font-size:clamp(2.15rem,4vw,3.35rem)!important;line-height:1.05!important;
  margin:.6rem 0 1rem!important;
}
.section-header p,.section-heading-row p{font-size:1rem;line-height:1.8}

/* HERO */
.df-hero{
  position:relative!important;overflow:hidden!important;
  min-height:760px!important;padding:150px 0 90px!important;
  background:
    radial-gradient(circle at 76% 34%,rgba(200,106,145,.20),transparent 28%),
    radial-gradient(circle at 92% 80%,rgba(155,47,99,.09),transparent 30%),
    linear-gradient(135deg,#fffdfc 0%,#fbf1f5 58%,#f7e9ef 100%)!important;
}
.df-hero::before{
  content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:radial-gradient(rgba(120,62,84,.14) .7px,transparent .7px);
  background-size:18px 18px;mask-image:linear-gradient(to bottom,black,transparent 75%);
}
.df-hero-grid{position:relative;z-index:1;grid-template-columns:1.03fr .97fr!important;gap:70px!important;align-items:center!important}
.df-hero-copy h1{
  font-size:clamp(3.3rem,6vw,6.2rem)!important;line-height:.93!important;
  letter-spacing:-.055em!important;max-width:780px!important;margin:20px 0 28px!important;
}
.df-hero-copy h1 em{color:var(--primary)!important;font-style:italic;font-weight:600}
.df-hero-lead{font-size:1.08rem!important;max-width:610px!important;line-height:1.85!important}
.df-hero-actions{margin-top:34px!important}
.df-proof-row{
  margin-top:55px!important;padding-top:24px!important;border-top:1px solid var(--line)!important;
}
.df-proof-row strong{color:var(--ink)!important;font-size:1rem}
.df-proof-row span{font-size:.72rem!important;color:#8C7D85!important}
.df-hero-art{
  min-height:590px!important;border-radius:48% 48% 18% 18%!important;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(245,222,232,.78))!important;
  box-shadow:var(--shadow-soft)!important;border:1px solid rgba(255,255,255,.85)!important;
}
.df-hero-art img{
  width:min(88%,590px)!important;max-height:610px!important;object-fit:contain!important;
  filter:drop-shadow(0 35px 38px rgba(86,38,58,.17))!important;
}
.floating-card{
  background:rgba(255,255,255,.91)!important;backdrop-filter:blur(18px)!important;
  border:1px solid rgba(255,255,255,.9)!important;box-shadow:var(--shadow-card)!important;
  border-radius:18px!important;
}

/* ================================
   TRUST MARQUEE
================================ */

.trust-strip {
    width: 100%;
    overflow: hidden;
    background: var(--color-bg, #f7f4ef);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.trust-marquee {
    width: 100%;
    overflow: hidden;
}

.trust-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: trustMarquee 28s linear infinite;
    will-change: transform;
}

.trust-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 16px 38px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-text, #222);
}

.trust-item::after {
    content: "•";
    margin-left: 76px;
    opacity: 0.35;
}

@keyframes trustMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.trust-marquee:hover .trust-marquee-track {
    animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
    .trust-marquee-track {
        animation-duration: 22s;
    }

    .trust-item {
        padding: 13px 24px;
        font-size: 12px;
    }

    .trust-item::after {
        margin-left: 48px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .trust-marquee-track {
        animation: none;
    }
}pacing:.08em!important;text-transform:uppercase}

/* Product cards */
.df-section{background:#fff!important}
.products-grid{gap:26px!important}
.product-card,.df-product-card{
  background:#fff!important;border:1px solid rgba(64,40,52,.075)!important;
  border-radius:24px!important;overflow:hidden!important;
  box-shadow:0 8px 28px rgba(40,20,30,.035)!important;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease!important;
}
.product-card:hover,.df-product-card:hover{
  transform:translateY(-8px)!important;box-shadow:var(--shadow-hover)!important;
  border-color:rgba(155,47,99,.15)!important;
}
.product-image{
  background:linear-gradient(145deg,#fbf3f6,#f7ecef)!important;
  min-height:320px!important;padding:24px!important;
}
.product-image img{mix-blend-mode:multiply!important;transition:transform .5s ease!important}
.product-card:hover .product-image img{transform:scale(1.045)!important}
.product-info{padding:22px!important}
.product-category{
  color:#9A6D80!important;font-size:.66rem!important;letter-spacing:.12em!important;
  text-transform:uppercase!important;font-weight:800!important;
}
.product-name{font-size:1.25rem!important;margin:8px 0!important}
.product-name a{color:var(--ink)!important}
.product-rating{font-size:.72rem!important}
.product-price strong{font-size:1.12rem!important;color:var(--primary)!important}
.sale-pill{background:var(--primary)!important;border-radius:999px!important}
.product-wishlist{
  width:40px!important;height:40px!important;border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;box-shadow:0 8px 20px rgba(40,20,30,.08)!important;
}

/* Categories */
.skin-section{
  background:linear-gradient(180deg,#fbf6f3 0%,#fff 100%)!important;
}
.df-category-card{
  background:#fff!important;border:1px solid var(--line)!important;
  border-radius:26px!important;padding:30px!important;
  box-shadow:0 8px 25px rgba(50,28,40,.035)!important;
  min-height:210px!important;
}
.df-category-card:hover{
  background:var(--primary)!important;color:#fff!important;transform:translateY(-7px)!important;
  box-shadow:0 22px 45px rgba(155,47,99,.20)!important;
}
.df-category-card:hover h3,.df-category-card:hover p,.df-category-card:hover .category-number{color:#fff!important}
.category-number{color:#B998A7!important}
.category-icon{font-size:1.8rem!important}

/* Expert / consultation */
.expert-section{background:#fff!important}
.expert-grid{gap:90px!important}
.expert-art{
  border-radius:34px!important;background:#f7e9ef!important;overflow:hidden!important;
  box-shadow:var(--shadow-soft)!important;
}
.expert-art img{width:100%;height:100%;object-fit:cover;display:block}
.expert-copy h2{font-size:clamp(2.3rem,4vw,4rem)!important;line-height:1.02!important}
.expert-points>div{border-bottom:1px solid var(--line)!important;padding:18px 0!important}
.expert-points span{color:var(--primary)!important;font-weight:800}
.consult-section{background:#fbf4f7!important}
.consult-card{
  border-radius:34px!important;padding:60px 70px!important;
  background:linear-gradient(125deg,#321F29,#6F2849)!important;
  box-shadow:0 25px 70px rgba(63,27,45,.18)!important;overflow:hidden!important;
}
.consult-card h2,.consult-card p{color:#fff!important}
.consult-card p{opacity:.78}

/* Testimonials / FAQ / newsletter */
.df-testimonials{background:#fff!important}
.testimonial-card,.df-testimonial{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:24px!important;
  box-shadow:0 10px 32px rgba(40,20,30,.045)!important;padding:30px!important;
}
.testimonial-card blockquote{font-family:var(--font-display);font-size:1.15rem!important;color:var(--ink)!important}
.df-faq{background:#fbf7f4!important}
.faq-item{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
  margin-bottom:12px!important;overflow:hidden!important;
}
.faq-question{padding:22px 24px!important;font-weight:700!important;color:var(--ink)!important}
.newsletter{background:#2C2027!important}
.newsletter h2,.newsletter p{color:#00000!important}
.newsletter .eyebrow{color:#E9A9C4!important}
.newsletter-form input{
  border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.08)!important;
  color:#fff!important;border-radius:999px!important;
}
.newsletter-form input::placeholder{color:#000 !important;}

/* SHOP */
.shop-section{padding:145px 0 90px!important;background:#fff!important}
.shop-header{text-align:left!important;max-width:1320px!important;margin:0 auto 38px!important}
.shop-header h1{
  font-size:clamp(3rem,5vw,5rem)!important;line-height:.95!important;margin-bottom:14px!important;
}
.shop-filters .filter-form{
  background:#fbf5f7!important;border:1px solid rgba(155,47,99,.09)!important;
  border-radius:22px!important;box-shadow:none!important;padding:16px!important;
}
.form-control{
  border:1px solid rgba(60,38,48,.12)!important;background:#fff!important;
  border-radius:12px!important;min-height:46px!important;
}
.form-control:focus{border-color:rgba(155,47,99,.45)!important;box-shadow:0 0 0 4px rgba(155,47,99,.08)!important}
.results-count{color:#897780!important}
.shop-section .products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

/* PRODUCT DETAIL */
.product-detail{
  padding-top:145px!important;background:#fff!important;
}
.product-detail-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
  gap:72px!important;align-items:start!important;
}
.product-gallery .gallery-main{
  background:linear-gradient(145deg,#fbf1f5,#f6e6ed)!important;
  border-radius:34px!important;border:1px solid rgba(155,47,99,.07)!important;
  box-shadow:var(--shadow-soft)!important;min-height:600px!important;
  display:flex;align-items:center;justify-content:center;
}
.product-gallery .gallery-main img{max-height:600px!important;object-fit:contain!important}
.gallery-thumb{
  border-radius:14px!important;background:#fbf1f5!important;border:2px solid transparent!important;
}
.product-info-detail h1{
  font-size:clamp(2.6rem,4vw,4.6rem)!important;line-height:.98!important;
}
.product-info-detail .product-price{margin:22px 0!important}
.product-info-detail .product-price .current,
.product-info-detail .product-price strong{font-size:2rem!important;color:var(--primary)!important}
.product-info-detail .btn{min-height:54px!important}
.reviews-section,.similar-products{
  padding-top:80px!important;border-top:1px solid var(--line)!important;
}
.rating-summary{background:#fbf1f5!important;border-radius:22px!important}
.review-item{border-bottom:1px solid var(--line)!important;padding:25px 0!important}

/* Cart */
.cart-sidebar{
  background:#fff!important;box-shadow:-25px 0 70px rgba(35,20,28,.18)!important;
}
.cart-header{border-bottom:1px solid var(--line)!important}
.cart-item{border-bottom:1px solid var(--line)!important}
.cart-item-image{border-radius:14px!important;background:#fbf1f5!important;overflow:hidden}
.cart-footer{border-top:1px solid var(--line)!important;background:#fff!important}

/* Mobile */
.mobile-menu{
  background:rgba(255,253,252,.98)!important;backdrop-filter:blur(18px)!important;
}
@media (max-width:980px){
  .main-nav,.search-bar{display:none!important}
  .df-hero{padding-top:125px!important;min-height:auto!important}
  .df-hero-grid,.product-detail-grid{grid-template-columns:1fr!important}
  .df-hero-copy{text-align:center}
  .df-hero-lead{margin-inline:auto}
  .df-hero-actions,.df-proof-row{justify-content:center}
  .df-hero-art{min-height:460px!important}
  .shop-section .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .header-inner{height:72px!important}
  .brand-logo{width:65px!important;height:58px!important}
  .section{padding:72px 0!important}
  .df-hero{padding:30px 0 65px!important}
  .df-hero-copy h1{font-size:3.25rem!important}
  .df-hero-art{min-height:350px!important;border-radius:36% 36% 16% 16%!important}
  .df-proof-row{gap:12px!important}
  .df-proof-row i{display:none!important}
  .shop-section{padding-top:112px!important}
  .shop-section .products-grid{grid-template-columns:1fr!important}
  .product-image{min-height:270px!important}
  .product-detail{padding-top:110px!important}
  .product-gallery .gallery-main{min-height:390px!important}
  .consult-card{padding:38px 25px!important}
}

/* =========================================================
DERMA FARM — PREMIUM RITUAL PRODUCT SECTION
========================================================= */

.df-ritual-section {
position: relative;
padding: 30px 0px 50px;
background:
radial-gradient(circle at 8% 15%, rgba(224, 154, 174, .10), transparent 28%),
radial-gradient(circle at 92% 75%, rgba(226, 188, 197, .14), transparent 30%),
#fbf8f6;
overflow: hidden;
}

/* subtle luxury background */

.df-ritual-section::before {
content: "";
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
border: 1px solid rgba(111, 35, 61, .06);
top: -220px;
right: -160px;
pointer-events: none;
}

.df-ritual-section::after {
content: "";
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
border: 1px solid rgba(111, 35, 61, .05);
bottom: -220px;
left: -170px;
pointer-events: none;
}

/* =========================================================
HEADER
========================================================= */

.df-ritual-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 50px;
position: relative;
z-index: 2;
}

.df-ritual-heading {
max-width: 720px;
}

.df-luxury-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #7b314d;
font-size: 11px;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
}

.df-eyebrow-line {
width: 34px;
height: 1px;
background: #a75b76;
}

.df-ritual-heading h2 {
margin: 0;
color: #241b1e;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(42px, 5vw, 70px);
line-height: .98;
letter-spacing: -.045em;
font-weight: 500;
}

.df-ritual-heading h2 em {
display: block;
color: #963d5d;
font-weight: 400;
}

.df-ritual-heading p {
max-width: 570px;
margin: 25px 0 0;
color: #766c6f;
font-size: 15px;
line-height: 1.8;
}

/* View all */

.df-view-all {
display: inline-flex;
align-items: center;
gap: 17px;
padding-bottom: 9px;
border-bottom: 1px solid rgba(80, 42, 52, .35);
color: #35272b;
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: .35s ease;
}

.df-view-all:hover {
gap: 24px;
color: #963d5d;
border-color: #963d5d;
}

.df-view-arrow {
font-size: 19px;
}

/* =========================================================
DIVIDER
========================================================= */

.df-ritual-divider {
display: flex;
align-items: center;
gap: 20px;
margin: 48px 0 45px;
}

.df-ritual-divider span {
height: 1px;
flex: 1;
background: rgba(57, 34, 40, .10);
}

.df-ritual-divider i {
color: #a45b74;
font-size: 12px;
font-style: normal;
}

/* =========================================================
PRODUCT GRID
========================================================= */

.df-premium-products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 25px;
position: relative;
z-index: 2;
}

/* =========================================================
PRODUCT CARD
========================================================= */

.df-premium-product {
    margin-top:10px;
min-width: 0;
transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.df-premium-product:hover {
transform: translateY(-9px);
}

/* =========================================================
PRODUCT IMAGE
========================================================= */

.df-product-visual {
position: relative;
aspect-ratio: .84;
overflow: hidden;
background: #f1e9e8;
}

.df-product-link {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}

.df-product-glow {
position: absolute;
width: 72%;
height: 72%;
left: 14%;
top: 15%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.38) 42%,
transparent 72%
);
filter: blur(5px);
transition: transform .8s ease;
}

.df-product-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
z-index: 1;
transition:
transform .8s cubic-bezier(.2,.8,.2,1),
filter .5s ease;
}

.df-premium-product:hover .df-product-img {
transform: scale(1.065);
}

.df-premium-product:hover .df-product-glow {
transform: scale(1.18);
}

/* =========================================================
BADGES
========================================================= */

.df-sale-badge {
position: absolute;
left: 17px;
top: 17px;
z-index: 4;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #81324f;
color: #fff;
font-size: 8px;
font-weight: 600;
box-shadow: 0 10px 30px rgba(84, 24, 47, .18);
}

.df-sale-badge small {
font-size: 7px;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .8;
font-weight: 600;
}

.df-product-number {
position: absolute;
right: 17px;
top: 18px;
z-index: 3;
color: rgba(50, 35, 39, .42);
font-family: "Playfair Display", Georgia, serif;
font-size: 13px;
letter-spacing: .08em;
}

/* =========================================================
WISHLIST
========================================================= */

.df-wishlist-btn {
position: absolute;
right: 15px;
bottom: 15px;
z-index: 6;
width: 42px;
height: 42px;
border: 1px solid rgba(70, 35, 46, .12);
border-radius: 50%;
background: rgba(255,255,255,.84);
backdrop-filter: blur(12px);
color: #633043;
cursor: pointer;
font-size: 22px;
display: grid;
place-items: center;
transition: .3s ease;
}

.df-wishlist-btn:hover {
background: #fff;
transform: scale(1.08);
border-color: rgba(111, 35, 61, .35);
}

/* =========================================================
QUICK ADD
========================================================= */

.df-quick-add {
position: absolute;
left: 15px;
right: 68px;
bottom: 15px;
z-index: 6;
width:131px;
height: 25px;
padding: 0 15px 0 18px;
border: 0;
border-radius: 24px;
background: rgba(38, 25, 29, .92);
backdrop-filter: blur(12px);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
transform: translateY(65px);
opacity: 0;
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
opacity .3s ease,
background .3s ease;
}

.df-premium-product:hover .df-quick-add {
transform: translateY(0);
opacity: 1;
}

.df-quick-add:hover {
background: #81324f;
}

.df-quick-arrow {
font-size: 18px;
font-weight: 300;
}

/* =========================================================
PRODUCT CONTENT
========================================================= */

.df-product-content {
padding: 19px 3px 0;
}

.df-product-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}

.df-product-category {
color: #9a6878;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .14em;
}

.df-product-rating {
display: flex;
align-items: center;
gap: 6px;
}

.df-stars {
color: #9d516d;
font-size: 11px;
letter-spacing: 1px;
}

.df-review-count {
color: #a09698;
font-size: 10px;
}

.df-premium-product-name {
margin: 9px 0 15px;
font-family: "Playfair Display", Georgia, serif;
font-size: 21px;
line-height: 1.15;
font-weight: 500;
letter-spacing: -.015em;
}

.df-premium-product-name a {
color: #292023;
text-decoration: none;
transition: color .3s ease;
}

.df-premium-product-name a:hover {
color: #963d5d;
}

/* =========================================================
PRICE
========================================================= */

.df-product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding-top: 13px;
border-top: 1px solid rgba(61, 39, 44, .09);
}

.df-price-wrap {
display: flex;
align-items: baseline;
gap: 8px;
}

.df-premium-price {
color: #332429;
font-size: 15px;
font-weight: 800;
}

.df-original-price {
color: #a69a9d;
font-size: 11px;
}

/* View product */

.df-discover-product {
display: inline-flex;
align-items: center;
gap: 7px;
color: #693147;
font-size: 10px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .08em;
transition: .3s ease;
}

.df-discover-product span {
font-size: 15px;
transition: transform .3s ease;
}

.df-discover-product:hover {
color: #9a3f60;
}

.df-discover-product:hover span {
transform: translateX(4px);
}

/* =========================================================
BOTTOM CTA
========================================================= */

.df-ritual-bottom {
margin-top: 58px;
padding-top: 25px;
border-top: 1px solid rgba(61, 39, 44, .09);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}

.df-bottom-copy {
display: flex;
align-items: center;
gap: 11px;
color: #817477;
font-size: 11px;
letter-spacing: .04em;
}

.df-mini-sparkle {
color: #9a3f60;
}

.df-shop-all {
display: inline-flex;
align-items: center;
gap: 13px;
color: #693147;
text-decoration: none;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .10em;
}

.df-shop-all span {
font-size: 17px;
transition: transform .3s ease;
}

.df-shop-all:hover span {
transform: translateX(5px);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

```
.df-premium-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.df-premium-product:last-child {
    display: none;
}
```

}

@media (max-width: 800px) {

```
.df-ritual-section {
    padding: 85px 0 75px;
}

.df-ritual-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
}

.df-ritual-heading h2 {
    font-size: 46px;
}

.df-premium-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 15px;
}

.df-premium-product:last-child {
    display: block;
}

.df-product-visual {
    aspect-ratio: .82;
}

.df-quick-add {
    transform: translateY(0);
    opacity: 1;
}
```

}

@media (max-width: 520px) {

```
.df-ritual-section {
    padding: 65px 0;
}

.df-ritual-heading h2 {
    font-size: 39px;
}

.df-ritual-heading p {
    font-size: 13px;
}

.df-premium-products {
    gap: 5px;
}

.df-product-visual {
    aspect-ratio: 1 / 1.03;
}

.df-product-content {
    padding-top: 17px;
}

.df-premium-product-name {
    font-size: 15px;
}

.df-ritual-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}
```

}

/* =========================================================
ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

```
.df-premium-product,
.df-product-img,
.df-product-glow,
.df-quick-add,
.df-view-all,
.df-discover-product span,
.df-shop-all span {
    transition: none !important;
}
```

}

/* =========================================================
DERMA FARM — PREMIUM SKIN CONCERNS
========================================================= */

.df-concerns-section {
position: relative;
padding: 125px 0 120px;
overflow: hidden;
background: #fff;
}

/* =========================================================
HEADER
========================================================= */

.df-concerns-header {
display: flex;
flex-direction:column;
align-items: start;
gap: 80px;
}

.df-concerns-title {
max-width: 680px;
}

.df-concerns-title .df-luxury-eyebrow {
margin-bottom: 21px;
}

.df-concerns-title h2 {
margin: 0;
color: #241b1e;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(44px, 5vw, 72px);
line-height: .98;
font-weight: 500;
letter-spacing: -.045em;
}

.df-concerns-title h2 em {
display: block;
color: #963d5d;
font-weight: 400;
}

.df-concerns-intro {
padding-bottom: 5px;
}

.df-concerns-intro p {
max-width: 440px;
margin: 0;
color: #766b6f;
font-size: 14px;
line-height: 1.9;
}

/* =========================================================
DIVIDER
========================================================= */

.df-concerns-divider {
display: flex;
align-items: center;
gap: 20px;
margin: 52px 0 42px;
}

.df-concerns-divider span {
height: 1px;
flex: 1;
background: rgba(64, 39, 47, .10);
}

.df-concerns-divider i {
color: #a45b74;
font-size: 12px;
font-style: normal;
}

/* =========================================================
GRID
========================================================= */

.df-concerns-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}

/* =========================================================
CARD
========================================================= */

.df-concern-card {
position: relative;
min-height: 365px;
padding: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;

```
text-decoration: none;

background:
    linear-gradient(
        145deg,
        #f9efef 0%,
        #f4e3e5 45%,
        #ead4d9 100%
    );

border: 1px solid rgba(119, 56, 78, .08);

transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;
```

}

.df-concern-card:nth-child(2) {
background:
linear-gradient(
145deg,
#f7f0eb 0%,
#eee0d9 48%,
#e5d1ca 100%
);
}

.df-concern-card:nth-child(3) {
background:
linear-gradient(
145deg,
#f4eeee 0%,
#eadfe2 50%,
#dfced4 100%
);
}

.df-concern-card:nth-child(4) {
background:
linear-gradient(
145deg,
#f7f1e9 0%,
#eee4d9 50%,
#e3d4c8 100%
);
}

.df-concern-card:hover {
transform: translateY(-10px);
box-shadow:
0 28px 60px rgba(71, 36, 49, .13);
}

/* =========================================================
BACKGROUND ORBS
========================================================= */

.df-concern-orb {
position: absolute;
width: 230px;
height: 230px;
border-radius: 50%;
top: -75px;
right: -75px;

```
background:
    radial-gradient(
        circle,
        rgba(255,255,255,.72) 0%,
        rgba(255,255,255,.25) 45%,
        transparent 70%
    );

transition:
    transform .8s cubic-bezier(.2,.8,.2,1);
```

}

.df-orb-two {
width: 150px;
height: 150px;
top: 105px;
right: -70px;
opacity: .55;
}

.df-concern-card:hover .df-concern-orb {
transform: scale(1.25) translate(-8px, 8px);
}

/* =========================================================
NUMBER
========================================================= */

.df-concern-number {
position: absolute;
top: 24px;
left: 27px;

```
color: rgba(72, 42, 52, .38);

font-family: "Playfair Display", Georgia, serif;
font-size: 14px;
letter-spacing: .08em;
```

}

/* =========================================================
ICON
========================================================= */

.df-concern-icon {
position: absolute;
top: 28px;
right: 27px;

```
width: 50px;
height: 50px;

display: grid;
place-items: center;

border: 1px solid rgba(82, 43, 55, .12);
border-radius: 50%;

background: rgba(255,255,255,.42);
backdrop-filter: blur(10px);

color: #71344d;
font-size: 19px;

transition:
    transform .45s ease,
    background .35s ease;
```

}

.df-concern-card:hover .df-concern-icon {
transform: rotate(8deg) scale(1.08);
background: rgba(255,255,255,.72);
}

/* =========================================================
CONTENT
========================================================= */

.df-concern-content {
position: relative;
z-index: 3;
}

.df-concern-label {
display: block;
margin-bottom: 10px;

```
color: #986277;

font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .16em;
```

}

.df-concern-content h3 {
margin: 0;

```
color: #302126;

font-family: "Playfair Display", Georgia, serif;
font-size: 28px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -.025em;

transition: color .3s ease;
```

}

.df-concern-card:hover .df-concern-content h3 {
color: #843653;
}

.df-concern-content p {
margin: 10px 0 0;

```
color: #827477;

font-size: 11px;
font-weight: 600;
```

}

/* =========================================================
ARROW
========================================================= */

.df-concern-arrow {
position: absolute;
right: 25px;
bottom: 26px;

```
width: 43px;
height: 43px;

display: grid;
place-items: center;

border-radius: 50%;
border: 1px solid rgba(75, 39, 50, .15);

color: #693147;
background: rgba(255,255,255,.35);

transition:
    background .35s ease,
    color .35s ease,
    transform .45s ease;
```

}

.df-concern-arrow span {
font-size: 18px;
}

.df-concern-card:hover .df-concern-arrow {
background: #693147;
color: #fff;
transform: rotate(8deg);
}

/* =========================================================
BOTTOM LINE
========================================================= */

.df-concern-line {
position: absolute;
left: 28px;
right: 28px;
bottom: 0;

```
height: 2px;

background: #8f3e5b;

transform: scaleX(0);
transform-origin: left;

transition: transform .5s cubic-bezier(.2,.8,.2,1);
```

}

.df-concern-card:hover .df-concern-line {
transform: scaleX(1);
}

/* =========================================================
FOOTER
========================================================= */

.df-concerns-footer {
margin-top: 48px;
padding-top: 25px;

```
border-top: 1px solid rgba(64, 39, 47, .09);

display: flex;
align-items: center;
gap: 16px;
```

}

.df-concerns-footer-mark {
width: 34px;
height: 34px;

```
display: grid;
place-items: center;

border-radius: 50%;

background: #f5e5e8;
color: #8e3e5a;

font-size: 12px;
```

}

.df-concerns-footer p {
margin: 0;
flex: 1;

```
color: #817477;
font-size: 12px;
```

}

.df-concerns-footer strong {
color: #4a3038;
font-weight: 700;
}

.df-concerns-footer a {
display: inline-flex;
align-items: center;
gap: 10px;

```
color: #693147;
text-decoration: none;

font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .10em;
```

}

.df-concerns-footer a span {
font-size: 17px;
transition: transform .3s ease;
}

.df-concerns-footer a:hover span {
transform: translateX(5px);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {

```
.df-concerns-header {
    grid-template-columns: 1fr;
    gap: 20px;
}

.df-concerns-grid {
    grid-template-columns: repeat(2, 1fr);
}

.df-concern-card {
    min-height: 330px;
}
```

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

```
.df-concerns-section {
    padding: 50px 0;
}

.df-concerns-title h2 {
    font-size: 44px;
}

.df-concerns-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}

.df-concern-card {
    min-height: 310px;
}

.df-concerns-footer {
    align-items: flex-start;
    flex-wrap: wrap;
}

.df-concerns-footer p {
    flex-basis: calc(100% - 50px);
}

.df-concerns-footer a {
    margin-left: 50px;
}
```

}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

```
.df-concern-card,
.df-concern-orb,
.df-concern-icon,
.df-concern-arrow,
.df-concern-line,
.df-concerns-footer a span {
    transition: none !important;
}
```

}