:root { --plum:#4f3259; --plum-dark:#2c1832; --sand:#f4f1ed; --ink:#201d20; --line:#dfd7df; --white:#fff; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--white); font:16px/1.55 Arial,sans-serif; } a { color:inherit; } .site-header,main,footer { max-width:1240px; margin:auto; padding-inline:clamp(1.25rem,4vw,3.5rem); } .site-header { min-height:5.5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .logo { color:var(--plum); font:bold 1.7rem/1 Georgia,serif; letter-spacing:.08em; text-decoration:none; } .logo span { color:#aa8c5d; } nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem 1.25rem; } nav a { text-decoration:none; font-size:.92rem; } nav a:hover { color:var(--plum); } .main-navigation a { padding:.38rem .08rem; border-bottom:2px solid transparent; } .main-navigation a.is-active { color:var(--plum); border-color:var(--plum); font-weight:700; } .hero { min-height:35rem; display:grid; align-items:end; padding:clamp(2rem,7vw,6rem); color:var(--white); background:radial-gradient(circle at 82% 18%,rgba(170,140,93,.42),transparent 29%),linear-gradient(125deg,#2c1832,#6b4677); } .hero > div { max-width:42rem; } h1,h2 { font-family:Georgia,serif; line-height:1.08; } h1 { font-size:clamp(2.5rem,6vw,5rem); margin:.25rem 0 1.4rem; } h2 { font-size:clamp(1.8rem,3vw,2.8rem); } .eyebrow { margin:0; letter-spacing:.12em; font-size:.76rem; font-weight:bold; color:#aa8c5d; } .button { display:inline-block; padding:.75rem 1rem; background:var(--plum); color:white; text-decoration:none; border-radius:.2rem; font-weight:bold; } .hero .button { background:white; color:var(--plum-dark); } .catalogue,.page-intro { padding-block:clamp(3rem,7vw,6rem); } .products-section { padding-top:0; } .category-grid,.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; } .category-card,.product-card { border:1px solid var(--line); background:var(--white); text-decoration:none; overflow:hidden; } .category-card img,.product-card img { width:100%; aspect-ratio:4/3; object-fit:contain; display:block; background:var(--sand); } .category-card img { object-fit:cover; } .category-card span { display:block; padding:1rem; font-weight:bold; color:var(--plum); } .product-card h2,.product-card .price { margin:1rem; } .product-card h2 { font-size:1.15rem; } .price { color:var(--plum); font-weight:bold; } .muted { color:#675e65; } .large { font-size:1.5rem; } .product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding-block:3rem 6rem; } .product-image img { width:100%; max-height:35rem; object-fit:contain; background:var(--sand); } .back { color:var(--plum); } .rich-text img { max-width:100%; height:auto; } .pagination { margin-top:2.5rem; justify-content:flex-start; gap:.5rem; } .pagination a,.pagination span { display:inline-grid; place-items:center; min-width:2.5rem; min-height:2.5rem; border:1px solid var(--line); text-decoration:none; } .pagination span { background:var(--plum); color:white; border-color:var(--plum); } .page-shell { max-width:960px; margin:auto; padding:clamp(3rem,7vw,6rem) 0; } .page-lead { max-width:44rem; font-size:1.2rem; color:#544c54; } .content-grid,.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2.5rem; } .content-card,.contact-card { padding:1.6rem; background:var(--sand); border-top:4px solid var(--plum); } .content-card h2,.contact-card h2 { margin-top:0; font-size:1.45rem; } .content-card ul { padding-left:1.1rem; } .content-card li + li { margin-top:.45rem; } .contact-grid { grid-template-columns:1fr 1fr; } .contact-card a { color:var(--plum); font-weight:bold; } .contact-note { margin-top:2rem; padding:1.25rem 1.5rem; border:1px solid var(--line); } footer { margin-top:4rem; padding-block:3rem; background:var(--plum-dark); color:white; max-width:none; padding-inline:max(1.25rem,calc((100vw - 1170px)/2)); } @media (max-width:700px) { .site-header { min-height:4.5rem; align-items:flex-start; padding-block:1rem; flex-direction:column; gap:1rem; } nav { justify-content:flex-start; } .hero { min-height:31rem; } .product-detail,.content-grid,.contact-grid { grid-template-columns:1fr; } }