/* Layout changes for wider and very narrow screens. Base styles in style.css are mobile-first. */

/* There is no room for the name beside the icons on the smallest phones. */
@media (max-width: 349px) {
    .site-header__logo .logo__name {
        display: none;
    }
}

@media (min-width: 600px) {
    :root {
        --gutter: 2rem;
        --chamfer: 22px;
    }

    .category-rail {
        grid-auto-columns: 34%;
    }

    .product-grid {
        gap: var(--space-7) var(--space-4);
    }

    .review-rail {
        grid-auto-columns: 46%;
    }

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

    .promise,
    .promise:nth-child(odd) {
        padding: var(--space-6) var(--space-5);
        border-right: 1px solid var(--line);
    }

    .promise:last-child {
        border-right: 0;
    }

    .hero__actions {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .newsletter-form__row {
        flex-direction: row;
    }

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

    .toast-region {
        right: var(--space-5);
        left: auto;
        width: 380px;
    }

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

    .about__experience {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
        align-items: center;
    }
}

/* The hero splits in two earlier than the rest of the page, so a tablet
   does not get a banner as tall as its screen. */
@media (min-width: 768px) {
    .hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-7);
        min-height: calc(100svh - var(--header-height) - 34px);
        padding-block: var(--space-6) var(--space-5);
    }

    .hero__copy {
        text-align: left;
    }

    .hero__text {
        margin-inline: 0;
    }

    .hero__actions {
        justify-content: flex-start;
    }

    .hero__actions .button {
        padding-inline: 1.875rem;
    }

    .hero--text-only .hero__inner {
        display: block;
        min-height: 0;
    }

    .hero--text-only .hero__copy {
        text-align: center;
    }

    .hero--text-only .hero__actions {
        justify-content: center;
    }

    .slideshow {
        justify-self: end;
        width: clamp(300px, calc((100svh - 220px) * 0.8), 560px);
        max-width: 100%;
    }

    /* The logo's octagon, turning slowly behind the frame */
    .slideshow::before {
        content: "";
        position: absolute;
        top: 46%;
        left: 50%;
        z-index: -1;
        width: 128%;
        aspect-ratio: 1;
        margin: -64% 0 0 -64%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpolygon points='0,-48 34,-34 48,0 34,34 0,48 -34,34 -48,0 -34,-34' fill='none' stroke='%23C8A45C' stroke-width='.22'/%3E%3Cg fill='%23C8A45C'%3E%3Ccircle cx='-34' cy='-34' r='.6'/%3E%3Ccircle cx='34' cy='-34' r='.6'/%3E%3Ccircle cx='34' cy='34' r='.6'/%3E%3Ccircle cx='-34' cy='34' r='.6'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        animation: slow-spin 120s linear infinite;
        pointer-events: none;
    }

    .storefront-choices {
        display: flex;
        min-height: calc(100svh - var(--header-height) - 34px);
    }

    .storefront-choice {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
    }

    .storefront-choice__body {
        margin: var(--space-5);
    }

    .storefront-seal {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 104px;
        height: 104px;
        margin: -52px;
        background: var(--selixora-charcoal);
        clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
        pointer-events: none;
        animation: fade-in 1.4s var(--ease-out-expo) 0.3s backwards;
    }

    .storefront-seal .brand-mark {
        width: 76px;
    }

    .storefront-seal .brand-mark__stroke {
        stroke-width: 3;
        animation: draw-stroke 2.6s var(--ease-out-expo) 0.4s backwards;
    }

    .storefront-seal .brand-mark__ring {
        display: none;
    }

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

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

@media (hover: hover) and (min-width: 768px) {
    .storefront-choice:hover {
        flex-grow: 1.35;
    }
}

@media (min-width: 900px) {
    :root {
        --header-height: 76px;
        --bottom-nav-height: 0px;
        --gutter: 2.5rem;
        --chamfer: 26px;
    }

    .bottom-nav,
    .site-header__menu {
        display: none;
    }

    .storefront-switcher--desktop {
        display: flex;
        gap: var(--space-1);
    }

    .storefront-switcher--mobile {
        display: none;
    }

    .site-header__bar {
        display: flex;
        gap: var(--space-5);
        padding-inline: var(--gutter);
    }

    .site-header__logo .logo__icon {
        width: 2.625rem;
        height: 2.625rem;
    }

    .site-header__logo .logo__name {
        font-size: 1.3125rem;
    }

    .site-header__account {
        display: inline-flex;
    }

    /* Wrapping hides whole links that do not fit, instead of cutting words. */
    .site-nav {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 var(--space-5);
        min-width: 0;
        max-height: 2.25rem;
        overflow: hidden;
    }

    .site-nav__link {
        position: relative;
        padding-block: var(--space-2);
        color: var(--text);
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        text-decoration: none;
        white-space: nowrap;
        opacity: 0.86;
        transition: opacity 0.3s;
    }

    .site-nav__link:hover,
    .site-nav__link.is-current {
        opacity: 1;
    }

    .site-nav__link::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 4px;
        left: 0;
        height: 1px;
        background: var(--selixora-gold);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s var(--ease-out-expo);
    }

    .site-nav__link:hover::after,
    .site-nav__link.is-current::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .site-header .site-header__logo {
        flex-shrink: 0;
    }

    .about__values {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .site-search {
        max-width: 640px;
        margin-inline: auto;
    }

    /* However many categories there are, they share the full width. */
    .category-rail {
        grid-auto-columns: minmax(0, 1fr);
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .product-grid .product-card__name {
        font-size: 0.9375rem;
    }

    .review-rail {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .promises {
        grid-template-columns: none;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
    }

    .site-footer__grid {
        grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: auto;
    }

    .product {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: var(--space-8);
        padding: var(--space-6) var(--gutter) var(--space-8);
    }

    .gallery {
        position: sticky;
        top: calc(var(--header-height) + var(--space-5));
        align-self: start;
    }

    .gallery:has(.gallery__thumbs) {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: var(--space-3);
    }

    .gallery__track {
        grid-column: 2;
    }

    .gallery__thumbs {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        padding: 0;
        overflow: visible;
    }

    .gallery__thumb {
        flex: none;
        width: 72px;
    }

    .product__details {
        padding: var(--space-5) 0 0;
    }

    .buy-bar {
        position: static;
        padding: 0;
        border: 0;
        background: none;
    }

    .split {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-8);
    }

    .split > :first-child {
        flex: 1;
        min-width: 0;
    }

    .summary {
        position: sticky;
        top: calc(var(--header-height) + var(--space-4));
        flex: 0 0 400px;
        padding: var(--space-6);
    }

    .checkout-action {
        position: static;
        padding: 0;
    }

    .auth-page {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        min-height: calc(100svh - var(--header-height) - 34px);
    }

    .auth-visual {
        min-height: 0;
        padding: var(--space-7);
    }

    .auth-visual__copy {
        gap: var(--space-3);
        max-width: 30rem;
    }

    .auth-visual__text {
        display: block;
        color: rgb(250 247 242 / 86%);
    }

    .auth-benefits {
        display: grid;
        gap: var(--space-2);
        margin-top: var(--space-2);
    }

    .auth-benefit {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-size: 0.875rem;
        animation: rise-in 0.9s var(--ease-out-expo) backwards;
    }

    .auth-benefit:nth-child(2) { animation-delay: 0.12s; }
    .auth-benefit:nth-child(3) { animation-delay: 0.24s; }
    .auth-benefit:nth-child(4) { animation-delay: 0.36s; }

    .auth-benefit .icon {
        flex: none;
        width: 20px;
        height: 20px;
        color: var(--selixora-gold-light);
    }

    .auth-panel {
        padding: var(--space-6) var(--gutter);
    }

    .promo__frame:has(.promo__image) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: start;
        column-gap: var(--space-7);
        padding: 0 var(--space-7) 0 0;
        text-align: left;
    }

    .promo__frame:has(.promo__image) .promo__image {
        grid-row: 1 / span 4;
        height: 100%;
        max-height: 460px;
    }

    .promo__frame:has(.promo__image) > :nth-child(2) {
        align-self: end;
        margin-top: var(--space-7);
    }

    .promo__frame:has(.promo__image) > :last-child {
        margin-bottom: var(--space-7);
    }
}

@media (min-width: 1200px) {
    .hero__inner {
        gap: var(--space-8);
    }
}

/* Phones: tighter rhythm and shorter sections, so less scrolling between products. */
@media (max-width: 599px) {
    :root {
        --section: 2.5rem;
        --gutter: 1rem;
        --header-height: 56px;
    }

    .toast-region {
        top: calc(var(--header-height) + 44px);
    }

    .announcement {
        padding-block: 0.25rem;
        font-size: 0.625rem;
        letter-spacing: 0.1em;
    }

    .storefront-switcher__link {
        min-height: 36px;
    }

    .storefront-switcher__link::after {
        bottom: 6px;
    }

    .hero__inner {
        gap: var(--space-4);
        padding: var(--space-4) var(--gutter) var(--space-2);
    }

    .hero .hero-title {
        font-size: clamp(2.25rem, 1.75rem + 3.5vw, 2.75rem);
        line-height: 1.02;
    }

    .hero__kicker {
        margin-bottom: var(--space-2);
    }

    .hero__text {
        margin-block: var(--space-2) var(--space-4);
        font-size: 0.9375rem;
    }

    .store .hero__actions .button {
        min-height: 44px;
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    .hero--text-only {
        min-height: 0;
    }

    .hero--text-only .hero__inner {
        padding-block: var(--space-7);
    }

    .slideshow {
        max-width: 280px;
    }

    .slideshow__frame {
        --chamfer: 18px;
    }

    .section--tight {
        padding-block: var(--space-4) var(--space-6);
    }

    .section-head {
        margin-bottom: var(--space-4);
    }

    .section-title,
    .promo__title {
        font-size: 1.75rem;
    }

    .page-header {
        padding-block: var(--space-5);
    }

    .page-header h1 {
        font-size: 2.125rem;
    }

    .page-header .dot-rule {
        margin-block: var(--space-2) 0;
    }

    .video-showcase__head {
        margin-bottom: var(--space-4);
    }

    .video-showcase__text,
    .story__text {
        font-size: 0.9375rem;
    }

    .video-showcase__cta {
        margin-top: var(--space-4);
    }

    .category-rail {
        grid-auto-columns: 42%;
        gap: var(--space-2);
    }

    .category-card__name {
        right: var(--space-3);
        bottom: var(--space-2);
        left: var(--space-3);
        font-size: 1.25rem;
    }

    .category-card__name .icon {
        width: 15px;
        height: 15px;
    }

    .collection-grid {
        gap: var(--space-2);
    }

    .product-grid {
        gap: var(--space-4) var(--space-2);
    }

    .product-card {
        gap: 0.125rem;
    }

    .product-card__media {
        margin-bottom: var(--space-1);
    }

    .product-card__name {
        font-size: 0.8125rem;
        line-height: 1.3;
    }

    .product-card .price__now {
        font-size: 0.875rem;
    }

    .product-card__action {
        margin-top: var(--space-1);
    }

    .store .product-card .button {
        min-height: 36px;
        padding-inline: var(--space-1);
        font-size: 0.625rem;
        letter-spacing: 0.08em;
    }

    .toolbar {
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
    }

    .pagination {
        margin-top: var(--space-5);
    }

    .store .pagination .button {
        min-height: 40px;
        padding-inline: var(--space-3);
    }

    .story__title {
        font-size: 2rem;
    }

    .story__kicker {
        margin-bottom: var(--space-2);
    }

    .story__mark {
        width: 320px;
        margin: -160px;
    }

    .promo__frame {
        --chamfer: 16px;
        gap: var(--space-2);
        padding: var(--space-4);
    }

    .promo__image {
        max-height: 180px;
    }

    .promise {
        padding: var(--space-3) var(--space-2);
    }

    .promise__icon {
        width: 22px;
        height: 22px;
        margin-bottom: var(--space-1);
    }

    .promise__title {
        font-size: 1.125rem;
    }

    .promise__text {
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .review-rail {
        grid-auto-columns: 78%;
        gap: var(--space-2);
    }

    .review-card {
        gap: var(--space-2);
        padding: var(--space-4);
    }

    .review-card blockquote {
        font-size: 1.125rem;
    }

    .newsletter__title {
        font-size: 1.875rem;
    }

    .newsletter .dot-rule {
        margin-block: var(--space-2);
    }

    .newsletter__text {
        margin-bottom: var(--space-3);
        font-size: 0.875rem;
    }

    .site-footer__grid {
        gap: var(--space-4) var(--space-3);
        padding-block: var(--space-5) var(--space-4);
    }

    .site-footer__about {
        margin-top: var(--space-2);
    }

    .site-footer__slogan {
        margin-top: var(--space-1);
        font-size: 1.25rem;
    }

    .site-footer__title {
        margin-bottom: var(--space-1);
    }

    .site-footer__list {
        font-size: 0.8125rem;
    }

    .site-footer__legal {
        padding-block: var(--space-2);
    }

    .storefront-choice {
        min-height: 38svh;
    }

    .storefront-choice__body {
        gap: var(--space-2);
        padding: var(--space-4) var(--space-3);
    }

    .storefront-choice__title {
        font-size: 3rem;
    }

    .storefront-choice__text {
        margin-bottom: var(--space-1);
        font-size: 0.875rem;
    }

    .product__name {
        font-size: 1.875rem;
    }

    .about {
        gap: var(--space-5);
    }

    .about__photo {
        aspect-ratio: 4 / 3;
    }

    .about__experience {
        padding: var(--space-4);
    }

    .about__value {
        padding: var(--space-4);
    }

    .prose h2 {
        margin-top: var(--space-3);
        font-size: 1.5rem;
    }
}