/*
    STEVE & CO. 
    steveandco.shop
    build: Light of Day v 0.0.0
    stylesheet development 
    © e]O eYeOpeners.design mmxxv - mmxxvi

    Store styles - v 0.2.1
*/

/*
    CHANGE LOG >
    2026-01-01: details transitions; -wm
    2025-12-18: responsive images and text flow in store details. -wm
    2025-12-11: creation; vegan to plant-based; -wm
*/

details {
    padding-bottom: 2.5em;
    transition: transform 0.3s ease;
}

details[open] summary::marker {
    content: "🔽";
    transition: transform 0.3s ease;
}

details div {
    width: 48%;
    display: inline-block;
    vertical-align: middle;
}

details div:first-of-type {
    border-right: 3px solid brown;
    margin-right: 1em;
}

details img {
    width: 100%;
    max-width: 15em;
    float: left;
    margin-right: 1.25em;
    clear: left;
}

img[src$="milk.png"] {
    max-width: 100px;
}

span[title] {
    font-size: 100%;
}

[title='gluten free'],
[title='organic'],
[title='raw'],
[title='spicy'],
[title='plant-based'] {
    font-size: 100%;
}

[title='gluten free']::after {
    content: "🏵️";
}
[title='organic']::after {
    content: "🌱";
}

[title='raw']::after {
    content: "🧄";
}

[title='spicy']::after {
    content: "🌶️";
}

[title='plant-based']::after {
    content: "🥦";
}

summary {
    font-weight: bold;
    /*
    font-size: 1.2em;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc; 
    */
    cursor: pointer;
}
summary:hover {
    background-color: #e0e0e0; 
}
summary:focus {
    outline: none;
    /*box-shadow: 0 0 5px #007BFF; */
}
summary::marker {
    content: "▶️"; /* Adds a right arrow for collapsed state */
}

#shop-nav {
    text-align: center;
    margin: auto;
    font-size: 120%;
    z-index: 1000;
    position: sticky;
    top: 3.6em;
    padding: .5em 0 .65em;
    background-color: var(--page--bg-color);
}

#product-details-toggle {
    cursor: pointer;
}

#shop-nav a:link,
#shop-nav a:visited {
    color: var(--shadow-color--green-grey);
    font-weight: var(--text-heavy);
}
#shop-nav a:hover {
    color: var(--accent-color--green-medium);
    font-weight: var(--text-heavy);
    text-decoration: none;
}
#shop-nav a:active {
    color: var(--accent-color--orange);
    font-weight: var(--text-heavy);
}

.product-container h2,
.special-container h2 {
    background-color: #ddd;
    border: 0.5px solid #aaa;
    margin: 2.5em auto 1em;
    padding: 0.5em;
    box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 2px var(--accent-color--white-bright);
    text-shadow: -1px -1px white;
}

/* Product List */
/* Responsive Product Layout */
.product-container {
    /*
    display: grid;
    grid-template-columns: auto 1fr;  Sidebar label on left, product list on right
    gap: 20px;  Space between sidebar and list 
    align-items: start;
    */
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
}

.product-list {
    clear: both;
    display: flex;
    justify-content: space-between;
    font-size: 1.5em;
    margin: 1em auto 0.5em;
    border-bottom: 1px solid var(--shadow-color--grey);
}

.product-list span {
    font-family: var(--font--accent);
}

.product-list .price {
    font-weight: var(--text-bold);
}

/* Sidebar Labels (SPECIAL, FROM THE COW) */
.sidebar-label {
    font-family: var(--font--accent--shop--label);
    font-weight: var(--text-heavy);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    background-color: var(--bg-color--light);
    color: var(--main-text-and-bg-color--dark);
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg); /* Flipped vertically and horizontally */
    min-width: 50px;
}

@media only screen and (max-width: 600px) {

    details div:first-of-type {
        float: left;
        border-right: none;
        margin: 1em 1em auto auto;
        width: 40%;
    }
    
    details div:nth-of-type(2) {
        float: right;
        width: 50%;
        margin: 1em 1em auto auto;
    }

    .container {
        font-size: 75%;
    }

    span[title] {
        font-size: 70%;
    }

    [title='gluten free'],
    [title='organic'],
    [title='raw'],
    [title='spicy'],
    [title='plant-based'] {
        font-size: 70%;
    }

    #shop-nav {
    font-size: 120%;
    z-index: 900;
    position: sticky;
    top: 68px;
    padding: 1em 0;
    }

    .product-list {
        font-size: unset;
    }
}