.coffee-tables { color: #293b49; }
.coffee-tables--home { padding: clamp(36px, 5vw, 72px) 0; background: #faf8f3; }
.coffee-tables-heading { margin-bottom: 20px; }
.coffee-tables--home .coffee-tables-heading { text-align: center; }
.coffee-tables .coffee-tables-eyebrow { margin: 0 0 8px; color: #88703e; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.coffee-tables-heading h2 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; text-transform: none; }
.coffee-tables-heading > p:last-child { margin: 0; color: #646464; font-size: 14px; }
.coffee-tables-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.coffee-tables .coffee-table-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5dfd4; border-radius: 8px; background: #fff; }
.coffee-table-photo { display: block; background: #f1eee8; }
.coffee-tables .coffee-table-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.coffee-table-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; }
.coffee-tables .coffee-table-body h3 { margin: 0; font-size: 17px; line-height: 1.35; text-transform: none; }
.coffee-table-body h3 a { color: inherit; }
.coffee-table-body > p { margin: 0; color: #686868; font-size: 12px; line-height: 1.4; }
.coffee-table-price { margin-top: auto; color: #88703e; font-size: 16px; }
.coffee-table-price del { color: #777; font-size: 12px; }
.coffee-tables .coffee-table-add { width: 100%; min-height: 44px; padding: 9px 6px; border: 1px solid #a8863f; border-radius: 5px; background: #fff; color: #806027; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; }
.coffee-table-add:hover, .coffee-table-add.added-to-cart { background: #faf5e8; }
.coffee-table-add:disabled { cursor: wait; opacity: .7; }
.coffee-tables a:focus-visible, .coffee-table-add:focus-visible { outline: 3px solid #a8863f; outline-offset: 3px; }
.coffee-table-unavailable { color: #777; font-size: 13px; }
.coffee-tables-view-all { display: block; width: fit-content; margin: 24px auto 0; color: #806027; font-weight: 600; }
.coffee-tables--detail { margin: 24px 0; padding-top: 20px; border-top: 1px solid #e5dfd4; }
.coffee-tables--detail .coffee-tables-heading h2 { font-size: 20px; }
.coffee-tables--detail .coffee-tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coffee-tables--detail .coffee-table-photo img { height: 118px; aspect-ratio: auto; }
.coffee-tables--detail .coffee-table-body { padding: 12px; gap: 6px; }
.coffee-tables--detail .coffee-table-body h3 { font-size: 15px; }
.coffee-tables-cart-note { margin: 12px 0 0; font-size: 12px; color: #686868; }
.coffee-tables-cart-note a { text-decoration: underline; color: #806027; }
@media (max-width: 991px) {
    .coffee-tables-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .coffee-table-body { padding: 12px; }
    .coffee-tables .coffee-table-body h3 { font-size: 15px; }
}

.coffee-table-import { padding-top: 24px; padding-bottom: 24px; }
.coffee-table-import p { margin: 10px 0 0; font-size: 12px; color: #686868; }
.coffee-table-detail { padding-top: 36px; padding-bottom: 48px; }
.coffee-table-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; }
.coffee-table-detail-photos img { display: block; width: 100%; height: auto; margin-bottom: 16px; }
.coffee-table-detail h1 { font-size: clamp(24px, 4vw, 36px); }
@media (max-width: 767px) { .coffee-table-detail-grid { grid-template-columns: 1fr; gap: 16px; } }

.coffee-table-selected { padding:16px; margin-top:16px; border:1px solid #d6d0c5; border-radius:8px; background:#fff; }
.coffee-table-selected[hidden] { display:none; }
.coffee-table-selected ul { padding:0; margin:12px 0; list-style:none; }
.coffee-table-selected li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #eee; font-size:14px; }
.coffee-table-selected button { min-height:44px; padding:8px 12px; border:1px solid #d6d0c5; border-radius:6px; background:white; color:#333; font:inherit; }
.coffee-table-detail-photos img[hidden] { display: none; }
.coffee-table-colour-options { border: 0; padding: 0; margin: 20px 0; }
.coffee-table-colour-options legend { font-size: 16px; border: 0; margin-bottom: 10px; }
.coffee-table-colour-options button[aria-pressed="true"] { background: #174f49; color: white; }