:root {
        --brand-50: #ecfdf5;
        --brand-100: #dcfce7;
        --brand-500: #16a34a;
        --brand-600: #15803d;
        --brand-700: #166534;
        --shop-accent: var(--brand-600);
        --shop-accent-hover: var(--brand-700);
        --shop-border: #e5e7eb;
        --shop-muted: #6b7280;
        --shop-ink: #111827;
      }
      html {
        overflow-x: clip;
      }
      body {
        font-family: "DM Sans", system-ui, -apple-system, sans-serif;
        background: #f9fafb;
        color: var(--shop-ink);
        overscroll-behavior-x: none;
      }
      .skip-link {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        top: 0;
        left: 0;
        z-index: 2000;
        background: var(--brand-600);
        color: #fff;
        font-weight: 600;
      }
      .skip-link:focus,
      .skip-link:focus-visible {
        clip: auto;
        clip-path: none;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        padding: 0.5rem 0.875rem;
        border-radius: 0 0 8px 0;
      }
      .hero-landing {
        background: linear-gradient(165deg, var(--brand-50) 0%, #f0fdf4 35%, #f9fafb 100%);
        border-bottom: 1px solid var(--shop-border);
      }
      .hero-lead {
        font-size: 1.05rem;
      }
      .hero-landing-visual {
        position: relative;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
      }
      .hero-landing-visual img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 24px;
        box-shadow: 0 28px 64px rgba(21, 128, 61, 0.12), 0 10px 28px rgba(17, 24, 39, 0.06);
        border: none;
      }
      @media (min-width: 992px) {
        .hero-landing-visual {
          margin-right: 0;
          margin-left: auto;
        }
      }
      .btn-shop-primary {
        --bs-btn-bg: transparent;
        --bs-btn-border-color: transparent;
        --bs-btn-hover-bg: transparent;
        --bs-btn-hover-border-color: transparent;
        --bs-btn-active-bg: transparent;
        --bs-btn-active-border-color: transparent;
        --bs-btn-color: #fff;
        --bs-btn-hover-color: #fff;
        border-radius: 12px;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 45%, #15803d 100%);
        box-shadow: 0 6px 20px rgba(21, 128, 61, 0.28);
        transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
      }
      .btn-shop-primary:hover,
      .btn-shop-primary:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(21, 128, 61, 0.34);
        filter: saturate(1.04);
      }
      .btn-shop-primary:active {
        transform: translateY(0);
      }
      .btn-shop-ghost {
        --bs-btn-color: var(--brand-700);
        --bs-btn-border-color: transparent;
        --bs-btn-hover-color: var(--brand-700);
        --bs-btn-hover-bg: var(--brand-50);
        --bs-btn-hover-border-color: transparent;
      }
      .feature-card,
      .cat-tile,
      .trust-card {
        border: 1px solid var(--shop-border);
        border-radius: 14px;
        background: #fff;
        height: 100%;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
        transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease,
          background-color 0.15s ease;
      }
      .feature-card {
        padding: 1.1rem 1.15rem;
      }
      .feature-card:hover {
        border-color: #86efac;
        background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
        box-shadow: 0 10px 24px rgba(21, 128, 61, 0.14);
        transform: translateY(-1px);
      }
      .cat-tile {
        padding: 1rem 1.1rem;
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      .cat-tile:hover {
        border-color: #86efac;
        color: var(--brand-700);
        background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
        box-shadow: 0 10px 24px rgba(21, 128, 61, 0.14);
        transform: translateY(-1px);
      }
      .cat-tile .cat-tile-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--brand-50);
        color: var(--brand-700);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .cat-tile > span:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .cat-tile.cat-tile-all {
        border-style: solid;
        border-color: #bbf7d0;
        background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
        font-weight: 600;
      }
      .trust-card:hover {
        border-color: #86efac;
        background: linear-gradient(180deg, #ffffff 0%, #f7fcf8 100%);
        box-shadow: 0 10px 24px rgba(21, 128, 61, 0.14);
        transform: translateY(-1px);
      }
      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--brand-50);
        color: var(--brand-700);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.75rem;
      }
      .step-num {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        background: var(--brand-100);
        color: var(--brand-700);
        font-weight: 700;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .trust-card {
        padding: 1rem 1.1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
      }
      .trust-card .trust-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--brand-50);
        color: var(--brand-700);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .trust-card .trust-icon img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        display: block;
      }
      .home-hit-card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        scroll-snap-align: start;
        border-radius: 12px;
        border: 1px solid var(--shop-border);
        background: #fff;
        overflow: hidden;
        color: inherit;
        transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
      }
      .home-hit-card-link {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        text-decoration: none;
        color: inherit;
      }
      .home-hit-card:hover {
        border-color: var(--brand-500);
        box-shadow: 0 10px 28px rgba(21, 128, 61, 0.1);
        color: inherit;
        transform: translateY(-1px);
      }
      .home-hit-price-row {
        padding-right: 2.35rem;
      }
      .home-hit-quick-add {
        position: absolute;
        right: 0.35rem;
        bottom: 0.45rem;
        z-index: 2;
        width: 2.125rem;
        height: 2.125rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        border-radius: 999px;
        border: 1px solid var(--shop-border);
        background: #fff;
        color: #6b7280;
        line-height: 0;
        cursor: pointer;
        transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease,
          box-shadow 0.12s ease;
      }
      .home-hit-quick-add:hover {
        border-color: var(--brand-500);
        color: var(--brand-600, #15803d);
        background: var(--brand-50, #f0fdf4);
        box-shadow: 0 2px 8px rgba(21, 128, 61, 0.12);
      }
      .home-hit-quick-add:focus-visible {
        outline: 2px solid var(--brand-500);
        outline-offset: 2px;
      }
      .home-hit-quick-add:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
      }
      .home-hit-quick-add.is-done {
        border-color: var(--brand-500);
        color: var(--brand-600, #15803d);
        background: var(--brand-50, #f0fdf4);
      }
      .home-hit-thumb-wrap {
        aspect-ratio: 1;
        border-bottom: 1px solid var(--shop-border);
        background: #fafafa;
      }
      .home-hit-thumb {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .home-hits-strip {
        position: relative;
      }
      .home-hits-track {
        display: flex;
        gap: 0.75rem;
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding: 6px 0 12px;
        scroll-padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .home-hits-track::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      .home-hits-track .home-hit-col {
        flex: 0 0 clamp(130px, 42vw, 182px);
        min-width: 0;
      }
      .home-hit-meta {
        line-height: 1.35;
      }
      .external-reviews-section {
        background: linear-gradient(180deg, #faf8f5 0%, #f5f3f0 45%, #faf9f7 100%);
        border-bottom: 1px solid var(--shop-border);
      }
      .external-reviews-carousel {
        position: relative;
        padding: 0 2.75rem;
      }
      @media (max-width: 575.98px) {
        .external-reviews-carousel {
          padding: 0 2.25rem;
        }
      }
      .external-reviews-track {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 4px;
        padding: 4px 2px 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .external-reviews-track::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      .external-reviews-track::-webkit-scrollbar-thumb {
        background: transparent;
      }
      .external-review-slide {
        flex: 0 0 clamp(200px, 72vw, 260px);
        min-width: 0;
        scroll-snap-align: start;
      }
      .external-review-card {
        display: block;
        height: 100%;
        text-decoration: none;
        color: inherit;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--shop-border);
        box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
        overflow: hidden;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
      }
      .external-review-card:hover {
        box-shadow: 0 10px 28px rgba(17, 24, 39, 0.1);
        transform: translateY(-2px);
      }
      .external-review-card:focus-visible {
        outline: 2px solid var(--brand-500);
        outline-offset: 2px;
      }
      .external-review-shot {
        display: block;
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: cover;
        object-position: top center;
        background: #f3f4f6;
      }
      .external-review-foot {
        padding: 0.75rem 0.9rem 0.95rem;
        border-top: 1px solid var(--shop-border);
        background: #fff;
      }
      .external-review-linktxt {
        color: var(--shop-accent);
        font-weight: 600;
      }
      .external-review-card:hover .external-review-linktxt {
        text-decoration: underline;
      }
      .external-reviews-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 999px;
        border: 1px solid var(--shop-border);
        background: #fff;
        color: var(--shop-ink);
        box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        line-height: 1;
        cursor: pointer;
      }
      .external-reviews-nav:hover {
        background: var(--brand-50);
        border-color: var(--brand-100);
      }
      .external-reviews-nav:focus-visible {
        outline: 2px solid var(--brand-500);
        outline-offset: 2px;
      }
      .external-reviews-nav-prev {
        left: 0;
      }
      .external-reviews-nav-next {
        right: 0;
      }
      .home-faq-section {
        background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 55%, #f9fafb 100%);
        border-bottom: 1px solid var(--shop-border);
      }
      .home-faq-lead {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
      }
      .home-faq-accordion {
        max-width: 42rem;
      }
      .home-faq-accordion .accordion-item {
        border: 1px solid var(--shop-border);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
      }
      .home-faq-accordion .accordion-item + .accordion-item {
        margin-top: 0.65rem;
      }
      .home-faq-accordion .accordion-button {
        font-weight: 600;
        font-size: 0.98rem;
        padding: 1rem 1.15rem;
        background: #fff;
        color: var(--shop-ink);
        box-shadow: none;
      }
      .home-faq-accordion .accordion-button:not(.collapsed) {
        background: linear-gradient(180deg, var(--brand-50) 0%, #ecfdf5 100%);
        color: var(--brand-700);
        box-shadow: none;
      }
      .home-faq-accordion .accordion-button::after {
        filter: opacity(0.65);
      }
      .home-faq-accordion .accordion-button:focus {
        box-shadow: inset 0 0 0 2px var(--brand-100);
        border-color: transparent;
      }
      .home-faq-accordion .accordion-body {
        padding: 1rem 1.2rem 1.2rem;
        line-height: 1.6;
        font-size: 0.9375rem;
        color: var(--shop-muted);
        border-top: 1px solid var(--shop-border);
        background: #fafbfc;
      }
      @media (prefers-reduced-motion: reduce) {
        .feature-card,
        .cat-tile,
        .trust-card {
          transition: none;
        }
        .cat-tile:hover,
        .home-hit-card:hover {
          transform: none;
        }
        .home-hit-card {
          transition: none;
        }
        .home-faq-accordion .accordion-button,
        .home-faq-accordion .accordion-collapse {
          transition: none;
        }
        .external-review-card {
          transition: none;
        }
        .external-review-card:hover {
          transform: none;
        }
      }