/*
Theme Name: Prince E Commerce Hub
Theme URI: https://example.com/prince-ecommerce-hub
Author: OpenAI
Author URI: https://openai.com
Description: A custom WooCommerce-ready theme for Prince E Commerce Hub with premium branding, editable homepage sections, contact tools, and responsive e-commerce layouts.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: prince-ecommerce-hub
Tags: e-commerce, custom-logo, custom-menu, featured-images, full-width-template, translation-ready, editor-style, threaded-comments, blog
*/

:root {
    --peh-primary: #5b248f;
    --peh-primary-dark: #2f124c;
    --peh-secondary: #d5a93e;
    --peh-secondary-dark: #b58924;
    --peh-ink: #201729;
    --peh-text: #51495b;
    --peh-surface: #ffffff;
    --peh-surface-soft: #fbf7ff;
    --peh-surface-tint: #f7efe2;
    --peh-border: rgba(91, 36, 143, 0.12);
    --peh-shadow: 0 18px 45px rgba(29, 14, 47, 0.10);
    --peh-shadow-strong: 0 25px 60px rgba(29, 14, 47, 0.16);
    --peh-radius: 22px;
    --peh-radius-sm: 14px;
    --peh-container: 1180px;
    --peh-watermark: url('assets/images/logo-brand.jpeg');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--peh-text);
    background: #fff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    line-height: 1.7;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--peh-watermark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(45vw, 420px);
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--peh-primary); text-decoration: none; }
a:hover { color: var(--peh-secondary-dark); }
p { margin: 0 0 1rem; }
h1,h2,h3,h4,h5,h6 {
    margin: 0 0 1rem;
    color: var(--peh-ink);
    line-height: 1.2;
    font-weight: 700;
}
ul,ol { margin: 0 0 1rem 1.2rem; }
.container {
    width: min(100% - 2rem, var(--peh-container));
    margin-inline: auto;
}
.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background: #fff;
    clip: auto !important;
    clip-path: none;
    color: var(--peh-ink);
    display: block;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(21, 7, 33, 0.9);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.header-top {
    background: linear-gradient(90deg, var(--peh-primary-dark), #4d206d);
    color: #fff;
    font-size: 0.95rem;
}
.header-top .container,
.header-main .container,
.newsletter-section .container,
.site-footer-bottom .container,
.contact-grid,
.grid-2,
.contact-strip .container,
.banner-grid {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.header-top-left,
.header-top-right {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.7rem 0;
}
.header-top a { color: #fff; }
.header-main { background: rgba(255,255,255,0.98); }
.header-main .container { padding: 0.95rem 0; }
.site-branding { display: flex; align-items: center; gap: 1rem; }
.custom-logo-link img,
.brand-mark,
.footer-logo { max-height: 74px; width: auto; }
.site-title, .site-title a {
    margin: 0;
    color: var(--peh-ink);
    font-size: 1.25rem;
    font-weight: 800;
}
.site-description { margin: 0.15rem 0 0; font-size: 0.92rem; color: var(--peh-text); }
.menu-toggle,
.mobile-close {
    display: none;
    border: 0;
    background: var(--peh-primary);
    color: #fff;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    cursor: pointer;
}
.primary-menu-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.main-navigation ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}
.main-navigation a {
    display: block;
    padding: 0.8rem 0.95rem;
    color: var(--peh-ink);
    font-weight: 600;
    border-radius: 999px;
}
.main-navigation .current-menu-item > a,
.main-navigation a:hover {
    background: rgba(91, 36, 143, 0.08);
    color: var(--peh-primary);
}
.header-actions { display: flex; gap: 0.75rem; }

.button,
button,
input[type="submit"],
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--peh-secondary), #f0c55d);
    color: var(--peh-primary-dark);
    font-weight: 700;
    padding: 0.95rem 1.35rem;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(213, 169, 62, 0.22);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    color: var(--peh-primary-dark);
    transform: translateY(-1px);
}
.button.secondary,
.button.is-outline {
    background: transparent;
    color: var(--peh-primary);
    border: 1px solid rgba(91, 36, 143, 0.25);
    box-shadow: none;
}
.button.full-width { width: 100%; }

.hero-section,
.page-banner {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at top left, rgba(213,169,62,0.22), transparent 30%), linear-gradient(135deg, #1e0a32, #4c1e6f 60%, #7a3ea1);
}
.hero-section { padding: 5.5rem 0; }
.page-banner { padding: 3rem 0; }
.hero-section::after,
.page-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 8, 29, 0.75), rgba(19, 8, 29, 0.35));
}
.hero-section .container,
.page-banner .container {
    position: relative;
    z-index: 1;
}
.hero-section .container,
.banner-grid,
.grid-2,
.contact-grid,
.contact-strip .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}
.hero-kicker,
.section-kicker {
    display: inline-flex;
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--peh-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.hero-title,
.banner-title,
.section-title { font-size: clamp(2rem, 3vw, 3.25rem); }
.hero-copy p,
.banner-copy p,
.newsletter-copy p { color: rgba(255,255,255,0.92); max-width: 60ch; }
.hero-buttons,
.contact-buttons,
.card-actions,
.banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}
.metric-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.metric-box,
.section-card,
.page-content-card,
.contact-form-wrap,
.contact-info-wrap,
.service-card,
.product-card,
.training-card,
.image-card,
.hero-media-card {
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--peh-border);
    border-radius: var(--peh-radius);
    box-shadow: var(--peh-shadow);
}
.metric-box {
    padding: 1rem 1.1rem;
    color: var(--peh-ink);
}
.metric-box strong { display: block; font-size: 1.5rem; color: var(--peh-primary); }
.hero-media-card,
.image-card { overflow: hidden; }
.hero-media-card img,
.image-card img { width: 100%; height: 100%; object-fit: cover; }
.about-highlight img { min-height: 100%; }

.page-banner-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
}
.page-banner-founder {
    width: min(100%, 360px);
    border-radius: 26px;
    border: 3px solid rgba(255,255,255,0.25);
    box-shadow: var(--peh-shadow-strong);
}
.page-banner-logo {
    position: absolute;
    right: 5%;
    bottom: -12px;
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    padding: 0.9rem;
    box-shadow: var(--peh-shadow);
}
.breadcrumb-wrap {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    color: rgba(255,255,255,0.9);
}
.breadcrumb-wrap a, .breadcrumb-wrap span { color: rgba(255,255,255,0.9); }

.site-main { padding: 2.5rem 0 4rem; }
.section-block { padding: 4rem 0; }
.section-block.is-soft {
    background: linear-gradient(180deg, rgba(91,36,143,0.04), rgba(213,169,62,0.08));
}
.section-block.is-dark {
    color: #fff;
    background: linear-gradient(135deg, #1d0c2f, #4f256b);
}
.section-block.is-dark h2,
.section-block.is-dark h3,
.section-block.is-dark p,
.section-block.is-dark li { color: #fff; }
.page-content-card,
.contact-form-wrap,
.contact-info-wrap,
.section-card,
.service-card,
.product-card,
.training-card { padding: 1.6rem; }
.entry-content > *:last-child,
.page-content-card > *:last-child { margin-bottom: 0; }
.cards-grid,
.services-grid,
.products-grid,
.training-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.icon-badge {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(91,36,143,0.1), rgba(213,169,62,0.18));
    color: var(--peh-primary);
    font-weight: 800;
}
.check-list {
    list-style: none;
    margin: 1.1rem 0;
    padding: 0;
}
.check-list li {
    position: relative;
    padding-left: 1.65rem;
    margin-bottom: 0.75rem;
}
.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--peh-secondary);
    font-weight: 700;
}
.contact-strip {
    padding: 0 0 4rem;
}
.contact-grid { align-items: stretch; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.form-grid .full-width { grid-column: 1 / -1; }
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    width: 100%;
    border: 1px solid rgba(91, 36, 143, 0.16);
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font: inherit;
    color: var(--peh-ink);
    background: #fff;
}
label { display: block; margin-bottom: 0.45rem; font-weight: 600; color: var(--peh-ink); }
.notice-success,
.notice-error {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    font-weight: 600;
}
.notice-success { background: #ecfff2; color: #13683d; }
.notice-error { background: #fff1f1; color: #9f1f1f; }

.newsletter-section {
    padding: 2.8rem 0;
    color: #fff;
    background: linear-gradient(135deg, #431766, #7a3ea1);
}
.newsletter-form {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.newsletter-form input {
    min-width: 260px;
    border: 0;
}
.site-footer {
    color: #ddd7e8;
    background: #170d23;
}
.footer-widgets { padding: 3.2rem 0 1.2rem; }
.footer-grid {
    width: min(100% - 2rem, var(--peh-container));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 1.5rem;
}
.widget-title, .site-footer h2, .site-footer h3 { color: #fff; }
.footer-links,
.footer-menu ul,
.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li,
.footer-menu li,
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: #efe7ff; }
.social-links { display: flex; gap: 0.75rem; margin-top: 1rem; }
.social-links a,
.floating-whatsapp,
.scroll-top {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
}
.social-links a { background: rgba(255,255,255,0.1); }
.site-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1rem 0 1.4rem;
}
.footer-menu ul { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.floating-whatsapp,
.scroll-top {
    position: fixed;
    right: 18px;
    z-index: 999;
    box-shadow: var(--peh-shadow-strong);
}
.floating-whatsapp {
    bottom: 88px;
    background: #25d366;
}
.scroll-top {
    bottom: 22px;
    border: 0;
    background: var(--peh-primary);
}

.content-area .container,
.woocommerce .container,
.woocommerce-page .container { width: min(100% - 2rem, 1100px); }
.widget { margin-bottom: 1.5rem; }
.alignwide { width: min(100% - 2rem, 1280px); margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; margin-left: 0; margin-right: 0; }
.wp-block-image img { border-radius: 18px; }
.wp-block-quote {
    border-left: 4px solid var(--peh-secondary);
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce nav.woocommerce-pagination ul,
.woocommerce div.product,
.woocommerce ul.products li.product,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    background: #fff;
}
.woocommerce ul.products li.product,
.woocommerce div.product div.summary,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce form.checkout,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation {
    border-radius: var(--peh-radius-sm);
}
.woocommerce span.onsale,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: linear-gradient(135deg, var(--peh-secondary), #f0c55d);
    color: var(--peh-primary-dark);
    border-radius: 999px;
}
.woocommerce ul.products li.product,
.woocommerce div.product div.summary,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce form.checkout,
.woocommerce table.shop_table {
    padding: 1rem;
    border: 1px solid var(--peh-border);
    box-shadow: var(--peh-shadow);
}

@media (max-width: 1100px) {
    .training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .menu-toggle,
    .mobile-close { display: inline-flex; }
    .mobile-close {
        align-self: flex-end;
        margin-bottom: 0.75rem;
        background: transparent;
        color: var(--peh-primary);
        border: 1px solid rgba(91, 36, 143, 0.15);
    }
    .primary-menu-wrap {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(92vw, 360px);
        height: 100dvh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        box-shadow: -20px 0 40px rgba(0,0,0,0.15);
        transition: right 0.25s ease;
        overflow-y: auto;
    }
    .primary-menu-wrap.is-open { right: 0; }
    .main-navigation ul,
    .footer-menu ul,
    .header-top .container,
    .header-main .container,
    .newsletter-section .container,
    .site-footer-bottom .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .main-navigation ul { display: block; width: 100%; }
    .main-navigation li { width: 100%; }
    .main-navigation a { border-radius: 14px; }
    .hero-section .container,
    .banner-grid,
    .grid-2,
    .contact-grid,
    .contact-strip .container,
    .cards-grid,
    .services-grid,
    .products-grid,
    .training-grid,
    .metric-row,
    .form-grid {
        grid-template-columns: 1fr;
    }
    .header-top .container,
    .header-main .container,
    .newsletter-section .container,
    .site-footer-bottom .container,
    .header-top-left,
    .header-top-right { display: flex; }
    .newsletter-form {
        flex-direction: column;
        align-items: stretch;
    }
    .newsletter-form input { min-width: 100%; }
}

@media (max-width: 640px) {
    .hero-section { padding: 4.2rem 0; }
    .page-banner { padding: 2.5rem 0; }
    .site-title, .site-title a { font-size: 1.05rem; }
    .custom-logo-link img, .brand-mark, .footer-logo { max-height: 58px; }
    .footer-grid { grid-template-columns: 1fr; }
    .floating-whatsapp, .scroll-top { width: 48px; height: 48px; }
}