/*
Theme Name: pedikur-theme
Theme URI: https://www.pedikur.co.uk
Author: Your Name
Author URI: https://www.pedikur.co.uk
Description: A clean, clinical, one-product WooCommerce theme designed for the Pedikur Callus Remover set.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: pedikur-clinical
*/

/* --- Color Palette & Variables --- */
:root {
    --white: #FFFFFF;
    --grey-light: #F4F7F9;
    --teal: #0DA2A6;
    --teal-hover: #0b8c8f;
    --charcoal: #2C3E50;
    --crimson: #D9534F;
    --crimson-light: #fdf2f2;
}

/* --- Global Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Inter', sans-serif;
    color: var(--charcoal);
    background-color: var(--white);
    line-height: 1.6;
}
h1, h2, h3 {
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}
img {
    max-width: 100%;
    height: auto;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    background-color: var(--teal);
    color: var(--white);
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
.btn:hover {
    background-color: var(--teal-hover);
}

/* --- Header --- */
header {
    background-color: var(--white);
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 1px;
}

/* --- Hero Section --- */
.hero {
    display: flex;
    align-items: center;
    padding: 80px 0;
    background-color: var(--grey-light);
}
.hero-text {
    flex: 1;
    padding-right: 40px;
}
.hero-text h1 {
    font-size: 42px;
    line-height: 1.2;
    color: var(--charcoal);
}
.hero-text p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #4a5568;
}
.hero-image {
    flex: 1;
    text-align: center;
}
.hero-image img {
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* --- Trust Badges --- */
.badges {
    padding: 40px 0;
    border-bottom: 1px solid #e2e8f0;
}
.badge-grid {
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
}
.badge-item {
    flex: 1;
    min-width: 150px;
    padding: 10px;
}
.badge-item h4 {
    color: var(--teal);
    font-size: 16px;
}

/* --- Included Section --- */
.included {
    padding: 80px 0;
    text-align: center;
}
.included h2 {
    font-size: 32px;
}
.included p {
    margin-bottom: 40px;
}
.product-contents {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.product-item {
    background: var(--grey-light);
    padding: 30px;
    border-radius: 4px;
    width: 300px;
}

/* --- How It Works --- */
.steps {
    background-color: var(--grey-light);
    padding: 80px 0;
    text-align: center;
}
.steps-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}
.step {
    flex: 1;
    background: var(--white);
    padding: 30px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.step-number {
    background: var(--teal);
    color: var(--white);
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    margin: 0 auto 15px auto;
    font-weight: 700;
}

/* --- Safety Info --- */
.safety {
    padding: 60px 0;
}
.safety-box {
    background-color: var(--crimson-light);
    border: 2px solid var(--crimson);
    padding: 30px;
    border-radius: 4px;
    max-width: 800px;
    margin: 0 auto;
}
.safety-box h3 {
    color: var(--crimson);
    display: flex;
    align-items: center;
    gap: 10px;
}
.safety-box ul {
    margin-left: 20px;
    margin-top: 15px;
}
.safety-box li {
    margin-bottom: 8px;
}

/* --- Footer --- */
footer {
    background-color: var(--charcoal);
    color: var(--white);
    text-align: center;
    padding: 30px 0;
    font-size: 14px;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 0;
    }
    .hero-text {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .steps-grid {
        flex-direction: column;
    }
}
/* --- WooCommerce Specific Styling --- */

/* Force Add to Cart & Checkout buttons to match our Medical Teal */
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--teal);
    color: var(--white);
    border-radius: 4px;
    font-weight: 600;
    padding: 14px 28px;
    transition: background-color 0.3s ease;
    border: none;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
    background-color: var(--teal-hover);
    color: var(--white);
}

/* Style the success messages (e.g., "Added to Cart") */
.woocommerce-message, 
.woocommerce-info {
    border-top-color: var(--teal);
    background-color: var(--grey-light);
    color: var(--charcoal);
}

.woocommerce-message::before, 
.woocommerce-info::before {
    color: var(--teal);
}

/* Clean up the product price color */
.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    color: var(--teal);
    font-weight: 700;
}

/* =======================================================
   WooCommerce Single Product Page Layout 
======================================================= */

/* Create a 2-column layout for desktop */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    align-items: flex-start;
}

/* 1. Left Column: Product Image Gallery */
.woocommerce div.product div.images {
    width: 48%; /* Takes up just under half the screen */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    background: var(--white);
    padding: 20px;
    border: 1px solid var(--grey-light);
}

/* 2. Right Column: Title, Price, Description, Cart Form */
.woocommerce div.product div.summary {
    width: 48%; /* Takes up the other half */
}

/* Product Title */
.woocommerce div.product .product_title {
    font-size: 36px;
    color: var(--charcoal);
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 700;
}

/* Product Price */
.woocommerce div.product p.price, 
.woocommerce div.product span.price {
    font-size: 26px;
    color: var(--teal);
    font-weight: 700;
    margin-bottom: 25px;
}

/* Short Description Text */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 16px;
    color: #4a5568;
    margin-bottom: 30px;
    line-height: 1.7;
}

/* ---------------------------------------------------
   Variable Product Dropdowns (200ml / 500ml) 
--------------------------------------------------- */
.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: 20px;
}
.woocommerce div.product form.cart .variations td {
    padding-bottom: 15px;
    vertical-align: center;
}
.woocommerce div.product form.cart .variations label {
    font-weight: 700;
    color: var(--charcoal);
    font-size: 16px;
    margin-right: 15px;
}
.woocommerce div.product form.cart .variations select {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--charcoal);
    background-color: var(--white);
}

/* ---------------------------------------------------
   Add to Cart Section & Quantity Box 
--------------------------------------------------- */
.woocommerce div.product form.cart .single_variation_wrap {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* Align quantity box and Add to Cart button next to each other */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 15px;
}

.woocommerce div.product form.cart div.quantity input.qty {
    width: 70px;
    height: 50px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--charcoal);
}

/* ---------------------------------------------------
   Bottom Tabs (Description, Reviews) 
--------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs {
    width: 100%;
    margin-top: 60px;
    padding-top: 40px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e2e8f0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    text-decoration: none;
    color: #4a5568;
    font-weight: 600;
    padding: 10px 0;
    display: block;
    font-size: 18px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--teal);
    border-bottom: 3px solid var(--teal);
    margin-bottom: -2px; /* Pulls the border down to overlay the grey line */
}

/* ---------------------------------------------------
   Mobile Responsive Fixes
--------------------------------------------------- */
@media (max-width: 768px) {
    .woocommerce div.product {
        flex-direction: column;
    }
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
    }
    .woocommerce div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }
    .woocommerce div.product form.cart div.quantity input.qty {
        width: 100%;
        margin-bottom: 10px;
    }
}
/* ---------------------------------------------------
   Add to Basket Button (Clean Specificity Override)
--------------------------------------------------- */
/* We add body.woocommerce-page to cleanly beat WooCommerce's default purple selector */
body.woocommerce-page.woocommerce #respond input#submit.alt, 
body.woocommerce-page.woocommerce a.button.alt, 
body.woocommerce-page.woocommerce button.button.alt, 
body.woocommerce-page.woocommerce input.button.alt {
    background-color: var(--teal);
    color: var(--white);
    border-radius: 4px;
    font-weight: 600;
    padding: 14px 28px;
    border: none;
    transition: background-color 0.3s ease;
}

body.woocommerce-page.woocommerce #respond input#submit.alt:hover, 
body.woocommerce-page.woocommerce a.button.alt:hover, 
body.woocommerce-page.woocommerce button.button.alt:hover, 
body.woocommerce-page.woocommerce input.button.alt:hover {
    background-color: var(--teal-hover);
    color: var(--white);
}

/* ---------------------------------------------------
   Variation Dropdown Styling
--------------------------------------------------- */
body.woocommerce-page div.product form.cart .variations select {
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--charcoal);
    background-color: var(--white);
    cursor: pointer;
    box-shadow: none;
}

body.woocommerce-page div.product form.cart .variations label {
    font-weight: 700;
    color: var(--charcoal);
    margin-right: 15px;
}