:root { --forest: #00563e; --forest-deep: #003f31; --ink: #07125c; --cream: #fcfbf6; --paper: #f4efdf; --line: #ded7c7; --white: #fffefa; --shadow: 0 22px 55px rgba(15, 43, 31, .13); --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Arial Black", Impact, Haettenschweiler, var(--sans); }
body { background: var(--cream); }
.cart-link { position: relative; text-decoration: none; }
.cart-count { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: white; border-radius: 50px; background: var(--forest); font-size: 10px; font-weight: 850; line-height: 1; }
.cart-count[hidden] { display: none; }
.page-main { min-height: 70vh; }
.page-hero { display: grid; grid-template-columns: minmax(260px, 1.05fr) minmax(280px, .95fr); gap: 55px; align-items: end; min-height: 300px; padding: 70px clamp(24px, 8vw, 145px) 56px; overflow: hidden; background: var(--paper); }
.page-hero h1 { max-width: 730px; margin: 0; color: #050505; font-size: clamp(45px, 6vw, 82px); line-height: .94; }
.page-hero h1 span { display: block; color: var(--forest); }
.page-hero .eyebrow { margin-bottom: 17px; }
.page-hero-copy p:not(.eyebrow) { max-width: 530px; margin: 21px 0 0; font-size: 18px; line-height: 1.45; }
.page-hero-note { align-self: stretch; position: relative; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; background: linear-gradient(140deg, #e4d6b8, #fffaf0); }
.page-hero-note::before, .page-hero-note::after { content: ""; position: absolute; background: var(--forest); opacity: .95; }
.page-hero-note::before { width: 190px; height: 150px; right: 15%; top: 15%; transform: rotate(-8deg); }
.page-hero-note::after { width: 110px; height: 110px; left: 21%; bottom: 16%; border-radius: 50%; background: #f6b941; }
.page-hero-note span { position: relative; z-index: 1; max-width: 180px; color: var(--forest-deep); font-family: var(--display); font-size: 21px; line-height: 1; text-align: right; transform: rotate(-4deg); }
.breadcrumb { display: flex; gap: 8px; align-items: center; padding: 17px clamp(24px, 8vw, 145px); background: var(--white); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.breadcrumb a { color: var(--forest); }
.catalogue-page { padding: 56px clamp(24px, 5vw, 80px) 80px; }
.catalogue-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.catalogue-intro h2, .detail-heading h1, .quote-heading h1 { margin: 0; color: #050505; font-size: clamp(35px, 4vw, 58px); line-height: .98; }
.catalogue-intro p { max-width: 460px; margin: 0; font-size: 16px; line-height: 1.45; }
.category-filters { display: flex; flex-wrap: wrap; gap: 9px; padding: 25px 0 27px; }
.filter-button { padding: 10px 14px; color: var(--ink); border: 1px solid #aab0bf; border-radius: 30px; background: transparent; font-size: 14px; font-weight: 750; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-button:hover, .filter-button.is-active { color: white; border-color: var(--forest); background: var(--forest); }
.catalogue-results-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: var(--forest); font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.product-card { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 16px; color: var(--ink); border: 1px solid transparent; background: var(--white); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.product-card:hover, .product-card:focus-visible { transform: translateY(-5px); border-color: #ddd4c2; outline: none; box-shadow: var(--shadow); }
.product-card img { display: block; width: 100%; aspect-ratio: 1 / .92; object-fit: cover; }
.product-card-content { display: flex; flex: 1; flex-direction: column; padding: 16px 14px 0; }
.product-card-tag { color: var(--forest); font-size: 10px; font-weight: 850; letter-spacing: 1.6px; text-transform: uppercase; }
.product-card h3 { margin: 11px 0 9px; color: var(--ink); font-size: 24px; line-height: .98; letter-spacing: -1.1px; }
.product-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.42; }
.product-card-price, .price-on-quote { display: inline-flex; width: fit-content; margin: 0 0 15px; padding: 5px 8px; color: var(--forest); border: 1px solid #b8d8cb; border-radius: 999px; background: #e8f3ed; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.product-card-action { margin-top: auto; color: var(--forest); font-size: 14px; font-weight: 850; text-decoration: underline; text-underline-offset: 5px; }
.customisation-band { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(280px, 1.2fr); gap: 60px; align-items: center; margin-top: 70px; padding: 52px clamp(24px, 6vw, 92px); color: white; background: var(--forest-deep); }
.customisation-band h2 { margin: 0; color: var(--cream); font-size: clamp(35px, 4vw, 53px); line-height: .97; }
.customisation-band p { max-width: 580px; margin: 0; color: #e9f0ed; font-size: 17px; line-height: 1.5; }
.customisation-band p + p { margin-top: 17px; }
.detail-page, .quote-page { padding: 48px clamp(24px, 7vw, 120px) 85px; }
.detail-layout { display: grid; grid-template-columns: minmax(280px, .92fr) minmax(360px, 1.08fr); gap: clamp(34px, 7vw, 118px); align-items: start; }
.detail-image-wrap { position: sticky; top: 103px; overflow: hidden; background: var(--paper); }
.detail-image-wrap > .detail-main-image { display: block; width: 100%; aspect-ratio: 1 / .94; object-fit: cover; }
.product-gallery-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 9px; background: var(--paper); }
.gallery-thumb { padding: 0; overflow: hidden; border: 1px solid transparent; background: var(--white); cursor: pointer; }
.gallery-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-thumb:hover, .gallery-thumb:focus-visible, .gallery-thumb.is-selected { border-color: var(--forest); outline: none; }
.detail-kicker { margin: 0 0 14px; color: var(--forest); font-size: 12px; font-weight: 850; letter-spacing: 2.3px; text-transform: uppercase; }
.detail-heading h1 { max-width: 610px; }
.detail-heading > p:not(.detail-kicker) { max-width: 620px; margin: 22px 0 23px; font-size: 18px; line-height: 1.5; }
.spec-list { display: grid; gap: 9px; padding: 0; margin: 0 0 31px; list-style: none; }
.spec-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.spec-list li::before { content: "✦"; color: var(--forest); }
.product-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 12px; overflow: hidden; border: 1px solid #ddd4c2; border-radius: 14px; background: #f7f0df; }
.product-benefits article { display: grid; min-height: 101px; align-content: center; gap: 5px; padding: 16px 11px; text-align: center; }
.product-benefits article + article { border-left: 1px solid #ddd4c2; }
.product-benefits strong { color: var(--forest); font-size: clamp(16px, 1.65vw, 23px); line-height: 1.02; letter-spacing: -.7px; }
.product-benefits span { color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .7px; line-height: 1.2; text-transform: uppercase; }
.product-conditions-note { margin: 0 0 16px; color: var(--ink); font-size: 12px; line-height: 1.4; }
.product-welcome { margin: 0 0 18px; padding: 13px 15px; color: var(--forest-deep); border: 1px solid #b8d8cb; border-radius: 9px; background: #e8f3ed; font-size: 14px; line-height: 1.45; }
.product-welcome strong { color: var(--forest); font-weight: 900; }
.product-config { padding: 25px; border: 1px solid #d5cebd; background: var(--white); box-shadow: 0 12px 25px rgba(29,47,37,.06); }
.product-config h2 { margin: 0 0 8px; color: var(--ink); font-size: 30px; letter-spacing: -1px; }
.config-subtitle { margin: 0 0 23px; font-size: 14px; line-height: 1.45; }
.option-set { padding: 0; margin: 0 0 23px; border: 0; }
.option-set legend { margin-bottom: 11px; color: var(--ink); font-size: 14px; font-weight: 850; }
.quantity-discount-note { margin: -4px 0 10px; color: var(--forest); font-size: 11px; font-weight: 750; line-height: 1.35; }
.quantity-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.option-card { position: relative; display: block; }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card .quantity-choice { display: grid; min-height: 58px; align-content: center; justify-items: center; gap: 3px; padding: 6px 5px; border: 1px solid #c7c2b4; background: var(--cream); text-align: center; }
.quantity-discount { min-height: 12px; color: var(--forest); font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .2px; line-height: 1; }
.quantity-discount.is-empty { visibility: hidden; }
.quantity-value { color: var(--ink); font-size: 12px; font-weight: 750; line-height: 1.2; }
.option-card input:checked + .quantity-choice { border-color: var(--forest); background: var(--forest); }
.option-card input:checked + .quantity-choice .quantity-value { color: white; }
.option-card input:checked + .quantity-choice .quantity-discount { color: #cae9db; }
.option-select { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #c7c2b4; border-radius: 2px; background: var(--cream); font-weight: 650; }
.option-set textarea { width: 100%; min-height: 80px; padding: 11px 12px; color: var(--ink); border: 1px solid #c7c2b4; background: var(--cream); resize: vertical; }
.config-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.config-actions .button { border: 0; }
.back-link { display: inline-block; margin-top: 19px; color: var(--forest); font-size: 14px; font-weight: 800; }
.quote-layout { display: grid; grid-template-columns: minmax(330px, 1fr) minmax(320px, .88fr); gap: clamp(34px, 7vw, 100px); align-items: start; margin-top: 35px; }
.quote-heading { padding-bottom: 25px; border-bottom: 1px solid var(--ink); }
.quote-heading .eyebrow { margin-bottom: 12px; }
.quote-heading p:not(.eyebrow) { max-width: 650px; margin: 18px 0 0; font-size: 17px; line-height: 1.46; }
.quote-items { display: grid; gap: 12px; }
.quote-item { display: grid; grid-template-columns: 105px 1fr auto; gap: 16px; align-items: start; padding: 13px; border: 1px solid #d7d0c0; background: var(--white); }
.quote-item img { width: 105px; height: 93px; object-fit: cover; }
.quote-item h2 { margin: 0 0 7px; color: var(--ink); font-size: 23px; letter-spacing: -1px; }
.quote-item p { margin: 0; font-size: 13px; line-height: 1.48; }
.quote-item strong { color: var(--forest); }
.remove-item { padding: 4px; color: var(--ink); border: 0; background: transparent; font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.quote-form-panel { position: sticky; top: 103px; padding: 28px; border: 1px solid #d7d0c0; background: var(--paper); }
.quote-form-panel h2 { margin: 0 0 9px; color: var(--ink); font-size: 32px; }
.quote-form-panel > p { margin: 0 0 21px; font-size: 14px; line-height: 1.45; }
.request-form { display: grid; gap: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.request-form label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 850; }
.request-form input, .request-form textarea { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #b9b4a6; border-radius: 2px; background: var(--white); font-weight: 550; }
.request-form textarea { min-height: 112px; resize: vertical; }
.request-form input:focus, .request-form textarea:focus, .option-select:focus, .option-set textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; }
.request-form .button { border: 0; justify-self: start; }
.promotion-fieldset { padding: 15px; margin: 0; border: 1px solid #b8d8cb; border-radius: 9px; background: #e8f3ed; }
.promotion-fieldset legend { padding: 0 4px; color: var(--forest-deep); font-size: 13px; font-weight: 900; }
.promotion-fieldset legend span { font-weight: 700; }
.promotion-fieldset > p { margin: 0 0 11px; color: var(--forest-deep); font-size: 13px; line-height: 1.42; }
.promotion-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.promotion-controls .button { min-height: 42px; border: 1px solid var(--ink); padding-inline: 13px; }
.promotion-fieldset small { display: block; margin-top: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }
.promotion-feedback { display: none; margin-top: 11px; padding: 10px 11px; color: var(--forest-deep); border-left: 3px solid var(--forest); background: rgba(255,255,255,.65); font-size: 12px; font-weight: 700; line-height: 1.4; }
.promotion-feedback.is-visible { display: block; }
.promotion-feedback.is-error { color: #8c1d18; border-left-color: #a12a2a; background: #f9e5df; }
.empty-quote { padding: 34px; border: 1px dashed #a9a89d; background: var(--white); text-align: center; }
.empty-quote h2 { margin: 0 0 10px; color: var(--ink); font-size: 30px; }
.empty-quote p { margin: 0 0 21px; }
.form-feedback { display: none; margin: 0 0 17px; padding: 12px 13px; border-left: 4px solid var(--forest); background: #e7f1ec; font-size: 14px; line-height: 1.45; }
.form-feedback.is-visible { display: block; }
.form-feedback.is-error { border-left-color: #a12a2a; background: #f7e6e2; }
.site-footer { margin-top: 0; }
@media (max-width: 1050px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page-hero { padding-inline: 45px; } }
@media (max-width: 760px) { .page-hero { grid-template-columns: 1fr; gap: 25px; min-height: 0; padding: 50px 20px 0; } .page-hero-copy { padding-bottom: 7px; } .page-hero-note { min-height: 145px; margin: 0 -20px; } .page-hero-note::before { right: 23%; top: 8%; width: 145px; height: 116px; } .page-hero-note::after { width: 78px; height: 78px; bottom: 8%; } .breadcrumb { padding-inline: 20px; } .catalogue-page, .detail-page, .quote-page { padding: 38px 20px 55px; } .catalogue-intro { display: block; } .catalogue-intro p { margin-top: 18px; } .category-filters { gap: 7px; } .filter-button { padding: 8px 11px; font-size: 12px; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .product-card h3 { font-size: 20px; } .product-card-content { padding: 12px 11px 0; } .product-card p { font-size: 12px; } .customisation-band { grid-template-columns: 1fr; gap: 24px; margin: 45px -20px -55px; padding: 43px 25px; } .detail-layout, .quote-layout { grid-template-columns: 1fr; gap: 32px; } .detail-image-wrap, .quote-form-panel { position: static; } .detail-image-wrap > .detail-main-image { aspect-ratio: 1 / .78; } .product-gallery-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .product-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-benefits article { min-height: 86px; padding: 14px 10px; } .product-benefits article:nth-child(3) { border-left: 0; border-top: 1px solid #ddd4c2; } .product-benefits article:nth-child(4) { border-top: 1px solid #ddd4c2; } .product-welcome { padding: 13px; font-size: 13px; } .quantity-options { grid-template-columns: repeat(3, 1fr); } .quote-item { grid-template-columns: 78px 1fr; gap: 11px; } .quote-item img { width: 78px; height: 76px; } .quote-item .remove-item { grid-column: 2; justify-self: start; } .form-grid { grid-template-columns: 1fr; } .promotion-controls { grid-template-columns: 1fr; } .promotion-controls .button { width: 100%; } .quote-form-panel { padding: 22px; } }