@import url('https://site-assets.fontawesome.com/releases/v7.1.0/css/all.css');
@import url('https://site-assets.fontawesome.com/releases/v7.1.0/css/duotone.css');
body {
    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0;
}
.hero{ background:#adcbff; position:relative; overflow:visible; padding-top: 2rem; padding: 0px; }
.hero-inner{ position:relative; z-index:3; max-width:1200px; margin:0 auto; display:flex; gap:36px; align-items:center; padding:96px 24px; }
.hero-left{ flex:1 1 60%; }
.hero-right{ flex:0 0 42%; display:flex; align-items:center; justify-content:center; }
h1{ font-size: clamp(32px, 6vw, 64px); margin:0 0 18px 0; line-height:1; font-weight:800; }
.lead{ font-size:1.25rem; color:#0f172a; max-width:46ch; margin:0 0 18px 0; }
.hero-ctas{ display:flex; gap:18px; align-items:center; }
.btn{ display:inline-block; border-radius:999px; padding:12px 24px; text-decoration:none; }
.btn.primary{ background:#1038a6; color:#fff; font-weight:700; box-shadow: 0 6px 12px rgba(16,56,166,0.12); }
.socials{ display:flex; gap:12px; }
	.icon{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; width:44px; height:44px; box-shadow: 0 4px 10px rgba(2,6,23,0.06); text-decoration:none; color:#1038a6; }
	.icon i{ font-size:1.1rem; line-height:1; }
	.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.card-mock{ width:32rem; height:18rem; background:#000; border-radius:20px; box-shadow: 0 18px 40px rgba(2,6,23,0.12); position:relative; z-index:4; }
.site-header.shrink + main .hero-inner{ padding-top:64px; padding-bottom:32px; }
@media(max-width:900px){
	.hero-inner{ gap:18px; padding:64px 18px; }
	.hero-right{ flex-basis:40%; }
}
@media(max-width:640px){
    .hero{ padding-top: 2rem; }
    .hero-inner{ flex-direction:column-reverse; align-items:stretch; padding:48px 12px 56px; }
    .hero-left{ order:2; text-align:left; }
    .hero-right{ order:1; display:flex; justify-content:center; }
    .card-mock{ width:24rem; height:14rem; }
    .hero::after{ display:none; }
    .lead{ font-size:1.05rem; }
}
section {
    padding:3rem;
}

/* Shop grid styles */
.shop-section { padding: 1.5rem 0 3rem; }
/* Keep 'Our Shop' aligned with the grid start on wide screens */
.shop-section h1 { max-width: 1200px; margin: 0 auto 18px; padding: 0 24px; box-sizing: border-box; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.product-card, .card-cta { border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-height: 220px; text-decoration: none; color: inherit; }
.product-card { background: #304db4; color: #fff; position: relative; }
/* Make the whole card linkable and remove underlines */
.product-link { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.product-link:focus, .product-link:hover { text-decoration:none; color:inherit; }
/* Image sits centered and fills roughly the top half of the card */
.product-image { width: calc(100% - 32px); height: 52%; max-height: 220px; margin: 12px auto 0; border-radius: 12px; overflow: hidden; display:block; box-shadow: 0 10px 18px rgba(2,6,23,0.12); }
.product-image img { width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
/* Body text styles — ensure white text and no underlines */
.product-body { padding: 12px 12px 56px; display:flex; flex-direction:column; gap:8px; }
.product-title { font-size:1.2rem; margin:0; font-weight:800; color:#fff; text-decoration:none; }
.product-desc { font-size:0.9rem; margin:0; color: rgba(255,255,255,0.95); text-decoration:none; }
.product-footer { margin-top:auto; display:flex; justify-content:space-between; align-items:center; }
.price { position: absolute; left: 12px; bottom: 12px; background: transparent; padding: 0; border-radius: 0; font-weight:800; color:#fff; font-size:1.2rem; }
.card-cta { background:#091e67; display:flex; color:#fff; text-decoration:none; }
.card-cta .cta-inner { padding: 18px; }
.card-cta h3 { margin:0; font-size:2.4rem; color:#fff; font-weight:800; }

@media (max-width: 900px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .shop-grid { grid-template-columns: 1fr; } .product-image{height:160px;} .product-body { padding-bottom: 72px; } }

/* Item modal */
.item-modal { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; z-index: 2000; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.item-modal.open { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.item-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); }
.item-modal__panel { position: relative; background: #fff; border-radius: 14px; width: min(920px, 94vw); max-height: 90vh; overflow:auto; z-index: 2010; box-shadow: 0 30px 80px rgba(2,6,23,0.35); padding: 20px; }
.item-modal__close { position: absolute; top: 10px; right: 12px; background:transparent; border: none; font-size: 28px; line-height:1; cursor:pointer; color:#111; }
.item-modal__content { display:flex; gap:18px; align-items:flex-start; }
.item-modal__media img{ width: 320px; height: 320px; object-fit: cover; border-radius: 10px; display:block; }
.item-modal__title{ margin:0; }
.item-modal__info { flex:1; }
.item-modal__desc { color:#334155; }
.item-modal__footer { margin-top: 12px; display:flex; gap:12px; align-items:center; }
.item-modal__price{ font-weight:800; font-size:1.2rem; color:#111; }
@media (max-width: 720px){ .item-modal__content{ flex-direction:column; } .item-modal__media img{ width:100%; height:300px; } .item-modal__panel{ width:94vw; padding:16px; } }

body.modal-open { overflow: hidden; }

/* Header / nav styles */
.site-header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; }
.site-header .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; display:flex; align-items:center; gap:12px; }
.brand-item { display:inline-flex; align-items:center; margin-right: auto; }
.brand-item img { max-height: 2rem; }

/* Desktop nav */
.nav { display:flex; }
.nav ul { list-style:none; margin:0; padding:0; display:flex; gap:0; align-items:center; }
.nav li { margin-left: 8px; }
.nav a { display:block; color: rgb(0,0,0); text-align:center; padding:14px 16px; text-decoration:none; font-weight:400; transition: font-weight 160ms ease, transform 160ms ease; }
.nav a:hover { font-weight:700; transform: scale(1.02); }
.nav a.active { font-weight:700; }

/* Menu toggle (hidden on desktop) */
.menu-toggle { display:none; background:none; border: none; padding: 8px; cursor: pointer; }
.menu-toggle .bar { display:block; width:22px; height:2px; background:#111; margin:4px 0; transition: transform 200ms ease, opacity 200ms ease; }

/* Mobile: stack nav and hide behind toggle */
@media (max-width: 700px) {
  .menu-toggle { display:block; margin-left:auto; z-index:1111; }

  /* Nav becomes a fixed full-bleed panel below the header so items fill device width */
  .nav {
    position: fixed;
    top: 4.5rem; /* sits below the fixed header */
    left: 0;
    right: 0;
    width: 100vw;
    max-height: 0;
    overflow: hidden;
    transition: max-height 260ms ease;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 12px 30px rgba(2,6,23,0.08);
    z-index: 1110;
  }
  .nav.open { max-height: calc(100vh - 4.5rem); }

  .nav ul { flex-direction:column; gap:0; padding: 8px 0; margin: 0; }
  .nav li { margin:0; width:100%; }
  .nav a { display:block; width:100%; padding: 18px 20px; text-align:left; border-top:1px solid #eee; background: transparent; }
  .nav a:first-child { border-top: none; }

  /* Full-screen overlay that darkens and blurs the rest of the UI */
  .nav-overlay { display:block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); opacity:0; pointer-events:none; transition: opacity 260ms ease; z-index: 1090; }
  .nav-overlay.open { opacity:1; pointer-events:auto; }

  .menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: rotate(45deg) translateY(6px); }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: translateX(-10px); }
  .menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

  /* Prevent page scroll when nav is open */
  body.nav-open { overflow: hidden; }
}

/* make space for fixed header */
main { padding-top: 4.5rem; padding-bottom: 32px; }

/* Footer styles - flows with document (not fixed) */
.site-footer { position: relative; background: #07124a; color: #fff; height: 56px; display:flex; align-items:center; width:100%; margin-top: 32px; }
.site-footer__inner { max-width:1100px; margin: 0 auto; width:100%; padding: 0 16px; display:flex; align-items:center; justify-content:space-between; }
.site-footer__left { font-size:0.95rem; color: rgba(255,255,255,0.92); }
.site-footer__right { display:flex; gap:12px; align-items:center; }
.site-footer__icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; color:#fff; text-decoration:none; background:transparent; }
.site-footer__icon:hover { background: rgba(255,255,255,0.04); }

@media (max-width: 640px) {
  .site-footer__inner { padding: 0 12px; }
  .site-footer__left { font-size:0.85rem; }
}