/*
Theme Name:   ED Pioneer
Theme URI:    https://edelectronics.mu/
Description:  ED Electronics Ltd — Pioneer warranty cover theme. Child of Storefront, themed for the parallel-import warranty store.
Author:       ED Electronics Ltd
Author URI:   https://edelectronics.mu/
Template:     storefront
Version:      1.0.0
Text Domain:  ed-pioneer
*/

:root {
    --ede-ink: #0b0b0c;
    --ede-paper: #fafaf9;
    --ede-accent: #d97706;
    --ede-muted: #71717a;
    --ede-border: #e4e4e7;
}

body, body.woocommerce { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; color: var(--ede-ink); }

/* --- Wider layout: spread content across the screen instead of Storefront's narrow centered column --- */
.col-full,
.storefront-sticky-add-to-cart .col-full,
.site-header .col-full,
.site-footer .col-full,
.site-content .col-full {
    max-width: 1380px !important;
    padding-left: 32px;
    padding-right: 32px;
}
@media (min-width: 1100px) {
    /* Single-product, shop archives, cart, checkout, account all use full width — no sidebar */
    .single-product .site-content #primary,
    .woocommerce.archive .site-content #primary,
    .woocommerce-cart .site-content #primary,
    .woocommerce-checkout .site-content #primary,
    .woocommerce-account .site-content #primary { width: 100% !important; float: none; }
    .single-product .site-content #secondary,
    .woocommerce.archive .site-content #secondary,
    .woocommerce-cart .site-content #secondary,
    .woocommerce-checkout .site-content #secondary,
    .woocommerce-account .site-content #secondary { display: none !important; }

    /* Single-product layout: smaller gallery, much wider summary */
    .single-product div.product { display: flex; flex-wrap: wrap; gap: 48px; }
    .single-product div.product .woocommerce-product-gallery {
        width: 38% !important; float: none !important; margin: 0 !important;
    }
    .single-product div.product .summary {
        width: calc(62% - 48px) !important; float: none !important; margin: 0 !important;
        padding-top: 8px;
    }
    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related,
    .single-product div.product .upsells { width: 100% !important; }
    .single-product div.product .price { font-size: 36px !important; font-weight: 800 !important; }
    .single-product div.product h1.product_title { font-size: 38px !important; line-height: 1.1; margin-bottom: 12px; }

    /* Other content pages (About, Service centre, Contact, Verify) — keep them readable */
    .page-template-default .site-content #primary,
    .page .site-content #primary { width: 100% !important; max-width: 920px; margin: 0 auto; float: none; }
    .page .site-content #secondary { display: none !important; }
}
/* Front-page sections need to break out of any parent padding */
body.page-template-front-page .col-full,
body.home .col-full { max-width: 100% !important; padding-left: 0; padding-right: 0; }
body.home #content { padding: 0; }
body.home .storefront-breadcrumb { display: none; }

/* Standard product grid: 4 columns on wide screens */
@media (min-width: 1200px) {
    .woocommerce ul.products[class*=columns-]:not(.columns-1) li.product,
    .woocommerce-page ul.products[class*=columns-]:not(.columns-1) li.product {
        width: 22.75%;
        margin-right: 3%;
    }
    .woocommerce ul.products[class*=columns-]:not(.columns-1) li.product:nth-child(4n),
    .woocommerce-page ul.products[class*=columns-]:not(.columns-1) li.product:nth-child(4n) {
        margin-right: 0;
    }
    .woocommerce ul.products[class*=columns-]:not(.columns-1) li.product:nth-child(4n+1),
    .woocommerce-page ul.products[class*=columns-]:not(.columns-1) li.product:nth-child(4n+1) {
        clear: both;
    }
}
.site-header { background: var(--ede-ink); padding: 14px 0; border-bottom: none; }
.site-header .site-search, .site-header .secondary-navigation a, .main-navigation ul.menu li a { color: #fafaf9; }

/* ED Electronics logo in header */
.edepw-branding { display: inline-block; }
.edepw-branding .edepw-logo-link { display: inline-block; line-height: 0; }
.edepw-logo-img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 380px;
}
@media (max-width: 768px) {
    .edepw-logo-img { height: 44px; max-width: 280px; }
}

/* Brands strip — authorised distributor brands.
   Built as CSS wordmarks so the page works before real logo PNGs are uploaded.
   When official brand logos are added to Media library, swap each .brand span for an <img>. */
.ede-brands {
    background: #fff; padding: 56px 24px 44px;
    border-top: 1px solid var(--ede-border);
    border-bottom: 1px solid var(--ede-border);
}
.ede-brands .wrap { max-width: 1380px; margin: 0 auto; text-align: center; }
.ede-brands .eyebrow {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ede-muted); margin-bottom: 24px;
}
.ede-brands .row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0,1fr));
    align-items: stretch;
    gap: 14px;
}
@media (max-width: 1100px) { .ede-brands .row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .ede-brands .row { grid-template-columns: repeat(2, 1fr); } }

.ede-brands .brand {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 90px; padding: 18px 14px;
    border: 1px solid var(--ede-border); border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.ede-brands .brand:hover {
    transform: translateY(-2px);
    border-color: var(--ede-ink);
    box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
.ede-brands .brand .wm {
    font-weight: 800; font-size: 19px; letter-spacing: 0;
    line-height: 1; color: var(--ede-ink); display: block;
}
.ede-brands .brand .tag {
    display: block; margin-top: 6px;
    font-size: 9.5px; font-weight: 500; color: var(--ede-muted);
    letter-spacing: .14em; text-transform: uppercase;
}

/* Per-brand wordmark styling, approximating each manufacturer's identity */
.ede-brands .brand.pioneer-dj .wm,
.ede-brands .brand.pioneer    .wm {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #c8102e; font-weight: 900;
    text-transform: lowercase; letter-spacing: -.02em; font-size: 22px;
}
.ede-brands .brand.pioneer-dj .wm:after {
    content: ' DJ';
    color: #c8102e;
    font-weight: 900; letter-spacing: .04em; font-size: 14px;
    border: 1.5px solid #c8102e; padding: 1px 5px;
    margin-left: 4px; border-radius: 3px;
    display: inline-block; vertical-align: 3px; text-transform: uppercase;
}
.ede-brands .brand.pioneer-dj .wm { content-visibility: visible; }
.ede-brands .brand.pioneer-dj .wm::first-line { /* nothing */ }

.ede-brands .brand.onkyo .wm {
    font-family: 'Arial Black', Arial, sans-serif;
    color: #1a3d8f; letter-spacing: .04em;
    text-transform: uppercase; font-size: 22px;
}

.ede-brands .brand.elac .wm {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #111; font-weight: 800;
    text-transform: uppercase; letter-spacing: .22em; font-size: 19px;
}

.ede-brands .brand.klipsch .wm {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #a02020; font-weight: 700; font-style: italic;
    font-size: 22px; letter-spacing: -.005em;
}

.ede-brands .brand.cambridge .wm {
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #1c1c1c; font-weight: 600;
    font-size: 16px; letter-spacing: .02em;
}
.ede-brands .brand.cambridge .wm strong {
    display: block; font-size: 18px; font-weight: 700;
}

.ede-brands .brand.jamo .wm {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #111; font-weight: 300; font-style: italic;
    letter-spacing: -.005em; font-size: 24px;
}

/* Hero section (front page) */
.ede-hero {
    background: linear-gradient(135deg, #0b0b0c 0%, #1f2937 100%);
    color: #fafaf9; padding: 80px 24px 96px; text-align: center;
    position: relative; overflow: hidden;
}
.ede-hero:before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(217,119,6,.18), transparent 60%);
    pointer-events: none;
}
.ede-hero .ede-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ede-accent); position: relative; }
.ede-hero h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 14px 0 18px; max-width: 980px; margin-inline: auto; position: relative; }
.ede-hero p.lede { font-size: clamp(16px, 2vw, 20px); max-width: 720px; margin: 0 auto 32px; color: #d4d4d8; position: relative; }
.ede-hero .ede-cta { position: relative; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ede-hero .ede-cta a {
    display: inline-block; padding: 14px 26px; border-radius: 8px;
    background: var(--ede-accent); color: #fff; font-weight: 700; text-decoration: none;
    transition: transform .15s, background .15s;
}
.ede-hero .ede-cta a:hover { transform: translateY(-1px); background: #b45309; }
.ede-hero .ede-cta a.ghost { background: transparent; border: 1px solid #fafaf9; }
.ede-hero .ede-cta a.ghost:hover { background: rgba(255,255,255,.08); }

/* Value props */
.ede-values { background: var(--ede-paper); padding: 64px 24px; }
.ede-values .ede-grid {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px;
}
.ede-values .ede-card {
    background: #fff; padding: 28px 26px; border: 1px solid var(--ede-border); border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ede-values .ede-card .ede-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--ede-ink); color: #fafaf9; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 20px; margin-bottom: 14px;
}
.ede-values .ede-card h3 { margin: 0 0 6px; font-size: 18px; }
.ede-values .ede-card p { margin: 0; color: var(--ede-muted); font-size: 14.5px; line-height: 1.55; }

/* Section heads */
.ede-section-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.ede-section-head .ede-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ede-accent); }
.ede-section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 14px; }
.ede-section-head p { color: var(--ede-muted); font-size: 16px; }

/* Packages grid (used on home + shop) */
.ede-packages { padding: 64px 24px; background: #fff; }
.ede-packages .ede-grid {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.ede-packages .pack {
    border: 1px solid var(--ede-border); border-radius: 14px; padding: 28px; background: #fff;
    display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ede-packages .pack:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); border-color: #18181b; }
.ede-packages .pack.featured { border-color: var(--ede-accent); position: relative; }
.ede-packages .pack.featured:before {
    content: 'Most popular'; position: absolute; top: -12px; left: 24px;
    background: var(--ede-accent); color: #fff; padding: 4px 10px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ede-packages .pack h3 { margin: 0; font-size: 22px; }
.ede-packages .pack .price { font-size: 32px; font-weight: 800; margin: 8px 0 4px; }
.ede-packages .pack .price small { font-size: 14px; color: var(--ede-muted); font-weight: 500; }
.ede-packages .pack .duration { color: var(--ede-muted); font-size: 14px; margin-bottom: 16px; }
.ede-packages .pack ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.ede-packages .pack li { padding: 8px 0; font-size: 14.5px; border-bottom: 1px dashed var(--ede-border); display: flex; gap: 10px; align-items: flex-start; }
.ede-packages .pack li:before { content: '✓'; color: var(--ede-accent); font-weight: 800; }
.ede-packages .pack a.button {
    display: block; text-align: center; padding: 12px 18px;
    background: var(--ede-ink); color: #fafaf9; border-radius: 8px; text-decoration: none;
    font-weight: 700; transition: background .15s;
}
.ede-packages .pack a.button:hover { background: #27272a; }
.ede-packages .pack.featured a.button { background: var(--ede-accent); }
.ede-packages .pack.featured a.button:hover { background: #b45309; }

/* How it works */
.ede-how { padding: 72px 24px; background: var(--ede-paper); }
.ede-how .steps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.ede-how .step { background: #fff; padding: 26px 24px; border-radius: 12px; border: 1px solid var(--ede-border); }
.ede-how .step .num {
    width: 36px; height: 36px; border-radius: 50%; background: var(--ede-ink); color: #fafaf9;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 12px;
}
.ede-how .step h4 { margin: 0 0 6px; font-size: 16px; }
.ede-how .step p { margin: 0; color: var(--ede-muted); font-size: 14px; line-height: 1.55; }

/* FAQ */
.ede-faq { padding: 64px 24px; background: #fff; }
.ede-faq .wrap { max-width: 820px; margin: 0 auto; }
.ede-faq details {
    border-bottom: 1px solid var(--ede-border); padding: 16px 0;
}
.ede-faq summary {
    cursor: pointer; font-weight: 700; font-size: 17px; padding-right: 24px;
    list-style: none; position: relative;
}
.ede-faq summary::-webkit-details-marker { display: none; }
.ede-faq summary:after {
    content: '+'; position: absolute; right: 0; top: 0; font-size: 22px; font-weight: 400;
}
.ede-faq details[open] summary:after { content: '−'; }
.ede-faq details p { margin: 12px 0 0; color: var(--ede-muted); line-height: 1.6; font-size: 15px; }

/* Footer */
.site-footer { background: var(--ede-ink); color: #d4d4d8; padding: 44px 0 28px; }
.site-footer a { color: #fafaf9; }

/* WooCommerce buttons accent */
.woocommerce a.button.alt, .woocommerce-page a.button.alt,
.woocommerce button.button.alt, .woocommerce-page button.button.alt,
.woocommerce input.button.alt, .woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce-page #respond input#submit.alt {
    background-color: var(--ede-ink); color: #fafaf9;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background-color: var(--ede-accent); color: #fff; }

/* Page intro band */
.ede-page-band { background: var(--ede-paper); padding: 36px 24px; border-bottom: 1px solid var(--ede-border); text-align: center; }
.ede-page-band h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.ede-page-band p { margin: 8px 0 0; color: var(--ede-muted); }