/* ============================================================
   WeinBunny Catalog — Frontend Styles
   ============================================================ */

:root {
    --wb-bg:           #faf7f2;
    --wb-text:         #2a1a0e;
    --wb-accent:       #6b1a2a;
    --wb-gold:         #c9a84c;
    --wb-rule:         #e0d4c3;
    --wb-section-bg:   #f0e9df;
    --wb-font-body:    'Georgia', 'Times New Roman', serif;
    --wb-font-ui:      'Helvetica Neue', Arial, sans-serif;
    --wb-radius:       6px;
}

/* ── Bar menu ──────────────────────────────────────────────── */

.wb-menu {
    background:   var(--wb-bg);
    color:        var(--wb-text);
    font-family:  var(--wb-font-body);
    max-width:    780px;
    margin:       0 auto;
    padding:      2rem 1.5rem;
    border-radius: var(--wb-radius);
}

.wb-menu__notice {
    font-family:  var(--wb-font-ui);
    font-size:    .82rem;
    background:   var(--wb-section-bg);
    border-left:  3px solid var(--wb-gold);
    padding:      .6rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0 var(--wb-radius) var(--wb-radius) 0;
    color:        #5a4030;
}

.wb-menu__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wb-menu__table {
    width:            100%;
    border-collapse:  collapse;
    font-size:        .9rem;
}

.wb-menu__table thead th {
    font-family:    var(--wb-font-ui);
    font-size:      .75rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          #8a6a50;
    text-align:     right;
    padding:        0 .5rem .4rem;
    border-bottom:  1px solid var(--wb-rule);
}

.wb-menu__table thead th.wb-menu__col-name { text-align: left; }

.wb-menu__section-header td {
    font-family:    var(--wb-font-ui);
    font-size:      .78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--wb-accent);
    background:     var(--wb-section-bg);
    padding:        .55rem .5rem .4rem;
}

.wb-menu__item td {
    padding:       .45rem .5rem;
    border-bottom: 1px solid var(--wb-rule);
    vertical-align: top;
}

.wb-menu__item:last-child td { border-bottom: none; }

.wb-menu__item-name {
    text-align: left;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wb-menu__thumb-link img {
    width:         40px;
    height:        52px;
    object-fit:    cover;
    border-radius: 3px;
    flex-shrink:   0;
}

.wb-menu__item-title { font-weight: 500; }

.wb-menu__producer { color: #6a5040; }

.wb-menu__origin {
    font-size:   .82rem;
    color:       #8a7060;
    display:     block;
    margin-left: 48px; /* align under name when thumb present */
}

.wb-menu__price {
    text-align:          right;
    white-space:         nowrap;
    font-variant-numeric: tabular-nums;
    padding-left:        1.2rem;
    color:               var(--wb-accent);
    font-weight:         600;
    vertical-align:      middle;
}

/* ── Catalog ───────────────────────────────────────────────── */

.wb-catalog__filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.wb-filter-select {
    font-family: var(--wb-font-ui);
    font-size:   .85rem;
    padding:     .35rem .6rem;
    border:      1px solid var(--wb-rule);
    border-radius: var(--wb-radius);
    background:  #fff;
    color:       var(--wb-text);
}

.wb-filter-btn {
    font-family: var(--wb-font-ui);
    font-size:   .85rem;
    padding:     .35rem .9rem;
    background:  var(--wb-accent);
    color:       #fff;
    border:      none;
    border-radius: var(--wb-radius);
    cursor:      pointer;
}

.wb-filter-btn:hover { background: #8b2236; }

.wb-filter-reset {
    font-family: var(--wb-font-ui);
    font-size:   .82rem;
    color:       #8a7060;
    text-decoration: none;
    padding:     .35rem .5rem;
}

.wb-catalog {
    display: grid;
    gap:     1.5rem;
}

.wb-catalog--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wb-catalog--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wb-catalog--cols-4 { grid-template-columns: repeat(4, 1fr); }

.wb-card {
    background:    #fff;
    border:        1px solid var(--wb-rule);
    border-radius: var(--wb-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    box-shadow .2s;
}

.wb-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.wb-card__image-link {
    display:  block;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--wb-section-bg);
}

.wb-card__image-link img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .3s;
}

.wb-card:hover .wb-card__image-link img { transform: scale(1.03); }

.wb-card__no-image {
    display:     flex;
    align-items: center;
    justify-content: center;
    height:      100%;
    font-size:   3rem;
    color:       var(--wb-rule);
}

.wb-card__body {
    padding:    1rem;
    flex:       1;
    display:    flex;
    flex-direction: column;
    gap:        .3rem;
}

.wb-card__band {
    display:      inline-block;
    font-family:  var(--wb-font-ui);
    font-size:    .75rem;
    font-weight:  700;
    color:        var(--wb-gold);
    letter-spacing: .06em;
    margin-bottom: .1rem;
}

.wb-card__title {
    font-family: var(--wb-font-body);
    font-size:   1rem;
    font-weight: 600;
    margin:      0;
    line-height: 1.3;
}

.wb-card__title a {
    color:           var(--wb-text);
    text-decoration: none;
}

.wb-card__title a:hover { color: var(--wb-accent); }

.wb-card__producer {
    font-family: var(--wb-font-ui);
    font-size:   .82rem;
    color:       #6a5040;
    margin:      0;
}

.wb-card__meta {
    font-family: var(--wb-font-ui);
    font-size:   .78rem;
    color:       #8a7060;
    margin:      0;
}

.wb-card__excerpt {
    font-size:   .85rem;
    color:       #5a4030;
    margin:      0;
    line-height: 1.5;
    flex:        1;
}

.wb-catalog__empty {
    grid-column: 1 / -1;
    text-align:  center;
    color:       #8a7060;
    padding:     2rem;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .wb-catalog--cols-3,
    .wb-catalog--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .wb-catalog { grid-template-columns: 1fr; }
    .wb-menu__price { padding-left: .5rem; }
    .wb-catalog__filters { flex-direction: column; align-items: stretch; }
    .wb-filter-select,
    .wb-filter-btn { width: 100%; }
}