/* ===== EASY SETTINGS: change these and every page updates ===== */
:root{
  --bg:#f8f3eb;         /* background color */
  --text:#0d0d0d;       /* text color */
  --font:"Helvetica","Nunito","Segoe UI",Verdana,sans-serif; /* font */
  --menu-width:140px;   /* space reserved for the menu */
  --menu-content-gap:20px;
  --menu-size:1rem;     /* menu text size (smaller number = smaller) */
  --menu-gap:2.0rem;    /* space between menu items (smaller = closer) */
  --text-size:1.35rem;  /* about page text size */
}
/* ============================================================== */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:800}
body.home-page{background-image:url("images/home-background.gif");background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0}

/* menu on the right */
.menu{position:fixed;right:0;top:0;bottom:0;width:var(--menu-width);display:flex;flex-direction:column;justify-content:center;gap:var(--menu-gap);font-size:var(--menu-size);z-index:5}
.menu a{color:#000000}
.menu .menu-logo{width:50px;height:auto;transform:translateX(-4px)}
.menu a:hover{text-decoration:underline}
.main{margin-right:calc(var(--menu-width) + var(--menu-content-gap))}

@media (min-width:801px){
    .product-detail-page .menu a{color:#287373}
}

/* home page */
.home-logo{width:100%;height:80vh;object-fit:contain;mix-blend-mode:multiply}
.home-arrow{display:flex;align-items:center;justify-content:center;height:80px}
.home-space{height:30vh}  /* bigger number = more scrolling on the home page */

/* shop and projects */
.banner{width:100%;height:100vh;object-fit:contain;mix-blend-mode:multiply}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 3vw;padding:100px 4vw 4vw;max-width:1000px}
.item img{width:100%;aspect-ratio:3/4;object-fit:cover}
.product-gallery{display:flex;aspect-ratio:3/4;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.product-gallery img{flex:0 0 100%;width:100%;height:100%;aspect-ratio:auto;scroll-snap-align:start}
.name{font-size:1.2rem;margin-top:8px;line-height:1.4}
a.item:hover .name,a.item:focus-visible .name{text-decoration:underline}
.price{font-size:1.2rem}
.buy{display:inline-block;margin-top:6px;border-bottom:2px solid var(--text)}

/* about page */
.about{display:flex;align-items:center;gap:30px;min-height:100vh;padding:4vw}
.about-text{flex:1;min-width:0;max-width:520px;font-size:var(--text-size);line-height:1.25}
.instagram-link{display:inline-flex;margin-top:1rem;color:var(--text)}
.instagram-link svg{width:24px;height:24px}
.instagram-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.about img{flex:1;min-width:0;max-width:520px;height:auto}

/* phones: menu moves to a bar at the top */
@media (max-width:800px){
  .menu{bottom:auto;left:0;width:100%;height:48px;flex-direction:row;justify-content:space-around;align-items:center;gap:0;background:var(--bg)}
  .menu .menu-logo{width:50px;transform:none}
  .main{margin-right:0;padding-top:calc(48px + var(--menu-content-gap))}
  .banner{height:auto}
  .about{flex-direction:column;align-items:flex-start}
  .about img{max-width:100%}
}

/* individual product page */
.product-page {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5vw;
    padding: 4vw;
    align-items: start;
}

.product-page > img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    justify-self: center;
}

.product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.product-info p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.product-info > a {
    margin-top: 30px;
    text-decoration: underline;
}

@media (max-width: 800px) {
    .product-page {
        grid-template-columns: 1fr;
    }

    .product-page > img {
        max-height: none;
    }
}