.domain-button--warm {
    color: #2f1608;
    background: #f19b47;
    box-shadow: 0 18px 42px rgba(161, 82, 24, 0.24);
}

.domain-listing-card--bathhouse {
    color: #311708;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 236, 203, 0.88), transparent 26%),
        linear-gradient(140deg, rgba(255, 248, 238, 0.98), rgba(234, 155, 79, 0.86) 58%, rgba(93, 45, 31, 0.78)),
        repeating-linear-gradient(155deg, rgba(96, 47, 24, 0.2) 0 1px, transparent 1px 42px);
}

.domain-listing-card--bathhouse::before {
    background:
        linear-gradient(160deg, transparent 0 36%, rgba(87, 42, 23, 0.16) 36% 37%, transparent 37% 74%, rgba(87, 42, 23, 0.12) 74% 75%, transparent 75%),
        radial-gradient(ellipse at 72% 22%, rgba(76, 30, 24, 0.24), transparent 30%);
}

.domain-card-token-art {
    position: absolute;
    top: 1.35rem;
    right: 1rem;
    width: min(46%, 230px);
    aspect-ratio: 1.55;
    transform: rotate(-9deg);
    filter: drop-shadow(0 18px 22px rgba(78, 34, 21, 0.34));
}

.domain-card-token-art::before {
    content: "";
    position: absolute;
    inset: 22% -4% 4%;
    background: radial-gradient(ellipse, rgba(86, 39, 22, 0.34), transparent 68%);
    transform: rotate(8deg);
}

.domain-card-token {
    position: absolute;
    width: 42%;
    height: 62%;
    background:
        linear-gradient(90deg, rgba(24, 22, 30, 0.68) 0 12%, transparent 12% 76%, rgba(24, 22, 30, 0.55) 76% 86%, transparent 86%),
        linear-gradient(145deg, #f25a55 0%, #c92d36 60%, #87202a 100%);
    border: 2px solid rgba(88, 28, 29, 0.72);
    border-radius: 6px;
    box-shadow:
        inset 0 5px 0 rgba(255, 139, 112, 0.24),
        inset 0 -7px 0 rgba(44, 24, 29, 0.42),
        0 8px 0 #67202a;
    transform: perspective(520px) rotateX(55deg);
}

.domain-card-token::after {
    content: "";
    position: absolute;
    left: 14%;
    bottom: 12%;
    width: 25%;
    height: 8%;
    background: #24202a;
    border-radius: 2px;
}

.domain-card-token--back {
    top: 4%;
    left: 6%;
    opacity: 0.8;
}

.domain-card-token--middle {
    top: 8%;
    left: 32%;
}

.domain-card-token--middle::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    width: 28%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: #f6aa32;
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(70, 34, 17, 0.25);
}

.domain-card-token--front {
    top: 24%;
    left: 56%;
}

.domain-card-token--front::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 32%;
    width: 18%;
    aspect-ratio: 1;
    background: #f6aa32;
    border-radius: 3px;
    box-shadow: 22px 17px 0 #f6aa32;
}

.bath-tokens-hero {
    color: #241207;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 229, 188, 0.9), transparent 26%),
        linear-gradient(138deg, rgba(255, 246, 232, 0.95) 0%, rgba(235, 172, 104, 0.82) 52%, rgba(88, 42, 31, 0.86) 100%),
        repeating-linear-gradient(155deg, rgba(98, 51, 25, 0.2) 0 2px, transparent 2px 84px);
}

.bath-tokens-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(165deg, transparent 0 20%, rgba(84, 39, 19, 0.12) 20% 20.5%, transparent 20.5% 43%, rgba(84, 39, 19, 0.1) 43% 43.5%, transparent 43.5%),
        repeating-linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 70px);
}

.bath-tokens-hero .sale-hero-heading,
.bath-tokens-hero .sale-hero-copy {
    text-shadow: 0 1px 0 rgba(255, 250, 243, 0.34);
}

.bath-tokens-art {
    position: relative;
    z-index: 1;
    width: min(540px, 100%);
    aspect-ratio: 1.48;
    justify-self: center;
    transform: rotate(-7deg);
    filter: drop-shadow(0 28px 42px rgba(77, 34, 19, 0.34));
}

.bath-tokens-art::before {
    content: "";
    position: absolute;
    inset: 8% 2%;
    background:
        repeating-linear-gradient(166deg, rgba(84, 44, 22, 0.2) 0 2px, transparent 2px 54px),
        linear-gradient(135deg, rgba(255, 218, 168, 0.5), rgba(91, 45, 32, 0.24));
    border-radius: 8px;
    transform: rotate(8deg);
}

.bath-token-stack {
    position: absolute;
    left: 9%;
    width: 82%;
    height: 42%;
    display: grid;
    grid-template-columns: 1.1fr 0.85fr 1.1fr;
    gap: 1.5%;
    transform: perspective(780px) rotateX(52deg) rotateZ(1deg);
}

.bath-token-stack--back {
    top: 24%;
    opacity: 0.84;
    transform: perspective(780px) rotateX(52deg) rotateZ(1deg) translateY(-22%);
}

.bath-token-stack--front {
    top: 38%;
}

.bath-token {
    position: relative;
    min-height: 138px;
    display: block;
    background:
        linear-gradient(90deg, rgba(22, 19, 28, 0.72) 0 10%, transparent 10% 19%, rgba(22, 19, 28, 0.62) 19% 28%, transparent 28% 74%, rgba(22, 19, 28, 0.55) 74% 83%, transparent 83%),
        linear-gradient(150deg, #f24e51 0%, #c62f37 64%, #8e2029 100%);
    border: 3px solid rgba(80, 25, 26, 0.68);
    border-radius: 8px;
    box-shadow:
        inset 0 8px 0 rgba(255, 121, 105, 0.22),
        inset 0 -10px 0 rgba(35, 21, 27, 0.42),
        0 12px 0 #69202a,
        0 22px 26px rgba(20, 12, 16, 0.32);
}

.bath-token::after {
    content: "";
    position: absolute;
    left: 12%;
    bottom: 12%;
    width: 22%;
    height: 7%;
    background: #22202a;
    border-radius: 3px;
    box-shadow: 0 2px 0 rgba(255, 130, 105, 0.18);
}

.bath-token--slim {
    min-height: 150px;
}

.bath-token--circle::before,
.bath-token--two-squares::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    background: #f6aa32;
    box-shadow: 0 2px 0 rgba(70, 34, 17, 0.28);
}

.bath-token--circle::before {
    width: 30%;
    aspect-ratio: 1;
    border-radius: 999px;
}

.bath-token--two-squares::before {
    width: 18%;
    aspect-ratio: 1;
    border-radius: 3px;
    box-shadow:
        0 0 0 0 #f6aa32,
        34px 24px 0 #f6aa32;
}

.bath-token-shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 12%;
    height: 24%;
    background: radial-gradient(ellipse, rgba(83, 37, 19, 0.36), transparent 68%);
    transform: rotate(7deg);
}

.sale-detail--bath-tokens {
    background:
        linear-gradient(180deg, #fff7ee, #f6e3cc);
}

.sale-detail--bath-tokens .domain-kicker {
    color: #b13a2d;
}

.domain-inquiry-page--bath-tokens .domain-inquiry-shell {
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 238, 208, 0.92), transparent 28%),
        linear-gradient(138deg, rgba(255, 246, 232, 0.96), rgba(236, 166, 94, 0.86) 52%, rgba(91, 45, 31, 0.88) 100%),
        repeating-linear-gradient(155deg, rgba(96, 47, 24, 0.18) 0 2px, transparent 2px 72px);
}

.domain-inquiry-token-art {
    position: absolute;
    top: 8%;
    right: max(1rem, 6vw);
    width: min(270px, 42vw);
    aspect-ratio: 1.55;
    transform: rotate(-10deg);
    opacity: 0.72;
    filter: drop-shadow(0 24px 28px rgba(78, 34, 21, 0.34));
}

.domain-inquiry-token-art span {
    position: absolute;
    width: 42%;
    height: 62%;
    background:
        linear-gradient(90deg, rgba(24, 22, 30, 0.68) 0 12%, transparent 12% 76%, rgba(24, 22, 30, 0.55) 76% 86%, transparent 86%),
        linear-gradient(145deg, #f25a55 0%, #c92d36 60%, #87202a 100%);
    border: 2px solid rgba(88, 28, 29, 0.72);
    border-radius: 6px;
    box-shadow:
        inset 0 5px 0 rgba(255, 139, 112, 0.24),
        inset 0 -7px 0 rgba(44, 24, 29, 0.42),
        0 8px 0 #67202a;
    transform: perspective(520px) rotateX(55deg);
}

.domain-inquiry-token-art span:nth-child(1) {
    top: 4%;
    left: 6%;
}

.domain-inquiry-token-art span:nth-child(2) {
    top: 8%;
    left: 32%;
}

.domain-inquiry-token-art span:nth-child(3) {
    top: 24%;
    left: 56%;
}

@media (max-width: 860px) {
    .bath-tokens-art {
        width: min(430px, 92vw);
        margin: 1rem auto 0;
    }
}