/* Shop, categories, free templates (layout: hero band, sidebar + grid, bento category tiles) */

/* ------------------------------------------------------------ shared hero band */
.shop-hero {
    padding-block: var(--space-5) var(--space-5);
    background: linear-gradient(180deg, #eef7f0 0%, #fafdfa 100%);
    border-bottom: 1px solid var(--color-border);
}
.shop-hero__crumb { margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.shop-hero__crumb a { color: var(--color-text-muted); }
.shop-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.shop-hero__sub { margin-top: var(--space-2); max-width: 60ch; color: var(--color-text-muted); }
@media (min-width: 768px) { .shop-hero { padding-block: var(--space-6); } }

.empty-state { max-width: 520px; }

/* ------------------------------------------------------------ shop search (hero) */
.shop-search { display: flex; width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; box-shadow: var(--shadow-sm); overflow: hidden; }
.shop-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(26, 133, 64, 0.14); }
.shop-search__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 1.1rem; border: 0; background: transparent; }
.shop-search__input:focus { outline: none; }
.shop-search__btn { flex: none; padding: 0 1.25rem; border: 0; font-weight: 700; color: #fff; background: var(--grad-brand, var(--color-primary)); cursor: pointer; }
.shop-search__btn:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------ shop layout: sidebar + results */
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (min-width: 900px) {
    .shop-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-6); }
    .shop-side { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}

.shop-side { display: flex; flex-direction: column; gap: var(--space-4); }
.side-block { padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.side-block__title { margin-bottom: var(--space-3); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

.side-list { display: flex; flex-direction: column; gap: 2px; }
.side-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: 0.4rem 0.7rem; border-radius: var(--radius-md); color: var(--color-text); font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.side-link:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.side-link.is-active { background: var(--color-primary); color: #fff; }
.side-link.is-empty:not(.is-active) { color: var(--color-text-muted); font-weight: 500; }
.side-link__count { flex: none; min-width: 1.6rem; padding: 0 0.45rem; font-size: 0.75rem; font-weight: 800; text-align: center; line-height: 1.5rem; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-muted); }
.side-link.is-active .side-link__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.side-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.9rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-text); text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.side-clear { align-self: flex-start; font-size: var(--text-sm); font-weight: 700; }

/* Phones: categories become a swipeable row so the products start higher up */
@media (max-width: 899px) {
    .side-list { flex-direction: row; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; }
    .side-list li { flex: none; }
    .side-link { white-space: nowrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; }
    .side-link.is-active { border-color: var(--color-primary); }
}

/* ------------------------------------------------------------ toolbar and chips */
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.shop-toolbar__count { color: var(--color-text-muted); }
.shop-toolbar__count strong { color: var(--color-text); }
.shop-sort { display: flex; align-items: center; gap: var(--space-2); }
.shop-sort__label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-muted); }
.shop-sort__select { width: auto; min-width: 190px; }
html.js .shop-sort__apply { display: none; }

.active-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.active-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; padding: 0 0.85rem; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); text-decoration: none; background: var(--color-primary-soft); border-radius: 999px; }
.active-chip:hover { background: var(--color-primary); color: #fff; }

/* Results use 3 columns beside the sidebar */
.shop-main .product-grid { gap: var(--space-4); }
@media (min-width: 1100px) { .shop-main .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------ categories: bento tiles */
.category-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
    .category-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); }
    .category-grid > li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
    .category-grid > li:nth-child(6) { grid-column: span 2; }
}
.category-grid > li { display: flex; }

.category-card {
    --tone: #1a8540; --tone-soft: #e6f4e8;
    position: relative; display: flex; flex: 1; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5); overflow: hidden; color: var(--color-text); text-decoration: none;
    background: var(--tone-soft); border: 1px solid transparent; border-radius: 24px;
    transition: transform 0.25s var(--ease, ease), box-shadow 0.25s var(--ease, ease), border-color 0.2s ease;
}
.category-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: var(--tone); opacity: 0.1; transition: transform 0.4s var(--ease, ease); }
a.category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--tone); color: var(--color-text); }
a.category-card:hover::after { transform: scale(1.5); }
.category-card__icon { width: 52px; height: 52px; padding: 12px; margin-bottom: var(--space-3); color: #fff; background: var(--tone); border-radius: 16px; box-sizing: border-box; }
.category-card__name { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; }
.category-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 34ch; }
.category-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-4); }
.category-card__count { font-size: var(--text-sm); font-weight: 800; color: var(--tone); }
.category-card__go { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-weight: 800; color: #fff; background: var(--tone); border-radius: 50%; transition: transform 0.25s var(--ease, ease); }
a.category-card:hover .category-card__go { transform: translateX(4px); }
.category-grid > li:nth-child(1) .category-card__name { font-size: 1.6rem; }
.category-grid > li:nth-child(1) .category-card__icon { width: 64px; height: 64px; padding: 15px; }

.tone-0 .category-card { --tone: #1a8540; --tone-soft: #e6f4e8; }
.tone-1 .category-card { --tone: #19212b; --tone-soft: #e9edf2; }
.tone-2 .category-card { --tone: #0f8a4f; --tone-soft: #e5f7ee; }
.tone-3 .category-card { --tone: #0b6a36; --tone-soft: #e0f1e5; }
.tone-4 .category-card { --tone: #2e994b; --tone-soft: #e8f6ec; }
.tone-5 .category-card { --tone: #8a5d00; --tone-soft: #fff3da; }
.category-card.is-soon { --tone: #8a86a8; --tone-soft: #f3f2f8; opacity: 0.85; }
.category-card.is-soon .category-card__icon { background: #b9b6cf; }

/* ------------------------------------------------------------ free templates hero */
.free-hero { padding-block: var(--space-6); background: radial-gradient(900px 380px at 90% 0%, #dff7e8 0%, rgba(223, 247, 232, 0) 60%), linear-gradient(180deg, #eef7f0 0%, #fafdfa 100%); border-bottom: 1px solid var(--color-border); }
.free-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .free-hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); } }
.free-hero .kicker { display: inline-block; margin-bottom: var(--space-2); padding: 0.2rem 0.8rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-success); background: var(--color-success-soft); border-radius: 999px; }
.free-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.free-hero__status { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.free-hero__status--ok { color: var(--color-success); background: var(--color-success-soft); }

.free-steps { display: flex; flex-direction: column; gap: var(--space-3); }
.free-step { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.free-step small { display: block; color: var(--color-text-muted); }
.free-step__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 800; color: #fff; background: var(--grad-brand, var(--color-primary)); border-radius: 12px; }