/* Sneaker brand pages (/sell-*-sneakers-nyc/, /sell-birkenstock-nyc/).
   Loaded after we-buy-category.css. Material-style surfaces in EVB orange. */

.sbp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sbp-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #e7d9cb; background: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #3d3730; }
.sbp-chips svg { width: 16px; height: 16px; color: #ea580c; flex-shrink: 0; }

.sbp-hero { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #f2ede6; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.08); }
.sbp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-hero figcaption { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(17,15,13,0.78); color: #fff; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sbp-hero figcaption::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f97316; }
@media (min-width: 768px) { .wb-intro .sbp-hero { flex: 0 0 380px; } }

.sbp-sec { margin: 0 -20px; padding: 44px 20px; background: #fff; border-top: 1px solid #efe7de; }
.sbp-sec--tint { background: #f8f5f0; }
.sbp-inner { max-width: 1100px; margin: 0 auto; }
.sbp-sec h2, .sbp-panel h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(20px, 3.6vw, 28px); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; color: #111; }
.sbp-panel h2 { font-size: clamp(18px, 3vw, 22px); }
.sbp-intro { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7; color: #4a4540; margin: 0 0 24px; max-width: 740px; }
.sbp-intro a, .sbp-panel a, .sbp-model a, .sbp-factor a { color: #c2410c; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sbp-intro a:hover, .sbp-panel a:hover, .sbp-model a:hover, .sbp-factor a:hover { color: #9a3412; }

.sbp-models { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; }
@media (min-width: 640px) { .sbp-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .sbp-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sbp-models--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sbp-model { display: flex; flex-direction: column; background: #fff; border: 1px solid #e9e1d8; border-radius: 16px; overflow: hidden; scroll-margin-top: 96px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.sbp-model--text { border-top: 3px solid #f97316; }
.sbp-model:target { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.22); }
.sbp-model-media { aspect-ratio: 4 / 3; background: #f2ede6; overflow: hidden; }
.sbp-model-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-model-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.sbp-model h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; color: #111; }
.sbp-model p { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.6; color: #4a4540; margin: 0; }
.sbp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.sbp-tags li { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; line-height: 1; color: #9a3412; background: #fff1e6; border-radius: 6px; padding: 6px 8px; }

.sbp-factors { margin: 0; border: 1px solid #e9e1d8; border-radius: 16px; background: #fff; overflow: hidden; }
.sbp-factor { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; border-top: 1px solid #f0e9e1; }
.sbp-factor:first-child { border-top: 0; }
.sbp-factor dt { display: flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 800; color: #111; }
.sbp-factor dt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f97316; flex-shrink: 0; }
.sbp-factor dd { margin: 0; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.6; color: #4a4540; }
@media (min-width: 720px) { .sbp-factor { grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; } }
.sbp-note { margin: 14px 0 0; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.6; color: #6b6158; }

.sbp-split { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .sbp-split { grid-template-columns: 1fr 1fr; gap: 20px; } }
.sbp-panel { background: #fff; border: 1px solid #e9e1d8; border-radius: 20px; padding: 22px 22px 20px; }
.sbp-panel--tonal { background: #fff7ed; border-color: #fed7aa; }
.sbp-panel p { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.65; color: #4a4540; margin: 0 0 12px; }
.sbp-checks { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.sbp-checks li { position: relative; padding-left: 30px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.55; color: #3d3730; }
.sbp-checks li::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #f97316 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

.sbp-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sbp-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #e3d6c8; background: #fff; color: #1c1b1a; font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.sbp-links a:hover { border-color: #f97316; color: #c2410c; background: #fff7ed; }
.sbp-links a:focus-visible, .sbp-model a:focus-visible { outline: 3px solid #f97316; outline-offset: 2px; }
.sbp-links-label { margin: 22px 0 10px; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #8a7d70; }
.sbp-links-label:first-child { margin-top: 0; }

.sw-faq { padding: 48px 20px; background: #f8f5f0; }
.sw-faq-inner { max-width: 1000px; margin: 0 auto; }
.sw-faq-head { text-align: center; margin-bottom: 32px; }
.sw-faq-head h2 { font-size: clamp(20px, 4vw, 28px); font-weight: 900; margin: 0 0 6px; }
.sw-faq-head p { font-size: 13px; color: #888; margin: 0; }
.sw-faq-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .sw-faq-grid { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } }
.sw-faq-card { background: #fff; border: 1.5px solid rgba(249,115,22,0.15); border-radius: 12px; overflow: hidden; transition: border-color 0.2s; }
.sw-faq-card:hover { border-color: rgba(249,115,22,0.35); }
.sw-faq-card summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: #111; cursor: pointer; list-style: none; transition: color 0.2s; }
.sw-faq-card summary::-webkit-details-marker { display: none; }
.sw-faq-card summary::after { content: '+'; flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(249,115,22,0.08); font-size: 16px; font-weight: 600; color: #f97316; transition: all 0.2s; }
.sw-faq-card[open] summary::after { content: '\2212'; background: #f97316; color: #fff; }
.sw-faq-card summary:hover { color: #f97316; }
.sw-faq-card .sw-faq-ans { padding: 0 18px 16px; font-size: 13px; color: #555; line-height: 1.6; }
.sw-faq-card .sw-faq-ans a { color: #f97316; text-decoration: none; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .sbp-model, .sbp-links a, .sw-faq-card, .sw-faq-card summary::after { transition: none; } }