/* ==========================================================================
   UI VERSION: brand-v1 — shop listing (all products, categories, search)
   Homepage cards (.dh-pc in home.css) in a 4-column grid, no sidebar.
   Quiet controls, hairline borders, one accent (after the "Claude style" design system).
   Roll back: UI_VERSION=classic.
   ========================================================================== */
body:has(.de-shop) { background: #F5F0E8; }
.de-shop { background: #F5F0E8; padding-bottom: 96px; }
.de-shop-head { padding: 56px 0 8px; }
.de-shop-head .dh-kicker { margin-bottom: 10px; }
.de-shop-titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.de-shop-titlebar h1 { margin: 0; }
.de-shop-count { margin: 10px 0 0; color: var(--muted); font-size: 15px; }

.de-shop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.de-search { position: relative; display: flex; align-items: center; margin: 0; }
.de-search svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.de-search input { width: 280px; max-width: 100%; height: 46px; padding: 0 16px 0 42px; border: 1px solid #DEDCD1; border-radius: 10px; background: #fff;
    color: var(--ink); font: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.de-search input::placeholder { color: #8F8579; }
.de-select { margin: 0; }
.de-select select { height: 46px; padding: 0 38px 0 14px; border: 1px solid #DEDCD1; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2315120E' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    -webkit-appearance: none; appearance: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.de-search input:focus, .de-select select:focus { outline: 0; border-color: #D98A5F; box-shadow: 0 0 0 3px rgb(196 81 28 / .14); }
.de-filter-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid #CFC4B5; border-radius: 10px;
    background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.de-filter-btn:hover { border-color: var(--ink); }
.de-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.de-shop-cats { justify-content: flex-start; margin: 28px 0 0; padding-bottom: 4px; }
.de-shop-cats .dh-tab { text-decoration: none; display: inline-flex; align-items: center; }

.de-shop-body { padding-top: 36px; }
.de-shop .dh-grid { gap: 48px 24px; }
/* the homepage shows 4 cards per row on phones; the shop shows them all */
.de-shop .dh-grid > .dh-pc:nth-child(n) { display: flex; }

/* pagination (Bootstrap markup from ->links()) */
.de-shop-pages { margin-top: 64px; display: flex; justify-content: center; }
.de-shop-pages .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.de-shop-pages .page-link { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px;
    border: 1px solid #DEDCD1 !important; border-radius: 10px !important; background: #fff; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.de-shop-pages .page-link:hover { border-color: var(--ink) !important; color: var(--ink); background: #fff; }
.de-shop-pages .page-item.active .page-link { background: var(--ink); border-color: var(--ink) !important; color: #fff; }
.de-shop-pages .page-item.disabled .page-link { color: #A79D91; background: transparent; }
.de-shop-pages nav > div:first-child, .de-shop-pages p.small { display: none; } /* Tailwind-style summary text, if present */

.de-empty { max-width: 560px; margin: 24px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }

/* filters panel */
.de-filters { --bs-offcanvas-width: 380px; background: #FBF8F3; border-left: 1px solid #E8E0D4 !important; font-family: var(--body, "Inter", sans-serif); }
.de-filters .offcanvas-header { border-bottom: 1px solid #E8E0D4; padding: 20px 24px; }
.de-filters .offcanvas-title { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin: 0; color: #15120E; }
.de-filters .offcanvas-body { padding: 24px; }
.de-f-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9C3D12; margin: 0 0 12px; }
.de-f-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 2px; }
.de-f-list a { display: block; padding: 9px 12px; border-radius: 8px; color: #15120E; text-decoration: none; font-weight: 500; }
.de-f-list a:hover { background: #EFE8DE; }
.de-f-list a.on { background: #15120E; color: #fff; }
.de-f-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.de-f-tags a { padding: 8px 12px; border: 1px solid #CFC4B5; border-radius: 999px; color: #15120E; text-decoration: none; font-size: 13.5px; font-weight: 500; background: #fff; }
.de-f-tags a:hover { border-color: #15120E; }
.de-f-tags a.on { background: #15120E; border-color: #15120E; color: #fff; }

@media (max-width: 991.98px) {
    .de-shop-tools { width: 100%; }
    .de-search { flex: 1 1 100%; } .de-search input { width: 100%; }
    .de-select, .de-filter-btn { flex: 1 1 0; } .de-select select { width: 100%; }
}
@media (max-width: 767.98px) {
    .de-shop-head { padding-top: 32px; }
    .de-shop-cats { flex-wrap: nowrap; margin-top: 20px; }
    .de-shop .dh-grid { gap: 28px 12px; }
}
@media (max-width: 575.98px) {
    .de-select:has(select[name="per_page"]) { display: none; }   /* still submitted; 12 per page on phones */
    .de-select select { font-size: 14px; }
}