/**
 * Copyright since 2026 GuruCoders
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to obtain it
 * through the world-wide-web, please send an email to office@gurucoders.ro
 * and a copy will be sent immediately.
 *
 * @author    GuruCoders <office@gurucoders.ro>
 * @copyright Since 2026 GuruCoders
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */
/* modules/gcpromo/views/css/front.css
 *
 * Own classes, own layout. No Bootstrap, no theme grid: 1.6 themes carry
 * Bootstrap 3, 1.7+ carry Bootstrap 4, and purchased fleet themes carry
 * anything. CSS Grid needs nothing from the theme and works in every browser
 * that matters.
 *
 * Everything is prefixed .gcpromo-, so nothing here reaches the rest of the
 * page. The explicit resets on ul/img are there because a theme's own reset
 * can set list-style or max-width and the grid must not inherit it.
 *
 * NO rem, ANYWHERE. `rem` is a fraction of the THEME's root font size, and a
 * theme is free to pick any. PrestaShop 1.6's default theme sets
 * `html { font-size: 10px }` - so every size here used to come out 37.5%
 * smaller on 1.6 than on 1.7, 8 and 9, which are 16px. Measured on the
 * containers 2026-10-21: the campaign title 20px instead of 32, block titles
 * 14 instead of 22, the countdown 12 instead of 19, and the discount badge
 * 8.5px - a price reduction nobody could read, on seven fleet shops.
 *
 * Absolute units, and an explicit base on .gcpromo-page, so the page is the
 * same size on every theme. Same rule as the colours: set what you depend on.
 *
 * ---------------------------------------------------------------------------
 * THE LOOK, and why it is built the way it is (2026-10-21).
 *
 * The page is a guest. It sits inside a theme that owns the header, the
 * footer, the background and the body font, and it must read as designed
 * without pretending to be a site of its own. So the voice is in WEIGHT,
 * SCALE, RHYTHM and ONE ACCENT - not in a typeface the shop does not own.
 *
 * No webfont, deliberately. A campaign page is served on every visit of a
 * sale; loading a font from a third party would put a request to somebody
 * else's server on all of them, and that is not a decision a discount module
 * gets to make for a shop. The display weight comes from the theme's own
 * family at a heavier grade.
 *
 * Surfaces are derived from `currentColor` rather than hardcoded greys, so a
 * dark theme gets a light plinth instead of an invisible one. `color-mix` does
 * that where it exists; the rgba values above each rule are the fallback and
 * are not dead code.
 */

/* --- tokens ---------------------------------------------------------------
 *
 * TWO LOOKS, ONE FILE (2026-10-22). George: "a select has to be added in the
 * BO letting the client choose whether it will be a landing page or a
 * 'category page' like it was initially."
 *
 *   .gcpromo-layout-category  the original: quiet, inside the theme's palette,
 *                             for a permanent outlet section that should read
 *                             as part of the catalogue.
 *   .gcpromo-layout-landing   dark, lit, the area taken over - what a sale day
 *                             looks like everywhere it is run properly.
 *
 * The category look is the BASE and the landing look overrides it, rather than
 * two parallel blocks: a token added for one must not be forgotten by the
 * other, and this way it cannot be.
 *
 * On the page root rather than :root, so a shop can override the lot for this
 * module alone and nothing here leaks into the theme. */
.gcpromo-page {
    --gcpromo-accent: #e10600;
    --gcpromo-accent-ink: #ffffff;
    /* The accent at a strength a light page can carry. The landing block
     * redefines it four times louder, which is right there and would be a
     * stain here. */
    --gcpromo-accent-wash: rgba(225, 6, 0, 0.08);
    --gcpromo-rule: rgba(0, 0, 0, 0.14);
    --gcpromo-surface: rgba(0, 0, 0, 0.04);
    --gcpromo-surface-strong: rgba(0, 0, 0, 0.08);
    --gcpromo-muted: rgba(0, 0, 0, 0.55);
    /* A SOLID colour, never currentColor.
     *
     * This token is used as a BACKGROUND under white text, and `currentColor`
     * inside a declaration resolves to the colour of the element being
     * styled - which, on a rule that also sets `color: #fff`, is white. The
     * current navigation pill rendered white on white until that was
     * understood. */
    --gcpromo-ink: #111111;
    /* HEADINGS do not inherit the theme's body colour. PrestaShop 1.6's
     * default theme paints body text rgb(119,119,119) and its OWN headings
     * rgb(85,84,84) - it darkens them itself. A 44px masthead inheriting the
     * paragraph grey is weaker than anything the theme prints beside it, and
     * reads as unfinished rather than as restrained. */
    --gcpromo-heading: #111111;
    --gcpromo-panel: rgba(0, 0, 0, 0.04);
    --gcpromo-panel-soft: rgba(0, 0, 0, 0.08);
    --gcpromo-countdown-ink: #ffffff;
    --gcpromo-card-ring: transparent;
    --gcpromo-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --gcpromo-card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.12);
    --gcpromo-badge-glow: none;
    --gcpromo-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --gcpromo-shadow-lift: 0 10px 24px rgba(0, 0, 0, 0.12);
    --gcpromo-radius: 10px;

    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 16px 40px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.55;
}

/* Where it exists, the surfaces are built from the text colour the theme set,
 * so the quiet look is legible on a dark theme without a second stylesheet.
 * Scoped to the category look: the landing page sets its own background and
 * derives nothing from the shop. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .gcpromo-page.gcpromo-layout-category {
        --gcpromo-rule: color-mix(in srgb, currentColor 16%, transparent);
        --gcpromo-surface: color-mix(in srgb, currentColor 5%, transparent);
        --gcpromo-surface-strong: color-mix(in srgb, currentColor 10%, transparent);
        --gcpromo-muted: color-mix(in srgb, currentColor 60%, transparent);
        --gcpromo-panel: color-mix(in srgb, currentColor 5%, transparent);
        --gcpromo-panel-soft: color-mix(in srgb, currentColor 10%, transparent);
    }
}

/* --- the landing look -----------------------------------------------------
 * Everything the sale page changes, in one place. */
.gcpromo-page.gcpromo-layout-landing {
    /* Near-black with a blue cast rather than pure #000: a flat black swallows
     * the card edges and the glow has nothing to sit on. */
    --gcpromo-bg: #05070f;
    --gcpromo-panel: #0c1126;
    --gcpromo-panel-soft: #121a38;

    /* The two lights. Blue outlines the furniture, pink marks the money -
     * never the other way round, or the discount stops being the loudest
     * thing on the page. */
    --gcpromo-neon: #2f7bff;
    --gcpromo-neon-soft: rgba(47, 123, 255, 0.38);
    /* The same light at three more strengths, NAMED rather than written out
     * wherever they are used. A campaign can be themed from the back office
     * (GcpromoTheme), and a page whose accent was green while its badges still
     * glowed pink would read as half-themed. Every rgba() below that was once
     * a literal is one of these. */
    --gcpromo-neon-glow: rgba(47, 123, 255, 0.22);
    --gcpromo-neon-glow-strong: rgba(47, 123, 255, 0.35);
    --gcpromo-hero-glow: rgba(47, 123, 255, 0.28);
    --gcpromo-accent: #ff2e63;
    --gcpromo-accent-ink: #ffffff;
    --gcpromo-accent-glow: rgba(255, 46, 99, 0.5);
    --gcpromo-accent-wash: rgba(255, 46, 99, 0.22);

    --gcpromo-ink: #ffffff;
    --gcpromo-heading: #ffffff;
    --gcpromo-muted: rgba(255, 255, 255, 0.64);
    --gcpromo-rule: rgba(255, 255, 255, 0.12);
    --gcpromo-surface: rgba(255, 255, 255, 0.05);
    --gcpromo-surface-strong: rgba(255, 255, 255, 0.10);

    --gcpromo-countdown-cell: var(--gcpromo-panel-soft);
    --gcpromo-countdown-glow: 0 0 0 1px var(--gcpromo-neon-soft), 0 0 16px var(--gcpromo-neon-glow);
    --gcpromo-card-ring: var(--gcpromo-neon-soft);
    --gcpromo-card-shadow: 0 0 0 1px var(--gcpromo-neon-soft), 0 6px 20px rgba(0, 0, 0, 0.45);
    --gcpromo-card-shadow-hover: 0 0 0 1px var(--gcpromo-neon), 0 0 26px var(--gcpromo-neon-glow-strong), 0 14px 34px rgba(0, 0, 0, 0.55);
    --gcpromo-badge-glow: 0 0 18px var(--gcpromo-accent-glow);
    --gcpromo-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --gcpromo-shadow-lift: 0 14px 34px rgba(0, 0, 0, 0.55);
    --gcpromo-radius: 16px;

    /* FULL BLEED, with the content still in a container.
     *
     * The dark surface runs the whole width of the window while everything
     * inside it stays in the same 1280px column - which is what a sale page
     * looks like everywhere it is done properly, and what a rounded 1280px
     * card floating in the theme's white page did not.
     *
     * NOT with negative margins, and not with width:100vw - they are the same
     * thing and both are wrong. A viewport unit INCLUDES the vertical
     * scrollbar, so on a machine that reserves space for one the panel is
     * ~15px wider than the window and the whole page scrolls sideways. On
     * macOS, where scrollbars are overlays by default and measure 0px, it
     * looks perfect; George's screen showed the horizontal scrollbar at once.
     *
     * A spread box-shadow bleeds instead. It paints the same colour out past
     * the panel in every direction, and a box-shadow NEVER contributes to the
     * scrollable overflow area, so there is nothing to scroll to. It also
     * covers the strip of theme background above and below the panel, which
     * two absolutely positioned bands used to paint - and those DID add to the
     * scrollable area: the bottom one put 240px of empty black under the last
     * block, which George read, correctly, as dead space.
     *
     * The container is applied to the CHILDREN, so no wrapper element has to
     * be added to a template that both looks share. */
    max-width: none;
    box-shadow: 0 0 0 100vmax var(--gcpromo-bg);
    /* MEASURED, not expressed in viewport units. views/js/page.js sets this to
     * the real distance from the panel's box to the window's edge, so the
     * panel widens on a boxed layout (1.7 and 8 put the content-only page in a
     * 1110px container) without any vw - and vw is what brought the scrollbar
     * back the last two times. Falls back to 0px with no JavaScript, where the
     * spread shadow above still carries the colour to the edges. */
    margin-left: calc(-1 * var(--gcpromo-bleed-left, 0px));
    margin-right: calc(-1 * var(--gcpromo-bleed-right, 0px));
    padding: 34px 20px 54px;
    /* THE CAMPAIGN'S IMAGE, FRAMED RATHER THAN STRETCHED.
     *
     * `cover` sizes the image against the ELEMENT, and this element is the
     * whole page: measured on 9 on 2026-10-26, a 1600x900 photo was blown up
     * 1.91x to cover a 1722px-tall panel, and on a real desktop page three
     * times that. What you saw was a smeared crop, not the picture.
     *
     * `background-attachment: fixed` sizes it against the VIEWPORT instead, so
     * it is always exactly one screen, sharp, composed the way it was shot,
     * and the page scrolls over it.
     *
     * The scrim is a vertical fade rather than one flat veil: lightest at the
     * top where the image is meant to be seen, settling to a heavier veil
     * further down so white product cards have something quiet behind them.
     *
     * IT NEVER REACHES THE SOLID COLOUR. The first version faded to opaque by
     * 110vh, which turned the image into a header band - George, 2026-10-26:
     * "but the background should come across the whole page." It is a page
     * background, so it is behind the whole page; the veil only decides how
     * much of it shows.
     *
     * Expressed in vh so it follows the window rather than the length of the
     * page: a campaign with 8 products and one with 80 look the same.
     *
     * The gradient is the FIRST layer, so it sits over the image. */
    background-color: var(--gcpromo-bg);
    color: var(--gcpromo-ink);
    border-radius: 0;
}

/* THE IMAGE GOES ON A LAYER THE SIZE OF THE WINDOW, not on the panel.
 *
 * A background is painted inside the box that owns it. The panel is not the
 * window: on 1.7 and 8 the content-only layout is a 1110px container, and on
 * every generation the theme leaves padding above it. The spread shadow fills
 * that with the flat colour, which is invisible while the page is one colour
 * and became a black strip across the top the moment a campaign had an IMAGE -
 * George, 2026-10-26, with the same seam down the right-hand side.
 *
 * A fixed layer covers the window whatever the theme does with the panel. It
 * is behind the content (z-index -1) and in front of the page's own
 * background, which is why the panel itself must not paint an opaque one.
 *
 * The scrim rides on this layer too, so the veil and the image stay in step. */
.gcpromo-page.gcpromo-layout-landing::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--gcpromo-bg);
    background-image:
        linear-gradient(
            to bottom,
            var(--gcpromo-bg-scrim-top, transparent) 0,
            var(--gcpromo-bg-scrim, transparent) 70vh
        ),
        var(--gcpromo-bg-image, none);
    background-size: auto, cover;
    background-position: center top, center center;
    background-repeat: no-repeat;
}
/* CENTRED BY ALIGNMENT, not by margins.
 *
 * The first version centred the children with `margin-left/right: auto` on
 * `.gcpromo-layout-landing > *`. Every component below sets its own vertical
 * rhythm with a `margin` SHORTHAND, which expands to all four longhands -
 * margin-left among them - and `.gcpromo-layout-landing .gcpromo-hero` has
 * exactly the same specificity as `.gcpromo-layout-landing > *`. Being later in
 * the file, it won, reset the centring to 0, and the whole column sat against
 * the left edge with 400px of empty black on the right. Qualifying the rule
 * with .gcpromo-page does not help: that is still two classes against two.
 *
 * Alignment is not in that fight at all. A flex column with align-items:center
 * places its items regardless of what their margin-left says, so no component
 * can un-centre itself by setting its own rhythm, now or later. The items keep
 * width:100% so they still fill the column up to its maximum.
 *
 * The spread box-shadow is painted, not laid out, so it is unaffected. */
.gcpromo-page.gcpromo-layout-landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* TRANSPARENT, because the fixed layer is painted at z-index -1 and an
     * opaque background here would cover it. The colour is on that layer and
     * on the spread shadow, so nothing is lost.
     *
     * AND a STACKING CONTEXT, which is `position: relative` PLUS `z-index: 0`
     * together. Either one on its own does nothing here: z-index is ignored on
     * a static box, and relative alone leaves z-index auto. Without the pair,
     * -1 means "behind the nearest ancestor that paints a background" - which
     * on 1.7 is the theme's `section` (#f6f6f6), so the layer disappeared
     * under it and the page went light grey. With the pair, -1 means "behind
     * this panel's own content", which is exactly what a page background is.
     *
     * It also puts the spread shadow INSIDE this context, under the layer, so
     * the two no longer fight over the strip of theme padding above the panel
     * - the strip George saw as a black band is painted by the layer now. */
    background-color: transparent;
    position: relative;
    z-index: 0;
}
/* A FIXED BACKGROUND IS A TOUCH-DEVICE BUG.
 *
 * iOS Safari paints it at document size and Android Chrome repaints it on
 * every scroll frame; both end up worse than the stretching this avoids. A
 * coarse pointer is the standard way to ask "is this a touch screen", and
 * there the image scrolls with the page - upscaled, but phone viewports are
 * narrow so there is much less of it to upscale, and the fade still turns it
 * into a header rather than a full-page wash. */
/* On a touch screen the layer scrolls with the page instead of standing
 * still: a fixed background is repainted every frame on Android Chrome and
 * painted at document size by iOS Safari, and both are worse than the page
 * simply moving over a still image. The layer is window-sized either way, so
 * the seams this block exists to prevent do not come back. */
@media (pointer: coarse) {
    /* `top/right/bottom/left: 0` from the base rule still apply here - only
     * `position` changes. An explicit `height: 100vh` used to override that,
     * confining BOTH the image and the solid colour to one screen's worth of
     * an `absolute` box that scrolls away with the page - everything below it
     * fell through to the theme's own background. On a campaign with more
     * than about one screen of content (any real product grid), this read as
     * the background breaking partway down - George, 2026-10-27, from a real
     * phone screenshot. `height: auto` with all four insets set lets the box
     * stretch to `.gcpromo-page`'s own full height instead, the same way the
     * non-coarse `fixed` version covers the whole page without ever stating
     * one - restoring "the background should come across the whole page"
     * (George, 2026-10-26) for touch devices too. */
    .gcpromo-page.gcpromo-layout-landing::before {
        position: absolute;
    }
}
.gcpromo-layout-landing > * {
    width: 100%;
    max-width: 1280px;
}

/* The theme's own link colour inside our panel would still be the theme's blue
 * on black. Ours, and only there. */
.gcpromo-page.gcpromo-layout-landing a { color: inherit; }

/* --- the masthead, both looks ---------------------------------------------- */
/* THE QUIET PAGE'S HEADER, as a band rather than a stray heading.
 *
 * It used to be a title, a short accent stroke and a line of small type, with
 * 8px under the lot - so the countdown that follows read as part of the
 * heading instead of as the next thing. A hairline across the full width and
 * room under it is what separates a header from the page it heads. */
.gcpromo-hero {
    margin: 0 0 30px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--gcpromo-rule);
}
/* The window pill. On the quiet page it is a line of small type under the
 * heading; on the sale page the rule below turns it into a lit badge. */
.gcpromo-hero-dates {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gcpromo-muted);
}

/* --- THE LANDING PAGE -----------------------------------------------------
 *
 * George, 2026-10-22: "it needs to be thought of more as a landing page."
 * Right - what came before was a dark product grid, and a landing page is a
 * sequence of acts: an arrival, a reason to stay, then the goods.
 *
 * All of it scoped to the landing look, so the shop that picked the quiet
 * category page gets exactly what it had.
 *
 * The scale steps up in two media queries rather than with clamp(): clamp is
 * fine on 1.7+ and absent on browsers this fleet still serves, and a hero that
 * silently falls back to nothing is worse than one that steps. */
.gcpromo-layout-landing .gcpromo-hero {
    position: relative;
    margin: 0 0 34px;
    padding: 38px 24px 34px;
    text-align: center;
    border-radius: 20px;
    /* A lit band: the page's own panel, lifted, with the blue sitting behind
     * the type rather than around it. */
    background:
        radial-gradient(120% 140% at 50% 0%, var(--gcpromo-hero-glow) 0%, transparent 62%),
        var(--gcpromo-panel);
    box-shadow: 0 0 0 1px var(--gcpromo-neon-soft), 0 0 40px var(--gcpromo-neon-glow);
}
.gcpromo-layout-landing .gcpromo-title {
    font-size: 54px;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}
/* The rule under the title is the quiet page's signature and the hero does
 * not need it - the band is the frame. */
.gcpromo-layout-landing .gcpromo-title::after { display: none; }
.gcpromo-layout-landing .gcpromo-hero-dates {
    display: inline-block;
    margin: 0;
    padding: 8px 18px;
    border-radius: 999px;
    /* The derived surfaces, not literal white. A campaign can be themed from
     * the back office, and on the light preset this pill was white type on a
     * white film - the dates were served, present and invisible. */
    background: var(--gcpromo-surface-strong);
    box-shadow: 0 0 0 1px var(--gcpromo-rule);
    color: var(--gcpromo-ink);
    font-size: 14px;
    letter-spacing: 0.1em;
}

@media (max-width: 720px) {
    .gcpromo-layout-landing .gcpromo-hero { padding: 26px 16px 24px; }
    .gcpromo-layout-landing .gcpromo-title { font-size: 34px; }
}

/* THE RHYTHM. A landing page breathes: each block is an act, and the air
 * between them is what tells a visitor one has ended. */
.gcpromo-layout-landing .gcpromo-block { margin: 0 0 56px; }
.gcpromo-layout-landing .gcpromo-block-title {
    font-size: 26px;
    /* justify-content, NOT text-align: this element is a flex container - it
     * carries the accent square as a flex child on the quiet page - and
     * text-align does nothing to flex children. Measured: the computed style
     * read `center` while the title sat hard left. */
    justify-content: center;
    text-align: center;
}
/* The square before a section title reads as a bullet in a centred line, so
 * the centred look gets a rule under the title instead. */
.gcpromo-layout-landing .gcpromo-block-title::before { display: none; }
.gcpromo-layout-landing .gcpromo-block-subtitle {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* THE COUNTDOWN sits under the hero and belongs to it. */
.gcpromo-layout-landing .gcpromo-block-countdown { margin-top: -14px; }
.gcpromo-layout-landing .gcpromo-countdown { align-items: center; width: 100%; }
.gcpromo-layout-landing .gcpromo-countdown-label { text-align: center; width: 100%; }
.gcpromo-layout-landing .gcpromo-countdown-value { justify-content: center; }

/* THE COPY. An html block on a sale page is the sentence that explains the
 * day - eMAG's sits centred under the banner at a readable measure, and a
 * paragraph running the full 1280px would not be read at all. */
.gcpromo-layout-landing .gcpromo-block-html {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 16px;
    color: var(--gcpromo-muted);
}

/* THE NAVIGATION, as chips. */
.gcpromo-layout-landing .gcpromo-nav { justify-content: center; }
/* ON THE LINK, not on the list item.
 *
 * The <li> is invisible: it has no background and no border, so padding on it
 * does not make the pill bigger - it pushes the pills apart, 18px a side on
 * top of the 8px flex gap, which is the 44px George asked to lose. */
.gcpromo-layout-landing .gcpromo-nav-item { padding: 0; }
.gcpromo-layout-landing .gcpromo-nav-item a {
    border-radius: 999px;
    padding: 9px 18px;
}

/* --- the page's own header ------------------------------------------------
 *
 * Only on the landing look, where the shop's header has been taken off. Three
 * things and no more: whose shop this is, a search box, and a way back. A
 * fourth would be the beginning of rebuilding the navigation that was removed
 * on purpose. */
.gcpromo-chrome {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gcpromo-rule);
}
.gcpromo-chrome-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.gcpromo-chrome-brand img {
    display: block;
    max-height: 44px;
    width: auto;
    max-width: 200px;
}
/* WHITE - but only where white is possible.
 *
 * A colour logo drawn for a white header disappears on this background -
 * George, 2026-10-23: "the logo should be white, a colour one is hard to see."
 * brightness(0) crushes it to black and invert(1) lifts that to white, so a
 * wordmark on a TRANSPARENT background becomes a clean silhouette. It loses the
 * brand's colours, which on a black page is the point: a legible mark beats an
 * accurate one nobody can make out.
 *
 * It also whitens every pixel of an OPAQUE image, which is a solid white
 * rectangle where the logo was. 1.6's default theme ships logo.jpg and showed
 * exactly that; 1.7, 8 and 9 ship logo.png and looked right, so the rule passed
 * on three generations out of four. The controller reads the file's alpha
 * channel (GcpromoLogoTone) and adds --opaque when there is none. */
/* :not(--opaque) is load-bearing, not tidiness.
 *
 * The rule below for an opaque logo has the SAME specificity as these two -
 * three classes and a type - and these come later in the file, so they won.
 * On 1.6, whose default theme ships logo.jpg, a light palette therefore
 * crushed the whole rectangle to solid black with brightness(0): George,
 * 2026-10-26, "the logo doesn't look right on 1.6."
 *
 * Excluding the opaque case here is better than out-specifying it there,
 * because the two rules then cannot both match - there is nothing left to win. */
.gcpromo-tone-dark.gcpromo-layout-landing
    .gcpromo-chrome-brand:not(.gcpromo-chrome-brand--opaque) img {
    filter: brightness(0) invert(1);
}
/* ... and BLACK on a light one. brightness(0) alone crushes the logo to a
 * silhouette without lifting it, which is the same trick upside down. The
 * light preset showed why this cannot be one rule: a white logo on a white
 * page is not a faint logo, it is no logo at all. */
.gcpromo-tone-light.gcpromo-layout-landing
    .gcpromo-chrome-brand:not(.gcpromo-chrome-brand--opaque) img {
    filter: brightness(0);
}
/* No filter, so the logo keeps its own colours; the chip under it supplies the
 * light background those colours were drawn for. */
.gcpromo-layout-landing .gcpromo-chrome-brand--opaque img {
    filter: none;
    border-radius: 6px;
}
.gcpromo-layout-landing .gcpromo-chrome-brand--opaque {
    padding: 6px 10px;
    background: #fff;
    border-radius: 10px;
}
.gcpromo-chrome-name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--gcpromo-heading);
}
/* The search box takes the space the other two do not. */
.gcpromo-chrome-search {
    display: flex;
    flex: 1 1 260px;
    min-width: 200px;
    gap: 0;
}
.gcpromo-chrome-search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px 0 0 999px;
    background: var(--gcpromo-surface-strong);
    color: var(--gcpromo-ink);
    font-size: 14px;
    /* The theme's own input styling is not here to inherit from, so the box
     * states what it needs - including the outline, which a theme would
     * normally provide and which a search field without one loses entirely
     * for anybody using a keyboard. */
    outline-offset: 2px;
}
.gcpromo-chrome-search input::placeholder { color: var(--gcpromo-muted); }
.gcpromo-chrome-search button {
    padding: 10px 18px;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--gcpromo-accent);
    color: var(--gcpromo-accent-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
/* The arrow and the label on one line, and the same height whichever of them
 * is taller - inline-flex rather than inline-block, which would sit the SVG on
 * the text baseline and leave a gap under it. */
.gcpromo-chrome-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--gcpromo-surface-strong);
    box-shadow: 0 0 0 1px var(--gcpromo-rule);
    color: var(--gcpromo-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    /* PUSHED TO THE RIGHT EDGE BY ITSELF, at every width.
     *
     * It used to land there only because the search box sits between it and
     * the logo and takes all the free space. A campaign configured WITHOUT the
     * search has nothing in the middle, so the button came to rest right
     * beside the logo with the rest of the row empty - George, 2026-10-26.
     * With the search present this margin resolves to 0 and nothing moves. */
    margin-left: auto;
}
.gcpromo-chrome-back:hover { background: var(--gcpromo-surface); }
/* flex-shrink so a long translated label never squashes the arrow. */
.gcpromo-chrome-back .gcpromo-icon { flex: 0 0 auto; }

@media (max-width: 560px) {
    /* The brand and the way back on one line, the search under them: three
     * things side by side on a phone makes all three too small to use. */
    .gcpromo-chrome-search { order: 3; flex-basis: 100%; }

    /* EQUAL HEIGHTS on that first line.
     *
     * Measured on 9 at 375px: the brand was 28px tall and the button 40,
     * centred against each other - two pills of different sizes on one row,
     * which is what made the header look unfinished. `stretch` makes the
     * shorter one match the taller, whichever that is: a shop with a tall logo
     * and one with a short one both get a straight row. */
    .gcpromo-chrome { align-items: stretch; gap: 10px; }

    /* THE WAY BACK GOES TO THE RIGHT EDGE. George, 2026-10-26: "it would be
     * ok for the back to the shop button to be on the right on mobile."
     *
     * `margin-left: auto` rather than space-between on the row: the row also
     * holds the search box, which is a full-width flex item on its own line,
     * and space-between would stretch that line's single item to nothing in
     * particular. An auto margin pushes just this one item and leaves every
     * other line alone.
     *
     * The label still reads, but it is a long one - "Back to the shop" is half
     * the row at this width - so it gives back what it can. */
    /* margin-left: auto is on the base rule now, so it is not repeated here. */
    .gcpromo-chrome-back { padding: 8px 14px; font-size: 13px; gap: 6px; }
    .gcpromo-chrome-brand img { max-height: 26px; }
    .gcpromo-chrome-brand--opaque { padding: 5px 9px; }

    /* And the header stops taking 44px of a 700px screen to end itself. */
    .gcpromo-chrome { margin-bottom: 18px; padding-bottom: 14px; }
}

/* THE BANNER, as a band rather than a slab.
 *
 * The quiet page draws it as a panel with an accent stroke down its left
 * edge - right for a notice inside a catalogue. On a sale page the same block
 * is the second act after the hero, so it is centred, large, and lit from
 * below. */
.gcpromo-layout-landing .gcpromo-block-banner {
    padding: 40px 28px;
    text-align: center;
    border-left: 0;
    border-radius: 20px;
    background:
        radial-gradient(110% 160% at 50% 100%, var(--gcpromo-accent-wash) 0%, transparent 60%),
        var(--gcpromo-panel);
    box-shadow: 0 0 0 1px var(--gcpromo-surface-strong);
}
.gcpromo-layout-landing .gcpromo-banner-title {
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.gcpromo-layout-landing .gcpromo-banner-subtitle {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
}
@media (max-width: 720px) {
    .gcpromo-layout-landing .gcpromo-block-banner { padding: 26px 18px; }
    .gcpromo-layout-landing .gcpromo-banner-title { font-size: 24px; }
}

/* --- masthead -------------------------------------------------------------- */
.gcpromo-title {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.022em;
    margin: 0 0 12px;
    color: var(--gcpromo-heading);
    text-wrap: balance;
}
/* The rule under the title is the page's signature: one short, heavy accent
 * stroke, the only place the accent appears at full strength besides the
 * badges. */
.gcpromo-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    margin-top: 12px;
    background: var(--gcpromo-accent);
}

.gcpromo-teaser-note,
.gcpromo-ended {
    font-size: 17px;
    color: var(--gcpromo-muted);
    margin: 0 0 24px;
    padding: 14px 16px;
    border-left: 3px solid var(--gcpromo-rule);
    background: var(--gcpromo-surface);
}
.gcpromo-ended > :first-child { margin-top: 0; }
.gcpromo-ended > :last-child { margin-bottom: 0; }

/* --- blocks ---------------------------------------------------------------- */
.gcpromo-block { margin: 0 0 44px; }
.gcpromo-block:last-child { margin-bottom: 0; }

/* A heading with a rule that runs to the end of the line. The hairline is
 * drawn by the heading itself rather than by a wrapper, because the markup is
 * a bare <h2> and the block templates are not changing for a stylesheet. */
.gcpromo-block-title {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    padding: 0 0 12px;
    color: var(--gcpromo-heading);
    border-bottom: 1px solid var(--gcpromo-rule);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* A vertical accent bar beside the heading, not a square floating next to it.
 *
 * The square was 10px and sat on the text's centre line, which at 22px type
 * reads as a bullet somebody forgot to remove. A bar the height of the type
 * belongs to the heading instead of interrupting it. */
.gcpromo-block-title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    align-self: stretch;
    min-height: 1.1em;
    border-radius: 2px;
    background: var(--gcpromo-accent);
}
.gcpromo-block-subtitle {
    margin: 10px 0 18px;
    color: var(--gcpromo-muted);
}
.gcpromo-block-title + .gcpromo-grid,
.gcpromo-block-title + .gcpromo-empty { margin-top: 18px; }

/* The first block after the header, and the one that most often is the
 * countdown, needs to start rather than continue. */
.gcpromo-hero + .gcpromo-block { margin-top: 4px; }

/* --- countdown ------------------------------------------------------------
 *
 * BOXED NUMBERS with a word under each, the way a sale countdown is read at a
 * glance - George, 2026-10-22: "it still needs a bit of work here, let's do it
 * in the eMAG style." It used to be a small grey pill reading "STARTS IN
 * 22:54:23", which is a sentence rather than a clock.
 *
 * No `rem` anywhere. A rem is a fraction of the THEME's root font size, and
 * 1.6's default theme sets html { font-size: 10px } - every rem measured here
 * came out 37.5% smaller there. Pixels say the same thing on all four. */
.gcpromo-countdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
}
.gcpromo-countdown-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gcpromo-muted);
}
.gcpromo-countdown-value {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.gcpromo-countdown-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 10px 8px 8px;
    border-radius: 12px;
    /* Dark boxes with white figures on BOTH looks: a countdown is the one
     * element that has to read as an instrument rather than as text, and the
     * quiet page can afford four small dark tiles. The sale page lights them
     * further through the token below. */
    background: var(--gcpromo-countdown-cell, var(--gcpromo-ink));
    box-shadow: var(--gcpromo-countdown-glow, none);
    /* Contrast against THE CELL, which is not the page: on a light palette the
     * cell is pale and white figures are a countdown nobody can read. */
    color: var(--gcpromo-countdown-ink, #ffffff);
}
.gcpromo-countdown-number {
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    /* Tabular figures so the boxes do not jiggle as the digits change - the one
     * place on this page where the text rewrites itself every second. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}
.gcpromo-countdown-unit {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.72;
}

/* Narrow phones: four boxes of 64px plus gaps do not fit beside a margin, and
 * a countdown that wraps mid-clock reads as two broken rows. */
@media (max-width: 420px) {
    .gcpromo-countdown-cell { min-width: 54px; padding: 8px 6px 6px; }
    .gcpromo-countdown-number { font-size: 24px; }
}

/* --- the product grid ------------------------------------------------- */
.gcpromo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gcpromo-grid > li { list-style: none; }

/* A card is a lit tile: dark body, white picture, one blue hairline and a
 * halo. The halo is what makes a grid of them read as a row of lights rather
 * than as a table. */
.gcpromo-card {
    position: relative;
    border-radius: var(--gcpromo-radius);
    background: var(--gcpromo-panel);
    /* Both looks come out of one rule, through tokens: a hairline and a halo
     * on the sale page, a plain plinth on the quiet one. */
    box-shadow: var(--gcpromo-card-shadow);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.gcpromo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gcpromo-card-shadow-hover);
}
.gcpromo-card:focus-within { outline: 2px solid var(--gcpromo-accent); outline-offset: 2px; }

.gcpromo-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 14px;
    text-decoration: none;
    color: inherit;
}
.gcpromo-card-link:focus { outline: none; }

/* A plinth, drawn by the image itself: there is no wrapper element to put it
 * on, and the markup is not changing for a stylesheet. A fixed square with
 * `contain` is what makes a row of cards line up when the shop's photos are
 * all different shapes - which is most of why the grid read as untidy. */
.gcpromo-card-image {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: contain;
    padding: 14px;
    box-sizing: border-box;
    background: #ffffff;
    transition: transform 240ms ease;
}
/* WHITE, and not derived from the text colour any more. The derivation used
 * to lighten the plinth with the theme's ink; on this page the ink is white,
 * so it resolved to white-on-white and said nothing. A product photo shot on
 * white needs white behind it whatever the page does. */
.gcpromo-card:hover .gcpromo-card-image { transform: scale(1.035); }

.gcpromo-card-name {
    display: block;
    margin: 12px 14px 8px;
    font-weight: 600;
    line-height: 1.35;
    /* Two lines for every card, so the price row of every card in a row sits
     * on the same line. */
    min-height: 2.7em;
}
.gcpromo-card-prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 14px 0;
    /* ROOM FOR THE FLAG, always. The discount sits at the end of this row and
     * is positioned rather than laid out - the markup puts it after the row,
     * not inside it, and a stylesheet does not get to rearrange a template.
     * Reserving the space unconditionally keeps the prices of a full row on
     * one line whether or not each card happens to be discounted. */
    padding-right: 62px;
    min-height: 34px;
}
.gcpromo-card-was {
    order: 2;
    font-size: 14px;
    color: var(--gcpromo-muted);
    text-decoration-thickness: 1px;
}
.gcpromo-card-now {
    order: 1;
    font-size: 20px;
    font-weight: 800;
    color: var(--gcpromo-heading);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}

/* The discount flag: a pink pill, the loudest thing on the card.
 *
 * Top left rather than top right - it reads before the photo instead of after
 * it - and rounded on all four corners now, because on a tile that is itself
 * heavily rounded a square-cornered flag reads as a sticker somebody forgot to
 * remove. */
.gcpromo-badge {
    position: absolute;
    /* BESIDE THE PRICE, which is where a shopper is already looking - the
     * reference George sent puts the percentage in a block to the right of
     * the figure rather than as a corner sticker. Anchored to the card's
     * bottom right so it lines up with the price row whatever the name above
     * it wrapped to. */
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--gcpromo-accent);
    color: var(--gcpromo-accent-ink);
    box-shadow: var(--gcpromo-badge-glow);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.gcpromo-card-oos { opacity: 0.62; }
.gcpromo-oos {
    display: inline-block;
    margin: 8px 14px 0;
    padding: 2px 8px;
    border: 1px solid var(--gcpromo-rule);
    border-radius: 999px;
    font-size: 13px;
    color: var(--gcpromo-muted);
}

/* --- empty state ----------------------------------------------------------- */
.gcpromo-empty {
    margin: 0;
    padding: 36px 20px;
    border: 1px dashed var(--gcpromo-rule);
    border-radius: var(--gcpromo-radius);
    background: var(--gcpromo-surface);
    color: var(--gcpromo-muted);
    text-align: center;
}

/* --- calls to action ------------------------------------------------------- */
.gcpromo-cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--gcpromo-ink);
    /* The page's own background, which is the one colour guaranteed to
     * contrast with its ink. Literal white here was white on white on every
     * dark palette - latent only because the demo banner has no button. */
    color: var(--gcpromo-bg);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 140ms ease, opacity 140ms ease;
}
.gcpromo-cta:hover { transform: translateY(-1px); opacity: 0.92; }

/* --- campaign navigation --------------------------------------------------- */
.gcpromo-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--gcpromo-rule);
}
.gcpromo-nav > li { list-style: none; }
.gcpromo-nav-item a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--gcpromo-rule);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.gcpromo-nav-item a:hover { background: var(--gcpromo-surface-strong); }
/* The accent rather than the ink: a red pill with white text reads on a light
 * theme and on a dark one, and it is the same mark the badges use, so the page
 * says "you are here" in its own voice. */
/* QUALIFIED WITH .gcpromo-page, and that is not decoration.
 *
 * The landing look neutralises the theme's link colour with
 * `.gcpromo-page.gcpromo-layout-landing a { color: inherit }` - two classes and
 * a type. `.gcpromo-nav-current a` is one class and a type, so `inherit` won
 * and the current tab took the page's ink instead of the accent's.
 *
 * It was invisible for as long as there was one palette: on a dark page the
 * ink is white and the accent ink is white, so the wrong rule produced the
 * right colour. The light preset put #111111 on a red pill. */
.gcpromo-page .gcpromo-nav-current a,
.gcpromo-page .gcpromo-nav-current a:hover {
    background: var(--gcpromo-accent);
    color: var(--gcpromo-accent-ink);
    border-color: var(--gcpromo-accent);
}

/* --- the banner block ------------------------------------------------------ */
/* A BANNER, not a notice.
 *
 * Flat grey with a 5px red bar down the side is the shape every CMS uses for
 * "warning", and a Black Friday banner wearing it reads as an error message.
 * The accent stays, as a wash across the panel and a thinner edge. */
.gcpromo-block-banner {
    padding: 34px 30px;
    border-radius: var(--gcpromo-radius);
    background:
        linear-gradient(90deg, var(--gcpromo-accent-wash, transparent) 0%, transparent 70%),
        var(--gcpromo-surface);
    border-left: 3px solid var(--gcpromo-accent);
}
.gcpromo-banner-title {
    margin: 0;
    color: var(--gcpromo-heading);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.015em;
}
.gcpromo-banner-subtitle {
    margin: 8px 0 0;
    color: var(--gcpromo-muted);
    font-size: 17px;
}
.gcpromo-block-banner .gcpromo-cta { margin-top: 18px; }

/* --- free HTML ------------------------------------------------------------- */
/* A READABLE MEASURE. The landing look already caps this at 760px and
 * centres it; the quiet page had the terms running the full width of a 1200px
 * grid, which is about 150 characters a line. */
.gcpromo-block-html { max-width: 70ch; }
.gcpromo-block-html > :first-child { margin-top: 0; }
.gcpromo-block-html > :last-child { margin-bottom: 0; }

/* --- arrival --------------------------------------------------------------- */
/* One orchestrated reveal rather than scattered micro-animations: the blocks
 * come up in order, once, and only for a visitor who has not asked for less
 * motion. */
@media (prefers-reduced-motion: no-preference) {
    .gcpromo-page > .gcpromo-block,
    .gcpromo-page > .gcpromo-title {
        animation: gcpromo-rise 420ms ease-out both;
    }
    .gcpromo-page > .gcpromo-block:nth-of-type(1) { animation-delay: 60ms; }
    .gcpromo-page > .gcpromo-block:nth-of-type(2) { animation-delay: 120ms; }
    .gcpromo-page > .gcpromo-block:nth-of-type(3) { animation-delay: 180ms; }
    .gcpromo-page > .gcpromo-block:nth-of-type(4) { animation-delay: 240ms; }
    .gcpromo-page > .gcpromo-block:nth-of-type(n+5) { animation-delay: 300ms; }
}
@keyframes gcpromo-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* --- narrow ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .gcpromo-title { font-size: 34px; }
    .gcpromo-block { margin-bottom: 34px; }
}
@media (max-width: 560px) {
    .gcpromo-page { padding: 20px 14px 32px; }
    .gcpromo-title { font-size: 28px; }
    .gcpromo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .gcpromo-card-name { margin: 10px 10px 6px; min-height: 0; }
    .gcpromo-card-prices { margin: auto 10px 0; }
    .gcpromo-card-now { font-size: 17px; }
}