@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Ballet&display=swap');

:root {
    --white: #FFFFFF;
    --black: #000000;
    --accent: #E3FF64;
    --font-serif: 'Instrument Serif', serif;
    --font-script: 'Ballet', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-serif); background: var(--white); color: var(--black); }

.h1 { font-family: var(--font-script); font-weight: 400; font-size: 40pt; line-height: 1.1; color: var(--black); text-decoration: none; }
@media (max-width: 1278px) { .h1 { font-size: 20pt; } }

.h2 { font-family: var(--font-serif); font-weight: 400; font-size: 40pt; line-height: 30px; letter-spacing: -4%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .h2 { font-size: 40pt; line-height: 40px; letter-spacing: -3%; } }
@media (max-width: 1278px) { .h2 { font-size: 32pt; line-height: 35px; letter-spacing: -3%; } }

.h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24pt; line-height: 42px; letter-spacing: -6%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .h3 { font-size: 20pt; line-height: auto; margin-bottom: 6px; } }
@media (max-width: 1278px) { .h3 { font-size: 24pt; line-height: 22px; margin-bottom: 4px; } }

.h4 { font-family: var(--font-script); font-weight: 400; font-size: 25pt; line-height: 1.1; color: var(--black); }
@media (min-width: 1279px) { .h4 { font-size: 25pt; } }
@media (max-width: 1278px) { .h4 { font-size: 20pt; } }

.num { font-family: var(--font-script); font-weight: 400; font-size: 48pt; line-height: 1; color: var(--black); text-align: right; text-transform: lowercase; margin: 0; }
@media (max-width: 1278px) { .num { font-size: 40pt; } }

.small-num { font-family: var(--font-script); font-weight: 400; font-size: 48pt; line-height: 1; color: var(--black); text-transform: lowercase; margin: 0; }
@media (max-width: 1278px) { .small-num { font-size: 40pt; } }

.bodycopy { font-family: var(--font-serif); font-weight: 400; font-size: 20pt; line-height: 24px; letter-spacing: -2%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .bodycopy { font-size: 20pt; line-height: 20px; letter-spacing: -6%; } }
@media (max-width: 1278px) { .bodycopy { font-size: 14pt; line-height: 20px; letter-spacing: -3%; } }

.footer .h1, .footer .bodycopy { color: var(--white) !important; }

a { text-decoration: none; color: var(--black); transition: color 0.3s; }
a:hover { color: var(--accent); }
.hero.inverted a:hover { color: var(--accent); }

.header { background: var(--white); padding: 5px 2px 0 2px; border-bottom: none; position: relative; z-index: 1000; }
.header-wrapper { max-width: 1280px; margin: 0 auto; padding: 10px 2px 0 2px; width: 100%; }
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; }
.nav-right { display: flex; align-items: center; gap: 0; }
.nav .h1 { padding: 0; margin: 0; cursor: pointer; }
.home-link { margin-right: auto; }

.hamburger { display: none; flex-direction: column; cursor: pointer; padding: 5px; gap: 4px; }
.hamburger span { width: 25px; height: 3px; background: var(--black); transition: 0.3s; }

@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-right { position: fixed; top: 60px; right: 2px; background: var(--white); flex-direction: column; gap: 0; padding: 20px 0; transform: translateY(-500px); opacity: 0; visibility: hidden; transition: all 0.3s; min-width: 140px; text-align: right; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 999; }
    .nav-right.active { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-right a { padding: 10px 20px; display: block; }
}

.hero { min-height: calc(100vh - 50px); display: flex; align-items: center; justify-content: center; padding: 5px 2px 0 2px; cursor: pointer; background: var(--white); margin-bottom: 60px; transition: filter 0.3s; }
.hero.hidden { display: none; }
.hero.inverted { filter: invert(1); }

.hero-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 2px; display: flex; flex-direction: column; align-items: center; gap: 111px; width: 100%; }
.hero-logo { width: 600px; height: 399px; max-width: calc(100vw - 4px); object-fit: contain; }
.hero-text { width: 100%; text-align: center; margin: 0; }
.highlight { font-weight: 400; cursor: pointer; transition: color 0.3s; }
.highlight:hover { color: var(--accent); }
.hero.inverted .highlight:hover { color: var(--accent); }

.shop { padding: 5px 2px 0 2px; background: var(--white); margin-bottom: 60px; }
.shop.hidden { display: none; }
.shop-wrapper { max-width: 1280px; margin: 0 auto; padding: 11px 2px; width: 100%; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(277px, 1fr)); gap: 100px 42px; justify-items: center; }
.product-card { width: 277px; height: 599px; display: flex; flex-direction: column; border: none; }
.product-image { width: 300px; height: 277px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; margin: 0 auto 5px auto; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-image img { transform: scale(1.05); }
.product-info { padding: 5px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.product-name { font-family: var(--font-serif); font-weight: 400; font-size: 40pt; line-height: 30px; letter-spacing: -4%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .product-name { font-size: 40pt; line-height: 40px; letter-spacing: -3%; } }
@media (max-width: 1278px) { .product-name { font-size: 32pt; line-height: 35px; letter-spacing: -3%; } }
.product-description { font-family: var(--font-serif); font-weight: 400; font-size: 24pt; line-height: 42px; letter-spacing: -6%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .product-description { font-size: 20pt; line-height: auto; margin-bottom: 6px; } }
@media (max-width: 1278px) { .product-description { font-size: 24pt; line-height: 22px; margin-bottom: 4px; } }
.product-price { font-family: var(--font-script); font-weight: 400; font-size: 48pt; line-height: 1; color: var(--black); text-align: right; text-transform: lowercase; padding-right: 15px; margin: 0; }
@media (max-width: 1278px) { .product-price { font-size: 40pt; } }
.add-to-cart-btn { width: 100%; height: 74px; background: var(--black); color: var(--white); border: none; font-family: var(--font-script); font-weight: 400; font-size: 25pt; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
@media (min-width: 1279px) { .add-to-cart-btn { font-size: 25pt; } }
@media (max-width: 1278px) { .add-to-cart-btn { font-size: 20pt; } }
.add-to-cart-btn:hover { background: var(--accent); color: var(--black); }

.about { background: var(--accent); padding: 5px 2px 0 2px; height: 600px; display: flex; align-items: center; margin-bottom: 60px; }
.about.hidden { display: none; }
.about-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 2px; display: grid; grid-template-columns: 1fr 438.75px; gap: 192px; align-items: center; width: 100%; }
.about-text { text-align: left; }
.about-text .h1 { color: var(--black); margin: 0 0 16px 0; }
.about-text .bodycopy { color: var(--black); }
.about-image img { width: 438.75px; height: 351px; object-fit: cover; }

.cart { padding: 5px 2px 0 2px; background: var(--white); display: none; margin-bottom: 70px; }
.cart.active { display: block; }
.cart-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 2px; width: 100%; }
.cart-items { display: flex; flex-direction: column; gap: 29px; margin-bottom: 70px; }
.cart-item { display: flex; gap: 44px; padding: 20px; border: 1px solid var(--black); align-items: flex-start; }
.cart-item-image { width: 200px; height: 200px; flex-shrink: 0; border: 1px solid var(--black); overflow: hidden; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-content { flex: 1; display: flex; flex-direction: column; gap: 0; justify-content: space-between; }
.cart-item-name { font-family: var(--font-serif); font-weight: 400; font-size: 40pt; line-height: 30px; letter-spacing: -4%; color: var(--black); margin: 0; }
@media (min-width: 1279px) { .cart-item-name { font-size: 40pt; line-height: 40px; letter-spacing: -3%; } }
@media (max-width: 1278px) { .cart-item-name { font-size: 32pt; line-height: 35px; letter-spacing: -3%; } }

.cart-item-header { display: flex; flex-direction: column; gap: 20px; }

.cart-item-size { font-family: var(--font-serif); font-weight: 400; font-size: 24pt; line-height: 42px; letter-spacing: -6%; color: var(--black); margin: 0; flex-shrink: 0; }
@media (min-width: 1279px) { .cart-item-size { font-size: 20pt; line-height: auto; margin-bottom: 6px; } }
@media (max-width: 1278px) { .cart-item-size { font-size: 24pt; line-height: 22px; margin-bottom: 4px; } }

.cart-item-details { display: flex; gap: 44px; align-items: flex-end; width: 100%; }

.cart-item-qty { font-family: var(--font-script); font-weight: 400; font-size: 48pt; line-height: 1; color: var(--black); text-transform: lowercase; margin: 0; text-align: left; flex-shrink: 0; }
@media (max-width: 1278px) { .cart-item-qty { font-size: 40pt; } }

.cart-item-price { font-family: var(--font-script); font-weight: 400; font-size: 48pt; line-height: 1; color: var(--black); text-align: right; text-transform: lowercase; margin: 0; margin-left: auto; flex-shrink: 0; }
@media (max-width: 1278px) { .cart-item-price { font-size: 40pt; } }

.cart-totals { display: flex; flex-direction: column; gap: 0; padding: 5px 2px; margin-bottom: 70px; border-top: 1px solid var(--black); padding-top: 5px; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 2px; }
.cart-total-row.subtotal, .cart-total-row.shipping, .cart-total-row.taxes { font-family: var(--font-serif); font-weight: 400; font-size: 24pt; line-height: 42px; letter-spacing: -6%; color: var(--black); }
@media (min-width: 1279px) { .cart-total-row.subtotal, .cart-total-row.shipping, .cart-total-row.taxes { font-size: 20pt; line-height: auto; margin-bottom: 6px; } }
@media (max-width: 1278px) { .cart-total-row.subtotal, .cart-total-row.shipping, .cart-total-row.taxes { font-size: 24pt; line-height: 22px; margin-bottom: 4px; } }

.cart-total-row.total { font-family: var(--font-serif); font-weight: 400; font-size: 40pt; line-height: 30px; letter-spacing: -4%; color: var(--black); padding: 5px 2px; margin-bottom: 6px; }
@media (min-width: 1279px) { .cart-total-row.total { font-size: 40pt; line-height: 40px; letter-spacing: -3%; } }
@media (max-width: 1278px) { .cart-total-row.total { font-size: 32pt; line-height: 35px; letter-spacing: -3%; } }

.checkout-btn { width: 100%; height: 74px; background: var(--black); color: var(--white); border: none; font-family: var(--font-script); font-weight: 400; font-size: 25pt; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; margin-top: 10px; }
@media (min-width: 1279px) { .checkout-btn { font-size: 25pt; } }
@media (max-type: 1278px) { .checkout-btn { font-size: 20pt; } }
.checkout-btn:hover { background: var(--accent); color: var(--black); }

.footer { background: var(--black); padding: 5px 2px 0 2px; height: 600px; display: flex; align-items: center; }
.footer-wrapper { max-width: 1280px; margin: 0 auto; padding: 0 2px; display: grid; grid-template-columns: auto 514px; gap: 64px; width: 100%; justify-content: space-between; align-items: flex-start; }
.footer-text { display: flex; flex-direction: column; gap: 24px; text-align: left; }
.footer-text .h1 { color: var(--white); margin: 0; }
.footer-text .bodycopy { color: var(--white); margin: 0; }
.footer-logo img { width: 514px; height: 357px; object-fit: contain; }

@media (max-width: 1278px) {
    .hero-wrapper, .shop-wrapper, .about-wrapper, .cart-wrapper, .footer-wrapper { padding: 0 24px; }
    .products-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 100px 42px; }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .footer-logo img { width: 514px; height: 357px; object-fit: contain; }
}

@media (max-width: 768px) {
    .about-wrapper { grid-template-columns: 1fr; gap: 64px; text-align: center; justify-items: center; }
    .about-text { text-align: center; }
    .about-image img { width: 211px; height: 263px; object-fit: cover; }
    .footer-wrapper { grid-template-columns: 1fr; gap: 64px; text-align: center; justify-items: center; flex-direction: column-reverse; }
    .footer-text { text-align: center; }
    .footer-logo img { width: 292px; height: 203px; object-fit: contain; }
    .cart-item { flex-direction: column; gap: 20px; }
    .cart-item-image { width: 100%; max-width: 200px; margin: 0 auto; }
    .cart-item-details { flex-direction: row; gap: 44px; width: 100%; }
}

@media (max-width: 475px) {
    .hero-wrapper { gap: clamp(80px, 20vw, 111px); }
    .hero-logo { width: 100%; height: auto; }
    .products-grid { grid-template-columns: 1fr; gap: 60px 16px; }
    .product-card { width: 100%; max-width: 277px; }
}