/* ==========================================================================
   OLE DYO Creator Widget — host page styling
   --------------------------------------------------------------------------
   Defines two layout patterns on `#OLE-container`:
     .layout-left-right   — canvas left (39%, sticky), creator right (61%)
     .layout-top-bottom   — canvas top (full-width, 400px), creator below
   The third widget-config layout value (`charms`) shares iframe positioning
   with `top_bottom`, so charms widgets render under .layout-top-bottom — no
   separate `.layout-charms` rule is needed.
   The runtime layout class is set by the inline IIFE in creator.html and
   overridden by the iframe's LAYOUT_CONFIG postMessage handler.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    /* `min-height`, NOT `height`. With `height: 100%` the page was pinned to the
       viewport, so a creator iframe taller than the screen overflowed a
       fixed-height body instead of extending it. Because `overflow-x: hidden`
       makes the cross axis compute to `auto` rather than `visible`, that turned
       body into a silent scroll container: no scrollbar was painted, the
       document did not scroll (only `body.scrollTop` moved, not
       `window.scrollY`), and wheel events over the widget went to the iframes
       instead. The bottom of a tall creator — the TOTAL row and the NEXT button
       — was therefore unreachable rather than merely below the fold.

       `min-height: 100%` still fills the viewport when content is shorter, but
       lets the document grow and scroll normally when it is taller, which is
       what the sticky canvas panel was designed for. */
    min-height: 100%;
    overflow-x: hidden;
}

#OLE-container {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   RETAILER BRANDING
   --------------------------------------------------------------------------
   Rendered above the widget only when the retailer has uploaded a logo; the
   header element is absent from the DOM otherwise, so these rules cost
   nothing for unbranded widgets. The logo is capped by height (not width) so
   wide and square logos both sit on the same baseline.
   ========================================================================== */
#OLE-brand-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

#OLE-brand-logo {
    height: 48px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 767px) {
    #OLE-brand-header {
        justify-content: center;
        padding: 12px 16px;
    }
    #OLE-brand-logo {
        height: 36px;
        max-width: 180px;
    }
}

/* How much vertical space the brand header takes from the viewport, exposed so
   layouts can size a sticky panel against what is actually on screen. Both
   values are derived from the rules directly above, not measured:

       desktop   48px logo + 16px x2 padding + 1px border = 81px
       <= 767px  36px logo + 12px x2 padding + 1px border = 61px

   Keep them in step if the padding or logo cap changes. The default is 0px, so
   unbranded widgets (no #OLE-brand-header in the DOM) and browsers without
   `:has()` both fall through to the pre-header geometry rather than reserving
   space for an element that isn't there. */
:root {
    --ole-brand-header-h: 0px;
}

body:has(> #OLE-brand-header) {
    --ole-brand-header-h: 81px;
}

@media screen and (max-width: 767px) {
    body:has(> #OLE-brand-header) {
        --ole-brand-header-h: 61px;
    }
}

/* ==========================================================================
   LAYOUT: LEFT-RIGHT (default)
   ========================================================================== */
@media screen and (min-width: 768px) {
    #OLE-container.layout-left-right {
        flex-direction: row;
        gap: 1%;
        align-items: flex-start;
    }
    .layout-left-right #canvas-container {
        display: -webkit-flex;
        display: flex;
        flex: 0 0 39%;
        width: 39%;
        position: sticky;
        top: 0;
        /* Extends downwards - `top: 0` pins the upper edge, so the extra
           height is added below the ring rather than shifting it.

           ---------- Canvas height: keep in step with the review page ----------
           The ring must not change size when the shopper moves from here to
           the review screen, so these three tiers match `#dyo-canvas` there:

               desktop   800px
               <= 767px  360px
               <= 360px  320px

           The review copies live in resources/views/preview/review.blade.php
           and client_host_scripts/ole_dyo/review.html. Change a height here and
           change it in both of those. */
        height: 800px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        align-self: flex-start;
    }
    .layout-left-right #model-container {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-left-right #creator-container {
        flex: 1;
        width: 60%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }
    .layout-left-right #creator-page {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1200px;
    }
}

/* 1024–1221: previously fell through to `min-height: 100vh`, which paired with
   the iframe's `overflow: hidden` clipped the bottom of the kira stacked form
   (NEXT/TOTAL unreachable). Match the tablet height so content fits and the
   parent page handles vertical scroll. */
@media screen and (min-width: 1024px) and (max-width: 1221px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1200px;
    }
}

@media screen and (min-width: 1222px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1200px;
    }
}

@media screen and (max-width: 767px) {
    #OLE-container.layout-left-right {
        flex-direction: column;
    }
    .layout-left-right #canvas-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        /* Matches the review page's 360px phone tier. Container and iframe are
           the same number so the iframe fills the box exactly — they used to
           differ by 10px (280 vs 270), which left a strip of background. */
        height: 360px;
        max-height: inherit;
        margin: 0;
        padding: 0;
        display: flex;
        z-index: 100;
        background: #fff;
    }
    .layout-left-right #model-container {
        width: 100%;
        height: 360px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-left-right #creator-container {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }
    .layout-left-right #creator-page {
        width: 100%;
        height: 100%;
        min-height: 1220px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 360px) {
    .layout-left-right #canvas-container {
        height: 320px;
        max-height: 320px;
    }
    /* The iframe needs the small-phone height too — without this it keeps the
       360px from the tier above and overflows the 320px container. */
    .layout-left-right #model-container {
        height: 320px;
    }
    .layout-left-right #creator-page {
        min-height: 1300px;
    }
}

/* ==========================================================================
   LAYOUT: TOP-BOTTOM (also used for `charms` widgets — same iframe positioning)
   ========================================================================== */
@media screen and (min-width: 768px) {
    #OLE-container.layout-top-bottom {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
    .layout-top-bottom #canvas-container {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        /* 800px to match the review page, same as the left-right layout above.
           Note this canvas is full width and sits ABOVE the form, so the whole
           800px is banner across the top and the form starts below it. */
        height: 800px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #model-container {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-top-bottom #creator-container {
        flex: 1;
        width: 100%;
        min-height: 50vh;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #creator-page {
        width: 100%;
        height: 100%;
        min-height: 50vh;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .layout-top-bottom #creator-container,
    .layout-top-bottom #creator-page {
        min-height: 550px;
    }
}

@media screen and (min-width: 1222px) {
    .layout-top-bottom #creator-container,
    .layout-top-bottom #creator-page {
        min-height: 500px;
    }
}

@media screen and (max-width: 767px) {
    #OLE-container.layout-top-bottom {
        flex-direction: column;
    }
    .layout-top-bottom #canvas-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        /* Matches the review page's 360px phone tier; container and iframe are
           the same number so the iframe fills the box exactly. */
        height: 360px;
        max-height: inherit;
        margin: 0;
        padding: 0;
        display: flex;
        z-index: 100;
        background: #fff;
    }
    .layout-top-bottom #model-container {
        width: 100%;
        height: 360px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-top-bottom #creator-container {
        width: 100%;
        min-height: 50vh;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #creator-page {
        width: 100%;
        height: 100%;
        min-height: 700px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 360px) {
    .layout-top-bottom #canvas-container {
        height: 320px;
        max-height: 320px;
    }
    /* The iframe needs the small-phone height too — without this it keeps the
       360px from the tier above and overflows the 320px container. */
    .layout-top-bottom #model-container {
        height: 320px;
    }
    .layout-top-bottom #creator-page {
        min-height: 800px;
    }
}

/* ==========================================================================
   LAYOUT: NAAS (modifier on top of .layout-left-right)
   --------------------------------------------------------------------------
   Naas renders under `.layout-left-right` together with left_right, kira and
   dc, so nothing above can be edited for Naas alone. `.layout-variant-*` is the
   per-layout hook — set server-side in preview/creator.blade.php and re-applied
   at runtime by applyLayout() in creator-widget.js.

   Specificity note: `.layout-variant-naas-left-right #canvas-container` and
   `.layout-left-right #canvas-container` are both (1 id, 1 class), so these
   rules win by ORDER. They must stay at the end of this file.

   The problem: #canvas-container is a flat 800px. On a laptop the viewport is
   already shorter than that, and adding the brand header pushes another 81px of
   the canvas below the fold — the ring is drawn centred in an 800px box whose
   lower half the shopper cannot see, which reads as "the product is cut off at
   the bottom" and drags the drag-to-rotate hint out of view with it.

   The fix: never let the canvas exceed what is on screen. 800px stays the
   ceiling (so tall monitors are untouched and still match the review page), but
   on anything shorter the box shrinks to the visible area and the ring re-frames
   to its centre. Subtracting the header height keeps it honest at scroll 0,
   which is the worst case — once the header scrolls away the sticky panel has
   that much room to spare.
   ========================================================================== */
@media screen and (min-width: 768px) {
    .layout-variant-naas-left-right #canvas-container {
        height: min(800px, calc(100vh - var(--ole-brand-header-h, 0px)));
    }
    /* The iframe follows the box rather than repeating the number, so the two
       can never drift apart the way the 320px tier once did. */
    .layout-variant-naas-left-right #model-container {
        height: 100%;
    }
}

@media screen and (max-width: 767px) {
    .layout-variant-naas-left-right #canvas-container {
        height: min(360px, calc(100vh - var(--ole-brand-header-h, 0px)));
        max-height: none;
    }
    .layout-variant-naas-left-right #model-container {
        height: 100%;
    }
}

@media screen and (max-width: 360px) {
    .layout-variant-naas-left-right #canvas-container {
        height: min(320px, calc(100vh - var(--ole-brand-header-h, 0px)));
        max-height: none;
    }
}

/* ==========================================================================
   LAYOUT: DC (modifier on top of .layout-left-right)
   --------------------------------------------------------------------------
   DC renders under `.layout-left-right` together with left_right, kira and
   naas, so nothing above can be edited for DC alone. `.layout-variant-*` is the
   per-layout hook — set server-side in preview/creator.blade.php and re-applied
   at runtime by applyLayout() in creator-widget.js.

   Specificity note: `.layout-variant-dc-left-right #canvas-container` and
   `.layout-left-right #canvas-container` are both (1 id, 1 class), so these
   rules win by ORDER. They must stay after the left-right block.

   The problem: #canvas-container is a flat 800px, but most laptop viewports
   are shorter than that (1366x768 leaves ~650px; 1440x900 ~780px). The ring is
   framed at the centre of the full 800px box, so on those screens its centre
   lands well past the middle of what the shopper can see — "the canvas appears
   too low", by a different amount at every resolution. A brand header above
   the widget pushes it down a further 81px.

   The fix: never let the box exceed what is on screen. 800px stays the ceiling,
   so tall monitors are untouched, but on anything shorter the box shrinks to
   the visible area and the ring re-frames to its centre. The header height is
   subtracted so this holds at scroll 0, the worst case.
   ========================================================================== */
@media screen and (min-width: 768px) {
    .layout-variant-dc-left-right #canvas-container {
        height: min(800px, calc(100vh - var(--ole-brand-header-h, 0px)));
    }
    /* The iframe follows the box rather than repeating the number, so the two
       can never drift apart. */
    .layout-variant-dc-left-right #model-container {
        height: 100%;
    }
}

@media screen and (max-width: 767px) {
    .layout-variant-dc-left-right #canvas-container {
        height: min(360px, calc(100vh - var(--ole-brand-header-h, 0px)));
        max-height: none;
    }
    .layout-variant-dc-left-right #model-container {
        height: 100%;
    }
}

@media screen and (max-width: 360px) {
    .layout-variant-dc-left-right #canvas-container {
        height: min(320px, calc(100vh - var(--ole-brand-header-h, 0px)));
        max-height: none;
    }
}