/*!
Theme Name: offers sasti deal
Theme URI: http://underscores.me/
Author: Rehan Khan
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: offers-sasti-deal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

offers sasti deal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ==========================================================================
   PREMIUM CUSTOM BEAUTY STORE STYLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --luxury-gold: #C5A880;
    --luxury-gold-hover: #A38760;
    --soft-blush: #FFF3F4;
    --romantic-pink: #F7D6D8;
    --dark-charcoal: #111111;
    --text-muted: #555555;
    --white: #FFFFFF;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: var(--font-body);
    color: var(--dark-charcoal);
    background-color: #FAFAFA;
    margin: 0;
    padding: 0;
}

/* Hero Section */
.premium-hero {
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FFF5F6 0%, #F5DEE1 100%);
    padding: 60px 10%;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 650px;
    z-index: 3;
    animation: fadeInUp 1s ease;
}

.hero-tagline {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--luxury-gold);
    font-weight: 700;
    display: block;
    margin-bottom: 20px;
}

.hero-heading {
    font-family: var(--font-heading);
    font-size: 64px;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 25px;
    color: var(--dark-charcoal);
}

.gold-text {
    color: var(--luxury-gold);
    font-style: italic;
}

.hero-text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.hero-actions a {
    display: inline-block;
    padding: 16px 36px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.btn-luxury-primary {
    background-color: var(--dark-charcoal);
    color: var(--white);
    margin-right: 15px;
    border: 1px solid var(--dark-charcoal);
}

.btn-luxury-primary:hover {
    background-color: transparent;
    color: var(--dark-charcoal);
}

.btn-luxury-secondary {
    border: 1px solid var(--dark-charcoal);
    color: var(--dark-charcoal);
}

.btn-luxury-secondary:hover {
    background-color: var(--dark-charcoal);
    color: var(--white);
}

/* Trust Features Bar */
.trust-features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background: var(--white);
    padding: 40px 5%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border-bottom: 1px solid #ECECEC;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 15px;
}

.feature-icon {
    font-size: 32px;
}

.feature-info h3 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
}

.feature-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* Products Section Header */
.premium-products-section {
    padding: 100px 10%;
}

.section-title-wrapper {
    text-align: center;
    margin-bottom: 60px;
}

.section-subtitle {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--luxury-gold);
    font-size: 18px;
}

.section-main-title {
    font-family: var(--font-heading);
    font-size: 42px;
    margin: 10px 0 20px 0;
    letter-spacing: 1px;
}

.title-divider {
    width: 60px;
    height: 2px;
    background-color: var(--luxury-gold);
    margin: 0 auto;
}

/* Products Grid & Cards */
.beauty-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
}

.beauty-product-card {
    background: var(--white);
    transition: var(--transition);
    position: relative;
    border-bottom: 3px solid transparent;
}

.beauty-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-bottom-color: var(--luxury-gold);
}

.product-img-holder {
    position: relative;
    overflow: hidden;
    background: #FDFDFD;
}

.product-img-holder img {
    width: 100%;
    display: block;
    transition: var(--transition);
}

.beauty-product-card:hover .product-img-holder img {
    transform: scale(1.06);
}

.card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 17, 17, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.beauty-product-card:hover .card-overlay {
    opacity: 1;
}

.quick-view-btn {
    padding: 12px 24px;
    background: var(--white);
    color: var(--dark-charcoal);
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: var(--transition);
}

.quick-view-btn:hover {
    background: var(--dark-charcoal);
    color: var(--white);
}

.product-details {
    padding: 25px 20px;
    text-align: center;
}

.prod-cat {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--luxury-gold);
    letter-spacing: 1.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.prod-title {
    font-family: var(--font-heading);
    font-size: 19px;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.prod-title a {
    color: var(--dark-charcoal);
    text-decoration: none;
    transition: var(--transition);
}

.prod-title a:hover {
    color: var(--luxury-gold);
}

.prod-price {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--dark-charcoal);
}

.add-to-cart-luxury {
    display: block;
    padding: 14px;
    border: 1px solid #EAEAEA;
    color: var(--dark-charcoal);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: 600;
    transition: var(--transition);
}

.add-to-cart-luxury:hover {
    background-color: var(--dark-charcoal);
    color: var(--white);
    border-color: var(--dark-charcoal);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}