/*
 * Missing theme icon glyphs.
 *
 * The Ekka icon font bundled with this theme only ships ten glyphs
 * (angle-down/left/right, bars, check-circle-o, envelope, map-marker, star,
 * star-o, times-circle-o). The theme's own markup references a further nine
 * that were never included, so they rendered as blank boxes on every page —
 * most visibly the header search button, the cart's remove button and the
 * social links in the header and footer.
 *
 * Rather than swap out the font (which would restyle the icons that do work),
 * this defines only the missing classes, drawn as inline SVG masks. Using a
 * mask with background-color: currentColor means each icon inherits the colour
 * and hover state the theme already sets on its parent, so they behave exactly
 * like real font glyphs.
 *
 * Self-contained: no external requests, no font files, no build step.
 */

.ecicon.eci-search,
.ecicon.eci-trash-o,
.ecicon.eci-caret-down,
.ecicon.eci-money,
.ecicon.eci-facebook,
.ecicon.eci-twitter,
.ecicon.eci-instagram,
.ecicon.eci-linkedin,
.ecicon.eci-whatsapp {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Search — header search submit button. */
.ecicon.eci-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* Trash — remove a line from the cart. */
.ecicon.eci-trash-o {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
}

/* Caret down — dropdown affordance. */
.ecicon.eci-caret-down {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

/* Banknote — cash on delivery. */
.ecicon.eci-money {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
}

.ecicon.eci-facebook {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5H16.7V4.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.36H7.4V14h2.72v8z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5H16.7V4.6c-.3 0-1.3-.13-2.47-.13-2.44 0-4.11 1.49-4.11 4.23v2.36H7.4V14h2.72v8z'/%3E%3C/svg%3E");
}

.ecicon.eci-twitter {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9 3H22l-6.8 7.8L23 21h-6.2l-4.9-6.4L6.3 21H3.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.3 4.7H5.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.9 3H22l-6.8 7.8L23 21h-6.2l-4.9-6.4L6.3 21H3.2l7.3-8.3L2 3h6.4l4.4 5.8zm-1.1 16.2h1.7L7.3 4.7H5.5z'/%3E%3C/svg%3E");
}

.ecicon.eci-instagram {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
}

.ecicon.eci-linkedin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.9 21H3.6V9h3.3zM5.25 7.5A1.9 1.9 0 1 1 5.25 3.7a1.9 1.9 0 0 1 0 3.8M21 21h-3.3v-5.8c0-1.4 0-3.2-1.95-3.2s-2.25 1.5-2.25 3.1V21H10.2V9h3.15v1.65h.05a3.45 3.45 0 0 1 3.1-1.7c3.3 0 3.9 2.2 3.9 5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.9 21H3.6V9h3.3zM5.25 7.5A1.9 1.9 0 1 1 5.25 3.7a1.9 1.9 0 0 1 0 3.8M21 21h-3.3v-5.8c0-1.4 0-3.2-1.95-3.2s-2.25 1.5-2.25 3.1V21H10.2V9h3.15v1.65h.05a3.45 3.45 0 0 1 3.1-1.7c3.3 0 3.9 2.2 3.9 5z'/%3E%3C/svg%3E");
}

.ecicon.eci-whatsapp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2m5.8 14.2c-.25.7-1.45 1.3-2 1.35-.5.05-1.15.07-1.85-.12a15 15 0 0 1-6.7-5.9c-.5-.85-.8-1.8-.8-2.7 0-1 .5-1.5.7-1.7a.9.9 0 0 1 .65-.3h.45c.15 0 .35 0 .5.4l.7 1.7c.05.15.1.3 0 .45l-.3.45-.25.3c-.1.1-.2.25-.1.45.15.25.6 1 1.3 1.6.9.8 1.6 1.05 1.85 1.15.2.1.35.05.45-.05l.6-.7c.15-.2.3-.15.5-.1l1.6.75c.25.1.4.2.45.3s.05.5-.2 1.2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-8.6 15l-1.3 4.7 4.8-1.3A10 10 0 1 0 12 2m5.8 14.2c-.25.7-1.45 1.3-2 1.35-.5.05-1.15.07-1.85-.12a15 15 0 0 1-6.7-5.9c-.5-.85-.8-1.8-.8-2.7 0-1 .5-1.5.7-1.7a.9.9 0 0 1 .65-.3h.45c.15 0 .35 0 .5.4l.7 1.7c.05.15.1.3 0 .45l-.3.45-.25.3c-.1.1-.2.25-.1.45.15.25.6 1 1.3 1.6.9.8 1.6 1.05 1.85 1.15.2.1.35.05.45-.05l.6-.7c.15-.2.3-.15.5-.1l1.6.75c.25.1.4.2.45.3s.05.5-.2 1.2'/%3E%3C/svg%3E");
}

/*
 * Cash-on-delivery block on the checkout. COD is the only method this shop
 * takes, so it is stated rather than offered as a single-option radio group.
 */
.ec-cod-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background: #fafafa;
}

.ec-cod-method .ec-cod-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    color: #4b5966;
}

.ec-cod-method .ec-cod-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ec-cod-method .ec-cod-text small {
    color: #777;
    line-height: 1.5;
}

/* Order summary lines on the checkout sit tighter than the cart's. */
.ec-check-order .ec-cart-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.ec-check-order .ec-cart-summary > div .text-right {
    white-space: nowrap;
}

/* Account landing page: make the history shortcut cards look clickable. */
a > .ec-common-wrapper {
    transition: box-shadow .15s ease, border-color .15s ease;
}

a:hover > .ec-common-wrapper {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/*
 * Banner-driven hero slides.
 *
 * The theme sizes its hero slides through .slide-1/.slide-2/.slide-3, which
 * carry both the background image AND `height: 70vh`. Slides rendered from the
 * banners table cannot use those classes (each one has its own image, set
 * inline), so they inherited no height at all and collapsed to zero — present
 * in the HTML, invisible on screen.
 *
 * These rules restore the sizing for any slide, matching the theme's own
 * breakpoints so a database banner and a demo slide look identical.
 */
.ec-main-slider .ec-slide-item {
    height: 70vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 1199px) {
    .ec-main-slider .ec-slide-item { height: 60vh; }
}

@media only screen and (max-width: 767px) {
    .ec-main-slider .ec-slide-item { height: 46vh; }
}

@media only screen and (max-width: 575px) {
    .ec-main-slider .ec-slide-item { min-height: 250px; }
}

/*
 * Promo tiles — fixed shape, whatever gets uploaded.
 *
 * The theme's own promo artwork was two identical 670x257 images, so the tiles
 * happened to match and nobody had to think about it. Nothing enforced that:
 * .banner-block has no height, so it takes the natural height of its image. Any
 * upload with a different aspect ratio therefore resizes the tile AND the whole
 * section around it — a portrait image makes the strip enormous.
 *
 * Pinning the ratio on the block and cropping the image into it with object-fit
 * means the section is a constant height no matter what the shop uploads.
 */
.ec-banner .banner-block {
    aspect-ratio: 670 / 257;
    width: 100%;
    overflow: hidden;
}

.ec-banner .banner-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keep the middle of the artwork when a tall image is cropped. */
    object-position: center;
}

/* aspect-ratio is well supported, but fall back to a fixed height where it is
   not, so the tile is never zero-height. */
@supports not (aspect-ratio: 1) {
    .ec-banner .banner-block {
        height: 240px;
    }
}

/* The two tiles sit side by side and must stay equal. */
.ec-banner .ec-banners > * {
    align-items: stretch;
}

.ec-banner .ec-banner-block {
    width: 100%;
}

/*
 * Checkout checkboxes.
 *
 * The theme styles inputs inside the checkout blocks as full-width text fields
 * (width: 100%, padding, borders). A checkbox picking those up renders as an
 * enormous box instead of a tick. Nothing in the theme narrows it back down,
 * because its own markup never puts a checkbox there.
 *
 * These rules give checkboxes and radios their natural size back and line them
 * up with their label text. Scoped to the storefront's checkout/cart blocks so
 * no other form is affected.
 */
.ec-checkout-block input[type="checkbox"],
.ec-checkout-block input[type="radio"],
.ec-page-content label input[type="checkbox"],
.ec-page-content label input[type="radio"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    vertical-align: middle;
    accent-color: #3b5d50;
    cursor: pointer;
}

/* The label wraps the input, so keep the two on one line and centred. */
.ec-checkout-block label:has(input[type="checkbox"]),
.ec-checkout-block label:has(input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
}

/* :has() is recent; this keeps the utility classes working without it. */
.ec-checkout-block label.d-inline-flex {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}