/*
 * The webshop and till page (pg-webshop): the product page demo with its
 * variants and cart, the live orders list, the big zero, the photo pair and
 * the "added to your cart" toast. The page's hero, list and rows are in
 * product.css.
 */
@layer marketing {
    .mk .pg-webshop {
        /* webshop: a product page */
        & .pdp {
            max-width: 1040px;
            margin: 0 auto;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: #fff;
            overflow: hidden;
            box-shadow: 0 40px 100px -50px rgb(14 17 23 / 0.35);
            text-align: left;
        }
        & .store-bar {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 18px 28px;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
        }
        & .store-bar b {
            font-weight: 600;
            letter-spacing: -0.02em;
            font-size: 16px;
        }
        & .store-bar nav {
            display: flex;
            gap: 20px;
            color: var(--muted);
        }
        & .store-bar .cart {
            margin-left: auto;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        & .store-bar .cart span {
            min-width: 20px;
            height: 20px;
            border-radius: 10px;
            background: var(--text);
            color: #fff;
            font-size: 11px;
            display: grid;
            place-items: center;
            padding: 0 6px;
            transition: transform 0.4s var(--out);
        }
        & .store-bar .cart span.bump {
            transform: scale(1.25);
        }
        & .pdp-body {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        }
        & .pdp-img {
            aspect-ratio: 4 / 5;
            overflow: hidden;
            background: var(--bg-2);
        }
        & .pdp-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        & .pdp-info {
            padding: clamp(24px, 4vw, 48px);
            display: grid;
            gap: 18px;
            align-content: center;
        }
        & .pdp-info small {
            font: 400 13px / 1 var(--f-mono);
            color: var(--faint);
        }
        & .pdp-info h3 {
            font-size: clamp(28px, 3vw, 40px);
            letter-spacing: -0.035em;
        }
        & .pdp-info .pr {
            font-size: 22px;
            font-variant-numeric: tabular-nums;
        }
        & .pdp-info p {
            color: var(--muted);
            font-size: 15px;
        }
        & .pdp-info .btn {
            justify-content: center;
            height: 50px;
        }
        & .pdp-info .stock {
            font-size: 13px;
            color: var(--green);
        }
        & .opts {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        & .opts button {
            height: 40px;
            padding: 0 14px;
            border-radius: 8px;
            border: 1px solid var(--line);
            background: #fff;
            cursor: pointer;
            font-size: 14px;
        }
        & .opts button.on {
            border-color: var(--text);
        }

        /* webshop: online and till orders in one list */
        & .orders {
            max-width: 880px;
            margin: 0 auto;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: #fff;
            overflow: hidden;
            box-shadow: 0 40px 100px -50px rgb(14 17 23 / 0.3);
        }
        & .orders-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 22px;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
        }
        & .orders-head b {
            font-weight: 500;
        }
        & .orders-head span {
            color: var(--faint);
            font-variant-numeric: tabular-nums;
        }
        & .orow {
            display: grid;
            grid-template-columns: 90px 90px minmax(0, 1fr) 90px 80px;
            gap: 12px;
            align-items: center;
            padding: 14px 22px;
            border-bottom: 1px solid var(--line);
            font-size: 14px;
            font-variant-numeric: tabular-nums;
        }
        & .orow:last-child {
            border-bottom: 0;
        }
        & .orow.new {
            animation: mk-shop-row-in 0.8s var(--out) both;
        }
        & .orow .ch {
            justify-self: start;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 6px;
            background: var(--bg-2);
            color: var(--muted);
        }
        & .orow .ch.pos {
            background: #fff4e0;
            color: #8a5300;
        }
        & .orow .num {
            color: var(--faint);
        }
        & .orow .amt {
            text-align: right;
        }
        & .orow .stk {
            text-align: right;
            color: var(--muted);
        }
        & .orow.th {
            color: var(--faint);
            font-size: 12px;
            padding-block: 10px;
            background: var(--bg-2);
        }

        /* webshop: 0% commission */
        & .big-zero {
            text-align: center;
        }
        & .big-zero .z {
            font-size: clamp(120px, 22vw, 280px);
            font-weight: 600;
            letter-spacing: -0.06em;
            line-height: 0.9;
        }
        & .big-zero .z small {
            font-size: 0.4em;
            letter-spacing: -0.03em;
        }
        & .big-zero .h2 {
            margin-top: 24px;
        }
        & .big-zero .lead {
            margin: 20px auto 0;
        }

        & .photo-duo {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }
        & .photo-duo figure {
            margin: 0;
            display: grid;
            gap: 14px;
        }
        & .photo-duo .ph {
            aspect-ratio: 4 / 3;
            border-radius: 16px;
            background: #eee6dc;
        }
        & .photo-duo .ph img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        & .photo-duo figcaption b {
            display: block;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: -0.02em;
        }
        & .photo-duo figcaption span {
            color: var(--muted);
            font-size: 15px;
        }

        /* "added to your cart" */
        & .toast {
            position: fixed;
            z-index: 70;
            left: 50%;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px));
            transform: translate(-50%, 150%);
            background: var(--text);
            color: #fff;
            padding: 12px 18px;
            border-radius: 10px;
            font-size: 14px;
            transition: transform 0.5s var(--out);
            max-width: calc(100% - 32px);
        }
        & .toast.on {
            transform: translate(-50%, 0);
        }
    }

    @keyframes mk-shop-row-in {
        0% {
            opacity: 0;
            transform: translateY(-8px);
            background: #f2f2f2;
        }
    }

    @media (max-width: 760px) {
        .mk .pg-webshop .store-bar nav {
            display: none;
        }
        .mk .pg-webshop .pdp-body {
            grid-template-columns: minmax(0, 1fr);
        }
        .mk .pg-webshop .pdp-img {
            aspect-ratio: 4 / 3;
        }
        .mk .pg-webshop .photo-duo {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    @media (max-width: 640px) {
        .mk .pg-webshop .orow {
            grid-template-columns: 70px minmax(0, 1fr) 80px;
        }
        .mk .pg-webshop .orow .num,
        .mk .pg-webshop .orow .stk {
            display: none;
        }
    }
}