/*==================================================

POP MY CHERRY
Homepage Master CSS

Author: Michaela Price
Version: 2.0

==================================================*/
/*==================================================

POP MY CHERRY 2.0
DESIGN SYSTEM

Brand Personality
-----------------
Elegant
Curated
Timeless
Warm
Sustainable

Design Principles
-----------------
• Large photography
• Spacious layouts
• Boutique over catalogue
• Rounded corners
• Soft shadows
• Calm colour palette
• Premium typography
• Mobile first
• Fast loading

==================================================*/

/*==================================================

TABLE OF CONTENTS

01 Design Tokens
02 Foundation
03 Hero
04 Brand Values
05 Explore the Collection
06 New In
07 Best Sellers
08 Our Story
09 Customer Reviews
10 SEO Content
11 Utilities
12 Responsive


/*==================================================
01. DESIGN TOKENS
==================================================*/

:root {

    /*==================================================
    Colours
    ==================================================*/

    --pmc-bg: #F8F6F2;
    --pmc-card: #FFFFFF;
    --pmc-text: #2F2F2F;
    --pmc-text-light: #6E6A64;

    --pmc-accent: #8B5E3C;
    --pmc-accent-hover: #755032;

    --pmc-border: #E8E2D8;
    --pmc-focus: rgba(255,255,255,.6);

    /*==================================================
    Typography
    ==================================================*/

    --pmc-font-heading: "Playfair Display", serif;
    --pmc-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /*==================================================
    Spacing
    ==================================================*/

    --pmc-space-xs: 8px;
    --pmc-space-sm: 16px;
    --pmc-space-md: 24px;
    --pmc-space-lg: 40px;
    --pmc-space-xl: 64px;
    --pmc-space-2xl: 96px;

    /*==================================================
    Layout
    ==================================================*/

/* Spacing */

 
    --pmc-max-width: 1280px;
    --pmc-content-width: 900px;

    --pmc-radius-sm: 12px;
    --pmc-radius-md: 18px;
    --pmc-radius-lg: 28px;
    --pmc-radius-pill: 999px;

    /*==================================================
    Shadows
    ==================================================*/

    --pmc-shadow-sm: 0 4px 12px rgba(0,0,0,.05);
    --pmc-shadow-md: 0 8px 24px rgba(0,0,0,.08);
    --pmc-shadow-lg: 0 16px 40px rgba(0,0,0,.12);

    /*==================================================
    Animation
    ==================================================*/

    --pmc-transition-fast:.25s ease;
    --pmc-transition-slow:.45s ease;

    /*==================================================
    Borders
    ==================================================*/

    --pmc-border-width: 1px;

    /*==================================================
    Layering
    ==================================================*/

    --pmc-z-base: 1;
    --pmc-z-overlay: 10;
    --pmc-z-dropdown: 100;
    --pmc-z-modal: 1000;

}
/*==================================================
02. FOUNDATION
==================================================*/

/*==================================================
Global Reset
==================================================*/

*,
*::before,
*::after{
    box-sizing:border-box;
}

/*==================================================
Base
==================================================*/

html{
    scroll-behavior:smooth;
}

body{
    margin:0;

    font-family:var(--pmc-font-body);
    font-size:16px;
    line-height:1.6;

    color:var(--pmc-text);
    background:var(--pmc-bg);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/*==================================================
Media
==================================================*/

img,
picture{
    display:block;
    max-width:100%;
    height:auto;
}

figure{
    margin:0;
}

/*==================================================
Links
==================================================*/

a{
    color:inherit;
    text-decoration:none;
    transition:
        color var(--pmc-transition-fast),
        opacity var(--pmc-transition-fast);
}

/*==================================================
Buttons
==================================================*/

button{
    font:inherit;
    cursor:pointer;
}

/*==================================================
Layout
==================================================*/

.pmc-container{

    width:92%;
    max-width:1400px;

    margin-inline:auto;

}

.pmc-section{
    padding:var(--pmc-space-2xl) 0;
}

/*==================================================
Typography
==================================================*/

.pmc-section-title{
    margin:0 0 var(--pmc-space-md);

    font-family:var(--pmc-font-heading);
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;

    color:var(--pmc-text);

    text-align:center;
}

.pmc-section-intro{
    max-width:720px;

    margin:0 auto var(--pmc-space-xl);

    font-size:1.1rem;
    line-height:1.8;

    color:var(--pmc-text-light);

    text-align:center;
}
/*==================================================
03. HERO
==================================================*/

/* Hero Section */

.pmc-hero-image{
    position:relative;
    overflow:hidden;
    color:#fff;
}

.pmc-hero-image__bg{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pmc-hero-image__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.pmc-hero-image__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(0,0,0,.28),
        rgba(0,0,0,.38)
    );
    z-index:1;
}

.pmc-hero-image__content{
    position:relative;
    z-index:2;
    width:min(980px,92%);
    margin:0 auto;
    padding:120px 20px;
    text-align:center;
}

/* Eyebrow */

.pmc-hero-image__eyebrow{
    margin-bottom:20px;

    font-size:.82rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;

    color:rgba(255,255,255,.92);
}

/* Heading */

.pmc-hero-image__title{
    margin:0 auto 28px;

    max-width:980px;

    font-family:var(--pmc-font-heading);

    font-size:clamp(38px,4.8vw,66px);
    line-height:1.08;
    font-weight:600;

    color:#fff;
}

/* Subtitle */

.pmc-hero-image__subtitle{
    max-width:760px;
    margin:0 auto 42px;

    font-size:1.2rem;
    line-height:1.75;

    color:rgba(255,255,255,.95);
}

/* Buttons */

.pmc-hero-image__buttons{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
}

/* Base Button */

.pmc-hero-image .pmc-btn{

    width:220px;
    padding:10px 18px;

    font-size:14px;
    font-weight:600;

    border-radius:24px;

    transition:all .25s ease;

}
/* Primary */

.pmc-hero-image .pmc-btn--primary{

    background:#a8754b;
    color:#fff;
    border:1px solid #a8754b;

}

.pmc-hero-image .pmc-btn--primary:hover{

    background:#8d633f;
    border-color:#8d633f;

}

/* Secondary */

.pmc-hero-image .pmc-btn--secondary{

    background:rgba(255,248,242,.92);
    color:#4a3b32;

    border:1px solid #e7ddd3;

    backdrop-filter:none;

}

.pmc-hero-image .pmc-btn--secondary:hover{

    background:#ffffff;
    border-color:var(--pmc-accent);

}
/*==================================================
  HERO MOBILE
==================================================*/

@media (max-width:768px){

    .pmc-hero-image__bg{
        min-height:500px;
    }

    .pmc-hero-image__overlay{
        background:linear-gradient(
            rgba(0,0,0,.40),
            rgba(0,0,0,.55)
        );
    }

    .pmc-hero-image__content{
        width:92%;
        padding:55px 18px 45px;
    }
.pmc-hero-image__img{
    object-position:center 35%;
}

    .pmc-hero-image__eyebrow{
        margin-bottom:14px;
        font-size:.72rem;
        letter-spacing:.18em;
    }

    .pmc-hero-image__title{
        font-size:clamp(36px,10vw,44px);
        line-height:1.05;
        margin-bottom:18px;
    }

    .pmc-hero-image__subtitle{
        max-width:320px;
        margin:0 auto 28px;
        font-size:.95rem;
        line-height:1.55;
    }

    .pmc-hero-image__buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
    }

    .pmc-hero-image .pmc-btn{
        width:min(280px,100%);
        padding:14px 24px;
        font-size:14px;
    }

}
/*==================================================
04. BRAND VALUES
==================================================*/

/* Section */

.pmc-values{
    padding:50px 0;
}

/* Heading */

.pmc-section-header{
    text-align:center;
    margin-bottom:16px;

}

.pmc-section-subtitle{
    display:block;
    margin-bottom:8px;

    font-size:.72rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;

    color:var(--pmc-text-light);
}

/* Grid */

.pmc-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

/* Cards */

.pmc-value-card{
    display:flex;
    flex-direction:column;
    align-items:center;

    padding:22px 18px;

    background:#fcfaf8;

    border:1px solid #e9dfd5;
    border-radius:14px;

    text-align:center;

    box-shadow:0 2px 10px rgba(0,0,0,.04);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.pmc-value-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}


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

@media (max-width:768px){

    .pmc-values{
        padding:34px 0;
    }

    .pmc-section-header{
        margin-bottom:22px;
    }

    .pmc-section-subtitle{
        font-size:.68rem;
        margin-bottom:6px;
        letter-spacing:.20em;
    }

    .pmc-values-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .pmc-value-card{
        padding:18px 16px;
        border-radius:12px;
    }

}

/*==================================================
Icons
==================================================*/

.pmc-value-icon{
    width:60px;
    height:60px;

    margin:0 auto 12px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        #F8F2EA,
        #EFE5D8
    );

    border:1px solid #E7DCCF;
}

.pmc-icon{
    width:28px;
    height:28px;

    display:block;
    object-fit:contain;
}

@media (max-width:992px){

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

}

@media (max-width:576px){

    .pmc-values-grid{
        grid-template-columns:1fr;
    }

    .pmc-value-card{
        padding:28px 24px;
    }

    .pmc-value-icon{
        margin-bottom:16px;
    }

}


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

.pmc-mobile-trust{
    display:none;
}

@media (max-width:768px){

    .pmc-values-grid{
        display:none;
    }

    .pmc-mobile-trust{

        display:grid;
        grid-template-columns:repeat(2,1fr);

        gap:22px 18px;

        max-width:340px;

        margin:0 auto;

        text-align:center;

    }

    .pmc-mobile-trust-row{
        display:contents;
    }

    .pmc-mobile-trust span{

        display:flex;
        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:8px;

        font-size:13px;

        font-weight:600;

        line-height:1.35;

        color:#4a4037;

    }

    .pmc-mobile-trust i{

        font-size:20px;

        color:var(--pmc-accent);

    }

}
/*==================================================
05. EXPLORE THE COLLECTION
==================================================*/

/*==================================================
Section Wrapper
==================================================*/
.pmc-box{
    width:min(var(--pmc-max-width),92%);
   margin:0 auto 32px;
    padding:56px;
    border-radius:var(--pmc-radius-lg);
}

.pmc-box--soft-grey{
    background:#F4F1EC;
}

.pmc-box--soft-cream{
    background:#FBF8F3;
}

.pmc-box--white{
    background:#FFFFFF;
}

/*==================================================
Section Heading
==================================================*/

.pmc-section-heading{
    max-width:760px;
   margin:0 auto 48px;
    text-align:center;
}

.pmc-eyebrow{
    display:block;
    margin-bottom:var(--pmc-space-sm);

    font-size:.82rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;

    color:var(--pmc-text-light);
}

.pmc-section-subtitle{

    max-width:700px;

    margin:18px auto 0;

    color:var(--pmc-text-light);

    line-height:1.7;

}

/*==================================================
Category Grid
==================================================*/

.pmc-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--pmc-space-md);
}

/*==================================================
Category Card
==================================================*/

.pmc-category-card{
    display:flex;
    flex-direction:column;
height:100%;

    overflow:hidden;

    background:var(--pmc-card);

    border:var(--pmc-border-width) solid var(--pmc-border);
    border-radius:var(--pmc-radius-md);

    box-shadow:var(--pmc-shadow-sm);

    transition:
        transform var(--pmc-transition-fast),
        box-shadow var(--pmc-transition-fast);
}

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

.pmc-category-card__image{

    overflow:hidden;

    aspect-ratio:4/3;

}

.pmc-category-card__image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;

}

.pmc-category-card:hover .pmc-category-card__image img{
    transform:scale(1.05);
}

.pmc-category-card__content{


    padding:14px 18px 18px;

}

.pmc-category-card__title{

    font-size:16px;

    font-weight:600;

    line-height:1.35;

    margin-bottom:10px;

}

.pmc-category-card__link{
    font-size:.95rem;
    font-weight:600;

    color:var(--pmc-accent);

    transition:color var(--pmc-transition-fast);
}

.pmc-category-card:hover .pmc-category-card__link{
    color:var(--pmc-accent-hover);
}

/*==================================================
Responsive
==================================================*/

@media (max-width:992px){

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

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

@media (max-width:768px){

    .pmc-box{
        width:94%;
        padding:28px 18px;
        margin:0 auto 20px;
        border-radius:18px;
    }

    .pmc-section-heading{
        margin-bottom:24px;
    }

    .pmc-eyebrow{
        font-size:.68rem;
        letter-spacing:.20em;
    }

    .pmc-category-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;

    }

    .pmc-category-card{

        border-radius:14px;

    }

    .pmc-category-card__image{

        aspect-ratio:1/1;

        overflow:hidden;

    }

    .pmc-category-card__image img{

        width:100%;
        height:100%;

        object-fit:cover;

    }

    .pmc-category-card__content{

    padding:14px 18px 18px;

}

   .pmc-category-card__title{

    font-size:18px;

    font-weight:600;

    line-height:1.35;

    margin-bottom:10px;

}

   .pmc-category-card__link{

    display:inline-flex;
    align-items:center;
    gap:6px;

    font-size:14px;
    font-weight:600;

}



.pmc-box .products li.product .button:hover{

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f5f5 100%
    );

    border-color:#b7b7b7;

    color:#222;

    transform:translateY(-2px);

}

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

/*==================================================
06. NEW IN / BEST SELLERS MOBILE
==================================================*/

@media (max-width:768px){

    /* Product Grid */

  .pmc-box .woocommerce ul.products{

    display:grid !important;

   grid-template-columns:1fr !important;

    gap:24px !important;

}

    /* Product Card */

    .pmc-box ul.products li.product{
        width:100% !important;
        margin:0 !important;
        float:none;
        clear:none;

        display:flex;
        flex-direction:column;

        border-radius:18px;
    }

 

   /* Product Image */

.pmc-box ul.products li.product a img{

    width:100% !important;

    height:205px !important;

    object-fit:contain !important;

    display:block;

    margin:0 auto;

    border-radius:14px;

}

    /* Product Title */

    .pmc-box .products li.product .woocommerce-loop-product__title{

        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

        overflow:hidden;
        text-overflow:ellipsis;

        line-height:1.4;
        min-height:2.8em;

        margin:12px 12px 10px;

        font-size:15px;

        text-align:center;
    }

    /* Price */

    .pmc-box .products li.product .price{
        margin-bottom:12px;
        font-size:18px;
    }

    /* Button */

    .pmc-box .products li.product .button{
        margin:0 12px 14px;
        padding:10px 12px;
        font-size:15px;
    }

}
/*==================================================
Button
==================================================*/

.pmc-section-footer{

    margin-top:28px;

    text-align:center;

}

.pmc-section-footer .pmc-btn--primary{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:220px;

    margin-top:10px;

}


/*==================================================
08. OUR STORY
==================================================*/

/*==================================================
Story Layout
==================================================*/

.pmc-story{

    display:grid;
    grid-template-columns:.95fr 1.05fr;

   gap:56px;

    align-items:center;

}

/*==================================================
Content
==================================================*/

.pmc-story__copy{

    max-width:560px;

    margin:auto;

}

.pmc-story__copy p{

    margin-bottom:var(--pmc-space-md);

    color:var(--pmc-text-light);

    line-height:1.85;

}

.pmc-story__copy .pmc-section-title{

    text-align:left;

    margin-bottom:0;

}

.pmc-story__copy .pmc-section-title::after{

    content:"";

    display:block;

    width:70px;

    height:3px;

    margin:18px 0 28px;

    background:var(--pmc-accent);

    border-radius:999px;

}

/*==================================================
Image
==================================================*/

.pmc-story__image{

    overflow:hidden;

    border-radius:var(--pmc-radius-lg);

}

.pmc-story__image img{

    display:block;

    width:100%;

    border-radius:var(--pmc-radius-lg);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.pmc-story__image:hover img{

    transform:
        translateY(-4px)
        scale(1.015);

    box-shadow:0 24px 48px rgba(0,0,0,.14);

}

/*==================================================
Read More Link
==================================================*/

.pmc-inline-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:var(--pmc-space-md);

    font-weight:600;

    color:var(--pmc-accent);

    transition:
        color .25s ease,
        gap .25s ease;

}

.pmc-inline-link::after{

    content:"→";

    transition:transform .25s ease;

}

.pmc-inline-link:hover{

    color:var(--pmc-accent-hover);

}

.pmc-inline-link:hover::after{

    transform:translateX(4px);

}

/*==================================================
Responsive
==================================================*/

@media (max-width:992px){

    .pmc-story{

        grid-template-columns:1fr;

        gap:var(--pmc-space-xl);

        text-align:center;

    }

    .pmc-story__copy{

        max-width:none;

    }

    .pmc-story__copy .pmc-section-title{

        text-align:center;

    }

    .pmc-story__copy .pmc-section-title::after{

        margin:18px auto 28px;

    }

    .pmc-story__image{

        max-width:620px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .pmc-story{

        gap:var(--pmc-space-lg);

    }

    .pmc-story__copy p{

        line-height:1.75;

    }

}

/*==================================================
09. CUSTOMER REVIEWS
==================================================*/

/*==================================================
Review Grid
==================================================*/

.pmc-review-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:var(--pmc-space-md);

    margin-top:var(--pmc-space-xl);
}

/*==================================================
Review Card
==================================================*/

.pmc-review-card{

    padding:var(--pmc-space-lg);

    background:var(--pmc-card);

    border:var(--pmc-border-width) solid var(--pmc-border);
    border-radius:var(--pmc-radius-md);

    box-shadow:var(--pmc-shadow-sm);

    transition:
        transform var(--pmc-transition-fast),
        box-shadow var(--pmc-transition-fast);

    text-align:center;
}

.pmc-review-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--pmc-shadow-lg);

}

/*==================================================
Stars
==================================================*/

.pmc-review-card__stars{

    margin-bottom:var(--pmc-space-sm);

    font-size:1.3rem;
    letter-spacing:.15em;

    color:#C89B3C;

}

/*==================================================
Review Text
==================================================*/

.pmc-review-card__text{

    margin-bottom:var(--pmc-space-md);

    color:var(--pmc-text-light);

    line-height:1.8;

    font-style:italic;

}

/*==================================================
Author
==================================================*/

.pmc-review-card__author{

    font-weight:600;

    color:var(--pmc-text);

}

/*==================================================
Responsive
==================================================*/

@media (max-width:992px){

    .pmc-review-grid{
        grid-template-columns:1fr;
    }

}

/*==================================================
10. SEO CONTENT
==================================================*/

/*==================================================
SEO Copy
==================================================*/

.pmc-seo-copy{
    max-width:900px;
    margin:0 auto;
}

.pmc-seo-copy .pmc-section-title{
    margin-bottom:var(--pmc-space-lg);

    text-align:center;
}

.pmc-seo-copy p{
    margin-bottom:var(--pmc-space-md);

    color:var(--pmc-text-light);

    line-height:1.9;

    text-align:left;
}

.pmc-seo-copy p:last-child{
    margin-bottom:0;
}

/*==================================================
11. UTILITIES
==================================================*/

/*==================================================
Text Alignment
==================================================*/

.pmc-text-center{
    text-align:center;
}

/*==================================================
Spacing
==================================================*/

.pmc-mb-0{
    margin-bottom:0;
}

.pmc-mt-xl{
    margin-top:var(--pmc-space-xl);
}

/*==================================================
Visibility
==================================================*/

.pmc-hidden{
    display:none !important;
}

/* Force New In section full width */

@media (min-width:769px){

    .pmc-box .woocommerce{
        width:100% !important;
    }

    .pmc-box .woocommerce ul.products{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:30px !important;
    }

}