/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    background: #f9ea86;
}

body {
    overflow: hidden;

    font-family:
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================
   HOMEPAGE
========================================= */

.home-page {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: #f9ea86;

    color: #000000;

    overflow: hidden;

    z-index: 1;
}


/* =========================================
   HEADER
========================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding:
        clamp(20px, 2.2vw, 36px)
        clamp(20px, 3vw, 50px);

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    z-index: 10;
}


/* =========================================
   LOGO
========================================= */

.site-logo {
    display: block;

    width:
        clamp(
            75px,
            8vw,
            130px
        );

    text-decoration: none;
}

.site-logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================
   CART
========================================= */

.cart-button {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
}


/* =========================================
   PRODUCT HERO
========================================= */

.product-hero {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding:
        90px
        20px
        20px;

    transform:
        translateY(-25px);
}


/* =========================================
   TITLE WINDOW
========================================= */

.title-window {
    position: relative;

    width: 100%;

    height:
        clamp(
            55px,
            6vw,
            100px
        );

    margin-bottom: 24px;

    overflow: hidden;
}


/* =========================================
   PRODUCT TITLES
========================================= */

.product-title {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;

    margin: 0;
    padding: 0;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            48px,
            5.5vw,
            96px
        );

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.06em;

    text-align: center;

    text-transform: uppercase;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    will-change:
        transform,
        opacity;
}

.next-title {
    opacity: 0;

    transform:
        translate3d(
            calc(-50% + 40px),
            -50%,
            0
        );
}


/* =========================================
   PRODUCT WRAPPER
========================================= */

.product-wrapper {
    position: relative;

    width:
        clamp(
            300px,
            35vw,
            500px
        );

    aspect-ratio:
        1 / 1.414;

    max-height: 64vh;

    overflow: visible;
}


/* =========================================
   PRODUCT FRAME
========================================= */

.product-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    perspective: 1800px;

    perspective-origin:
        center center;

    transform-style:
        preserve-3d;

    overflow: visible;

    user-select: none;

    -webkit-user-select: none;

    -webkit-tap-highlight-color:
        transparent;

    z-index: 2;
}


/* =========================================
   PRODUCT SLIDE
========================================= */

.product-slide {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    background: #ffffff;

    text-decoration: none;

    cursor: pointer;

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    will-change:
        transform,
        opacity;
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.product-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    image-rendering: auto;
}


/* =========================================
   NEXT TAB
========================================= */

.next-tab {
    position: absolute;

    top: 50%;

    right: -30px;

    width: 47px;
    height: 36px;

    transform:
        translateY(-50%);

    z-index: 1;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    opacity: 1;

    -webkit-tap-highlight-color:
        transparent;

    will-change:
        right,
        opacity,
        transform;

    transition:
        right
        260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),

        opacity
        180ms
        ease;
}


/* =========================================
   TAB BODY
========================================= */

.next-tab-inner {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    padding-right: 7px;

    background: #ffffff;

    color: #000000;

    box-shadow:
        2px
        3px
        7px
        rgba(0, 0, 0, 0.10);

    animation:
        tab-hop
        4.5s
        infinite;

    transform-origin:
        center bottom;
}


/* =========================================
   ARROW
========================================= */

.next-tab-arrow {
    display: block;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1;

    font-weight: 400;

    transform:
        translateX(0);

    transition:
        transform
        260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================
   SUBTLE CARTOON HOP
========================================= */

@keyframes tab-hop {

    0%,
    76%,
    100% {
        transform:
            translateY(0)
            scaleX(1)
            scaleY(1);
    }

    79% {
        transform:
            translateY(1px)
            scaleX(1.03)
            scaleY(0.97);
    }

    83% {
        transform:
            translateY(-7px)
            scaleX(0.98)
            scaleY(1.03);
    }

    87% {
        transform:
            translateY(-2px)
            scaleX(1)
            scaleY(1);
    }

    90% {
        transform:
            translateY(1px)
            scaleX(1.02)
            scaleY(0.98);
    }

    93% {
        transform:
            translateY(-1px)
            scaleX(0.99)
            scaleY(1.01);
    }

    96% {
        transform:
            translateY(0)
            scaleX(1)
            scaleY(1);
    }
}


/* =========================================
   TAB DURING PRODUCT FLIP

   Retracts behind the image and fades.

   JS controls the exact right/opacity
   values during the animation.
========================================= */

.next-tab.is-flipping {
    pointer-events: none;
}

.next-tab.is-flipping
.next-tab-inner {
    animation-play-state: paused;
}


/* =========================================
   TAB HOVER
========================================= */

@media (hover: hover) {

    .next-tab:not(.is-flipping):hover {
        right: -45px;
    }


    .next-tab:not(.is-flipping):hover
    .next-tab-inner {
        animation-play-state:
            paused;
    }


    .next-tab:not(.is-flipping):hover
    .next-tab-arrow {
        transform:
            translateX(3px);
    }
}


/* =========================================
   TAB CLICK
========================================= */

.next-tab:not(.is-flipping):active {
    right: -41px;
}


.next-tab:not(.is-flipping):active
.next-tab-inner {
    transform:
        scale(0.94);

    animation:
        none;
}


/* =========================================
   KEYBOARD
========================================= */

.next-tab:focus-visible {
    outline:
        2px
        solid
        #000000;

    outline-offset:
        4px;
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .next-tab-inner {
        animation: none;
    }
}


/* =========================================
   INTRO
========================================= */

.landing-page {
    position: fixed;

    inset: 0;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    background: #f9ea86;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    z-index: 20;
}


/* =========================================
   INTRO LOGO
========================================= */

.arco-logo {
    width:
        clamp(
            500px,
            65vw,
            1100px
        );

    max-width: 90vw;

    height: auto;

    display: block;

    cursor: pointer;
}


/* =========================================
   PIXEL TRANSITION
========================================= */

.transition-canvas {
    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 30;

    pointer-events: none;

    opacity: 0;

    image-rendering:
        pixelated;
}


.transition-canvas.active {
    opacity: 1;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .site-header {
        padding:
            20px
            18px;
    }


    .site-logo {
        width: 80px;
    }


    .cart-button {
        font-size: 13px;
    }


    .product-hero {
        padding:
            90px
            14px
            15px;

        transform:
            translateY(-10px);
    }


    .title-window {
        height: 60px;

        margin-bottom: 20px;
    }


    .product-title {
        font-size:
            clamp(
                38px,
                11vw,
                62px
            );
    }


    .product-wrapper {
        width:
            min(
                72vw,
                340px
            );

        max-height: 64vh;
    }


    .product-frame {
        perspective: 1400px;
    }


    .next-tab {
        right: -31px;

        width: 48px;
        height: 38px;
    }


    .next-tab-inner {
        padding-right: 7px;
    }


    .next-tab-arrow {
        font-size: 17px;
    }


    .next-tab:not(.is-flipping):active {
        right: -35px;
    }


    .arco-logo {
        width: 85vw;
    }
}

/* =========================================
   ARCO TEE PRODUCT PAGE
========================================= */

.tee-page {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================
   MAIN PRODUCT LAYOUT
========================================= */

.tee-product {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: start;

    background: #f9ea86;
}


/* =========================================
   PRODUCT GALLERY
========================================= */

.tee-gallery {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 0;

    background: #ffffff;
}


/* =========================================
   INDIVIDUAL PRODUCT IMAGE
========================================= */

.tee-image {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ffffff;
}


.tee-image img {
    display: block;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    object-fit: cover;

    object-position: center;
}


/* =========================================
   PRODUCT INFORMATION
========================================= */

.tee-info {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        120px
        clamp(40px, 6vw, 110px)
        60px;

    background: #f9ea86;
}


/* =========================================
   INFO INNER
========================================= */

.tee-info-inner {
    width: 100%;

    max-width: 560px;
}


/* =========================================
   PRODUCT NAME
========================================= */

.tee-name {
    margin:
        0
        0
        14px;

    padding: 0;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            58px,
            6vw,
            110px
        );

    line-height: 0.9;

    font-weight: 700;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


/* =========================================
   PRICE
========================================= */

.tee-price {
    margin:
        0
        0
        55px;

    padding: 0;

    font-size: 16px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================
   SIZE
========================================= */

.tee-size {
    width: 100%;

    margin-bottom: 14px;
}


.tee-size-label {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.02em;
}


/* =========================================
   SELECT WRAPPER
========================================= */

.tee-select-wrapper {
    position: relative;

    width: 100%;
}


/* =========================================
   SIZE DROPDOWN
========================================= */

.tee-size-select {
    appearance: none;

    -webkit-appearance: none;

    width: 100%;

    height: 54px;

    padding:
        0
        18px;

    border:
        1px
        solid
        #000000;

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    cursor: pointer;
}


/* CUSTOM DROPDOWN ARROW */

.tee-select-wrapper::after {
    content: "↓";

    position: absolute;

    top: 50%;
    right: 18px;

    transform:
        translateY(-50%);

    font-size: 17px;

    pointer-events: none;
}


/* =========================================
   ADD TO CART
========================================= */

.tee-add-cart {
    appearance: none;

    width: 100%;

    height: 58px;

    margin: 0;
    padding: 0;

    border:
        1px
        solid
        #000000;

    border-radius: 0;

    background: #000000;

    color: #ffffff;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background
        180ms
        ease,

        color
        180ms
        ease;
}


/* =========================================
   ADD TO CART HOVER
========================================= */

@media (hover: hover) {

    .tee-add-cart:hover {
        background: transparent;

        color: #000000;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .tee-product {
        display: block;
    }


    .tee-gallery {

        width: 100%;
    
        grid-template-columns:
    
            1fr;
    
        gap: 8px;
    
        padding:
    
            80px
    
            8px
    
            8px;
    
    }


    

    

    .tee-image {

        width: 100%;

        min-height: 0;

        aspect-ratio:

            4 / 5;

    }


    

    .tee-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }


    .tee-info {
        position: relative;

        width: 100%;
        height: auto;

        min-height: 70vh;

        padding:
            60px
            20px
            80px;

        align-items: flex-start;
    }


    .tee-info-inner {
        max-width: none;
    }


    .tee-name {
        font-size:
            clamp(
                52px,
                17vw,
                82px
            );
    }


    .tee-price {
        margin-bottom: 45px;
    }
}

/* =========================================
   SIZE ERROR
========================================= */

.tee-size-error {
    margin:
        10px
        0
        0;

    font-size: 12px;

    font-weight: 500;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity
        150ms
        ease;
}


.tee-size-error.is-visible {
    opacity: 1;

    visibility: visible;
}


/* =========================================
   CART OVERLAY
========================================= */

.cart-overlay {
    position: fixed;

    inset: 0;

    z-index: 98;

    background:
        rgba(
            0,
            0,
            0,
            0.25
        );

    opacity: 0;

    visibility: hidden;

    transition:
        opacity
        350ms
        ease,
        visibility
        350ms
        ease;
}


.cart-overlay.is-open {
    opacity: 1;

    visibility: visible;
}


/* =========================================
   CART DRAWER
========================================= */

.cart-drawer {
    position: fixed;

    top: 0;
    right: 0;

    z-index: 99;

    width:
        min(
            480px,
            100vw
        );

    height: 100vh;
    height: 100dvh;

    display: flex;

    flex-direction: column;

    background: #f9ea86;

    border-left:
        1px
        solid
        #000000;

    transform:
        translateX(100%);

    transition:
        transform
        450ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


.cart-drawer.is-open {
    transform:
        translateX(0);
}


/* =========================================
   CART HEADER
========================================= */

.cart-drawer-header {
    flex-shrink: 0;

    height: 90px;

    padding:
        0
        24px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px
        solid
        #000000;
}


.cart-drawer-header h2 {
    margin: 0;

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.04em;
}


/* =========================================
   CART CLOSE
========================================= */

.cart-close {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 34px;

    line-height: 1;

    font-weight: 300;

    cursor: pointer;
}


/* =========================================
   CART ITEMS
========================================= */

.cart-items {
    flex: 1;

    overflow-y: auto;

    padding:
        24px;
}


/* =========================================
   EMPTY CART
========================================= */

.cart-empty {
    margin: 0;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================
   CART ITEM
========================================= */

.cart-item {
    display: grid;

    grid-template-columns:
        110px
        1fr;

    gap: 16px;

    padding:
        0
        0
        24px;

    margin:
        0
        0
        24px;

    border-bottom:
        1px
        solid
        rgba(
            0,
            0,
            0,
            0.3
        );
}


/* =========================================
   CART ITEM IMAGE
========================================= */

.cart-item-image {
    width: 110px;

    aspect-ratio:
        4 / 5;

    overflow: hidden;

    background: #ffffff;
}


.cart-item-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================
   CART ITEM INFO
========================================= */

.cart-item-info {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.cart-item-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}


.cart-item-name {
    margin:
        0
        0
        6px;

    font-size: 16px;

    font-weight: 700;
}


.cart-item-size {
    margin: 0;

    font-size: 12px;
}


/* =========================================
   REMOVE
========================================= */

.cart-remove {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 10px;

    text-decoration: underline;

    cursor: pointer;
}


/* =========================================
   CART ITEM BOTTOM
========================================= */

.cart-item-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* =========================================
   QUANTITY
========================================= */

.cart-quantity {
    height: 32px;

    display: flex;

    align-items: center;

    border:
        1px
        solid
        #000000;
}


.cart-quantity button {
    appearance: none;

    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: #000000;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;

    cursor: pointer;
}


.cart-quantity span {
    min-width: 24px;

    text-align: center;

    font-size: 12px;
}


/* =========================================
   ITEM PRICE
========================================= */

.cart-item-price {
    margin: 0;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================
   CART FOOTER
========================================= */

.cart-footer {
    flex-shrink: 0;

    padding:
        22px
        24px
        28px;

    border-top:
        1px
        solid
        #000000;
}


/* =========================================
   SUBTOTAL
========================================= */

.cart-subtotal-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================
   CHECKOUT PLACEHOLDER
========================================= */

.cart-checkout-note {
    margin:
        18px
        0
        0;

    padding:
        17px
        10px;

    width: 100%;

    background: #000000;

    color: #ffffff;

    font-size: 12px;

    text-align: center;
}


/* =========================================
   MOBILE CART
========================================= */

@media (max-width: 768px) {

    .cart-drawer {
        width: 100%;
    }


    .cart-drawer-header {
        height: 75px;

        padding:
            0
            18px;
    }


    .cart-drawer-header h2 {
        font-size: 26px;
    }


    .cart-items {
        padding:
            20px
            18px;
    }


    .cart-item {
        grid-template-columns:
            90px
            1fr;

        gap: 14px;
    }


    .cart-item-image {
        width: 90px;
    }


    .cart-footer {
        padding:
            20px
            18px
            24px;
    }
}

/* =========================================
   ARCO MAGAZINE PAGE
========================================= */

.magazine-page {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================
   MAGAZINE LAYOUT
========================================= */

.magazine-product {
    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: start;

    background: #f9ea86;
}


/* =========================================
   MAGAZINE GALLERY
========================================= */

.magazine-gallery {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

    padding:
        90px
        10px
        10px;

    background: #f9ea86;
}


/* =========================================
   MAGAZINE IMAGE
========================================= */

.magazine-image {
    width: 100%;

    aspect-ratio:
        4 / 5;

    min-height: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ffffff;
}


.magazine-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================
   MAGAZINE INFORMATION
========================================= */

.magazine-info {
    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;
    height: 100dvh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        120px
        clamp(40px, 6vw, 110px)
        60px;

    background: #f9ea86;
}


/* =========================================
   MAGAZINE INFO INNER
========================================= */

.magazine-info-inner {
    width: 100%;

    max-width: 560px;
}


/* =========================================
   MAGAZINE NAME
========================================= */

.magazine-name {
    margin:
        0
        0
        14px;

    padding: 0;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            58px,
            6vw,
            110px
        );

    line-height: 0.9;

    font-weight: 700;

    letter-spacing: -0.065em;

    text-transform: uppercase;
}


/* =========================================
   MAGAZINE PRICE
========================================= */

.magazine-price {
    margin:
        0
        0
        55px;

    padding: 0;

    font-size: 16px;

    line-height: 1;

    font-weight: 400;
}


/* =========================================
   MAGAZINE ADD TO CART
========================================= */

.magazine-add-cart {
    appearance: none;

    width: 100%;

    height: 58px;

    margin: 0;
    padding: 0;

    border:
        1px
        solid
        #000000;

    border-radius: 0;

    background: #000000;

    color: #ffffff;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background
        180ms
        ease,
        color
        180ms
        ease;
}


/* =========================================
   MAGAZINE BUTTON HOVER
========================================= */

@media (hover: hover) {

    .magazine-add-cart:hover {
        background: transparent;

        color: #000000;
    }
}


/* =========================================
   CART STOCK LIMIT
========================================= */

.cart-stock-limit {
    margin:
        9px
        0
        0;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.04em;
}


/* =========================================
   DISABLED QUANTITY BUTTON
========================================= */

.cart-quantity button:disabled {
    opacity: 0.25;

    cursor: default;
}


/* =========================================
   MAGAZINE MOBILE
========================================= */

@media (max-width: 768px) {

    .magazine-product {
        display: block;
    }


    .magazine-gallery {
        width: 100%;

        grid-template-columns:
            1fr;

        gap: 8px;

        padding:
            80px
            8px
            8px;
    }


    .magazine-image {
        width: 100%;

        min-height: 0;

        aspect-ratio:
            4 / 5;
    }


    .magazine-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    .magazine-info {
        position: relative;

        width: 100%;
        height: auto;

        min-height: 70vh;

        padding:
            60px
            20px
            80px;

        align-items: flex-start;
    }


    .magazine-info-inner {
        max-width: none;
    }


    .magazine-name {
        font-size:
            clamp(
                52px,
                17vw,
                82px
            );
    }


    .magazine-price {
        margin-bottom: 45px;
    }
}

/* =========================================
   ONE OF ONE PAGE
========================================= */

.one-page {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================
   PAGE
========================================= */

.one-product-page {
    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    padding:
        120px
        20px
        70px;

    display: flex;

    justify-content: center;

    background: #f9ea86;
}


/* =========================================
   PRODUCT AREA
========================================= */

.one-product-area {
    width:
        min(
            460px,
            90vw
        );

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================
   TITLE WINDOW
========================================= */

.one-title-window {
    position: relative;

    width: 100%;

    height:
        clamp(
            58px,
            6vw,
            90px
        );

    margin-bottom: 18px;

    overflow: hidden;
}


/* =========================================
   TITLE
========================================= */

.one-product-title {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;

    margin: 0;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        clamp(
            48px,
            5vw,
            78px
        );

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.06em;

    text-align: center;

    text-transform: uppercase;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    will-change:
        transform,
        opacity;
}


.one-next-title {
    opacity: 0;

    transform:
        translate3d(
            calc(-50% + 40px),
            -50%,
            0
        );
}


/* =========================================
   PRODUCT WRAPPER
========================================= */

.one-product-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio:
        4 / 5;

    overflow: visible;
}


/* =========================================
   3D PRODUCT FRAME
========================================= */

.one-product-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    perspective: 1800px;

    perspective-origin:
        center center;

    transform-style:
        preserve-3d;

    overflow: visible;

    z-index: 2;
}


/* =========================================
   PRODUCT SLIDE

   Handles switching between different
   one-of-one products.
========================================= */

.one-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;

    will-change:
        transform,
        opacity;
}


/* =========================================
   FRONT / BACK FLIP CARD
========================================= */

.one-flip-card {
    appearance: none;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    transform-style:
        preserve-3d;

    transform:
        rotateY(0deg);

    transition:
        transform
        650ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================
   SHOW BACK
========================================= */

.one-flip-card.is-back {
    transform:
        rotateY(180deg);
}


/* =========================================
   CARD FACES
========================================= */

.one-card-face {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    backface-visibility:
        hidden;

    -webkit-backface-visibility:
        hidden;
}


.one-card-back {
    transform:
        rotateY(180deg);
}


/* =========================================
   PRODUCT IMAGES
========================================= */

.one-card-face img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    pointer-events: none;
}


/* =========================================
   NEXT TAB
========================================= */

.one-next-tab {
    position: absolute;

    top: 50%;

    right: -30px;

    width: 47px;
    height: 36px;

    transform:
        translateY(-50%);

    z-index: 1;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    opacity: 1;

    -webkit-tap-highlight-color:
        transparent;

    will-change:
        right,
        opacity;
}


/* =========================================
   NEXT TAB BODY
========================================= */

.one-next-tab-inner {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    padding-right: 7px;

    background: #ffffff;

    color: #000000;

    box-shadow:
        2px
        3px
        7px
        rgba(
            0,
            0,
            0,
            0.10
        );

    animation:
        tab-hop
        4.5s
        infinite;
}


/* =========================================
   NEXT ARROW
========================================= */

.one-next-tab-arrow {
    display: block;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;

    line-height: 1;

    transition:
        transform
        260ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================
   NEXT TAB DURING FLIP
========================================= */

.one-next-tab.is-flipping {
    pointer-events: none;
}


.one-next-tab.is-flipping
.one-next-tab-inner {
    animation-play-state:
        paused;
}


/* =========================================
   NEXT TAB HOVER
========================================= */

@media (hover: hover) {

    .one-next-tab:not(.is-flipping):hover {
        right: -45px;
    }


    .one-next-tab:not(.is-flipping):hover
    .one-next-tab-inner {
        animation-play-state:
            paused;
    }


    .one-next-tab:not(.is-flipping):hover
    .one-next-tab-arrow {
        transform:
            translateX(3px);
    }
}


/* =========================================
   IMAGE HINT
========================================= */

.one-image-hint {
    width: 100%;

    margin:
        10px
        0
        0;

    font-size: 10px;

    font-weight: 500;

    text-align: left;

    transition:
        opacity
        180ms
        ease;
}


/* =========================================
   PRODUCT DETAILS
========================================= */

.one-details {
    width: 100%;

    margin-top: 30px;
}


/* =========================================
   PRICE
========================================= */

.one-price {
    margin:
        0
        0
        18px;

    font-size: 16px;

    font-weight: 500;

    transition:
        opacity
        180ms
        ease;
}


/* =========================================
   DESCRIPTION
========================================= */

.one-description {
    margin:
        0
        0
        28px;

    max-width: 420px;

    font-size: 13px;

    line-height: 1.45;

    transition:
        opacity
        180ms
        ease;
}


/* =========================================
   ADD TO CART
========================================= */

.one-add-cart {
    appearance: none;

    width: 100%;

    height: 58px;

    margin: 0;
    padding: 0;

    border:
        1px
        solid
        #000000;

    border-radius: 0;

    background: #000000;

    color: #ffffff;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition:
        background
        180ms
        ease,
        color
        180ms
        ease,
        opacity
        180ms
        ease;
}


/* =========================================
   DETAILS CHANGING
========================================= */

.one-price.is-changing,
.one-description.is-changing,
.one-add-cart.is-changing,
.one-image-hint.is-changing {
    opacity: 0;
}


/* =========================================
   BUTTON HOVER
========================================= */

@media (hover: hover) {

    .one-add-cart:hover {
        background: transparent;

        color: #000000;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .one-product-page {
        padding:
            105px
            20px
            60px;
    }


    .one-product-area {
        width:
            min(
                78vw,
                380px
            );
    }


    .one-title-window {
        height: 58px;

        margin-bottom: 15px;
    }


    .one-product-title {
        font-size:
            clamp(
                42px,
                13vw,
                64px
            );
    }


    .one-product-frame {
        perspective: 1400px;
    }


    .one-next-tab {
        right: -31px;

        width: 48px;
        height: 38px;
    }


    .one-details {
        margin-top: 26px;
    }
}

/* =========================================
   MAGAZINE DESCRIPTION
========================================= */

.magazine-description {
    margin:
        0
        0
        28px;

    max-width: 420px;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;
}


/* =========================================
   MAGAZINE DOWNLOAD BUTTON
========================================= */

.magazine-download {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 58px;

    margin: 0;
    padding: 0 16px;

    border:
        1px
        solid
        #000000;

    border-radius: 0;

    background: #000000;

    color: #ffffff;

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition:
        background
        180ms
        ease,

        color
        180ms
        ease;
}


/* =========================================
   DOWNLOAD HOVER
========================================= */

@media (hover: hover) {

    .magazine-download:not(.is-unavailable):hover {
        background: transparent;

        color: #000000;
    }
}


/* =========================================
   DOWNLOAD UNAVAILABLE
========================================= */

.magazine-download.is-unavailable {
    opacity: 0.45;

    cursor: not-allowed;

    pointer-events: none;
}

/* =========================================
   STRIPE CHECKOUT BUTTON
========================================= */

.cart-checkout-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    margin-top: 16px;
    padding: 12px 20px;

    border: 1px solid #000;
    border-radius: 0;

    background: #000;
    color: #fff;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
    transition: opacity 180ms ease;
}

.cart-checkout-button:hover {
    opacity: 0.8;
}

.cart-checkout-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-checkout-error {
    margin-top: 12px;
    color: #000;
    font-size: 12px;
    line-height: 1.5;
}

.cart-checkout-error[hidden] {
    display: none;
}

/* ==========================================================
   ARCO MOBILE REFINEMENT — STEP 19
   Overrides only. Desktop layout remains unchanged.
   ========================================================== */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  .home-page, .landing-page { height: 100dvh; }
  .site-header {
    padding: max(16px, env(safe-area-inset-top)) 18px 12px;
    align-items: center;
  }
  .site-logo { width: clamp(68px, 20vw, 85px); }
  .cart-button { min-height: 44px; min-width: 64px; text-align: right; }

  /* Fit the animated storefront within short phone viewports. */
  .product-hero {
    min-height: 0;
    height: 100%;
    padding: calc(68px + env(safe-area-inset-top)) 16px
             calc(22px + env(safe-area-inset-bottom));
    transform: none;
    gap: clamp(8px, 2.5vh, 20px);
  }
  .title-window {
    flex: 0 0 auto;
    height: clamp(43px, 9vh, 64px);
    margin-bottom: 0;
  }
  .product-title { font-size: clamp(35px, 10.5vw, 60px); }
  .product-wrapper {
    flex: 0 1 auto;
    width: min(72vw, 340px, calc((100dvh - 205px) * 0.707));
    max-width: 100%;
    max-height: min(61dvh, 480px);
    min-width: 0;
  }
  .next-tab, .one-next-tab { touch-action: manipulation; }
  .arco-logo { width: min(85vw, 560px); max-width: 85vw; }

  /* Product detail pages: remove unnecessarily tall image/info panels. */
  .tee-gallery, .magazine-gallery {
    padding-top: calc(72px + env(safe-area-inset-top));
    padding-inline: 10px;
    gap: 10px;
  }
  .tee-image, .magazine-image {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .tee-image img, .magazine-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .tee-info, .magazine-info {
    min-height: 0;
    padding: 36px 20px calc(64px + env(safe-area-inset-bottom));
  }
  .tee-info-inner, .magazine-info-inner { width: 100%; }
  .tee-size-select, .tee-add-cart, .magazine-download, .one-add-cart {
    min-height: 48px;
  }
  .one-product-page {
    padding-top: calc(85px + env(safe-area-inset-top));
    padding-bottom: calc(42px + env(safe-area-inset-bottom));
  }
  .one-product-area { width: min(78vw, 380px); }
  .one-product-title { font-size: clamp(38px, 12vw, 62px); }

  /* Full-height cart with a scrollable item area and reachable checkout. */
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-left: 0;
  }
  .cart-drawer-header {
    height: auto;
    min-height: 68px;
    padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  }
  .cart-items {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cart-footer {
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .cart-checkout-button { min-height: 52px; }
}

@media (max-width: 380px) {
  .product-title { font-size: clamp(32px, 10vw, 40px); }
  .product-wrapper { width: min(70vw, calc((100dvh - 190px) * 0.707)); }
  .cart-item { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .cart-item-image { width: 76px; }
  .cart-items { padding-inline: 14px; }
}

@media (max-width: 768px) and (max-height: 650px) {
  .product-hero { gap: 5px; padding-top: calc(62px + env(safe-area-inset-top)); }
  .title-window { height: 42px; }
  .product-wrapper { width: min(58vw, calc((100dvh - 150px) * 0.707)); }
}

/* ==========================================================
   ARCO MOBILE PRODUCT GALLERY — STEP 19.1
   Desktop unchanged. Swipe horizontally through tee images.
   ========================================================== */
@media (max-width: 768px) {
  /* Enlarge intro artwork by ~25% without changing desktop. */
  .landing-page .arco-logo {
    width: min(85vw, 560px);
    max-width: 85vw;
    transform: scale(1.25);
    transform-origin: center;
  }

  /* One continuous yellow background from header to product details. */
  .tee-page { background: #f9ea86; }
  .tee-page .site-header { background: #f9ea86; }

  /* Mobile-only, touch-friendly horizontal gallery. */
  .tee-page .tee-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 10px;
    padding: calc(80px + env(safe-area-inset-top)) 12px 14px;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f9ea86;
  }
  .tee-page .tee-gallery::-webkit-scrollbar { display: none; }
  .tee-page .tee-image {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background: #fff;
  }
  .tee-page .tee-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .tee-page .tee-info {
    padding-top: 22px;
  }
}


/* ==========================================================
   ARCO ONE-OF-ONE — MOBILE TYPE REFINEMENT
   Scoped to One-of-One; desktop, tee and magazine unchanged.
   ========================================================== */
@media (max-width: 768px) {
  .one-page .one-image-hint {
    font-size: 12px;
    line-height: 1.3;
    margin-top: 8px;
  }

  .one-page .one-details {
    margin-top: 20px;
  }

  .one-page .one-price {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .one-page .one-description {
    font-size: 15px;
    line-height: 1.38;
    margin-bottom: 20px;
    max-width: 100%;
  }
}


/* Previous product: mirrored navigation tab */
.prev-tab {
    position: absolute;
    top: 50%;
    left: -30px;
    width: 47px;
    height: 36px;
    transform: translateY(-50%);
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 1;
    -webkit-tap-highlight-color: transparent;
    transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.prev-tab .next-tab-inner {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 7px;
    box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.10);
}
.prev-tab.is-flipping { pointer-events: none; }
.prev-tab.is-flipping .next-tab-inner { animation-play-state: paused; }
@media (hover: hover) {
    .prev-tab:not(.is-flipping):hover { left: -45px; }
    .prev-tab:not(.is-flipping):hover .next-tab-inner { animation-play-state: paused; }
    .prev-tab:not(.is-flipping):hover .next-tab-arrow { transform: translateX(-3px); }
}
.prev-tab:not(.is-flipping):active { left: -41px; }
.prev-tab:not(.is-flipping):active .next-tab-inner { transform: scale(0.94); animation: none; }
.prev-tab:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .prev-tab .next-tab-inner { animation: none; }
}
@media (max-width: 768px) {
    .prev-tab { left: -31px; width: 48px; height: 38px; }
    .prev-tab:not(.is-flipping):active { left: -35px; }
}

/* Homepage arrows tuck behind the product, with a small exposed tap area. */
.product-wrapper .next-tab,
.product-wrapper .prev-tab {
    z-index: 1;
    width: 48px;
    height: 42px;
    touch-action: manipulation;
}
.product-wrapper .next-tab { right: -25px; }
.product-wrapper .prev-tab { left: -25px; }

@media (hover: hover) and (pointer: fine) {
    .product-wrapper .next-tab:not(.is-flipping):hover { right: -32px; }
    .product-wrapper .prev-tab:not(.is-flipping):hover { left: -32px; }
}

@media (hover: none), (pointer: coarse) {
    .product-wrapper .next-tab,
    .product-wrapper .prev-tab { width: 52px; height: 48px; }
    .product-wrapper .next-tab { right: -30px; }
    .product-wrapper .prev-tab { left: -30px; }
    .product-wrapper .next-tab:not(.is-flipping):active { right: -34px; }
    .product-wrapper .prev-tab:not(.is-flipping):active { left: -34px; }
}

/* Compensate for the 1.06x scale applied after the first carousel turn.
   Keep the tabs behind the image while retaining an exposed click target. */
.product-wrapper.has-enlarged-product .next-tab { right: -42px; }
.product-wrapper.has-enlarged-product .prev-tab { left: -42px; }
@media (hover: hover) and (pointer: fine) {
    .product-wrapper.has-enlarged-product .next-tab:not(.is-flipping):hover { right: -49px; }
    .product-wrapper.has-enlarged-product .prev-tab:not(.is-flipping):hover { left: -49px; }
}
@media (hover: none), (pointer: coarse) {
    .product-wrapper.has-enlarged-product .next-tab { right: -47px; }
    .product-wrapper.has-enlarged-product .prev-tab { left: -47px; }
    .product-wrapper.has-enlarged-product .next-tab:not(.is-flipping):active { right: -51px; }
    .product-wrapper.has-enlarged-product .prev-tab:not(.is-flipping):active { left: -51px; }
}

/* Homepage header — uncropped 2215 × 1693 logo, aligned with cart. */
.home-page .site-header {
    align-items: center;
}
.home-page .site-logo {
    position: static;
    width: clamp(75px, 8vw, 90px);
    height: auto;
    overflow: visible;
    flex: 0 0 auto;
}
.home-page .site-logo img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none;
}
.home-page .cart-button {
    margin-top: 0;
}

/* Preserve the existing mobile product layout and logo width. */
@media (max-width: 768px) {
    .home-page .site-logo {
        width: 62px;
        height: auto;
    }
    .home-page .product-wrapper {
        width: min(64vw, calc((100dvh - 205px) * 0.707));
    }
}

/* Raise cart slightly to match the visual centre of the logo on desktop/tablet. */
@media (min-width: 769px) {
    .home-page .cart-button {
        transform: translateY(-8px);
    }
}

/* Entry animation fallback — preserve the existing intro styling. */
.landing-page .arco-logo[hidden],
.landing-page .intro-enter[hidden] { display: none !important; }
.landing-page .intro-fallback { object-fit: contain; }
.landing-page .intro-enter {
    position: absolute;
    bottom: max(32px, env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    background: transparent; border: 1px solid #111;
    color: #111; padding: 12px 22px;
    font: inherit; cursor: pointer; z-index: 1;
}


/* ==========================================================
   ARCO MAGAZINE — portrait cover, no letterboxing
   Scoped to the magazine page; tee/one-of-one unaffected.
   ========================================================== */
.magazine-page .magazine-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    min-height: 100svh;
    padding: 120px clamp(16px, 3vw, 52px) 48px;
}
.magazine-page .magazine-gallery {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}
.magazine-page .magazine-gallery .magazine-image {
    display: block;
    width: min(100%, calc(75svh * 1302 / 1842));
    height: auto;
    min-height: 0;
    aspect-ratio: 1302 / 1842;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: transparent;
}
.magazine-page .magazine-gallery .magazine-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1302 / 1842;
    object-fit: contain;
    object-position: center;
}
.magazine-page .magazine-info {
    min-width: 0;
    width: 100%;
}
@media (max-width: 768px) {
    .magazine-page .magazine-product {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        min-height: 0;
        padding: calc(88px + env(safe-area-inset-top)) 16px 48px;
    }
    .magazine-page .magazine-gallery {
        padding: 0;
        margin: 0;
    }
    .magazine-page .magazine-gallery .magazine-image {
        width: min(100%, calc(70svh * 1302 / 1842));
        height: auto;
        aspect-ratio: 1302 / 1842;
    }
    .magazine-page .magazine-gallery .magazine-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 1302 / 1842;
        object-fit: contain;
    }
    .magazine-page .magazine-info {
        position: relative;
        height: auto;
        min-height: 0;
        padding: 20px 4px calc(64px + env(safe-area-inset-bottom));
    }
}

/* ==========================================================
   ARCO MOBILE — CONSISTENT HEADER AND LARGER HOME HERO
   Desktop and product-detail layouts remain unchanged.
   ========================================================== */
.cart-button { font-weight: 700; }

@media (max-width: 768px) {
    /* Same logo size on homepage, tee, magazine and One-of-One. */
    .site-logo,
    .home-page .site-logo {
        width: 74px;
        height: auto;
        flex: 0 0 auto;
    }

    /* Use more of the phone viewport for the homepage feature. */
    .home-page .product-hero {
        gap: clamp(10px, 2vh, 18px);
    }
    .home-page .title-window {
        height: clamp(52px, 8vh, 72px);
    }
    .home-page .product-title {
        font-size: clamp(40px, 12vw, 66px);
    }
    .home-page .product-wrapper {
        width: min(78vw, 380px, calc((100dvh - 185px) * 0.707));
        max-height: 70dvh;
    }
}

/* Keep the hero visible on especially short phones. */
@media (max-width: 768px) and (max-height: 650px) {
    .home-page .product-wrapper {
        width: min(70vw, calc((100dvh - 160px) * 0.707));
    }
    .home-page .product-title {
        font-size: clamp(34px, 10.5vw, 52px);
    }
}

/* ==========================================================
   MOBILE HOMEPAGE — TWO-LINE MAGAZINE TITLE ONLY
   Keep ARCO TEE and ONE OF ONE unchanged.
   ========================================================== */
@media (max-width: 768px) {
    .home-page .title-window.has-magazine-title {
        height: clamp(102px, 15vh, 126px);
        transition: height 220ms ease;
    }
    .home-page .product-title.is-magazine-title {
        white-space: pre-line;
        font-size: clamp(37px, 10.5vw, 55px);
        line-height: 1.04;
        letter-spacing: -0.055em;
    }
}
@media (max-width: 768px) and (max-height: 650px) {
    .home-page .title-window.has-magazine-title {
        height: 98px;
    }
}


/* ==========================================================
   MOBILE HOMEPAGE — STABLE SINGLE-LINE TITLES AND ARROW TABS
   ========================================================== */
@media (max-width: 768px) {
    /* Magazine uses one line; the title window never changes height. */
    .home-page .title-window,
    .home-page .title-window.has-magazine-title {
        height: clamp(52px, 8vh, 72px);
        transition: none;
    }
    .home-page .product-title.is-magazine-title {
        white-space: nowrap;
        font-size: clamp(31px, 9.1vw, 55px);
        line-height: 1;
        letter-spacing: -0.06em;
    }

    /* Do not push tabs outward after the carousel's first rotation.
       Keep the small exposed arrow and existing tab-hop animation. */
    .home-page .product-wrapper .next-tab,
    .home-page .product-wrapper.has-enlarged-product .next-tab {
        right: -25px;
        width: 48px;
        height: 42px;
    }
    .home-page .product-wrapper .prev-tab,
    .home-page .product-wrapper.has-enlarged-product .prev-tab {
        left: -25px;
        width: 48px;
        height: 42px;
    }
    .home-page .product-wrapper .next-tab:not(.is-flipping):active,
    .home-page .product-wrapper.has-enlarged-product .next-tab:not(.is-flipping):active {
        right: -27px;
    }
    .home-page .product-wrapper .prev-tab:not(.is-flipping):active,
    .home-page .product-wrapper.has-enlarged-product .prev-tab:not(.is-flipping):active {
        left: -27px;
    }
}
@media (max-width: 768px) and (max-height: 650px) {
    .home-page .title-window,
    .home-page .title-window.has-magazine-title { height: 42px; }
}


/* Unified carousel arrow positioning — both sides, every slide. */
.home-page .product-wrapper .next-tab,
.home-page .product-wrapper .prev-tab {
    transition: opacity 180ms ease;
}
.home-page .product-wrapper .next-tab { right: -25px; }
.home-page .product-wrapper .prev-tab { left: -25px; }
/* The slide grows by 6% after the first rotation (3% on each side). */
.home-page .product-wrapper.has-enlarged-product .next-tab {
    right: calc(-25px - 3%);
}
.home-page .product-wrapper.has-enlarged-product .prev-tab {
    left: calc(-25px - 3%);
}
@media (hover: hover) and (pointer: fine) {
    .home-page .product-wrapper .next-tab:not(.is-flipping):hover { right: -27px; }
    .home-page .product-wrapper .prev-tab:not(.is-flipping):hover { left: -27px; }
    .home-page .product-wrapper.has-enlarged-product .next-tab:not(.is-flipping):hover { right: calc(-27px - 3%); }
    .home-page .product-wrapper.has-enlarged-product .prev-tab:not(.is-flipping):hover { left: calc(-27px - 3%); }
}
@media (max-width: 768px) {
    .home-page .product-wrapper.has-enlarged-product .next-tab { right: calc(-25px - 3%); }
    .home-page .product-wrapper.has-enlarged-product .prev-tab { left: calc(-25px - 3%); }
    .home-page .product-wrapper .next-tab:not(.is-flipping):active { right: -27px; }
    .home-page .product-wrapper .prev-tab:not(.is-flipping):active { left: -27px; }
    .home-page .product-wrapper.has-enlarged-product .next-tab:not(.is-flipping):active { right: calc(-27px - 3%); }
    .home-page .product-wrapper.has-enlarged-product .prev-tab:not(.is-flipping):active { left: calc(-27px - 3%); }
}

/* Shared header logo sizing across homepage and product pages. */
@media (min-width: 769px) {
    .site-logo,
    .home-page .site-logo {
        width: clamp(75px, 8vw, 90px);
        height: auto;
        flex: 0 0 auto;
    }
}

/* ARCO legal navigation — intentionally quiet and independent of product layouts. */
.arco-legal-footer {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    z-index: 12;
    max-width: calc(100vw - 24px);
    white-space: nowrap;
}
.arco-legal-footer a {
    font: 400 10px/1.4 Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
    color: rgba(0,0,0,.62);
    text-decoration: none;
}
.arco-legal-footer a:hover, .arco-legal-footer a:focus-visible {
    color: #000;
    text-decoration: underline;
}
/* On scrolling product pages, the footer belongs after the content. */
.product-page .arco-legal-footer {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    padding: 28px 12px 22px;
    background: #f9ea86;
}
@media (max-width: 768px) {
    .arco-legal-footer { gap: 9px; bottom: max(9px, env(safe-area-inset-bottom)); }
    .arco-legal-footer a { font-size: 9px; }
}
/* Dedicated policy pages. */
body.arco-policy-page { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; color: #000; }
.arco-policy-page .site-header { position: relative; }
.arco-policy-content { max-width: 760px; margin: 50px auto 100px; padding: 0 24px; }
.arco-policy-content h1 { font-size: clamp(34px, 6vw, 66px); letter-spacing: -.055em; line-height: 1; margin: 0 0 14px; }
.arco-policy-content .policy-date { font-size: 11px; margin-bottom: 42px; opacity: .7; }
.arco-policy-content h2 { font-size: 18px; margin: 34px 0 10px; letter-spacing: -.025em; }
.arco-policy-content p, .arco-policy-content li { font-size: 14px; line-height: 1.7; }
.arco-policy-content a { color: inherit; text-underline-offset: 3px; }
.arco-policy-content ul { padding-left: 20px; }
.arco-policy-page .arco-legal-footer { position: relative; left: auto; bottom: auto; transform: none; padding: 24px 12px; }