@charset "UTF-8";

.browse-wrap{max-width:100%;margin:0 auto;padding:18px 20px 38px}
.browse-intro{text-align:center;margin:15px auto 30px;max-width:80%;}
.browse-intro h1{margin:0 0 10px}
.browse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.browse-card{display:flex;gap:18px;border:1px solid #ded8d4;border-radius:8px;padding:15px;min-width:0;background:#fff}
/* Single-format products share a card, up to three of the same format. */
.browse-group-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:1px solid #ded8d4;border-radius:8px;padding:15px;min-width:0;background:#fff}
.browse-group-card .browse-card{border:0;border-radius:0;padding:0;display:block;min-width:0}
.browse-group-card .browse-info h2{font-size:1.1rem}
.browse-group-card .browse-formats{margin-top:9px}
.browse-info{flex:1;min-width:0}
.browse-info h2{line-height:1.3;margin:0 0 9px;color:#3e2723}
.browse-info h2 a{color:inherit;text-decoration:none}
.browse-info h2 a:hover{text-decoration:underline}
/* The option tiles use the exact price.php class hierarchy and its stylesheet.
   Only the containing grid is specific to the browse page. */
.browse-formats {display:flex;flex-wrap:wrap;margin-top:13px;justify-content:flex-start}
.browse-formats .smalloptbox{flex:0 1 auto}
.browse-note{font-size:.88rem;color:#5b514b;margin:7px 0 0}
.browse-pages{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:32px 0}
.browse-pages a,.browse-pages strong{padding:8px 12px;border:1px solid #d9d1cb;border-radius:4px}
.browse-pages strong{background:#3e2723;color:white}
.browse-pages a{color:#3e2723;text-decoration:none}

.browse-related {
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 10px;
    background: #faf8f6;
    border: 1px solid #e5ded8;
    border-radius: 8px;
    text-align: center;
}

.browse-related h2 {
    font-size: 1.6rem;
    color: #3e2723;
    font-family: 'BenchNineLight', sans-serif;
}

.browse-related-group {
    margin-top: 5px;
}

.browse-related-group h3 {
    font-size: 1.05rem;
    color: #3e2723;
    margin: 0 0 5px;
}

.browse-related-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.browse-related-links a {
    display: inline-block;
    padding: 7px 13px;
    background: #fff;
    border: 1px solid #d9d1cb;
    border-radius: 5px;
    color: #3e2723;
    text-decoration: none;
    font-size: 0.9rem;
}

.browse-related-links a:hover {
    background: #3e2723;
    color: #fff;
    border-color: #3e2723;
}

@media(max-width:1000px){.browse-grid{grid-template-columns:1fr}}
@media(max-width:650px){.browse-group-card{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){.browse-group-card{grid-template-columns:1fr}}
@media(max-width:560px){.browse-wrap{padding:12px}.browse-card{display:block}.browse-main{margin-bottom:15px}.browse-main img{max-height:320px}.browse-formats.otherOptions{justify-content:center}}