/* brand-common-baseline.css — combines brand-chips-baseline.css, price-table-baseline.css,
   and blog-card-baseline.css into one request. These three files are always loaded together,
   unconditionally, on every page (see templates/frontend_layout.php) and share no selectors,
   so concatenating them in their original relative order is behaviorally identical - this
   only cuts 2 render-blocking HTTP requests on every page load (PSI render-blocking-insight).
   If any one of the three needs to diverge/be removed independently in the future, split
   this back out - the section markers below preserve the original file boundaries. */

/* ═══════════════ shared-brand-chips (was brand-chips-baseline.css) ═══════════════ */

.brand-chips {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

.brand-chips::-webkit-scrollbar { display: none; }

.brand-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 16px;
    background: white;
    border: 1.5px solid var(--color-border-tertiary);
    border-radius: 10px;
    font-size: 0.875rem; font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0; min-height: 44px;
    transition: border-color 0.15s, color 0.15s;
  }

.brand-chip:hover { border-color: var(--green); color: var(--green-dark); }

.brand-chip.active {
    border-color: var(--green); color: var(--green-dark); background: var(--green-light);
  }

.brand-chip .count {
    font-size: 0.75rem; color: var(--color-text-tertiary); font-weight: 500;
  }

.brand-chip.active .count { color: var(--green); }

/* ═══════════════ shared-price-table (was price-table-baseline.css) ═══════════════ */

.price-table-wrap {
    margin-top: 14px;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    /* CLS guard: reserve approximate rendered height so footer/below-content
       doesn't shift if table renders late or font swaps. ~12 rows + header. */
    min-height: 540px;
  }

@media (min-width: 1024px) {
    .price-table-wrap { min-height: 620px; }
  }

.price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: auto;
  }

.price-table thead {
    background: #F5F8EE;
  }

.price-table th {
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green-dark);
    padding: 12px 14px;
    border-bottom: 1.5px solid var(--color-border-tertiary);
  }

.price-table th.num,
  .price-table td.num {
    text-align: right;
    white-space: nowrap;
  }

.price-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-tertiary);
    color: var(--color-text-primary);
    vertical-align: middle;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

.price-table tbody tr:last-child td { border-bottom: 0; }

.price-table tbody tr:nth-child(even) { background: #FAFBF7; }

.price-table tbody tr:hover { background: #EAF3DE; }

.price-table-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
  }

.price-table-link:hover {
    color: var(--green-dark);
    text-decoration: underline;
  }

.price-table .price-cell {
    font-weight: 800;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-size: 1.0625rem;
    background: #F5F8EE;
  }

.price-table tbody tr:nth-child(even) .price-cell { background: #EFF4E2; }

.price-table tbody tr:hover .price-cell { background: #DCEBC4; }

.price-table tbody tr:hover .t-stalls { background: #F9D8B0; }

.price-table tbody tr:hover .t-stalls-arrow { transform: translateX(2px); }

.price-table-note {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 10px;
    font-style: italic;
  }

@media (min-width: 1024px) {
    .price-table { font-size: 0.9375rem; }
    .price-table th,
    .price-table td { padding: 14px 18px; }
  }

@media (max-width: 599px) {
    .price-table { font-size: 0.8125rem; }
    .price-table th { padding: 10px 8px; font-size: 0.6875rem; letter-spacing: 0.02em; }
    .price-table td { padding: 10px 8px; }
    .price-table .price-cell { font-size: 0.9375rem; }
    .price-table th:first-child,
    .price-table td:first-child { padding-left: 12px; }
    .price-table th:last-child,
    .price-table td:last-child { padding-right: 12px; }
  }

/* ═══════════════ shared-blog-card (was blog-card-baseline.css) ═══════════════ */

.blog-section { max-width: 1200px; margin: 0 auto; padding: 16px 0; }

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }

.blog-card { background: white; border: 1px solid #E8E8E4; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }

.blog-img { aspect-ratio: 2; position: relative; }

.blog-cat { position: absolute; top: 10px; left: 10px; background: var(--green); color: white; font-size: 0.6875rem; font-weight: 600; padding: 3px 10px; border-radius: 4px; }

.blog-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }

.blog-title { font-size: 0.9375rem; font-weight: 700; color: #1C1C1A; margin: 0 0 8px; line-height: 1.4; }

.blog-excerpt { font-size: 0.8125rem; color: #5F5E5A; margin: 0 0 12px; line-height: 1.5; flex: 1; }

.blog-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #6B6964; }

.blog-read { color: var(--orange-dark); font-weight: 600; font-size: 0.8125rem; }

@media (min-width: 600px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (min-width: 1024px) {
    .blog-section { padding: 22px 0; }
    .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .blog-card { flex-direction: column; }
  }