/* BAMBOO shop and category pages */

/* ---------- Page head (shop) ---------- */
.page-head { padding-top: calc(var(--header-h) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(28px, 4vw, 56px); }
.page-head h1 { margin-bottom: 0.25em; }

/* ---------- Category hero ---------- */
.cat-hero {
  position: relative; display: flex; align-items: flex-end; min-height: 56vh; overflow: hidden;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(36px, 6vw, 80px);
  border-bottom: 1px solid var(--c-line);
  background: radial-gradient(ellipse 55% 80% at 80% 45%, color-mix(in srgb, var(--c-accent) 11%, transparent), transparent 65%), var(--c-bg);
}
.cat-hero--feature { min-height: 82vh; }
.cat-hero__bg {
  position: absolute; inset: 0; opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 85%);
}
.cat-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-hero__mark { position: absolute; right: -4vw; top: 50%; width: min(58vw, 720px); transform: translateY(-50%); color: var(--c-accent); opacity: 0.08; }
.cat-hero__mark .logo-mark { width: 100%; height: auto; }
.cat-hero__mark .logo-word { display: none; }
.cat-hero__inner { position: relative; z-index: 2; }
.cat-hero h1 { margin-bottom: 0.15em; font-size: clamp(3.4rem, 11vw, 9rem); line-height: 0.92; }
.cat-hero--feature h1 { font-size: clamp(4.5rem, 15vw, 13rem); }
.cat-hero__count { margin: 1.4em 0 0; font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-accent); }

/* ---------- Spotlight (Sofas and Beds) ---------- */
.spotlight { padding-top: clamp(56px, 8vw, 120px); }
.spotlight__title { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1em; }
.spotlight__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 32px); }

/* ---------- Filters ---------- */
.shop { padding-block: clamp(32px, 5vw, 72px) var(--section-space); }
.filters { display: grid; gap: 22px; margin-bottom: clamp(28px, 4vw, 52px); padding-bottom: 28px; border-bottom: 1px solid var(--c-line); }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.field--search { flex: 1 1 280px; }
.field--select { display: flex; align-items: center; gap: 12px; }
.field label, .filters__label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }

.filters input[type='search'], .filters input[type='number'], .filters select {
  width: 100%; padding: 14px 18px; color: var(--c-text); font: inherit; font-size: 0.95rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; outline: none;
  transition: border-color 0.3s;
}
.filters input:focus, .filters select:focus { border-color: var(--c-accent); }
.filters select {
  width: auto; padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f5b800' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.filters select option { background: var(--c-surface); color: var(--c-text); }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: var(--c-beige); }
.check input { width: 18px; height: 18px; accent-color: var(--c-accent); }

.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; inset: 0; }
.pill span {
  display: inline-block; padding: 10px 20px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--c-line); border-radius: 999px; transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pill small { margin-left: 6px; opacity: 0.6; font-size: 0.72rem; }
.pill:hover span { border-color: var(--c-accent); }
.pill input:checked + span { background: var(--c-accent); border-color: var(--c-accent); color: #0a0a0a; }
.pill input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.filters__price { display: flex; align-items: center; gap: 12px; }
.filters__price input { width: 130px; }
.filters__actions { display: flex; align-items: center; gap: 24px; }
.filters__reset { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); border-bottom: 1px solid var(--c-line); }
.filters__reset:hover { color: var(--c-accent); border-color: var(--c-accent); }
.js .filters__apply { display: none; }

/* ---------- Results ---------- */
.results { transition: opacity 0.3s; }
.results[aria-busy='true'] { opacity: 0.45; pointer-events: none; }
.results__head { margin-bottom: 24px; }
.results__count { margin: 0; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-muted); }

.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px) clamp(16px, 2vw, 32px); }

/* ---------- Product card ---------- */
.p-card { position: relative; }
.p-card__link { display: block; }
.p-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--c-line); transition: border-color 0.4s; }
.p-card--large .p-card__media { aspect-ratio: 16 / 11; }
.p-card__link:hover .p-card__media, .p-card__link:focus-visible .p-card__media { border-color: var(--c-accent); }
.p-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), opacity 0.6s; }
.p-card__img--hover { opacity: 0; }
.p-card__link:hover .p-card__img--hover { opacity: 1; }
.p-card__link:hover .p-card__img { transform: scale(1.05); }
.p-card__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c-accent); opacity: 0.2; transition: opacity 0.5s, transform 1.2s var(--ease-out); }
.p-card__ph .logo-mark { width: 34%; height: auto; }
.p-card__ph .logo-word { display: none; }
.p-card__link:hover .p-card__ph { opacity: 0.38; transform: scale(1.08); }

.p-card__badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  padding: 6px 12px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 999px; background: rgba(10, 10, 10, 0.78); border: 1px solid var(--c-line); color: var(--c-cream);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.chip--new { background: var(--c-accent); border-color: transparent; color: #0a0a0a; }
.chip--sale { background: var(--c-cream); border-color: transparent; color: #0a0a0a; }
.chip--out { color: var(--c-muted); }

.p-card__body { padding: 20px 2px 0; }
.p-card__cat { margin: 0 0 6px; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-accent); }
.p-card__name { margin: 0 0 8px; font-size: clamp(1.5rem, 2vw, 1.9rem); transition: color 0.3s; }
.p-card__link:hover .p-card__name { color: var(--c-accent); }
.p-card--large .p-card__name { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.p-card__desc {
  margin: 0 0 14px; color: var(--c-muted); font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p-card__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0; }
.p-card__price { display: inline-flex; align-items: baseline; gap: 10px; }
.p-card__now { font-family: var(--font-heading); font-size: 1.4rem; color: var(--c-cream); }
.p-card__was { font-size: 0.9rem; color: var(--c-muted); }
.p-card__stock { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-beige); }
.p-card__stock.is-low_stock { color: var(--c-accent); }
.p-card__stock.is-out_of_stock { color: var(--c-muted); }

/* ---------- Load more, pager, empty ---------- */
.load-more { display: none; margin-top: clamp(36px, 5vw, 64px); text-align: center; }
.js .load-more { display: block; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(36px, 5vw, 64px); }
.js .pager { display: none; }
.pager__link { min-width: 44px; padding: 10px 16px; text-align: center; font-size: 0.85rem; border: 1px solid var(--c-line); border-radius: 999px; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.pager__link:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pager__link.is-current { background: var(--c-accent); border-color: var(--c-accent); color: #0a0a0a; }
.empty { padding: clamp(56px, 8vw, 120px) 0; text-align: center; }
.empty .lead { margin-inline: auto; margin-bottom: 1.6em; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .p-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .p-grid, .spotlight__grid { grid-template-columns: 1fr; }
  .cat-hero--feature { min-height: 70vh; }
  .filters__price input { width: 100%; }
  .filters__price { width: 100%; }
  .field--select { width: 100%; justify-content: space-between; }
}

/* BAMBOO text categories: All / Sofas / Beds / Chairs / Tables */
.filters .pills{border:0;margin:18px 0 6px;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0}
.filters .pill{position:relative;cursor:pointer;background:none;border:0;padding:0;border-radius:0}
.filters .pill input{position:absolute;opacity:0;pointer-events:none}
.filters .pill span{display:inline-block;font-family:var(--font-display,inherit);font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.01em;text-transform:none;color:rgba(0,0,0,.38);padding:2px 0;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.filters .pill small{display:none}
.filters .pill:not(:last-child)::after{content:"/";font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:300;color:rgba(0,0,0,.25);margin:0 .5em}
.filters .pill:hover span{color:#111}
.filters .pill input:checked+span{color:#111;border-bottom-color:#f5c400}
.filters .pill input:focus-visible+span{outline:2px solid #f5c400;outline-offset:4px}
.filters__actions{margin-top:14px}
@media (max-width:560px){.filters .pill:not(:last-child)::after{margin:0 .3em}}


/* BAMBOO text categories - dark theme fix */
.filters .pills .pill span{background:none!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;box-shadow:none!important;padding:2px 0!important;color:rgba(245,236,220,.45)}
.filters .pills .pill:hover span{color:#fff}
.filters .pills .pill input:checked+span{background:none!important;color:#fff!important;border-bottom-color:#f5c400!important}
.filters .pill:not(:last-child)::after{color:rgba(245,236,220,.3)}