@media(max-width:1100px) {
    .header-inner {
        gap: 18px
    }

    .main-nav {
        gap: 14px
    }

    .header-actions {
        gap: 9px
    }

    .main-nav a {
        font-size: .76rem
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .category-tile {
        min-height: 250px
    }

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

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .hero-visual img {
        height: 420px
    }
}

@media(max-width:800px) {
    .wrap {
        width: min(100% - 36px, var(--content))
    }

    .header-inner {
        height: 70px;
        justify-content: space-between
    }

    .menu-toggle {
        display: block
    }

    .brand {
        margin-right: auto
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        margin: 0;
        padding: 18px;
        background: var(--ivory);
        border-bottom: 1px solid var(--border);
        align-items: stretch;
        flex-direction: column;
        gap: 0
    }

    .main-nav.open {
        display: flex
    }

    .main-nav a {
        padding: 11px 5px;
        border-bottom: 1px solid var(--border);
        font-size: .9rem
    }

    .header-actions .action-label {
        display: none
    }

    .header-actions {
        gap: 7px
    }

    .hero {
        padding: 35px 0 55px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .hero-copy {
        padding: 0
    }

    .hero-copy h1 {
        max-width: 650px
    }

    .hero-visual {
        padding-left: 16px
    }

    .hero-visual img {
        height: 440px
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .category-tile,
    .category-tile:nth-child(2n) {
        margin-top: 0;
        min-height: 210px
    }

    .section {
        padding: 65px 0
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 13px
    }

    .editorial {
        grid-template-columns: 1fr
    }

    .editorial img {
        min-height: 340px;
        max-height: 440px
    }

    .editorial-copy {
        padding: 42px 30px
    }

    .banner-grid {
        grid-template-columns: 1fr .7fr;
        gap: 25px
    }

    .inspiration-grid {
        grid-template-columns: 1fr 1fr
    }

    .inspiration-card:first-child {
        grid-column: 1/-1
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .newsletter-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .shop-layout {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-bottom: 60px
    }

    .filters {
        display: none;
        border: 1px solid var(--border);
        padding: 8px 18px
    }

    .filters.open {
        display: block
    }

    .filter-toggle {
        display: inline-flex
    }

    .shop-toolbar {
        flex-wrap: wrap
    }

    .toolbar-tools {
        width: 100%
    }

    .toolbar-tools input {
        flex: 1
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .detail-image {
        height: 70vw;
        max-height: 570px
    }

    .cart-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .form-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-hero {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .about-hero img {
        height: 430px
    }

    .about-panels {
        grid-template-columns: 1fr 1fr
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 25px
    }
}

@media(max-width:520px) {
    .wrap {
        width: calc(100% - 30px)
    }

    .announcement {
        font-size: .66rem
    }

    .brand img {
        width: 33px;
        height: 33px
    }

    .brand-word {
        font-size: .83rem;
        letter-spacing: .12em
    }

    .header-actions {
        gap: 2px
    }

    .header-actions a {
        padding: 5px 3px
    }

    .hero-copy h1 {
        font-size: 2.8rem
    }

    .hero-visual img {
        height: 340px
    }

    .hero-caption {
        font-size: .95rem;
        padding: 12px 15px;
        max-width: 180px
    }

    .section {
        padding: 53px 0
    }

    .section-head {
        display: block
    }

    .section-head p {
        margin-top: 10px
    }

    .category-tile {
        min-height: 160px
    }

    .category-tile span {
        font-size: 1.05rem;
        left: 10px;
        bottom: 10px
    }

    .product-photo {
        aspect-ratio: .82
    }

    .product-info h3 {
        font-size: .85rem
    }

    .add-button {
        width: 100%
    }

    .editorial img {
        min-height: 270px
    }

    .banner-grid {
        grid-template-columns: 1fr
    }

    .banner-image {
        height: 190px;
        order: -1
    }

    .inspiration-grid {
        grid-template-columns: 1fr
    }

    .inspiration-card:first-child {
        grid-column: auto
    }

    .inspiration-card img,
    .inspiration-card:first-child img {
        height: 220px
    }

    .service-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px 8px
    }

    .service-item {
        font-size: .72rem;
        align-items: flex-start
    }

    .service-item span {
        flex: none;
        width: 29px;
        height: 29px
    }

    .newsletter-form {
        flex-direction: column;
        gap: 8px
    }

    .newsletter-form .button {
        width: 100%
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 16px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .copyright {
        display: block
    }

    .copyright span {
        display: block;
        margin: 5px 0
    }

    .shop-toolbar {
        align-items: stretch
    }

    .toolbar-tools {
        flex-direction: column
    }

    .toolbar-tools input,
    .toolbar-tools select {
        width: 100%
    }

    .shop-product-grid {
        gap: 20px 11px
    }

    .cart-row {
        grid-template-columns: 74px 1fr auto;
        gap: 11px
    }

    .cart-row img {
        width: 74px;
        height: 88px
    }

    .cart-row .quantity-control {
        grid-column: 2;
        grid-row: 2
    }

    .cart-row .line-price {
        grid-column: 3;
        grid-row: 1
    }

    .cart-row .remove-button {
        grid-column: 2;
        grid-row: 3;
        text-align: left
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .field.full {
        grid-column: auto
    }

    .about-panels {
        grid-template-columns: 1fr
    }

    .about-hero img {
        height: 340px
    }

    .contact-layout {
        padding-bottom: 60px
    }

    .login-wrap {
        margin: 30px 15px 65px;
        padding: 26px
    }

    .purchase-actions {
        flex-direction: column
    }

    .purchase-actions .button {
        width: 100%
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}