.collection-hero { min-height:382px; padding:86px 8vw 62px; background:#c3c8b9; text-align:center; position:relative; overflow:hidden; } .collection-hero::before,.collection-hero::after { content:""; position:absolute; width:72%; height:170px; top:-94px; border-radius:50%; background:#d9ddd1; opacity:.55; } .collection-hero::before { left:-15%; transform:rotate(7deg); } .collection-hero::after { right:-15%; transform:rotate(-7deg); } .collection-hero > * { position:relative; z-index:1; } .collection-hero h1 { margin:10px auto 25px; font-size:clamp(48px,5vw,72px); line-height:.86; } .collection-intro { max-width:570px; margin:0 auto; font-size:17px; line-height:1.65; }
.collection-grid { max-width:1160px; margin:0 auto; padding:50px 0 96px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .collection-card { position:relative; overflow:hidden; background:#fbf8f4; border-radius:15px; box-shadow:0 10px 24px rgba(38,59,36,.09); } .collection-card .catalog-card-media { height:345px; overflow:hidden; } .collection-card .catalog-card-media img { display:block; width:100%; height:100%; object-fit:cover; mix-blend-mode:normal; } .collection-card .catalog-card-content { padding:30px 28px; } .collection-card .catalog-card-title { margin:0 0 16px; font-size:32px; text-transform:uppercase; } .collection-card .catalog-card-description { min-height:98px; }
@media (max-width:1240px) { .collection-grid { margin:0 8vw; } } @media (max-width:780px) { .collection-grid { grid-template-columns:1fr; } .collection-card .catalog-card-media { height:360px; } .collection-card .catalog-card-description { min-height:0; } }
.product-detail { max-width:1160px; margin:0 auto; padding:56px 0 96px; } .back-link { color:var(--ink); text-decoration:none; font-size:14px; } .detail-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8vw; align-items:start; margin-top:38px; } .product-gallery { position:sticky; top:113px; min-width:0; } .detail-image { position:relative; min-height:500px; overflow:hidden; background:#c3c8b9; border-radius:14px; } .detail-image img { display:block; width:100%; height:100%; min-height:500px; object-fit:cover; mix-blend-mode:normal; } .detail-image-empty { margin:0; color:var(--muted); text-align:center; } .gallery-control { position:absolute; top:50%; z-index:1; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(38,59,36,.25); border-radius:50%; background:rgba(247,244,236,.92); color:var(--ink); font:24px/1 "DM Sans",sans-serif; cursor:pointer; transform:translateY(-50%); transition:background .2s ease,color .2s ease; } .gallery-control:hover,.gallery-control:focus-visible { background:var(--ink); color:var(--paper); } .gallery-previous { left:18px; } .gallery-next { right:18px; } .gallery-thumbnails { display:flex; gap:10px; padding-top:14px; overflow-x:auto; scrollbar-width:thin; } .gallery-thumbnail { flex:0 0 76px; height:88px; padding:5px; border:1px solid transparent; border-radius:9px; background:#dde1d5; cursor:pointer; } .gallery-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; } .gallery-thumbnail.is-selected { border-color:var(--ink); background:var(--paper); } .gallery-thumbnail:focus-visible { outline:2px solid var(--ink); outline-offset:2px; } .detail-copy { min-width:0; } .detail-copy h1 { font-size:clamp(44px,5vw,70px); margin-bottom:24px; text-transform:uppercase; } .product-benefits { margin:0 0 28px; padding:16px 0; border-top:1px solid rgba(38,59,36,.16); border-bottom:1px solid rgba(38,59,36,.16); } .product-benefit-list { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 6px; margin:0; padding:0; list-style:none; } .product-benefit-list li { flex:1 1 70px; max-width:82px; color:var(--ink); text-align:center; } .product-benefit-list img { display:block; width:64px; height:64px; margin:0 auto 8px; object-fit:contain; } .product-benefit-list span { display:block; font-size:14px; line-height:1.25; white-space:pre-line; } .detail-description { font-size:18px; line-height:1.7; } .detail-description h3 { margin:24px 0 8px; font-size:20px; } .detail-description p { margin:0 0 16px; } .detail-description table { width:100%; margin:18px 0 24px; border-collapse:collapse; font-size:15px; } .detail-description th,.detail-description td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .detail-description th { color:var(--ink); font-weight:600; background:var(--blush); } .detail-description ul,.detail-description ol { padding-left:24px; } .detail-description ol { padding-left:24px; } .detail-section { border-top:1px solid var(--line); } .detail-section:last-child { border-bottom:1px solid var(--line); } .detail-section summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:19px 2px; color:var(--ink); cursor:pointer; list-style:none; } .detail-section summary::-webkit-details-marker { display:none; } .detail-section summary span { font-family:Amoret,"Times New Roman",serif; font-size:25px; line-height:1.15; } .detail-section summary::after { content:""; flex:0 0 auto; width:9px; height:9px; margin-right:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s ease; } .detail-section[open] summary::after { transform:rotate(225deg); } .detail-section-content { padding:2px 2px 18px; } .detail-section-content > :last-child { margin-bottom:0; } .detail-price { font-size:27px; font-weight:600; margin:30px 0; } .variant-label { display:block; margin:18px 0 8px; font-size:13px; font-weight:600; } #variant-select { width:100%; margin-bottom:24px; padding:13px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); font:16px "DM Sans",sans-serif; } #checkout-button { background:var(--ink); color:var(--paper); border-color:var(--ink); cursor:pointer; } #checkout-button:disabled { cursor:not-allowed; opacity:.5; } .checkout-status { min-height:24px; margin-top:16px; color:var(--muted); font-size:14px; } @media (max-width:1240px) { .product-detail { margin:0 8vw; } } @media (prefers-reduced-motion:reduce) { .detail-section summary::after { transition:none; } } @media (max-width:780px) { .detail-layout { grid-template-columns:1fr; gap:38px; } .product-gallery { position:static; } .detail-image,.detail-image img { min-height:clamp(300px,94vw,500px); } .gallery-control { width:38px; height:38px; } .gallery-previous { left:12px; } .gallery-next { right:12px; } .gallery-thumbnail { flex-basis:66px; height:76px; } .detail-copy h1 { max-width:100%; padding-block:.06em; font-size:clamp(28px,9vw,34px); line-height:1.08; overflow-wrap:normal; word-break:normal; } .detail-description table { display:block; overflow-x:auto; } } @media (max-width:480px) { .product-detail { margin:0 6vw; padding-top:38px; } .detail-image { border-radius:11px; } .detail-description { font-size:16px; } .gallery-thumbnails { gap:8px; padding-top:10px; } }
.confirmation-page { min-height:calc(100vh - 165px); padding-bottom:110px; } .confirmation-hero { padding:84px 8vw 70px; text-align:center; background:#dce1d5; } .confirmation-mark { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 24px; border:1px solid rgba(38,59,36,.25); border-radius:50%; background:var(--paper); font-size:28px; } .confirmation-hero h1 { max-width:850px; margin:0 auto 24px; font-size:clamp(48px,6vw,76px); } .confirmation-intro { max-width:650px; margin:0 auto; font-size:18px; line-height:1.65; } .confirmation-content { max-width:1080px; margin:0 auto; padding:52px 0 0; } .confirmation-loading { text-align:center; color:var(--muted); } .confirmation-card { padding:30px; border:1px solid rgba(38,59,36,.12); border-radius:14px; background:#fffdfa; } .confirmation-overview { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:26px; background:var(--blush); } .confirmation-overview div { display:flex; flex-direction:column; gap:7px; } .confirmation-overview span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; } .confirmation-overview strong { overflow-wrap:anywhere; } .confirmation-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr); gap:26px; } .confirmation-side { display:grid; align-content:start; gap:26px; } .confirmation-items { margin-top:16px; } .confirmation-item { display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid rgba(38,59,36,.12); } .confirmation-item img { width:62px; height:72px; object-fit:contain; border-radius:8px; background:#e3e5dc; } .confirmation-item div { display:flex; flex-direction:column; gap:5px; } .confirmation-item span { color:var(--muted); font-size:13px; } .confirmation-line-total { white-space:nowrap; } .confirmation-totals { display:grid; grid-template-columns:1fr auto; gap:9px 20px; margin:24px 0 0; } .confirmation-totals:empty { display:none; } .confirmation-totals dt,.confirmation-totals dd { margin:0; } .confirmation-totals dd { font-weight:600; text-align:right; } .confirmation-totals dt:last-of-type,.confirmation-totals dd:last-of-type { padding-top:12px; border-top:1px solid rgba(38,59,36,.18); font-size:18px; } .confirmation-summary-note { margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.55; } .confirmation-side p { line-height:1.6; } .next-steps ol { margin:14px 0 0; padding-left:20px; } .next-steps li { margin-bottom:13px; line-height:1.5; } .confirmation-actions { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:38px; } .confirmation-actions .button { background:var(--ink); color:var(--paper); } .confirmation-contact { color:var(--ink); text-underline-offset:4px; }
@media (max-width:1120px) { .confirmation-content { margin:0 8vw; } } @media (max-width:760px) { .confirmation-hero { padding:64px 8vw 54px; } .confirmation-overview,.confirmation-grid { grid-template-columns:1fr; } .confirmation-overview { gap:18px; } .confirmation-item { grid-template-columns:52px 1fr; } .confirmation-item img { width:52px; height:62px; } .confirmation-line-total { grid-column:2; } .confirmation-actions { align-items:stretch; flex-direction:column; text-align:center; } }

.collection-card .catalog-card-media { background:#dce1d5; }

.detail-image img:not([hidden]) { cursor:zoom-in; } .detail-image img:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; } .product-image-lightbox { width:min(1100px,calc(100vw - 32px)); max-width:none; height:min(900px,calc(100dvh - 32px)); margin:auto; padding:0; border:0; border-radius:16px; background:transparent; overflow:visible; } .product-image-lightbox::backdrop { background:rgba(19,31,18,.82); backdrop-filter:blur(4px); } .product-image-lightbox-content { position:relative; display:grid; place-items:center; width:100%; height:100%; } .product-image-lightbox figure { display:grid; grid-template-rows:minmax(0,1fr) auto; width:100%; height:100%; margin:0; } .product-image-lightbox figure img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; border-radius:12px; background:#172317; } .product-image-lightbox figcaption { padding:12px 58px 0; color:var(--paper); text-align:center; font-size:14px; } .product-image-lightbox-close,.product-image-lightbox-control { position:absolute; z-index:1; display:grid; place-items:center; padding:0; border:1px solid rgba(247,244,236,.45); border-radius:50%; background:rgba(38,59,36,.85); color:var(--paper); cursor:pointer; transition:background .2s ease,transform .2s ease; } .product-image-lightbox-close { top:14px; right:14px; width:44px; height:44px; font:32px/1 "DM Sans",sans-serif; } .product-image-lightbox-control { top:50%; width:48px; height:48px; font:28px/1 "DM Sans",sans-serif; transform:translateY(-50%); } .product-image-lightbox-previous { left:16px; } .product-image-lightbox-next { right:16px; } .product-image-lightbox-close:hover,.product-image-lightbox-close:focus-visible { background:var(--ink); transform:translateY(-1px); } .product-image-lightbox-control:hover,.product-image-lightbox-control:focus-visible { background:var(--ink); transform:translateY(-50%) scale(1.05); } @media (max-width:600px) { .product-image-lightbox { width:calc(100vw - 20px); height:calc(100dvh - 20px); } .product-image-lightbox-control { width:42px; height:42px; } .product-image-lightbox-previous { left:8px; } .product-image-lightbox-next { right:8px; } .product-image-lightbox figcaption { padding-inline:48px; } }

/* The expanded view always shows the entire source image, including tall portrait photography. */
.product-image-lightbox { height:auto; max-height:calc(100dvh - 32px); } .product-image-lightbox-content,.product-image-lightbox figure { height:auto; max-height:calc(100dvh - 32px); } .product-image-lightbox figure { display:flex; flex-direction:column; align-items:center; } .product-image-lightbox figure img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 84px); object-fit:contain; } @media (max-width:600px) { .product-image-lightbox { max-height:calc(100dvh - 20px); } .product-image-lightbox-content,.product-image-lightbox figure { max-height:calc(100dvh - 20px); } .product-image-lightbox figure img { max-height:calc(100dvh - 72px); } }

.delivery-note { margin-top:26px; padding:20px 22px; border:1px solid rgba(38,59,36,.18); border-radius:10px; background:var(--blush); color:var(--ink); } .delivery-note h2 { margin:0 0 8px; font:600 14px "DM Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; } .delivery-note p { margin:0 0 9px; font-size:14px; line-height:1.55; } .delivery-note p:last-of-type { margin-bottom:12px; } .delivery-note a { color:var(--ink); font-size:14px; font-weight:600; text-underline-offset:3px; }