/* Main Configuration */

@layer configuration {

*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 70ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}

select option {
    text-align: center;
}
}

@layer configuration {

@font-face {
    font-family : "iA4";
    src         : url("fonts/iAWriterQuattroV.ttf") format("truetype");
    font-style  : normal;
    font-weight : 100 900;
}

:root {
    
    /* Colors */
    --text              : #000;
    --text-alt          : #777;
    --main-background   : #FFF;
    --square-background : #F8F8F8;
    --square-hover      : #000;
    --border            : #DBDBDB;
    --crosshair         : #888888;

    --pulse-start : rgba(0, 0, 0, 0.35);
    --pulse-end   : rgba(0, 0, 0, 0);

    @media (prefers-color-scheme: dark) {
        --text              : #FFF;
        --text-alt          : #888;
        --main-background   : #000;
        --square-background : #222;
        --square-hover      : #FFFFFF;
        --border            : #444;
        --crosshair         : #DBDBDB;
        --pulse-start       : rgba(255, 255, 255, 0.35);
        --pulse-end         : rgba(255, 255, 255, 0);
    }

    /* Font Settings */
    --f-family : iA4, sans-serif;
    --f-size   : 16px;
    --f-height : 22px;
    --f-weight : 400;

    /* Set the defaults */
    font-size   : var(--f-height);
    font-family : var(--f-family);
    font-weight : var(--f-weight);
    background  : var(--background);
    color       : var(--text);

    overflow-x: hidden;
}

body {
    font-size   : var(--f-size);
    line-height : var(--f-height);
    background  : var(--main-background);
}
}

@layer configuration {
/* Nothing to see here */
}/* Global Settings *//* Main Grid Container */

.grid {
    display               : grid;
    grid-template-columns : 1fr;

    @media (min-width: 700px) {
         grid-template-columns : repeat(auto-fill,minmax(350px,1fr));
    }
}/* UI Elements *//* Nothing to see here *//* Reusable Components */

.editor {
    
    p:not(:last-child) {
        margin-bottom : 1rem;
    }

    a {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }

    ul,ol {
        list-style  : none;
        margin-top  : 1rem;
        &:not(:last-child) {
            margin-bottom : 1rem;
        }
    }

    ul li {
        padding-left : 3ch;
        &::before {
            content : "+  ";
            margin-left : -3ch;
            white-space: pre;
        }
    }

    ol {
        counter-reset : list;
        li {
            counter-increment : list;
            padding-left      : 3ch;
            &::before {
                content     : counter(list) ". ";
                margin-left : -3ch;
            }
        }

    }

}/* Nothing to see here */

@media (prefers-color-scheme : dark) {
    img[data-invert] {
        filter : invert(1)
    }
}

.square {
    aspect-ratio    : 1;
    text-align      : center;
    display         : flex;
    justify-content : center;
    align-items     : center;
    background      : var(--square-background);
    position        : relative;
    border          : none;
    border-right    : 1px solid var(--border);
    border-bottom   : 1px solid var(--border);
    cursor          : crosshair;

}

.square-email {
    span {
        display : none;
    }
    &:hover h1 {
        display : none;
    }
    &:hover span {
        display : block;
    }
}

.square-active {
    background : var(--square-hover)
}/* The Crosshair elements */

.crosshair-tl,
.crosshair-tr,
.crosshair-bl,
.crosshair-br {
    position : absolute;
    width    : 10px;
    height   : 10px;
    z-index  : 9999;
}

.crosshair-tl {
    top         : -1px;
    left        : -1px;
    border-top  : 1px solid var(--crosshair);
    border-left : 1px solid var(--crosshair);
}

.crosshair-tr {
    top          : -1px;
    right        : -1px;
    border-top   : 1px solid var(--crosshair);
    border-right : 1px solid var(--crosshair);
}

.crosshair-bl {
    bottom        : -1px;
    left          : -1px;
    border-bottom : 1px solid var(--crosshair);
    border-left   : 1px solid var(--crosshair);
}

.crosshair-br {
    bottom        : -1px;
    right         : -1px;
    border-bottom : 1px solid var(--crosshair);
    border-right  : 1px solid var(--crosshair);
}

button.square:hover,
a.square:hover,
.square-active {
    background : var(--square-hover);
    color      : var(--square-background);

    img[data-invertOnHover]  {
        filter : invert(1)
    }

    @media (prefers-color-scheme : dark) {
        img[data-invertOnHover][data-invert] {
            filter : invert(0)
        }
    }

}

.square-image {
    display         : block;
    width           : 100%;
    height          : auto;
    aspect-ratio    : 1;
    object-fit      : contain;
    object-position : center;
}

.square-placeholder {
    pointer-events : none;
    border-right   : 1px solid var(--border);
    border-bottom  : 1px solid var(--border);
    aspect-ratio   : 1;
    position       : relative;
}/* Sqyare Newsletter */

.square-nl {

    form {
        width : calc(100% - 1rem);
    }

    label {
        position : absolute;
        top      : -9999px;
        left     : -9999px;
    }

    input {
        appearance : none;
        border     : none;
        width : 100%;
    }

    input[type="email"] {
        text-align: center;
    }

    input[type="submit"] {
        position : absolute;
        top      : -9999px;
        left     : -9999px;
    }

    ::placeholder {
        color   : var(--text-alt);
        opacity : 1;
    }

}/* Voicenote Square */

.square-voicenote:has(.record[disabled]) {
    animation: timer-animation 15s linear infinite;
    .voicenote-instructions {
        display : none
    }
    .when-recording {
        display : block;
    }
}

.voicenote-instructions {
    position : absolute;
    bottom : 0;
    left: 0;
    right : 0;
    padding : 2ch;
    text-wrap: balance;
    color : var(--text-alt);
}

.when-recording {
    display : none;
}

.voicenote-button {
    position : absolute;
    top : 50%;
    left : 50%;
    transform : translate(-50%, -50%);
    width : 2rem;
    height : 2rem;
    border : none;
    cursor : pointer;
    background: var(--text);
}

.voicenote-button[disabled] {
    display : none;
}

.voicenote-button.record {
    border-radius : 50%;
    animation: pulse-animation 2s infinite;
    &:hover {
        background: red;
    }
}

.voicenote-button.stop:hover {
    background : var(--text-alt);
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px var(--pulse-start);
  }
  100% {
    box-shadow: 0 0 0 20px var(--pulse-end);
  }
}

@keyframes timer-animation {
  0% { background-image: linear-gradient(to right, var(--main-background), var(--main-background)); background-repeat: no-repeat; background-size : 0 100%; }
  100% { background-image: linear-gradient(to right, var(--main-background), var(--main-background)); background-repeat: no-repeat; background-size : 100% 100%; }
}

.overlay {
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%,-50%);
    background      : var(--main-background);
    border          : 1px solid var(--border);
    overflow        : auto;
    max-width       : 35rem;
    max-height      : 70svh;
    width           : calc(100% - 2rem);
    scrollbar-color : var(--text) transparent;
    scrollbar-width : thin;
}

.overlay::backdrop {
    background : rgba(255,255,255,0.1);
    backdrop-filter: blur(2px);
}

.overlay-inner {
    padding : 2rem;
}

.overlay-header {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    margin-bottom   : 2rem;
}

.overlay-close {
    background : var(--square-background);
    border     : 1px solid var(--border);
    padding    : 0.25rem 0.5rem;
    cursor     : pointer;
}

.overlay-close:hover {
    color : var(--square-background);
    border-color : var(--text);
    background : var(--text);
}

.overlay-title {
    font-weight   : 700;
}

.overlay-gallery {
    border                : 1px solid var(--border);
    grid-template-columns : 1fr 1fr;
    gap                   : 1px;
    display               : grid;
    background            : var(--border);
    margin-top : 2rem;
}

.overlay-gallery-image-container {
    background : var(--square-background);
}

.overlay-gallery-image {
    display : block;
    width   : 100%;
}

.overlay-buy-btn {
    margin : 2rem 0;
}

.shopify-buy__product {
    display               : grid;
    grid-template-columns : 1fr;
    align-items           : center;
    align-content         : center;

    @media (width > 600px) {
         grid-template-columns : 1fr 1fr;
    }
}

.shopify-buy__option-select {
    display               : grid;
    grid-template-columns : 1fr auto;
}

.shopify-buy__option-select-wrapper {
    display      : block;
    aspect-ratio : 1;
}

.shopify-buy__option-select__label {
    padding      : 0.75rem;
    border       : 1px solid var(--border);
    border-right : none;
}

.shopify-buy__option-select__select {
    appearance    : none;
    border        : 1px solid var(--border);
    padding       : 0.75rem;
    font-size     : inherit;
    line-height   : inherit;
    width         : calc(2.5rem + 2px);
    aspect-ratio  : 1;
    text-align    : center;
    cursor        : pointer;
    border-radius : 0;

    &:hover {
        background : var(--square-background);
    }
}

.shopify-buy__select-icon {
    display : none;
}

.shopify-buy__btn-wrapper:only-child {
    grid-column : 1 / -1;
}

.shopify-buy__btn {
    padding    : 0.75rem;
    color      : var(--main-background);
    background : var(--text);
    border     : 1px solid var(--text);
    display    : block;
    width      : 100%;
    cursor     : pointer;

    &:hover {
        background   : var(--square-background);
        color        : var(--text);
        border-color : var(--border);
    }
}

.shopify-buy__btn-wrapper:not(:only-child) .shopify-buy__btn {
    @media (width <= 600px) { border-top : none; }
    @media (width > 600px) { border-left : none; }
}