.shop-storefront {
    --shop-ink: #242332;
    --shop-purple: #7161a8;
    --shop-purple-soft: #eeeaf8;
    --shop-amber: #b47a2a;
    --shop-amber-soft: #f5ead8;
    --shop-border: #ded9d0;
    --shop-surface: #fffdf9;
    color: var(--shop-ink);
    display: grid;
    gap: 2rem;
    margin: 0 auto;
    max-width: 1200px;
    padding: 2rem 1rem 4rem;
}

.shop-storefront *,
.shop-storefront *::before,
.shop-storefront *::after {
    box-sizing: border-box;
}

.shop-storefront a {
    color: var(--shop-purple);
    text-underline-offset: 0.18em;
}

.shop-storefront :is(a, button, input, select, summary):focus-visible {
    outline: 3px solid #d29a45;
    outline-offset: 3px;
}

.shop-page-head {
    max-width: 760px;
}

.shop-page-head h1,
.shop-storefront h1,
.shop-storefront h2,
.shop-storefront h3 {
    color: var(--shop-ink);
    line-height: 1.16;
    margin-top: 0;
}

.shop-page-head h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    margin-bottom: 0.75rem;
}

.shop-page-head > p:last-child {
    color: #656270;
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.shop-kicker {
    color: var(--shop-amber);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.shop-storefront .shop-panel,
.shop-filter-details {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(36, 35, 50, 0.05);
    padding: 1.35rem;
}

.shop-filter-details > summary {
    color: var(--shop-ink);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 800;
}

.shop-filter-body {
    padding-top: 1rem;
}

.shop-filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shop-filter-grid .shop-field-wide {
    grid-column: span 2;
}

.shop-storefront .shop-field {
    display: grid;
    gap: 0.45rem;
}

.shop-storefront .shop-field > span {
    color: #55515f;
    font-size: 0.9rem;
    font-weight: 700;
}

.shop-storefront :is(input, select) {
    background: #fff;
    border: 1px solid #cfc8be;
    border-radius: 10px;
    color: var(--shop-ink);
    font: inherit;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    width: 100%;
}

.shop-filter-actions,
.shop-purchase-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.15rem;
}

.shop-storefront .shop-button {
    align-items: center;
    background: var(--shop-purple);
    border: 1px solid var(--shop-purple);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 750;
    justify-content: center;
    min-height: 44px;
    padding: 0.68rem 1.15rem;
    text-decoration: none;
}

.shop-storefront .shop-button:hover {
    background: #5f508f;
}

.shop-storefront .shop-button.secondary {
    background: transparent;
    color: var(--shop-purple);
}

.shop-storefront .shop-button.secondary:hover {
    background: var(--shop-purple-soft);
}

.shop-storefront .shop-button:disabled {
    background: #b9b5bf;
    border-color: #b9b5bf;
    cursor: not-allowed;
}

.shop-alert {
    background: #fff1e1;
    border: 1px solid #dda75b;
    border-radius: 14px;
    color: #714613;
    padding: 1rem 1.1rem;
}

.shop-result-summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.shop-featured {
    background: linear-gradient(135deg, #f6edde, #f1edf9);
    border-radius: 26px;
    padding: clamp(1.25rem, 4vw, 2.25rem);
}

.shop-section-head {
    align-items: end;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.shop-section-head h2 {
    margin-bottom: 0;
}

.shop-section-head > p {
    color: #656270;
    line-height: 1.55;
    margin: 0;
    max-width: 470px;
}

.shop-storefront .shop-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-category-section + .shop-category-section {
    margin-top: 2.5rem;
}

.shop-category-section > h3 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.shop-product-card {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.shop-product-card.is-featured {
    border-color: #d8c598;
}

.shop-card-image {
    background: #f1eee9;
    display: block;
    overflow: hidden;
}

.shop-card-image img {
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    transition: transform 180ms ease;
    width: 100%;
}

.shop-card-image:hover img {
    transform: scale(1.02);
}

.shop-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.15rem;
}

.shop-card-body h3 {
    font-size: 1.17rem;
    margin: 0;
}

.shop-card-body h3 a {
    color: var(--shop-ink);
    text-decoration: none;
}

.shop-card-body h3 a:hover {
    color: var(--shop-purple);
    text-decoration: underline;
}

.shop-card-badges,
.shop-card-meta,
.shop-seller-summary {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.shop-storefront .shop-badge {
    background: var(--shop-purple-soft);
    border-radius: 999px;
    color: #51427b;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 0.32rem 0.62rem;
}

.shop-storefront .shop-badge.secondary {
    background: var(--shop-amber-soft);
    color: #75501f;
}

.shop-card-meta {
    color: #6c6874;
    font-size: 0.86rem;
}

.shop-card-meta span + span::before,
.shop-seller-summary span + span::before {
    color: #a19aa8;
    content: "·";
    margin-right: 0.5rem;
}

.shop-description-clamp {
    color: #5f5b67;
    display: -webkit-box;
    line-height: 1.55;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.shop-card-rating {
    font-size: 0.9rem;
    margin-top: auto;
}

.shop-rating strong {
    color: var(--shop-ink);
}

.shop-card-footer {
    align-items: end;
    border-top: 1px solid #ece7df;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-top: 0.85rem;
}

.shop-price {
    color: var(--shop-ink);
    font-size: 1.2rem;
    font-weight: 850;
}

.shop-stock {
    color: #4f705c;
    font-size: 0.82rem;
    text-align: right;
}

.shop-stock.is-empty {
    color: #965353;
}

.shop-empty-state {
    align-items: start;
    display: grid;
    gap: 0.7rem;
    justify-items: start;
}

.shop-empty-state :is(h1, h2, h3, p) {
    margin: 0;
}

.shop-pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.shop-pagination > a:not(.shop-button),
.shop-page-current {
    align-items: center;
    border: 1px solid var(--shop-border);
    border-radius: 50%;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    text-decoration: none;
    width: 42px;
}

.shop-page-current {
    background: var(--shop-purple);
    border-color: var(--shop-purple);
    color: #fff;
    font-weight: 800;
}

.shop-breadcrumbs {
    align-items: center;
    color: #77727d;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.55rem;
}

.shop-product-layout {
    align-items: start;
    display: grid;
    gap: clamp(1.25rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.shop-product-gallery figure {
    margin: 0;
}

.shop-product-gallery img {
    background: #f1eee9;
    border: 1px solid var(--shop-border);
    border-radius: 24px;
    display: block;
    width: 100%;
}

.shop-product-gallery figcaption {
    color: #74707b;
    font-size: 0.84rem;
    line-height: 1.55;
    margin-top: 0.7rem;
}

.shop-buybox {
    position: sticky;
    top: 1rem;
}

.shop-buybox h1 {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    margin: 1rem 0 0.65rem;
}

.shop-product-price {
    font-size: 1.85rem;
    margin: 1.2rem 0;
}

.shop-product-facts,
.shop-legal-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.shop-product-facts > div,
.shop-legal-list > div {
    border-top: 1px solid #ece7df;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(120px, 0.45fr) 1fr;
    padding: 0.72rem 0;
}

.shop-product-facts dt,
.shop-legal-list dt {
    color: #6b6672;
}

.shop-product-facts dd,
.shop-legal-list dd {
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.shop-add-form {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.shop-quantity {
    max-width: 130px;
}

.shop-payment-note,
.shop-legal-note {
    border-top: 1px solid #ece7df;
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 1.2rem 0 0;
    padding-top: 1rem;
}

.shop-product-description p,
.shop-seller-description p,
.shop-review p {
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.shop-product-description h2,
.shop-seller-legal h2 {
    margin-bottom: 0;
}

.shop-seller-card-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.shop-seller-description {
    border-top: 1px solid #ece7df;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
}

.shop-seller-description h3 {
    margin-bottom: 0.6rem;
}

.shop-review-list {
    display: grid;
    gap: 1rem;
}

.shop-review-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.shop-review p {
    margin-bottom: 0.7rem;
}

.shop-review time {
    font-size: 0.85rem;
}

.shop-muted {
    color: #74707b;
}

.shop-seller-head {
    max-width: none;
}

.shop-seller-summary {
    color: #66616d;
    gap: 0.75rem;
}

.shop-storefront .shop-product-card.has-promotion-frame,
.shop-storefront .shop-buybox.has-promotion-frame {
    border: 3px solid #8a551a;
}

.shop-storefront .shop-product-gallery.has-promotion-frame img {
    border: 3px solid #8a551a;
}

.shop-storefront .shop-product-card.has-promotion-spotlight,
.shop-storefront .shop-buybox.has-promotion-spotlight {
    background: #f4f0fc;
    box-shadow: inset 0 6px 0 #625086;
}

.shop-storefront .shop-product-gallery.has-promotion-spotlight img {
    box-shadow: 0 0 0 3px #625086;
}

.shop-card-image,
.shop-product-image {
    position: relative;
}

.shop-storefront .shop-card-image:focus-visible {
    outline-offset: -4px;
}

.shop-promotion-thumbnail-badge {
    background: #493565;
    border: 1px solid #fff;
    border-radius: 8px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    left: 0.65rem;
    line-height: 1.4;
    max-width: calc(100% - 1.3rem);
    padding: 0.35rem 0.6rem;
    pointer-events: none;
    position: absolute;
    top: 0.65rem;
    z-index: 1;
}

.shop-promotion-status {
    color: #493565;
    font-size: 0.84rem;
    line-height: 1.5;
}

.shop-promotion-status p {
    margin: 0.2rem 0;
}

.shop-promotion-status time {
    font-variant-numeric: tabular-nums;
}

@media (forced-colors: active) {
    .shop-storefront .has-promotion-spotlight {
        outline: 3px double Highlight;
        outline-offset: -6px;
    }

    .shop-promotion-thumbnail-badge {
        border-color: CanvasText;
    }
}

@media (min-width: 801px) {
    .shop-filter-details > summary {
        display: none;
    }

    .shop-filter-details:not([open]) > .shop-filter-body {
        display: block;
        padding-top: 0;
    }
}

@media (max-width: 980px) {
    .shop-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-storefront .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-product-layout {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .shop-storefront {
        gap: 1.5rem;
        padding-top: 1.25rem;
    }

    .shop-section-head {
        align-items: start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .shop-product-layout {
        grid-template-columns: 1fr;
    }

    .shop-buybox {
        position: static;
    }

    .shop-seller-card-head {
        align-items: start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .shop-filter-grid,
    .shop-storefront .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-filter-grid .shop-field-wide {
        grid-column: auto;
    }

    .shop-storefront .shop-panel,
    .shop-filter-details {
        border-radius: 15px;
        padding: 1rem;
    }

    .shop-featured {
        border-radius: 18px;
        padding: 1rem;
    }

    .shop-filter-actions,
    .shop-purchase-actions,
    .shop-add-form {
        align-items: stretch;
        flex-direction: column;
    }

    .shop-filter-actions .shop-button,
    .shop-purchase-actions .shop-button,
    .shop-purchase-actions form,
    .shop-add-form .shop-button,
    .shop-quantity {
        max-width: none;
        width: 100%;
    }

    .shop-product-facts > div,
    .shop-legal-list > div {
        gap: 0.3rem;
        grid-template-columns: 1fr;
    }

    .shop-card-footer {
        align-items: start;
        flex-direction: column;
    }

    .shop-stock {
        text-align: left;
    }
}

.shop-storefront :is(h1, h2, h3, .shop-card-meta, .shop-breadcrumbs, .shop-badge) {
    overflow-wrap: anywhere;
}

.shop-storefront .shop-badge {
    min-width: 0;
    max-width: 100%;
}