/* ============================================================
   Halloween, as a theme layer (25 October 2026)

   Loaded only while the hub says this theme is on, and drawn entirely
   into the hook points the standard pages expose. Kovi's teal, layout
   and logo stay as they are; Halloween comes through in an evening
   light, its own artwork and its own words.

   Nothing here may cover text, a price, a button or a menu, so every
   piece is behind the content it sits near and lets clicks through.

   Colours: night #1f1a2b, purple #4b3266, pumpkin orange #ea7a22,
   moon cream #f6e7b4, outlines #4d4d4d.
   ============================================================ */

:root {
    --kth-night: #1f1a2b;
    --kth-purple: #4b3266;
    --kth-orange: #ea7a22;
    --kth-cream: #f6e7b4;
    --kth-link: #ffb36b;
}

/* Every hook is decoration unless it carries words, so none of them
   takes a click away from what is underneath. */
[data-kovi-theme="halloween"] .kovi-hook {
    pointer-events: none;
}

/* ---- 1. The message bar ------------------------------------------
   The words are the hub's, as always. Only the look is the theme's. */
[data-kovi-theme="halloween"] .kovi-sbar {
    background: var(--kth-night);
    color: #fff;
}
[data-kovi-theme="halloween"] .kovi-sbar-text::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-right: 9px;
    vertical-align: -1px;
    background: url('/themes/halloween/bat-orange.svg') center/contain no-repeat;
}
[data-kovi-theme="halloween"] .kovi-sbar-link {
    color: var(--kth-link);
}
[data-kovi-theme="halloween"] .kovi-sbar-days {
    background: rgba(255, 179, 107, .18);
    color: var(--kth-link);
}

/* ---- 2. Bunting under the menu bar, on every page -----------------
   It hangs over the page below, never over the menu's own words, and
   it sits under the dropdowns so it can never cover one. */
[data-kovi-theme="halloween"] .kovi-hook-bunting {
    display: block;
    position: relative;
    height: 0;
    z-index: 3;
}
[data-kovi-theme="halloween"] .kovi-hook-bunting::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    background: url('/themes/halloween/bunting.svg') top center/100% 20px no-repeat;
}
/* The pennants hang into whatever is under the menu. The home page's
   photo is meant to have them hanging over it; everywhere else the page
   starts with words, so it is given the room instead of being covered. */
[data-kovi-theme="halloween"] .page-content:not(#page-home) {
    padding-top: 24px;
}

/* ---- 3 and 4. The home page photo --------------------------------
   An evening fade from the top, a cobweb in the corner and a garland
   of paper bats across the top. The garland's own artwork starts well
   to the right of the words, so it never reaches the heading. */
[data-kovi-theme="halloween"] .kovi-hook-hero {
    display: block;
    position: absolute;
    inset: 0;
    /* Under the words, always: the evening light lies on the photo, never
       on the heading, and the hero's own content sits above it. */
    z-index: 0;
    background-image:
        url('/themes/halloween/garland.svg'),
        url('/themes/halloween/web.svg'),
        linear-gradient(180deg, rgba(43, 25, 66, .55) 0%, rgba(43, 25, 66, .18) 45%, rgba(43, 25, 66, 0) 70%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top center, left top, center;
    background-size: 100% auto, 150px 150px, 100% 100%;
}

/* ---- 5. Lit pumpkins standing on the carpet ----------------------- */
[data-kovi-theme="halloween"] .kovi-hook-herofloor {
    display: block;
    position: absolute;
    right: 7%;
    bottom: 12%;
    width: 230px;
    height: 110px;
    z-index: 0;
    background: url('/themes/halloween/pumpkins.svg') center bottom/contain no-repeat;
}

/* ---- 6. Section headings and the divider under a section ---------- */
[data-kovi-theme="halloween"] .hp-sh2::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 14px;
    margin-right: 11px;
    vertical-align: 3px;
    background: url('/themes/halloween/bat-purple.svg') center/contain no-repeat;
}
[data-kovi-theme="halloween"] .hp-sec::after {
    content: "";
    display: block;
    height: 30px;
    max-width: 520px;
    margin: 26px auto 0;
    background-image:
        url('/themes/halloween/pumpkin.svg'),
        repeating-linear-gradient(to right, var(--kth-orange) 0 8px, transparent 8px 16px),
        repeating-linear-gradient(to right, var(--kth-orange) 0 8px, transparent 8px 16px);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center center, left center, right center;
    background-size: 30px 30px, calc(50% - 28px) 2px, calc(50% - 28px) 2px;
    opacity: .8;
}

/* ---- 7. Category pages -------------------------------------------
   The real category pages carry no header photo, so there is no photo
   to put an evening light over. The cobweb, the bats and the line are
   all here. */
[data-kovi-theme="halloween"] .kovi-hook-cathead {
    display: block;
    position: relative;
    height: 0;
    z-index: 1;
}
[data-kovi-theme="halloween"] .kovi-hook-cathead::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 150px;
    background: url('/themes/halloween/web-dark.svg') right top/contain no-repeat;
    transform: scaleX(-1);
    opacity: .9;
}
[data-kovi-theme="halloween"] .kovi-hook-catline {
    display: block;
    max-width: 1380px;
    margin: 0 auto;
    padding: 2px 40px 14px;
    color: var(--kth-purple);
    font: 600 16px/1.4 'Poppins', 'Inter', sans-serif;
}
[data-kovi-theme="halloween"] .kovi-hook-catline::before {
    content: "";
    display: inline-block;
    width: 26px;
    height: 12px;
    margin-right: 10px;
    vertical-align: 2px;
    background: url('/themes/halloween/bat-purple.svg') center/contain no-repeat;
}
[data-kovi-theme="halloween"] .kovi-hook-catline:empty {
    display: none;
}

/* ---- 8. The panel in the grid, after the first row ---------------- */
[data-kovi-theme="halloween"] .kovi-th-panel {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 26px;
    border-radius: 16px;
    background: var(--kth-night);
    color: #fff;
    position: relative;
    overflow: hidden;
}
[data-kovi-theme="halloween"] .kovi-th-panel-art {
    flex: 0 0 70px;
    height: 60px;
    background: url('/themes/halloween/pumpkin.svg') center/contain no-repeat;
}
[data-kovi-theme="halloween"] .kovi-th-panel::after {
    content: "";
    position: absolute;
    right: 250px;
    top: 10px;
    width: 60px;
    height: 30px;
    background: url('/themes/halloween/bats-cream.svg') center/contain no-repeat;
    pointer-events: none;
}
[data-kovi-theme="halloween"] .kovi-th-panel-copy {
    min-width: 0;
}
[data-kovi-theme="halloween"] .kovi-th-panel-copy h3 {
    margin: 0 0 4px;
    font: 700 20px/1.2 'Poppins', 'Inter', sans-serif;
    color: #fff;
}
[data-kovi-theme="halloween"] .kovi-th-panel-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    opacity: .85;
}
[data-kovi-theme="halloween"] .kovi-th-panel-btn {
    margin-left: auto;
    white-space: nowrap;
    background: var(--kth-orange);
    color: #fff;
    border-radius: 999px;
    padding: 14px 28px;
    font: 600 16px/1 'Poppins', 'Inter', sans-serif;
    text-decoration: none;
}
[data-kovi-theme="halloween"] .kovi-th-panel-btn:hover {
    background: #d16a16;
}

/* ---- 9. The footer scene -----------------------------------------
   York's rooftops and the Minster under the moon, standing on the top
   edge of the footer. */
[data-kovi-theme="halloween"] .kovi-hook-footer {
    display: block;
    height: 150px;
    margin-bottom: -1px;
    /* No sky of its own: the rooftops rise straight out of the footer, in
       the footer's own colour, and the sky is whatever is above them. */
    background: url('/themes/halloween/skyline.svg') bottom center/100% 150px no-repeat;
}

/* ---- 10. Product pages -------------------------------------------- */
[data-kovi-theme="halloween"] .pdp-gallery-main {
    position: relative;
}
[data-kovi-theme="halloween"] .kovi-hook-pdpphoto {
    display: block;
    position: absolute;
    right: 14px;
    top: 12px;
    width: 120px;
    height: 60px;
    z-index: 3;
    background: url('/themes/halloween/bats-dark.svg') right top/contain no-repeat;
}
[data-kovi-theme="halloween"] .pdp-breadcrumb {
    position: relative;
}
[data-kovi-theme="halloween"] .kovi-hook-crumbs {
    display: block;
    position: absolute;
    right: 0;
    /* Under the menu bar, in the top right of the content, and short
       enough that it cannot reach the product name below it. */
    top: 0;
    width: 46px;
    height: 46px;
    background: url('/themes/halloween/web-dark.svg') right top/contain no-repeat;
    transform: scaleX(-1);
    opacity: .9;
}
[data-kovi-theme="halloween"] .kovi-hook-pdpprice {
    display: block;
}
[data-kovi-theme="halloween"] .kovi-hook-pdpprice:empty {
    display: none;
}
[data-kovi-theme="halloween"] .kovi-th-treat {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 2px dashed var(--kth-orange);
    border-radius: 14px;
    background: #fff8f1;
}
[data-kovi-theme="halloween"] .kovi-th-treat-art {
    flex: 0 0 56px;
    height: 50px;
    background: url('/themes/halloween/pumpkin.svg') center/contain no-repeat;
}
[data-kovi-theme="halloween"] .kovi-th-treat-copy b {
    display: block;
    font: 700 15px/1.3 'Poppins', 'Inter', sans-serif;
    color: #7c3a06;
}
[data-kovi-theme="halloween"] .kovi-th-treat-copy span {
    font-size: 13px;
    line-height: 1.5;
    color: #7c3a06;
}

/* ---- Phones -------------------------------------------------------
   The same theme, at a size that fits. The pumpkins on the floor are
   the one piece that can reach the buttons, so they stand well clear
   of them at the right-hand edge. */
@media (max-width: 768px) {
    [data-kovi-theme="halloween"] .kovi-hook-bunting::before {
        height: 16px;
        background-size: 100% 16px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-hero {
        background-size: 1100px auto, 110px 110px, 100% 100%;
        background-position: top right, left top, center;
    }
    /* The brief's own answer for a phone: the pumpkins come out rather
       than stand against the buttons, which reach the right-hand side
       here however small they are made. */
    [data-kovi-theme="halloween"] .kovi-hook-herofloor {
        display: none;
    }
    [data-kovi-theme="halloween"] .hp-sh2::before {
        width: 24px;
        height: 11px;
        margin-right: 8px;
        vertical-align: 2px;
    }
    [data-kovi-theme="halloween"] .hp-sec::after {
        height: 24px;
        max-width: 280px;
        margin-top: 20px;
        background-size: 24px 24px, calc(50% - 22px) 2px, calc(50% - 22px) 2px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-cathead::before {
        width: 96px;
        height: 96px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-catline {
        padding: 2px 16px 12px;
        font-size: 14px;
    }
    [data-kovi-theme="halloween"] .kovi-th-panel {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 18px;
    }
    [data-kovi-theme="halloween"] .kovi-th-panel::after {
        display: none;
    }
    [data-kovi-theme="halloween"] .kovi-th-panel-art {
        flex: 0 0 50px;
        height: 44px;
    }
    [data-kovi-theme="halloween"] .kovi-th-panel-copy h3 {
        font-size: 18px;
    }
    [data-kovi-theme="halloween"] .kovi-th-panel-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 13px 20px;
        font-size: 15px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-footer {
        height: 90px;
        background-size: 100% 90px;
    }
    [data-kovi-theme="halloween"] .page-content:not(#page-home) {
        padding-top: 20px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-pdpphoto {
        width: 84px;
        height: 42px;
        right: 10px;
        top: 10px;
    }
    [data-kovi-theme="halloween"] .kovi-hook-crumbs {
        width: 46px;
        height: 46px;
        top: 0;
    }
}

/* Someone who would rather not have things moving or glowing still
   gets the theme; there is nothing here that moves. */