/* Preview #F4F5FB = rgba(244, 245, 251, 1). Scope avoids marketplace card collisions. */
.odd-product{box-sizing:border-box;max-width:76rem;margin:0 auto;padding:4rem 2rem;color:#171721;background:#fff;font-family:inherit}
.odd-product *{box-sizing:border-box}
.odd-product__masthead{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:2rem}
.odd-product h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2;letter-spacing:-.035em;margin:0;font-weight:600}
.odd-product__subtitle{ margin:.75rem 0 0;color:#646473;line-height:1.6;max-width:45rem}
.odd-product__actions{ display:flex;gap:.75rem;flex-shrink:0}

.odd-product__button { display:inline-flex; align-items:center; justify-content:center; background:#fff;color:#242431;font:inherit; line-height:1.2;}
.odd-product__button:hover{background:#f4f5fb}

/* .odd-product__button--primary{ background:#086eea;border-color:#086eea;color:#fff} */
/* .odd-product__button--primary:hover{ background:#075fc9;border-color:#075fc9} */
.odd-product__button:focus-visible{outline:3px solid #086eea;outline-offset:3px}
.odd-product__button:disabled{opacity:.55;cursor:default}

.odd-product__stage { position:relative;height:clamp(22rem,45vw,33rem);border-radius:4px;overflow:hidden; }
.odd-product__preview,.odd-product__preview>div { width:100%;height:100%;background:transparent}
.odd-product__preview iframe{display:block;width:100%;height:100%;border:0;background:transparent}
.odd-product__stage:fullscreen,.odd-product__stage.is-expanded{ width:100%;height:100%;border-radius:0;}
.odd-product__stage.is-expanded{position:fixed;inset:0;z-index:10000}
.odd-product__exit{display:none;position:absolute;right:1rem;top:1rem;z-index:2}
.odd-product__stage:fullscreen .odd-product__exit,.odd-product__stage.is-expanded .odd-product__exit{display:inline-flex}

.odd-product__body{display:grid;grid-template-columns:minmax(0,1fr) 19rem;align-items:start;gap:4rem;margin-top:3rem}
.odd-product h2{font-size:1.5rem;letter-spacing:-.025em;line-height:1.3;margin:0 0 1rem;font-weight:600}
.odd-product h3{font-size:1rem;margin:1.75rem 0 .75rem;font-weight:600}
.odd-product__description{line-height:1.8;color:#50505f;overflow-wrap:anywhere}

.odd-product__features{padding-left:1.25rem;margin:0;color:#50505f;line-height:1.8}
.odd-product__features li+li{margin-top:.375rem}
.odd-product__keywords{margin-top:2.5rem;padding-top:2rem;border-top:1px solid #e5e5ec}
.odd-product__keywords ul{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;list-style:none;padding:0;margin:0}
.odd-product__keywords li{padding:.5rem .75rem;border:1px solid #e5e5ec;border-radius:.25rem;background:#fff;text-align:center;color:#626272;font-size:.8125rem;overflow-wrap:anywhere;max-width:100%}

.odd-product__buy-card { position:sticky;top:2rem;border:1px solid #e5e5ec;border-radius:.75rem;padding:1.5rem;background:#fff}
.odd-product__price { font-size:2rem; font-weight:600;letter-spacing:-.04em;line-height:1.2;margin:0 0 1.25rem}
.odd-product__buy-card dl {margin:0 0 1.5rem}
.odd-product__buy-card dl>div { display:grid; grid-template-columns:5rem minmax(0,1fr);gap:1rem; border-bottom: 1px solid #e5e5ec; padding: .25rem 0; font-size:.8125rem; line-height:1.5}
.odd-product__buy-card dt {color:#717180}
.odd-product__buy-card dd {text-align:right;margin:0;overflow-wrap:anywhere}
.odd-product__buy-card .odd-product__button {width:100%}
.odd-product__status{color:#626272;font-size:.875rem;margin:1rem 0 0}

#product p a { color: #1b86df;}
#product button.cta { max-width: 100%; }

@media(max-width:58rem) {
    .odd-product__masthead{ align-items:flex-start;flex-direction:column;gap:1.25rem}
    .odd-product__body{gap:2rem;grid-template-columns:minmax(0,1fr) 17rem}
}

@media(max-width:42rem) { 
    .odd-product{padding:2rem 1rem}.odd-product__body{display:flex;flex-direction:column;margin-top:2rem}.odd-product__buy-card{position:static;width:100%;order:-1}.odd-product__content{width:100%}.odd-product__stage{height:24rem}.odd-product__actions{flex-wrap:wrap}
}


/* PRODUCT — PIXEL GRID */

.odd-product__stage {
    --grid-size: 20px;
    --grid-color: rgba(100, 110, 140, .13);
}


/* PRODUCT — TRANSPARENT PIXEL GRID */

.odd-product__stage.is-grid-visible {
    background-image:
        linear-gradient(
            to right,
            var(--grid-color) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--grid-color) 1px,
            transparent 1px
        );

    background-size:
        var(--grid-size) var(--grid-size);
}


/* Make the preview transparent */
.odd-product__stage .odd-product__preview {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Grid toggle */
.stage-grid-toggle { 
    /* position: absolute; top: 16px; right: 16px; z-index: 5; */
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;
    border: 1px solid #e5e5ec;
    border-radius: 5px;

    color: #646473;
    background: #fff;

    cursor: pointer;
    transition: color .2s, background .2s;
}

.stage-grid-toggle:hover {
    color: #086eea;
}

.stage-grid-toggle[aria-pressed="true"] {
    color: #086eea;
    border-color: #086eea;
    background: #eef5ff;
}



/* PRODUCT — STAGE RULERS */

.odd-product__stage {
    --grid-size: 20px;
    --ruler-size: 24px;
    /* --ruler-bg: #f9f9f9; */
    --ruler-ink: #777e8b;
}

.stage-rulers {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    font-family: monospace;
}

.is-grid-visible .stage-rulers {
    display: block;
}

.stage-ruler {
    position: absolute;
    overflow: hidden;
    background-color: #f9f9f9;
    color: var(--ruler-ink);
    font-size: .65rem;
}

/* Horizontal ruler */
.stage-ruler--top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--ruler-size);

    background-image:
        repeating-linear-gradient(
            to right,
            var(--ruler-ink) 0 1px,
            transparent 1px 20px
        );

    background-size: var(--grid-size) 8px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

/* Vertical ruler */
.stage-ruler--left {
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ruler-size);

    background-image:
        repeating-linear-gradient(
            to bottom,
            var(--ruler-ink) 0 1px,
            transparent 1px 20px
        );

    background-size: 8px var(--grid-size);
    background-repeat: repeat-y;
    background-position: right top;
}

/* Origin corner */
.stage-ruler-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ruler-size);
    height: var(--ruler-size);
    background: var(--ruler-bg);
    border-right: 1px solid #c8cad3;
    border-bottom: 1px solid #c8cad3;
}

/* Generated numeric labels */
.stage-ruler-label {
    position: absolute;
    line-height: 1;
    white-space: nowrap;
}

.stage-ruler--top .stage-ruler-label {
    top: 4px;
    transform: translateX(3px);
}

.stage-ruler--left .stage-ruler-label {
    left: 3px;
    transform: translateY(3px);
}