/* Payism V3 brand page (design/catalog/brand_1440_v3.png): the shop-in-shop part above the shared V3 listing. */

.v3-brand { display: flex; flex-direction: column; gap: 32px; margin: 0 0 32px; }
.v3-brand .v3b-hero {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; min-height: 272px;
    background: #fff; border: 1px solid var(--v3-line); border-radius: 24px; box-shadow: var(--v3-shadow-1); overflow: hidden;
}
.v3-brand .v3b-hero__id { display: flex; align-items: center; gap: 32px; padding: 32px; }
.v3-brand .v3b-hero__logo {
    width: 152px; height: 152px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: #fff; border: 1px solid var(--v3-line); border-radius: 20px; box-shadow: var(--v3-shadow-1);
    font-size: 40px; font-weight: 800; color: var(--v3-brand-600);
}
.v3-brand .v3b-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v3-brand .v3b-hero__name { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: -.5px; }
.v3-brand .v3b-hero__sub { font-size: 17px; color: var(--v3-ink-2); margin: 2px 0 10px; }
.v3-brand .v3b-hero__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; color: var(--v3-muted); }
.v3-brand .v3b-hero__stats .v3c-rating { color: var(--v3-muted); font-size: 15px; }
.v3-brand .v3b-hero__stats .v3c-rating strong { color: var(--v3-ink); margin-left: 2px; }
.v3-brand .v3b-hero__actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.v3-brand .v3b-hero__actions .v3c-iconbtn { width: 48px; height: 48px; box-shadow: none; border: 1px solid var(--v3-line-strong); }
.v3-brand .v3b-hero__art {
    position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 32px 32px 0;
    background: linear-gradient(160deg, var(--v3-brand-50) 0%, var(--v3-brand-100) 100%);
}
.v3-brand .v3b-hero__shot { flex: 1; max-width: 33%; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; }
.v3-brand .v3b-hero__shot:nth-child(2) { transform: translateY(-16px); }
.v3-brand .v3b-hero__shot img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 16px 24px rgba(6, 43, 79, .16)); }

.v3-brand .v3b-tabs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.v3-brand .v3b-tabs::-webkit-scrollbar { display: none; }
.v3-brand .v3b-tabs .v3c-chip { height: 44px; padding: 0 20px; font-size: 15px; }

.v3-brand .v3b-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v3-gutter); }
.v3-brand .v3b-tile {
    position: relative; display: flex; align-items: stretch; min-height: 232px; border-radius: 20px; overflow: hidden;
    background: linear-gradient(135deg, #0F1B2D 0%, #1E3550 100%); color: #fff !important; box-shadow: var(--v3-shadow-1);
    transition: box-shadow .2s ease, transform .2s ease;
}
.v3-brand .v3b-tile:hover { box-shadow: var(--v3-shadow-2); transform: translateY(-2px); }
.v3-brand .v3b-tile__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 28px; max-width: 60%; }
.v3-brand .v3b-tile__name { font-size: 26px; line-height: 32px; font-weight: 800; }
.v3-brand .v3b-tile__from { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.v3-brand .v3b-tile__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; color: #8CCBF2; }
.v3-brand .v3b-tile__img { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); }
.v3-brand .v3b-tile__img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.v3-brand .v3b-anchor { display: block; height: 0; scroll-margin-top: 120px; }

@media (max-width: 1199px) {
    .v3-brand .v3b-hero { grid-template-columns: 1fr; }
    .v3-brand .v3b-hero__art { height: 220px; }
    .v3-brand .v3b-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .v3-brand { gap: 24px; margin-bottom: 20px; }
    .v3-brand .v3b-hero { border-radius: 20px; min-height: 0; }
    .v3-brand .v3b-hero__id { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px; }
    .v3-brand .v3b-hero__logo { width: 72px; height: 72px; padding: 10px; border-radius: 16px; font-size: 22px; }
    .v3-brand .v3b-hero__name { font-size: 26px; line-height: 34px; }
    .v3-brand .v3b-hero__sub { font-size: 15px; margin-bottom: 6px; }
    .v3-brand .v3b-hero__stats, .v3-brand .v3b-hero__stats .v3c-rating { font-size: 14px; }
    .v3-brand .v3b-hero__actions { margin-top: 12px; }
    .v3-brand .v3b-hero__art { height: 168px; padding: 16px 16px 0; }
    .v3-brand .v3b-tabs { margin: 0 calc(-1 * var(--v3-side)); padding: 2px var(--v3-side); }
    .v3-brand .v3b-tiles { grid-template-columns: 1fr; gap: 12px; }
    .v3-brand .v3b-tile { min-height: 148px; }
    .v3-brand .v3b-tile__text { padding: 20px; }
    .v3-brand .v3b-tile__name { font-size: 20px; line-height: 26px; }
    .v3-brand .v3b-tile__from { font-size: 15px; }
}

/* Admin-managed brand photo (brands.banner): bleeds to the hero's right edge and fades into the white id side (brand_1440_v3). */
.v3-brand .v3b-hero__art--banner { padding: 0; background: none; overflow: hidden; }
.v3-brand .v3b-hero__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
@media (max-width: 1199px) { .v3-brand .v3b-hero__banner { -webkit-mask-image: none; mask-image: none; } }

/* brand_1440_v3: "Shop <brand> by category" tiles fill the row and the category photo bleeds under a left fade. */
@media (min-width: 1200px) { .v3-brand .v3b-tiles { grid-template-columns: repeat(var(--v3b-n, 3), minmax(0, 1fr)); } }
/* The photo fills the right ~64% (admin banners keep their own copy on the left, so it stays out from under ours). */
.v3-brand .v3b-tile--photo .v3b-tile__img { inset: 0 0 0 auto; width: 66%; background: none; }
.v3-brand .v3b-tile--photo .v3b-tile__img img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: right center; }
.v3-brand .v3b-tile--photo .v3b-tile__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0F1B2D 0, rgba(15, 27, 45, .88) 22%, rgba(15, 27, 45, .35) 45%, rgba(15, 27, 45, 0) 62%); }
.v3-brand .v3b-tile--photo .v3b-tile__text { max-width: 58%; }
/* brand_390_v3: the phone brand page goes from "Best of" straight to Sort / Filter and the grid (no category tiles). */
@media (max-width: 767.98px) { .v3-brand .v3b-section:has(.v3b-tiles) { display: none; } }