/**
 * Gladior EU Guarantee — frontend styling.
 *
 * Deliberately minimal. Both the notice and the GARAN label are prescribed
 * artwork; this file controls placement, sizing and the nested expansion only.
 * Do not add filters, opacity or greyscale — online display must be in colour,
 * and altering the artwork is not permitted.
 */

/* -------------------------------------------------------------------- Inter
 *
 * The official artwork specifies Inter. Without it the browser substitutes a
 * fallback and the label's typography stops matching the published design, so
 * the family is bundled (SIL Open Font License 1.1 — see fonts/LICENSE-Inter.txt).
 * Scoped by family name only; nothing here changes the theme's own typography.
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-800.woff2') format('woff2');
}

/* ---------------------------------------------------------- Legal notice */

.gladior-eu-notice {
    margin: 20px 0;
}

/* --- Trigger link ------------------------------------------------------- */

.gladior-eu-notice__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.4rem;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gladior-eu-notice__trigger:hover {
    text-decoration: none;
}

.gladior-eu-notice__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/*
 * Small shield mark echoing the notice, so the link reads as an official
 * pointer rather than a generic footer link. Purely a cue for the trigger --
 * it is not part of the notice artwork and never replaces it.
 */
.gladior-eu-notice__trigger-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 17px;
    background-color: #003399;
    clip-path: polygon(50% 0, 100% 0, 100% 62%, 50% 100%, 0 62%, 0 0);
}

/* --- Lightbox ----------------------------------------------------------- */

.gladior-eu-notice--lightbox .gladior-eu-notice__dialog[hidden] {
    display: none;
}

.gladior-eu-notice--lightbox .gladior-eu-notice__dialog {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    overflow: auto;
}

.gladior-eu-notice--lightbox .gladior-eu-notice__panel {
    position: relative;
    max-width: 100%;
    padding: 16px;
    border-radius: 2px;
    background: #fff;
    text-align: center;
}

.gladior-eu-notice__close {
    position: absolute;
    top: 4px;
    right: 8px;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.gladior-eu-notice__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gladior-eu-notice__image-link {
    display: block;
    line-height: 0;
}

.gladior-eu-notice__image {
    display: block;
    width: auto;
    height: auto;
    /* Colour is a legal requirement online. */
    filter: none;
}

/*
 * Sized by height so the notice stays as large as the viewport allows: online
 * it must be legible at default display size, and an A4 page constrained by
 * width alone ends up too small to read. Aspect ratio is never altered.
 */
.gladior-eu-notice--lightbox .gladior-eu-notice__image {
    max-height: calc(100vh - 130px);
    max-width: 100%;
    margin: 0 auto;
}

.gladior-eu-notice__link {
    display: inline-block;
    margin-top: 10px;
    font-size: 1.3rem;
}

/* --- Inline presentation ------------------------------------------------ */

.gladior-eu-notice--inline .gladior-eu-notice__image {
    max-width: 100%;
    /*
     * An A4 notice needs roughly this much width before its body text becomes
     * readable. Placing the inline mode somewhere narrower than this is the
     * wrong choice -- use the lightbox instead.
     */
    width: 600px;
}

.gladior-eu-notice--inline.gladior-eu-notice--product .gladior-eu-notice__image {
    width: 460px;
}

/* Never print the overlay chrome; the notice itself still prints. */
@media print {
    .gladior-eu-notice__trigger,
    .gladior-eu-notice__close {
        display: none;
    }

    .gladior-eu-notice--lightbox .gladior-eu-notice__dialog {
        position: static;
        display: block;
        padding: 0;
        background: none;
    }

    .gladior-eu-notice--lightbox .gladior-eu-notice__dialog[hidden] {
        display: block;
    }
}

/* ----------------------------------------------------------- GARAN label */

.gladior-garan {
    margin: 20px 0;
}

.gladior-garan__label {
    display: inline-block;
    line-height: 0;
}

/* Full label: 269.29 x 283.46 in its own units, shown at a legible screen size. */
.gladior-garan__label svg {
    display: block;
    width: 100%;
    height: auto;
}

.gladior-garan__description {
    margin: 8px 0 0;
    max-width: 46em;
    font-size: 1.3rem;
}

/*
 * Nested display.
 *
 * Collapsed state is the Commission's compact bar (368.5 x 56.69); expanding
 * reveals the full label. Driven by :hover and :focus-within on a real button,
 * so mouse, keyboard and touch all work with no JavaScript.
 */
.gladior-garan__toggle {
    display: none;
}

.gladior-garan--nested .gladior-garan__toggle {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    float:unset!important;
}

.gladior-garan--nested .gladior-garan__toggle svg {
    display: block;
    width: 210px;
    height: auto;
}

.gladior-garan--nested .gladior-garan__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.gladior-garan--nested .gladior-garan__full {
    display: none;
    margin-top: 10px;
}

.gladior-garan--nested:hover .gladior-garan__full,
.gladior-garan--nested:focus-within .gladior-garan__full {
    display: block;
}

/*
 * Touch devices have no hover. The button still receives focus on tap, which
 * :focus-within handles, but the collapsed bar is kept visible alongside the
 * expanded label so the tap target does not vanish under the user's finger.
 */
@media (hover: none) {
    .gladior-garan--nested .gladior-garan__toggle {
        margin-bottom: 4px;
    }
}

/*
 * Checkout summary. The sidebar is narrow and there may be several labels, one
 * per qualifying line, so both the bar and the expanded label are scaled down
 * from their product-page sizes. Expansion here is click-driven through the
 * Knockout component rather than :hover, since a summary line is not a
 * comfortable hover target on touch.
 */
.gladior-garan--checkout {
    /*
     * Rendered in Amasty's "item_message" region, which sits outside
     * .product-item-inner, so the label gets the full row rather than
     * competing with the unit prices in that flex container.
     */
    width: 100%;
    margin: 8px 0 0;
}

.gladior-garan--checkout .gladior-garan__toggle svg {
    width: 150px;
}

.gladior-garan--checkout .gladior-garan__label svg {
    width: 100%;
}

.gladior-garan--checkout .gladior-garan__description {
    font-size: 1.1rem;
}

/* The component controls visibility, so the hover rules must not fight it. */
.gladior-garan--checkout.gladior-garan--nested:hover .gladior-garan__full,
.gladior-garan--checkout.gladior-garan--nested:focus-within .gladior-garan__full {
    display: block;
}

.gladior-garan--checkout .gladior-garan__full {
    margin-top: 6px;
}

/* Printing: the label has a legal minimum printed size of 95 x 100 mm. */
@media print {
    .gladior-garan--nested .gladior-garan__toggle {
        display: none;
    }

    .gladior-garan--nested .gladior-garan__full {
        display: block;
    }

    .gladior-garan__label svg {
        width: 95mm;
        height: auto;
    }
}