/*
 * Storefront overrides.
 *
 * Loaded after the theme's main stylesheet on every page, so it is the one
 * place to correct gaps between demo5.css and style.css rather than editing
 * either vendor file.
 */

/* ---------------------------------------------------------------------------
 * Footer contact ("headphone") icon.
 *
 * main.js replaces <img class="svg_img"> with an inline <svg>. demo5.css sizes
 * that svg (.ec-footer-contact .call-img svg { width:40px; height:40px }) but
 * style.css has no .call-img rule at all, so on every inner page the injected
 * SVG fell back to its intrinsic size and rendered enormous. Size it for both
 * stylesheet contexts, and cover the <img> too for the moment before the
 * injector runs.
 * ------------------------------------------------------------------------ */
.ec-footer .footer-top .ec-footer-contact .call-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

.ec-footer .footer-top .ec-footer-contact .call-img svg,
.ec-footer .footer-top .ec-footer-contact .call-img img {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
}

/* The contact row is a flex pair (icon + text); style.css doesn't define it. */
.ec-footer .footer-top .ec-footer-contact .ec-footer-link {
    display: flex;
    align-items: flex-start;
}

.ec-footer .footer-top .ec-footer-contact .call-desc {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Product cards: keep every tile the same height regardless of image aspect
 * ratio, since admin-uploaded photos are not a uniform size.
 * ------------------------------------------------------------------------ */
.ec-product-inner .ec-pro-image-outer .ec-pro-image img.main-image,
.ec-product-inner .ec-pro-image-outer .ec-pro-image img.hover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Out-of-stock buttons should look unavailable, not merely inert. */
.js-cart-add:disabled,
.js-cart-add[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Account, order and confirmation pages.
 *
 * These pages were built from the theme's own class names, but the theme never
 * styles them outside the two pages it shipped:
 *
 *   .ec-common-wrapper   styled only under .terms_condition_page, so on all 16
 *                        views that use it it is a bare, unstyled <div>
 *   .table-content table styled only under .ec-cart-content, so the order and
 *                        account tables render as raw HTML tables
 *   .ec-cart-summary     styled only under .ec-cart-summary-bottom
 *   .cart-table-content  no rules at all, anywhere
 *   .ec-sb-title         no rules at all, anywhere
 *
 * Supply the missing context here rather than restructure sixteen templates.
 * Colours follow the theme: #3474d4 accent, #ededed rules, #777 muted text.
 * ------------------------------------------------------------------------ */

/* The panel every account and order block sits in. */
.ec-page-content .ec-common-wrapper {
    padding: 26px;
    margin-bottom: 24px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background-color: #fff;
}

/* A wrapper used purely as a link target shouldn't inherit link colouring. */
.ec-page-content a > .ec-common-wrapper {
    color: #444;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ec-page-content a:hover > .ec-common-wrapper {
    border-color: #3474d4;
    box-shadow: 0 2px 10px rgba(52, 116, 212, .12);
}

/* Panel headings. .section-title carries big centred page-title margins from
   the theme, which is wrong for a heading inside a card. */
.ec-page-content .ec-common-wrapper .section-title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ededed;
}

.ec-page-content .ec-common-wrapper .section-title .ec-title {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.3;
}

.ec-page-content .ec-common-wrapper .section-title .sub-title {
    margin-bottom: 0;
    font-size: 13px;
    color: #777;
}

/* Sidebar block headings (Summary / Delivery) — .ec-sb-title has no rules. */
.ec-common-wrapper .ec-sb-title {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ededed;
}

.ec-common-wrapper .ec-sb-title .ec-sidebar-title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 600;
}

/* ---- Data tables (order lines, order history, invoices, repairs) -------- */
.ec-common-wrapper .table-content table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.ec-common-wrapper .table-content table thead > tr > th {
    padding: 12px 14px;
    border-bottom: 1px solid #ededed;
    background-color: #fafafa;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #777;
    white-space: nowrap;
}

.ec-common-wrapper .table-content table tbody > tr > td {
    padding: 14px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: middle;
    color: #444;
}

.ec-common-wrapper .table-content table tbody > tr:last-child > td {
    border-bottom: 0;
}

.ec-common-wrapper .table-content table tbody > tr:hover > td {
    background-color: #fafcff;
}

/* Money and counts read better right-aligned and never wrapped. */
.ec-common-wrapper .table-content table th:not(:first-child),
.ec-common-wrapper .table-content table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.ec-common-wrapper .table-content table td:first-child {
    font-weight: 500;
}

/* Stack into labelled rows on small screens. Every one of these tables
   already emits data-label on its cells, so no markup change is needed. */
@media (max-width: 767px) {
    .ec-common-wrapper .table-content table thead {
        display: none;
    }

    .ec-common-wrapper .table-content table,
    .ec-common-wrapper .table-content table tbody,
    .ec-common-wrapper .table-content table tr,
    .ec-common-wrapper .table-content table td {
        display: block;
        width: 100%;
    }

    .ec-common-wrapper .table-content table tbody > tr {
        margin-bottom: 14px;
        border: 1px solid #ededed;
        border-radius: 6px;
        overflow: hidden;
    }

    .ec-common-wrapper .table-content table tbody > tr > td,
    .ec-common-wrapper .table-content table td:not(:first-child) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        text-align: right;
        padding: 10px 14px;
    }

    .ec-common-wrapper .table-content table tbody > tr > td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #777;
        text-align: left;
    }

    /* A cell with an empty data-label (the "View" action) needs no prefix. */
    .ec-common-wrapper .table-content table tbody > tr > td[data-label='']::before {
        content: none;
    }
}

/* ---- Totals -------------------------------------------------------------
 * The theme only styles .ec-cart-summary beneath .ec-cart-summary-bottom, so
 * the confirmation page's copy rendered as plain stacked spans.
 * ---------------------------------------------------------------------- */
.ec-common-wrapper .ec-cart-summary > * {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid #f2f2f2;
}

.ec-common-wrapper .ec-cart-summary > *:last-child {
    border-bottom: 0;
}

.ec-common-wrapper .ec-cart-summary .text-left {
    color: #777;
}

.ec-common-wrapper .ec-cart-summary .text-right {
    font-weight: 500;
    color: #444;
    white-space: nowrap;
}

.ec-common-wrapper .ec-cart-summary .ec-cart-summary-total {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #ededed;
    border-bottom: 0;
}

.ec-common-wrapper .ec-cart-summary .ec-cart-summary-total .text-left {
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

.ec-common-wrapper .ec-cart-summary .ec-cart-summary-total .text-right {
    font-size: 18px;
    font-weight: 700;
    color: #3474d4;
}

/* ---- Order status pill -------------------------------------------------- */
.ec-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: capitalize;
    white-space: nowrap;
}

.ec-status--pending   { background: #fff4e5; color: #b26a00; }
.ec-status--confirmed { background: #e7f0fd; color: #1f5cb3; }
.ec-status--completed { background: #e6f6ec; color: #14663a; }
.ec-status--cancelled { background: #fdecec; color: #b02a2a; }

/* ---- Confirmation hero -------------------------------------------------- */
.ec-order-hero {
    padding: 34px 26px;
    margin-bottom: 24px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
}

.ec-order-hero .ec-order-hero__tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background-color: #e6f6ec;
    color: #14663a;
    font-size: 30px;
    line-height: 1;
}

.ec-order-hero .ec-title {
    margin-bottom: 8px;
}

.ec-order-hero__ref {
    display: inline-block;
    margin-top: 6px;
    padding: 7px 16px;
    border: 1px dashed #3474d4;
    border-radius: 6px;
    background-color: #f5f9ff;
    font-weight: 600;
    letter-spacing: .5px;
    color: #3474d4;
}

/* ---- Definition rows (delivery details, payment) ------------------------ */
.ec-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ec-detail-list > li {
    padding: 9px 0;
    border-bottom: 1px solid #f2f2f2;
}

.ec-detail-list > li:last-child {
    border-bottom: 0;
}

.ec-detail-list .ec-detail-list__label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #777;
}

.ec-detail-list .ec-detail-list__value {
    color: #444;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
 * Product card hover panel.
 *
 * demo5.css drops .pro-hidden-block below the card (top: calc(100% - 4px))
 * but never gives it a surface: .ec-product-hover, the white backdrop, is
 * pinned to the card's own box (top/right/bottom/left: 0), so the part that
 * hangs below sits on whatever is underneath. The result is the description
 * and buttons overlapping the next row through the card's own bottom border.
 *
 * Continue the card downwards instead: the panel gets the same white fill and
 * 1px #d9d9d9 border, the seam between the two is removed, and the hovered
 * card is lifted above its neighbours so nothing shows through it.
 * ------------------------------------------------------------------------ */
.is-home-demo .ec-product-inner .pro-hidden-block {
    top: 100%;
    padding: 0 15px 15px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    /* Cover the card's own bottom border so the two read as one surface. */
    margin-top: -1px;
}

/* While open, the card's bottom edge is the panel's, not its own.
   Scoped: the shop and product pages use .ec-product-inner as well, and there
   the card has no panel below it — squaring its corners would just delete the
   bottom border on hover. */
.is-home-demo .ec-product-inner:hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

/* The expanded card must win against later cards in the grid. */
.is-home-demo .ec-product-content:hover,
.is-home-demo .ec-product-inner:hover {
    position: relative;
    z-index: 20;
}

/* ---------------------------------------------------------------------------
 * Stop the card resizing on hover.
 *
 * demo5.css reshuffles the card's insides on hover to make room for
 * .ec-pro-option — the size/colour swatch row of the original template:
 *
 *   :hover .ec-pro-content      { padding-top: 58px; margin-bottom: -50px; }
 *   :hover .ec-pro-rat-pri-inner { transform: translateY(-30px); }
 *   :hover .ec-pro-option        { min-height: 45px; }
 *
 * Our card has no .ec-pro-option, so the compensation runs with nothing to
 * compensate for: the negative margin shrinks the card by 50px while the
 * padding pushes the title and price down 43px. Put the geometry back to its
 * resting values so hovering only reveals the panel underneath and leaves the
 * card itself exactly where it was.
 * ------------------------------------------------------------------------ */
.is-home-demo .ec-product-inner:hover .ec-pro-content {
    padding-top: 15px;   /* the base value from .ec-pro-content */
    margin-bottom: 0;
}

.is-home-demo .ec-product-inner:hover .ec-pro-rat-pri-inner {
    -webkit-transform: none;
    transform: none;
}

/* The white backdrop is only needed over the card itself; the panel now
   carries its own, so keep the backdrop from rounding off mid-card. */
.is-home-demo .ec-product-inner:hover .ec-product-hover {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

/* ---------------------------------------------------------------------------
 * Discount badge.
 *
 * The card renders <span class="percentage"> for a discounted item, but
 * demo5.css has no .percentage rule at all — only the other demos do — so the
 * figure rendered as bare text floating beside the image. Style it as the
 * corner badge it was meant to be.
 *
 * Scoped to the homepage: style.css already styles this exact selector for
 * every inner page, and an unscoped rule here would silently restyle those.
 * ------------------------------------------------------------------------ */
.is-home-demo .ec-product-inner .ec-pro-image-outer .ec-pro-image {
    position: relative;
}

.is-home-demo .ec-product-inner .ec-pro-image .percentage {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 11;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    background-color: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .3px;
    pointer-events: none;
}