/*
 * Niwa site-specific layout.
 *
 * Loaded after mgy-tokens.css and mgy-components.css. Contains only what's
 * not in the shared MGY component library: the footer, the auth-page
 * wrapper, and any product-aware nav extensions.
 *
 * Footer styles intentionally mirror the static thegoodyearsproject.com footer
 * verbatim so there's no visual seam between / (static) and /app/* (niwa).
 * If you change one, change the other.
 */

/* ---------- Form element defaults ----------
 *
 * Mirrors `.mgy-input` and `.mgy-label` from mgy-components.css so every
 * bare <input>, <select>, <textarea>, and <label> inside a <form> renders
 * with the MGY look — without requiring per-template class additions.
 * Tailwind's preflight strips all browser defaults, so without these rules
 * a bare <input> renders as plain text. Buttons stay class-based: use
 * .mgy-btn / .mgy-btn-ghost / etc. for buttons. Checkboxes and radios are
 * excluded so layouts like `.toggle-row` and inline `<label><input
 * type="checkbox">` survive.
 *
 * Templates that explicitly add `.mgy-input` / `.mgy-label` continue to
 * work — the styles match exactly.
 */

form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="time"],
form input[type="month"],
form input[type="week"],
form input[type="search"],
form input:not([type]),
form select,
form textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--mgy-text-base);
    border: 1px solid var(--mgy-border-medium);
    border-radius: var(--mgy-radius-md);
    font-family: inherit;
    background: var(--mgy-bg-card);
    color: var(--mgy-text-body);
    outline: none;
    box-sizing: border-box;
    margin-bottom: var(--mgy-space-md);
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="number"]:focus,
form input[type="password"]:focus,
form input[type="tel"]:focus,
form input[type="url"]:focus,
form input[type="date"]:focus,
form input[type="datetime-local"]:focus,
form input[type="time"]:focus,
form input[type="month"]:focus,
form input[type="week"]:focus,
form input[type="search"]:focus,
form input:not([type]):focus,
form select:focus,
form textarea:focus {
    border-color: var(--mgy-brand);
}

/* Selects: kill the native dropdown control (which adds extra internal
 * height on every platform), then draw our own chevron so heights line up
 * with text inputs to the pixel. */
form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5E58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

form label {
    display: block;
    font-size: var(--mgy-text-sm);
    font-weight: var(--mgy-weight-medium);
    color: var(--mgy-text-heading);
    margin-bottom: var(--mgy-space-xs);
}

/* Inline checkbox/radio labels stay inline so `<label><input type="checkbox">
 * Some text</label>` doesn't fall apart. */
form label:has(> input[type="checkbox"]),
form label:has(> input[type="radio"]),
form label:has(> .mgy-checkbox),
form label:has(> .mgy-toggle) {
    display: inline-flex;
    align-items: center;
    gap: var(--mgy-space-sm);
    font-weight: var(--mgy-weight-normal);
    color: var(--mgy-text-body);
    margin-bottom: 0;
}


/* ---------- Layout ---------- */

.niwa-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.niwa-main {
    flex: 1;
    padding-top: var(--mgy-space-xl);
    padding-bottom: var(--mgy-space-2xl);
}

/* ---------- Auth pages (login, signup, password reset, etc.) ---------- */

.niwa-auth {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--mgy-space-2xl) var(--mgy-space-md);
}
.niwa-auth-card {
    background: var(--mgy-bg-card);
    border: 1px solid var(--mgy-border-light);
    border-radius: 10px;
    padding: var(--mgy-space-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}
.niwa-auth-card h1 {
    text-align: center;
    margin-bottom: var(--mgy-space-xs);
}
.niwa-auth-card .niwa-auth-tagline {
    text-align: center;
    color: var(--mgy-text-light);
    margin-bottom: var(--mgy-space-lg);
}
.niwa-auth-alt {
    text-align: center;
    margin-top: var(--mgy-space-lg);
    color: var(--mgy-text-muted);
    font-size: 14px;
}

/* ---------- Account dropdown trigger (niwa-only — static site has no account state) ---------- */

.niwa-account-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mgy-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.niwa-account-avatar:hover { background: var(--mgy-brand-hover); }

/* ---------- Product-aware nav (when inside a product) ----------

   When the user is inside a product, the navbar's left-side brand area
   swaps from the parent sunflower to the product's hero icon + name +
   a ▾ caret. The caret opens a switcher dropdown listing the user's
   accessible tools. See templates/base.html (navbar is inlined there) and
   templates/_product_switcher.html.

   The legacy `.niwa-product-label` (uppercase pill that prefixed nav items)
   is kept for back-compat with any inline usage but is no longer rendered
   by the navbar — the hero icon now carries the product identity. */

.niwa-product-label {
    color: var(--mgy-text-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: var(--mgy-space-sm);
    padding-right: var(--mgy-space-sm);
    border-right: 1px solid var(--mgy-border-light);
}

/* Lift the navbar above the TYLP sidebar (z-index: 50). The shared
   mgy-components.css sets `.mgy-navbar { z-index: 20 }`, which creates a
   stacking context that traps the product-switcher dropdown beneath the
   sidebar even though the dropdown's own z-index is 200. */
.mgy-navbar { z-index: 100; }

/* Brand area when in-product: hero icon next to product name, then ▾ caret. */
.niwa-product-switcher {
    display: flex;
    align-items: center;
    gap: var(--mgy-space-xs);
    flex-shrink: 0;
}
.niwa-product-brand {
    /* extends .mgy-navbar-brand — slightly tighter font (we already have a
       distinct icon doing brand work, so keep the wordmark calmer than the
       full sunflower-only mark used on hub pages) */
    font-size: var(--mgy-text-lg);
    font-weight: var(--mgy-weight-semibold);
}
.niwa-product-hero {
    /* match the height set on .mgy-navbar-brand img in mgy-components.css */
    height: 36px;
    width: auto;
}
.niwa-product-switcher-caret {
    padding: var(--mgy-space-xs);
    color: var(--mgy-text-muted);
    border-radius: var(--mgy-radius-sm);
    transition: color 150ms ease, background 150ms ease;
}
.niwa-product-switcher-caret:hover {
    color: var(--mgy-text-heading);
    background: var(--mgy-bg-warm);
}
/* Rotate the caret 180° when the dropdown is open. */
.niwa-product-switcher.is-open .niwa-product-switcher-caret svg {
    transform: rotate(180deg);
    transition: transform 150ms ease;
}
.niwa-product-switcher-menu {
    /* override mgy-dropdown-content's right:0 — anchor the menu to the left
       of the brand area instead, since the trigger sits on the left side
       of the navbar. */
    left: 0;
    right: auto;
    min-width: 280px;
    padding: var(--mgy-space-sm) 0;
}

/* Switcher menu: header (current product), list of others, all-tools link. */
.niwa-switcher-header {
    display: flex;
    align-items: center;
    gap: var(--mgy-space-sm);
    padding: var(--mgy-space-xs) var(--mgy-space-md) var(--mgy-space-sm);
}
.niwa-switcher-current-icon {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}
.niwa-switcher-current-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.niwa-switcher-current-name {
    color: var(--mgy-text-heading);
    font-weight: var(--mgy-weight-semibold);
    font-size: var(--mgy-text-base);
}
.niwa-switcher-current-here {
    color: var(--mgy-text-faint);
    font-size: var(--mgy-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.niwa-switcher-section-label {
    padding: var(--mgy-space-xs) var(--mgy-space-md);
    color: var(--mgy-text-muted);
    font-size: var(--mgy-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--mgy-weight-medium);
}
.niwa-switcher-item {
    /* extends mgy-dropdown-content a — adds an icon column */
    display: flex !important;
    align-items: center;
    gap: var(--mgy-space-sm);
}
.niwa-switcher-item-icon {
    height: 24px;
    width: auto;
    flex-shrink: 0;
}
.niwa-switcher-item-name {
    flex: 1;
    color: var(--mgy-text-body);
}
.niwa-switcher-all-tools {
    /* extends mgy-dropdown-content a — emphasised "see everything" footer */
    color: var(--mgy-brand) !important;
    font-weight: var(--mgy-weight-medium);
}

/* Hide nav_items on mobile when the active product has its own internal nav
   (BoH bottom tabs, TYLP sidebar). Avoids two redundant primary navs on small
   screens. The desktop styles still show them for orientation. */
@media (max-width: 768px) {
    .mgy-navbar-links.niwa-suppress-on-mobile { display: none; }
}

/* Mobile menu accents (hamburger drawer). */
.niwa-mobile-divider {
    height: 1px;
    background: var(--mgy-border-light);
    margin: var(--mgy-space-sm) 0;
}
.niwa-mobile-logout {
    background: none;
    border: none;
    padding: var(--mgy-space-sm) 0;
    color: var(--mgy-text-muted);
    cursor: pointer;
    font: inherit;
}
.niwa-mobile-logout:hover { color: var(--mgy-text-heading); }

/* ---------- Cross-app linking (breadcrumb + continuation CTA) ----------

   When one product hands off to another (TYLP → Values Finder, etc.), the
   destination renders these to surface "where you came from" and "go back
   when you're done". Both are silent no-ops if `?return_to` is missing.
   See templates/_return_breadcrumb.html and _return_continuation.html. */

.niwa-return-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: var(--mgy-space-xs);
    padding: var(--mgy-space-xs) var(--mgy-space-md);
    margin-bottom: var(--mgy-space-md);
    background: var(--mgy-bg-warm);
    border: 1px solid var(--mgy-border-light);
    border-radius: 999px;
    color: var(--mgy-text-muted);
    font-size: var(--mgy-text-sm);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.niwa-return-breadcrumb:hover {
    background: var(--mgy-brand-light);
    color: var(--mgy-text-heading);
}

.niwa-return-continuation {
    margin-top: var(--mgy-space-2xl);
    text-align: center;
}

/* ---------- Card animations (compass / hourglass) ----------
   The .compass and .hourglass partials use width: 100%; height: 100% on the
   outer element with absolutely-positioned children, so the parent must
   provide explicit dimensions or it collapses to 0×0. Mirrors the same rule
   from thegoodyearsproject.com/static/css/site.css. */

.mgy-card-icon .compass,
.mgy-card-icon .hourglass,
.mgy-card-icon .map-anim,
.mgy-card-icon .piggy-bank-anim {
    width: 120px;
    height: 120px;
}

/* ---------- Marketing pages ---------- */

.section {
    padding: 64px 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.section-heading {
    text-align: center;
    margin-bottom: 48px;
}
.section-heading h2 {
    margin-top: 0;
    font-size: 32px;
}
.section-heading p {
    color: var(--mgy-text-muted);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}
.section-bg {
    background: var(--mgy-bg-warm);
    padding: 64px 24px;
}
.product-section-alt {
    background: var(--mgy-bg-warm);
    padding: 64px 24px;
}
.product-section-content {
    max-width: 1080px;
    margin: 0 auto;
}
.cinematic-header {
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 0;
}
.cinematic-header img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 400px;
}
.testimonials {
    padding: 64px 24px;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
.testimonials h2 {
    margin-top: 0;
}
.faq-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 64px 24px;
}
.faq-section h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 32px;
}
.related-products {
    padding: 64px 24px;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
.related-products h2 {
    margin-top: 0;
    margin-bottom: 8px;
}
.related-subtitle {
    color: var(--mgy-text-muted);
    margin-bottom: 32px;
}
.coming-soon-signup {
    background: var(--mgy-bg-warm);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    max-width: var(--mgy-width-wide);
    margin: 0 auto;
}
.coming-soon-signup h3 { margin-bottom: 8px; }
.coming-soon-signup p {
    color: var(--mgy-text-muted);
    margin-bottom: 20px;
}

.hero {
    text-align: center;
    padding: 24px 12px;
    margin: 40px auto 20px auto;
    max-width: 1000px;
    width: auto;
    border-radius: 20px;
}
.hero h1 {
    font-size: 48px;
    margin-bottom: 16px;
    color: var(--mgy-text-heading);
}
.hero-tagline {
    font-size: 22px;
    color: var(--mgy-text-light);
    line-height: 1.5;
    max-width: 800px;
    margin: 0 auto 32px auto;
}
.hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.lead-body {
    font-size: 18px;
    max-width: 640px;
    margin: 0 auto 32px auto;
    color: var(--mgy-text-light);
    line-height: 1.6;
    text-align: left;
}

.journey-stage {
    margin-bottom: 48px;
}
.journey-stage h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 4px;
}
.stage-desc {
    color: var(--mgy-text-muted);
    margin-bottom: 20px;
    font-size: 16px;
}

.empathy-block {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0;
    text-align: center;
}
.empathy-lead {
    font-size: 24px;
    font-weight: 400;
    color: var(--mgy-text-heading);
    line-height: 1.4;
    margin-bottom: 16px;
}
.empathy-body {
    font-size: 18px;
    color: var(--mgy-text-light);
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
}

.product-hero {
    padding: 64px 24px;
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.product-hero-content .product-hero-feeling {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mgy-brand);
    font-weight: 600;
    margin-bottom: 12px;
}
.product-hero-content h1 {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 16px;
}
.product-hero-content .product-hero-desc {
    font-size: 19px;
    color: var(--mgy-text-light);
    line-height: 1.6;
    margin-bottom: 24px;
}
.product-hero-content .product-hero-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--mgy-text-heading);
    margin-bottom: 24px;
}
.product-hero-content .product-hero-price .price-note {
    font-size: 14px;
    font-weight: 400;
    color: var(--mgy-text-muted);
}
.product-hero-content .product-hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.product-hero-image img {
    width: 100%;
}
.product-hero-image .compass,
.product-hero-image .hourglass,
.product-hero-image .map-anim,
.product-hero-image .piggy-bank-anim {
    width: 100%;
    aspect-ratio: 1;
}
.product-hero-image .placeholder-img {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--mgy-bg-warm);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mgy-text-faint);
    font-size: 14px;
}

.quiz-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center;
}
.quiz-question {
    margin-bottom: 32px;
}
.quiz-question h2 {
    margin-top: 0;
    font-size: 24px;
}
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-option {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: var(--mgy-bg-card);
    border: 2px solid var(--mgy-border-light);
    border-radius: 10px;
    text-align: left;
    font-size: 16px;
    font-family: inherit;
    color: var(--mgy-text-body);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.quiz-option:hover,
.quiz-option.selected {
    border-color: var(--mgy-brand);
    background: var(--mgy-brand-light);
}
.quiz-result {
    background: var(--mgy-bg-warm);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}
.quiz-result h3 { margin-bottom: 8px; }
.quiz-result p {
    color: var(--mgy-text-light);
    margin-bottom: 20px;
}

.post-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 80px 24px;
}
.post-hero-image {
    margin: 24px -24px 32px -24px;
    max-width: calc(100% + 48px);
}
.post-hero-image img { width: 100%; border-radius: 0; }
.post-category {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mgy-brand);
    font-weight: 600;
    margin-bottom: 8px;
}
.post-title {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 12px;
}
.post-meta {
    color: var(--mgy-text-muted);
    font-size: 15px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.post-meta .post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}
.post-meta .post-author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.post-meta .post-author-name {
    font-weight: 500;
    color: var(--mgy-text-body);
}
.post-body {
    font-size: 18px;
    line-height: 1.8;
}
.post-body h2 { font-size: 24px; margin-top: 48px; margin-bottom: 16px; }
.post-body h3 { font-size: 20px; margin-top: 36px; margin-bottom: 12px; }
.post-body p { margin-bottom: 20px; }
.post-body ul, .post-body ol { margin-bottom: 20px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; line-height: 1.6; }
.post-body blockquote {
    border-left: 3px solid var(--mgy-brand);
    padding-left: 20px;
    margin: 24px 0;
    color: var(--mgy-text-light);
    font-style: italic;
}
.post-body img { border-radius: 8px; margin: 24px 0; }
.post-product-callout { margin: 48px 0; }
.post-product-callout .post-product-callout-inner {
    background: var(--mgy-bg-warm);
    border-radius: 10px;
    padding: 24px;
}
.post-product-callout .post-product-callout-inner h3 { font-size: 17px; margin-bottom: 8px; }
.post-product-callout .post-product-callout-inner p { font-size: 15px; color: var(--mgy-text-light); margin-bottom: 16px; }
.post-signup { margin-top: 48px; }

.page {
    padding: 48px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.page h1 { margin-bottom: 24px; }
.page h2 { margin-top: 40px; margin-bottom: 12px; }
.page h3 { margin-top: 32px; margin-bottom: 8px; }
.contact-email { font-size: 22px; font-weight: 500; margin: 24px 0 32px 0; }

/* ---------- Footer ---------- */

.mgy-footer {
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}
.mgy-footer-top {
    display: flex;
    justify-content: space-between;
    padding: 48px 0;
    border-top: 1px solid var(--mgy-border-light);
    gap: 48px;
}
.mgy-footer-brand {
    max-width: 4000px;
}
.mgy-footer-container {
    margin: 0 auto;
    display: flex;
    gap: var(--mgy-space-2xl);
}
.mgy-footer-tagline, .mgy-copyright {
    color: var(--mgy-text-muted);
    font-size: 14px;
    margin-top: 8px;
    white-space: nowrap;
}
.mgy-copyright {
    margin-top: 4rem;
}
.mgy-footer-columns {
    display: flex;
    gap: 48px;
}
.mgy-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mgy-footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--mgy-text-heading);
    margin-top: 8px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mgy-footer-col a {
    color: var(--mgy-text-muted);
    font-size: 14px;
    text-decoration: none;
}
.mgy-footer-col a:hover {
    color: var(--mgy-text-heading);
    text-decoration: none;
}
.mgy-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 24px;
    padding: 24px 0;
    border-top: 1px solid var(--mgy-border-light);
    font-size: 14px;
    color: var(--mgy-text-faint);
}
.mgy-footer-bottom a { color: var(--mgy-text-faint); }
.mgy-footer-bottom a:hover { color: var(--mgy-text-light); }
.mgy-footer-links {
    display: flex;
    gap: 16px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .product-hero {
        grid-template-columns: 1fr;
        padding-top: 32px;
    }
    .product-hero .product-hero-image {
        order: -1;
    }
    .mgy-footer-top {
        flex-direction: column;
    }
    .mgy-footer-brand {
        max-width: 100%;
    }
    .mgy-footer-container {
        flex-direction: column;
    }
    .mgy-copyright {
        margin-top: 1rem;
    }
}
@media (max-width: 600px) {
    .hero {
        padding: 48px 16px 32px 16px;
    }
    .hero h1 { font-size: 32px; }
    .hero-tagline { font-size: 18px; }
    .product-hero .product-hero-content h1 { font-size: 28px; }
    .mgy-footer-columns {
        flex-direction: column;
        gap: 24px;
    }
    .mgy-footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    .coming-soon-signup {
        padding: 32px 20px;
    }
}

/* ── Bank of Health store badges ──────────────────────────────────────────
   The public marketing hero + footer show "Download on the App Store" and
   "Get it on Google Play" badges (_store_badges.html). Both source assets are
   tight-cropped (Apple SVG is edge-to-edge; google-play-badge-tight.png has
   its baked-in transparent clear-space trimmed off), so a single shared pill
   height renders them at matching size. Layout/gap is handled by MGY flex
   utilities on the wrapper. */
.boh-store-badge { height: 40px; width: auto; display: block; }
/* The PWA "Launch as web app" badge is a <button> (install is a browser API,
   not a link) — strip button chrome so it sits identically to the anchor
   badges. Shown/hidden by the marketing hero's progressive-enhancement JS. */
.boh-store-badge-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.boh-store-badge-btn[hidden] { display: none; }