/* =============================================================================
   ATELIER — 跨境独立站主题样式
   -----------------------------------------------------------------------------
   由 prototype/storefront.html 的设计稿落地。核心诉求两条：
   1. 整体视觉：米色纸感底 + 衬线标题 + 金色点缀，区别于 Bagisto 默认主题。
   2. 商品图尺寸硬约束：任何一档商品图都在固定比例的框内完整显示
      （object-fit: contain），既不撑破页面，也不被裁切或拉伸变形。
   ========================================================================== */

:root {
    --at-cream: #f7f5f0;
    --at-paper: #ffffff;
    --at-line: #e9e3d6;
    --at-line-soft: #f0ece2;
    --at-ink: #14171e;
    --at-ink-2: #3a4256;
    --at-muted: #7c7a72;
    --at-gold: #c97b3f;
    --at-gold-soft: rgba(201, 123, 63, .08);
    --at-sans: 'Poppins', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --at-serif: 'DM Serif Display', 'Songti SC', Georgia, serif;
    --at-mono: 'JetBrains Mono', ui-monospace, monospace;
    --at-radius: 3px;
    --at-shell: 1180px;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--at-cream);
    color: var(--at-ink);
    font-family: var(--at-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* 防止任何子元素把页面撑出横向滚动条 */
    overflow-x: hidden;
}

body ::selection {
    background: var(--at-gold);
    color: #fff;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app > main {
    flex: 1 0 auto;
}

/* =============================================================================
   工具类补充
   -----------------------------------------------------------------------------
   主题的 CSS 是随项目一起发布的预构建产物，编译之后无法再生成新的
   Tailwind 工具类，所以这里用到的、构建产物里没有的类全部由本文件提供。
   ========================================================================== */

.at-flex-none {
    flex: none;
}

.at-contain {
    object-fit: contain;
}

.at-oyh {
    overflow-y: hidden;
}

.at-square {
    aspect-ratio: 4 / 5;
}

.at-snap {
    scroll-snap-align: center;
}

.at-dot {
    background: #9ca3af;
}

.at-dot-on {
    background: var(--at-ink);
    opacity: 1;
}

.at-shadow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.at-radius-sm {
    border-radius: 2px;
}

.at-radius {
    border-radius: 3px;
}

.at-ink-bg {
    background: var(--at-ink);
}

.at-gold-bg {
    background: var(--at-gold);
}

.at-badge-text {
    font-size: 9.5px;
    letter-spacing: .1em;
}

/* 缩略图列 */
.at-thumbs {
    width: 5.125rem;
}

/* 详情页缩略图：4:5 小方 */
.at-media-thumb {
    aspect-ratio: 4 / 5;
    width: 74px;
    flex: none;
    align-self: flex-start;
    min-height: 1px;
}

.at-thumbs-scroll {
    max-height: min(78vh, 760px);
}

.at-thumb-box {
    aspect-ratio: 4 / 5;
}

.at-thumb-on {
    border-color: var(--at-ink);
}

.at-thumb-off {
    border-color: var(--at-line-soft);
}

/* 移动端主图：固定 4:5 竖幅，且整体高度受视口约束 */
.at-media-mobile {
    width: 100%;
    max-width: 416px;
    aspect-ratio: 4 / 5;
    max-height: min(70vh, 520px);
    margin-inline: auto;
}

/* 列表视图缩略图 */
.at-list-thumb {
    width: 10rem;
}

@media (min-width: 640px) {
    .at-list-thumb {
        width: 12rem;
    }
}

/* 移动端视频 */
.at-video {
    background: #000;
    object-fit: contain;
}

/* =============================================================================
   商品详情页画廊列
   -----------------------------------------------------------------------------
   画廊组件的根节点是 .mt-12.flex 的 flex 子项，flex 子项默认是
   shrink-to-fit（宽度由内容决定），而画廊内部整条链路都用 width:100%，
   百分比在宽度不定的容器里会解析为 0，盒子最终只剩 1px+1px 边框 = 2px，
   主图因此塌陷。这里给根节点一个确定宽度，从根上消除这个问题。
   ========================================================================== */
.at-gallery {
    width: 100%;
    min-width: 0;
}

@media (min-width: 1180px) {
    .at-gallery {
        flex: 1 1 0%;
        width: auto;
    }
}

/* =============================================================================
   首页 Hero（原型 .hero）
   ========================================================================== */
.at-hero {
    position: relative;
    background: var(--at-ink);
    overflow: hidden;
}

.at-hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.at-hero-track::-webkit-scrollbar {
    display: none;
}

.at-hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 430px;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.at-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.at-hero-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(12, 10, 8, .62) 0%, rgba(12, 10, 8, .34) 52%, rgba(12, 10, 8, .06) 100%);
}

.at-hero-in {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--at-shell);
    margin: 0 auto;
    padding: 0 26px;
}

.at-hero-title {
    font-family: var(--at-serif);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.01em;
    max-width: 15ch;
    color: #fff;
}

.at-hero-sub {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
    max-width: 42ch;
}

.at-hero-cta {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.at-btn {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
    transition: background-color .2s, color .2s, border-color .2s;
}

/*
 * Hero 里的按钮是「白字透明底 / 白字墨底」，
 * 必须限定在 .at-hero 作用域内 —— 后面通用按钮区还有一套 .at-btn-line
 * （墨字 / 浅灰边框），不限定的话会被后面那套覆盖，
 * 深色 Hero 上的白字就变成深字，等于看不见。
 */
.at-hero .at-btn-dark {
    background: var(--at-ink);
    color: #fff;
    border: 1px solid var(--at-ink);
}

.at-hero .at-btn-dark:hover {
    background: var(--at-gold);
    border-color: var(--at-gold);
    color: #fff;
}

.at-hero .at-btn-line {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

.at-hero .at-btn-line:hover {
    background: #fff;
    color: var(--at-ink);
    border-color: #fff;
}

.at-hero-dots {
    position: absolute;
    bottom: 20px;
    left: 26px;
    z-index: 3;
    display: flex;
    gap: 7px;
}

.at-hero-dot {
    width: 22px;
    height: 2.5px;
    background: rgba(255, 255, 255, .4);
    border-radius: 2px;
}

.at-hero-dot-on {
    background: #fff;
    width: 38px;
}

@media (max-width: 900px) {
    .at-hero-slide {
        height: 330px;
    }

    .at-hero-title {
        font-size: 36px;
    }

    .at-hero-in {
        padding: 0 16px;
    }
}

@media (max-width: 520px) {
    .at-hero-slide {
        height: 280px;
    }

    .at-hero-title {
        font-size: 30px;
    }

    .at-hero-sub {
        font-size: 13px;
    }

    .at-hero-btn,
    .at-btn {
        padding: 9px 19px;
        font-size: 12px;
    }
}

/* =============================================================================
   首页区块通用（原型 .sec / .sec-head）
   ========================================================================== */
.at-sec {
    max-width: var(--at-shell);
    margin: 0 auto;
    padding: 0 26px;
}

.at-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding-top: 46px;
}

.at-sec-title {
    font-family: var(--at-serif);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: -.005em;
    color: var(--at-ink);
}

.at-sec-more {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--at-gold);
    border-bottom: 1px solid var(--at-gold);
    padding-bottom: 2px;
    white-space: nowrap;
}

.at-sec-more:hover {
    color: var(--at-ink);
    border-color: var(--at-ink);
}

@media (max-width: 900px) {
    .at-sec {
        padding: 0 16px;
    }

    .at-sec-head {
        padding-top: 34px;
    }

    .at-sec-title {
        font-size: 22px;
    }
}

/* =============================================================================
   商品网格（原型 .pgrid：5 列 → 3 列 → 2 列）
   ========================================================================== */
.at-pgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px 16px;
}

.at-pcard {
    display: block;
    min-width: 0;
}

@media (max-width: 1180px) {
    .at-pgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) {
    .at-pgrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 10px;
    }
}

/* =============================================================================
   分类宫格（原型 .mgrid：6 列 → 4 列 → 3 列）
   ========================================================================== */
.at-mgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 14px;
}

.at-mcell {
    display: block;
    text-align: center;
    min-width: 0;
}

.at-mcell .at-media-cat {
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-mname {
    display: block;
    font-size: 12.5px;
    margin-top: 9px;
    color: var(--at-ink-2);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .at-mgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 520px) {
    .at-mgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 8px;
    }

    .at-mname {
        font-size: 11px;
    }
}

/* =============================================================================
   品牌馆大图卡（原型 .brands / .bcard）
   ========================================================================== */
.at-brand-sec {
    padding-bottom: 8px;
}

.at-brands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.at-bcard {
    position: relative;
    height: 168px;
    border-radius: var(--at-radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: block;
    transition: transform .3s;
}

.at-bcard:hover {
    transform: translateY(-2px);
}

.at-bcard-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(12, 10, 8, .42) 0%, rgba(12, 10, 8, .1) 45%, rgba(12, 10, 8, .5) 100%);
}

.at-bcard-txt {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.at-bcard-name {
    font-family: var(--at-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .1em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}

.at-bcard-slogan {
    font-size: 10.5px;
    letter-spacing: .26em;
    opacity: .82;
    margin-top: 6px;
    text-transform: uppercase;
}

.at-bcard-cta {
    position: absolute;
    bottom: 11px;
    left: 13px;
    z-index: 2;
    font-size: 11px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    padding: 4px 11px;
    border-radius: 2px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .25s, transform .25s;
}

.at-bcard:hover .at-bcard-cta {
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    .at-brands {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .at-brands {
        grid-template-columns: 1fr;
    }

    .at-bcard {
        height: 140px;
    }
}

/* =============================================================================
   头部（原型 .announce / .hdr / .logo / .nav / .searchbar / .pill / .mega）

   头部结构由主题层完全接管（views/components/layouts/header/**），
   这里只负责视觉。核心 Velocity 的头部样式一律不再依赖。
   ========================================================================== */

.at-header-wrap {
    position: sticky;
    top: 0;
    z-index: 60;
}

/* ---------------- 公告条 ---------------- */
.at-announce {
    background: var(--at-ink);
    color: #f2ede4;
    font-size: 12px;
    letter-spacing: .04em;
}

.at-announce-in {
    max-width: var(--at-shell);
    margin: 0 auto;
    padding: 8px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex-wrap: wrap;
}

.at-announce-in > span {
    opacity: .9;
}

.at-announce-sp {
    flex: 1;
}

.at-announce-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.at-announce-switch b {
    color: var(--at-gold);
    font-weight: 500;
}

.at-announce-switch a {
    color: #f2ede4;
    opacity: .65;
}

.at-announce-switch a:hover {
    color: var(--at-gold);
    opacity: 1;
}

/* ---------------- 头部主行 ----------------
   毛玻璃放在 ::before 上，不能放在 .at-hdr 本身：
   backdrop-filter / filter / transform 会为 position:fixed 的后代生成包含块，
   而迷你购物车抽屉（核心 v-mini-cart）就在头部里面，直接写在这里会把抽屉
   困在头部盒子里（表现成顶部一条 60px 高的白条，而不是右侧全高抽屉）。
   伪元素不是 DOM 祖先，没有这个问题。 */
.at-hdr {
    position: relative;
    border-bottom: 1px solid var(--at-line-soft);
}

.at-hdr::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
}

.at-hdr-in {
    max-width: var(--at-shell);
    margin: 0 auto;
    padding: 0 26px;
    height: 66px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* Logo：衬线字标 + 等宽副标 */
.at-logo {
    font-family: var(--at-serif);
    font-size: 23px;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--at-ink);
    line-height: 1.05;
    flex: none;
}

.at-logo small {
    display: block;
    font-family: var(--at-mono);
    font-size: 8.5px;
    letter-spacing: .34em;
    color: var(--at-muted);
    margin-top: 2px;
}

/* ---------------- 主导航 ---------------- */
.at-nav {
    display: flex;
    gap: 26px;
    flex: 1;
    min-width: 0;
    height: 100%;
    align-items: center;
}

.at-nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.at-nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--at-ink-2);
    position: relative;
    padding: 4px 0;
    white-space: nowrap;
    display: inline-block;
}

.at-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1.5px;
    width: 0;
    background: var(--at-gold);
    transition: .25s;
}

.at-nav-link:hover {
    color: var(--at-ink);
}

.at-nav-link:hover::after {
    width: 100%;
}

.at-nav-link-all {
    color: var(--at-ink);
}

/* ---------------- 品牌下拉 ---------------- */
.at-mega {
    position: absolute;
    top: 100%;
    left: -24px;
    min-width: 680px;
    background: var(--at-paper);
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
    box-shadow: 0 18px 40px -12px rgba(20, 23, 30, .18);
    padding: 24px 26px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .22s ease;
    z-index: 70;
}

.at-nav-has-menu:hover .at-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.at-mega-in {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 28px;
}

.at-mega-brand {
    display: block;
    font-family: var(--at-serif);
    font-size: 15px;
    color: var(--at-ink);
    margin-bottom: 8px;
}

.at-mega-brand:hover {
    color: var(--at-gold);
}

.at-mega-tags {
    list-style: none;
    margin: 0;
    padding: 0;
}

.at-mega-tags li {
    margin-bottom: 5px;
}

.at-mega-tags a {
    font-size: 12.5px;
    color: var(--at-muted);
}

.at-mega-tags a:hover {
    color: var(--at-ink);
}

/* ---------------- 胶囊搜索条 ---------------- */
.at-searchbar {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--at-cream);
    border: 1px solid var(--at-line);
    border-radius: 24px;
    padding: 9px 16px;
    flex: 1;
    max-width: 280px;
}

.at-searchbar input {
    border: none;
    background: none;
    outline: none;
    font-family: var(--at-sans);
    font-size: 13px;
    width: 100%;
    color: var(--at-ink);
}

.at-searchbar input::placeholder {
    color: #a8a49b;
}

.at-searchbar-icon {
    font-size: 15px;
    color: var(--at-muted);
    flex: none;
    line-height: 1;
}

/* ---------------- 右侧按钮组 ---------------- */
.at-hdr-r {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.at-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--at-line);
    border-radius: 20px;
    color: var(--at-ink-2);
    background: transparent;
    cursor: pointer;
    transition: .2s;
    position: relative;
    padding: 0;
}

.at-pill:hover {
    border-color: var(--at-ink);
    color: var(--at-ink);
}

.at-pill-icon {
    font-size: 17px;
    line-height: 1;
    display: block;
}

/* 购物车角标：核心 mini-cart 自带，主题里只调位置/配色 */
.at-pill-cart .icon-cart {
    font-size: 17px;
}

.at-pill-cart span[class*='absolute'] {
    background: var(--at-gold) !important;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    top: -5px !important;
    right: -6px !important;
    left: auto !important;
}

/* ---------------- 移动端头部 ---------------- */
.at-m-hdr {
    background: var(--at-paper);
    border-bottom: 1px solid var(--at-line);
    padding: 11px 14px 10px;
}

.at-m-row1 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.at-m-logo {
    font-family: var(--at-serif);
    font-size: 17px;
    letter-spacing: .05em;
    white-space: nowrap;
    color: var(--at-ink);
}

.at-m-icons {
    display: flex;
    gap: 14px;
    margin-left: auto;
    color: var(--at-ink-2);
    align-items: center;
}

.at-m-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
}

.at-searchbar-m {
    max-width: none;
    width: 100%;
}

/* 汉堡菜单 + 抽屉 */
.at-m-menu {
    position: relative;
}

.at-m-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 22px;
    display: grid;
    gap: 4px;
}

.at-m-menu > summary::-webkit-details-marker {
    display: none;
}

.at-m-menu > summary span {
    display: block;
    height: 1.6px;
    background: var(--at-ink);
    border-radius: 2px;
}

.at-m-drawer {
    position: absolute;
    top: 30px;
    left: -14px;
    width: 268px;
    max-height: 70vh;
    overflow: auto;
    background: var(--at-paper);
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    box-shadow: 0 18px 40px -12px rgba(20, 23, 30, .22);
    padding: 14px;
    z-index: 80;
}

.at-m-drawer-link {
    display: block;
    padding: 7px 8px;
    font-size: 13.5px;
    color: var(--at-ink-2);
    border-radius: 2px;
}

.at-m-drawer-link:hover {
    background: var(--at-cream);
    color: var(--at-ink);
}

.at-m-drawer-cat {
    font-family: var(--at-serif);
    font-size: 15px;
    color: var(--at-ink);
    margin-top: 6px;
    border-bottom: 1px solid var(--at-line-soft);
}

.at-m-drawer-group {
    padding-left: 8px;
    border-left: 1px solid var(--at-line-soft);
    margin-left: 8px;
}

/* =============================================================================
   页脚（原型 .foot / .foot-in / .foot-bot）
   ========================================================================== */

.at-foot {
    background: var(--at-ink);
    color: #cfc9bd;
    margin-top: 64px;
    padding: 48px 26px 26px;
}

.at-foot-in {
    max-width: var(--at-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 34px;
}

.at-foot-logo {
    font-family: var(--at-serif);
    font-size: 21px;
    color: #fff;
    letter-spacing: .08em;
}

.at-foot-sub {
    font-size: 12.5px;
    margin-top: 9px;
    max-width: 30ch;
    color: #9b958a;
    line-height: 1.7;
}

.at-foot-pay {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.at-foot-pay span {
    border: 1px solid #3a3f4a;
    border-radius: 3px;
    padding: 4px 9px;
    font-size: 10px;
    font-family: var(--at-mono);
    color: #9b958a;
}

.at-foot-col h4 {
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    margin-bottom: 13px;
}

.at-foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.at-foot-col li {
    margin-bottom: 8px;
}

.at-foot-col a {
    font-size: 13px;
    color: #cfc9bd;
}

.at-foot-col a:hover {
    color: #fff;
}

.at-foot-bot {
    max-width: var(--at-shell);
    margin: 34px auto 0;
    border-top: 1px solid #2a2f38;
    padding-top: 18px;
    font-size: 11.5px;
    color: #7e7a72;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1180px) {
    .at-hdr-in,
    .at-announce-in,
    .at-foot-in,
    .at-foot-bot {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .at-foot-in {
        grid-template-columns: 1fr 1fr;
    }

    .at-foot-brand {
        grid-column: 1 / -1;
    }
}

/* =============================================================================
   分类页（原型 .crumb / .cbhead / .cblayout / .sortbar）
   ========================================================================== */
/* =============================================================================
   分类页（原型 .crumb / .cbhead / .cblayout / .fgroup / .sortbar）
   ========================================================================== */

/* 面包屑 */
.at-crumb {
    font-size: 12px;
    color: var(--at-muted);
    padding: 16px 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.at-crumb a {
    color: var(--at-muted);
}

.at-crumb a:hover {
    color: var(--at-ink);
}

.at-crumb span {
    margin: 0 7px;
    opacity: .5;
}

.at-crumb-cur {
    color: var(--at-ink);
    font-weight: 500;
}

/* 排序条 */
.at-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--at-line);
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--at-muted);
    flex-wrap: wrap;
}

.at-sortbar-left,
.at-sortbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.at-sortbar-label {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
}

.at-sortbar-btns {
    display: flex;
    gap: 20px;
}

.at-sortbar-btns button {
    font-size: 12.5px;
    color: var(--at-muted);
    position: relative;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
}

.at-sortbar-btns button:hover {
    color: var(--at-ink);
}

.at-sortbar-btns button.on {
    color: var(--at-ink);
    font-weight: 600;
}

.at-sortbar-btns button.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 2px;
    background: var(--at-gold);
}

.at-sortbar-limit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.at-sortbar-limit select {
    border: 1px solid var(--at-line);
    border-radius: 2px;
    background: var(--at-paper);
    color: var(--at-ink);
    font-size: 12.5px;
    padding: 5px 8px;
    outline: none;
}

.at-sortbar-mode {
    display: inline-flex;
    gap: 12px;
}

.at-sortbar-mode button {
    color: var(--at-muted);
    font-size: 18px;
    line-height: 1;
}

.at-sortbar-mode button.on {
    color: var(--at-ink);
}

/* 筛选栏：把核心的折叠面板改成原型的分组样式 */
.at-cat-side .panel-side {
    border: 0;
    padding: 0;
    max-height: none;
    min-width: 0;
}

.at-cat-side .panel-side > div {
    border-bottom: 0;
}

.at-cat-side .panel-side p.text-lg,
.at-cat-side .panel-side p.font-semibold {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--at-muted);
    font-weight: 500;
}

.at-cat-side label {
    font-size: 13px;
    color: var(--at-ink-2);
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    cursor: pointer;
}

.at-cat-side label:hover {
    color: var(--at-ink);
}

.at-cat-side input[type='checkbox'],
.at-cat-side input[type='radio'] {
    width: 13px;
    height: 13px;
    border: 1px solid #cfcabf;
    border-radius: 2px;
    accent-color: var(--at-ink);
}

@media (max-width: 1023px) {
    .at-sortbar-btns {
        gap: 14px;
    }
}

.at-cat-sec {
    padding-bottom: 60px;
}

.at-cat-banner {
    max-width: var(--at-shell);
    margin: 26px auto 0;
    padding: 0 26px;
}

.at-cat-banner img {
    display: block;
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--at-radius);
}

.at-cat-head {
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--at-line);
    margin-bottom: 26px;
}

.at-cat-title {
    font-family: var(--at-serif);
    font-size: 34px;
    font-weight: 400;
    color: var(--at-ink);
}

.at-cat-desc {
    color: var(--at-muted);
    font-size: 13px;
    margin-top: 7px;
    max-width: 70ch;
}

.at-cat-layout {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 34px;
}

.at-cat-side {
    min-width: 0;
}

.at-cat-main {
    min-width: 0;
}

.at-cat-grid {
    margin-top: 20px;
}

.at-cat-list {
    margin-top: 20px;
    display: grid;
    gap: 18px;
}

.at-empty {
    display: grid;
    place-items: center;
    padding: 90px 0;
    color: var(--at-muted);
    font-size: 15px;
    text-align: center;
}

.at-empty-title {
    font-family: var(--at-serif);
    font-size: 22px;
    color: var(--at-ink);
    margin-bottom: 8px;
}

.at-empty-desc {
    font-size: 13px;
    color: var(--at-muted);
}

.at-load-more {
    display: block;
    margin: 40px auto 0;
    padding: 11px 40px;
    border: 1px solid var(--at-ink);
    border-radius: 2px;
    background: var(--at-ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: .04em;
    transition: background-color .2s, border-color .2s;
}

.at-load-more:hover {
    background: var(--at-gold);
    border-color: var(--at-gold);
}

@media (max-width: 1180px) {
    .at-cat-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 520px) {
    .at-cat-title {
        font-size: 26px;
    }
}

/* =============================================================================
   通用排版
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--at-serif);
    font-weight: 400;
    letter-spacing: -.005em;
}

.at-serif {
    font-family: var(--at-serif);
}

.at-mono {
    font-family: var(--at-mono);
}

.at-shell {
    max-width: var(--at-shell);
    margin: 0 auto;
    padding-left: 26px;
    padding-right: 26px;
}

@media (max-width: 900px) {
    .at-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------------------------------------------------------------- 按钮 */

.btn-at,
.at-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 26px;
    border-radius: 2px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.at-btn-dark {
    background: var(--at-ink);
    color: #fff;
}

.at-btn-dark:hover {
    background: var(--at-gold);
    color: #fff;
}

.at-btn-gold {
    background: var(--at-gold);
    color: #fff;
}

.at-btn-gold:hover {
    background: #b06a34;
    color: #fff;
}

.at-btn-line {
    background: transparent;
    border-color: var(--at-line);
    color: var(--at-ink);
}

.at-btn-line:hover {
    border-color: var(--at-ink);
}

/* Bagisto 自带按钮类统一成方角细边框风格 */
.primary-button,
.secondary-button {
    border-radius: 2px !important;
    font-weight: 500 !important;
    letter-spacing: .02em;
    transition: background-color .2s, color .2s, border-color .2s;
}

.primary-button {
    background: var(--at-gold) !important;
    color: #fff !important;
}

.primary-button:hover {
    background: #b06a34 !important;
}

.secondary-button {
    background: var(--at-ink) !important;
    color: #fff !important;
}

.secondary-button:hover {
    background: var(--at-gold) !important;
}

/* =============================================================================
   商品图尺寸硬约束
   -----------------------------------------------------------------------------
   .at-media 是所有商品图的容器：固定比例 + overflow hidden；
   里面的 img 用绝对定位铺满容器（inset:0 + width/height:100%），
   再由 object-fit: contain 保证
     · 图片永远不会超出容器（不撑破页面）
     · 图片永远完整可见（不裁切）
     · 图片永远不变形（不拉伸）
   用绝对定位而不是百分比，是因为百分比高度在 aspect-ratio 撑出来的盒子里
   会解析为 auto，图片就会退回自然尺寸。
   ========================================================================== */

.at-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--at-cream);
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
}

.at-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center;
    box-sizing: border-box;
    transition: transform .4s ease;
}

/* 商品网格卡片：4:5 竖幅 */
.at-media-card {
    aspect-ratio: 4 / 5;
    width: 100%;
    min-height: 1px;
}

.at-media-card img {
    padding: 14%;
}

/* 分类缩略图：1:1 */
.at-media-cat {
    aspect-ratio: 1 / 1;
    width: 100%;
    min-height: 1px;
}

.at-media-cat img {
    padding: 18%;
}

/* 详情页主图：严格的 4:5 竖幅。
   宽度同时受两重约束：不能超出所在列（100%），也不能超出视口高度上限
   （min(78vh,760px) 换算成 4:5 的宽度）。align-self: flex-start 用来阻止
   flex 行把它拉伸成非 4:5。 */
.at-media-main {
    aspect-ratio: 4 / 5;
    width: min(100%, calc(min(78vh, 760px) * 0.8));
    height: auto;
    align-self: flex-start;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 1px;
}

.at-media-main img {
    padding: 10%;
}

/* 详情页缩略图：4:5 小方 */
.at-media-thumb img {
    padding: 5%;
}

/* =============================================================================
   顶栏
   ========================================================================== */

.at-announce-in b {
    color: var(--at-gold);
}

/* =============================================================================
   商品卡片
   ========================================================================== */

.at-card {
    display: block;
    cursor: pointer;
}

.at-card:hover .at-media > img {
    transform: scale(1.06);
}

.at-card-meta {
    padding-top: 11px;
}

.at-card-name {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--at-ink);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.at-card-sku {
    font-size: 11px;
    color: var(--at-muted);
    margin-top: 3px;
    font-family: var(--at-mono);
    letter-spacing: .04em;
}

.at-card-price {
    font-size: 13.5px;
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.at-card-price del {
    color: #b0aca2;
    font-weight: 400;
    font-size: 11.5px;
}

.at-card-quick {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 23, 30, .9);
    color: #fff;
    font-size: 12px;
    text-align: center;
    padding: 9px;
    font-weight: 500;
    transform: translateY(101%);
    transition: transform .28s ease;
}

.at-card:hover .at-card-quick {
    transform: none;
}

@media (max-width: 900px) {
    .at-card-quick {
        transform: none;
        position: static;
        background: transparent;
        color: var(--at-gold);
        padding: 6px 0 0;
        font-weight: 600;
    }
}

/* =============================================================================
   商品详情页
   ========================================================================== */

.at-pd {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 52px;
    padding: 30px 26px 50px;
    max-width: var(--at-shell);
    margin: 0 auto;
}

.at-pd-gallery {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    align-items: start;
}

.at-pd-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(78vh, 760px);
    overflow-y: auto;
    scrollbar-width: none;
}

.at-pd-thumbs::-webkit-scrollbar {
    display: none;
}

.at-pd-thumb {
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--at-cream);
    transition: border-color .2s;
}

.at-pd-thumb.is-active {
    border-color: var(--at-ink);
}

.at-pd-info h1 {
    font-family: var(--at-serif);
    font-size: 31px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.at-pd-sub {
    color: var(--at-muted);
    font-size: 14px;
    margin-top: 6px;
}

.at-pd-price {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin: 22px 0 6px;
}

.at-pd-price .now {
    font-size: 26px;
    font-weight: 600;
}

.at-pd-price .old {
    color: #b0aca2;
    text-decoration: line-through;
    font-size: 14px;
}

.at-pd-trust {
    border-top: 1px solid var(--at-line);
    padding-top: 20px;
    margin-top: 22px;
    display: grid;
    gap: 13px;
}

.at-pd-trust div {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--at-ink-2);
}

.at-pd-trust b {
    display: block;
    color: var(--at-ink);
    font-weight: 500;
    font-size: 13px;
}

@media (max-width: 900px) {
    .at-pd {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 16px 14px 30px;
    }

    .at-pd-gallery {
        grid-template-columns: 1fr;
    }

    .at-pd-thumbs {
        flex-direction: row;
        max-height: none;
    }

    .at-media-thumb {
        width: 60px;
    }

    .at-pd-info h1 {
        font-size: 23px;
    }
}

/* =============================================================================
   分类页
   ========================================================================== */

.at-cb-head {
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--at-line);
    margin-bottom: 26px;
}

.at-cb-head h1 {
    font-family: var(--at-serif);
    font-size: 34px;
    font-weight: 400;
    margin: 0;
}

.at-cb-head p {
    color: var(--at-muted);
    font-size: 13px;
    margin-top: 7px;
}

.at-cb-layout {
    display: grid;
    grid-template-columns: 196px 1fr;
    gap: 34px;
}

@media (max-width: 900px) {
    .at-cb-layout {
        grid-template-columns: 1fr;
    }
}

.at-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--at-line);
    margin-bottom: 20px;
    font-size: 12.5px;
    color: var(--at-muted);
}

.at-sortbar .sb {
    display: flex;
    gap: 20px;
}

.at-sortbar .sb button.is-active {
    color: var(--at-ink);
    font-weight: 600;
}

/* 商品网格 */
.at-pgrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px 16px;
}

@media (max-width: 900px) {
    .at-pgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 12px;
    }
}

@media (max-width: 520px) {
    .at-pgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 分类宫格 */
.at-mgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px 14px;
}

@media (max-width: 900px) {
    .at-mgrid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 520px) {
    .at-mgrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.at-mcell {
    text-align: center;
    cursor: pointer;
}

.at-mcell:hover .at-media {
    border-color: var(--at-ink);
}

.at-mcell:hover .at-media > img {
    transform: scale(1.07);
}

.at-mcell .mname {
    font-size: 12.5px;
    margin-top: 9px;
    color: var(--at-ink-2);
    font-weight: 500;
}

/* =============================================================================
   首页区块
   ========================================================================== */

.at-hero {
    position: relative;
    height: 430px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.at-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .at-hero {
        height: 330px;
    }
}

.at-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-top: 46px;
}

.at-sec-head h2 {
    font-family: var(--at-serif);
    font-size: 27px;
    font-weight: 400;
    margin: 0;
}

.at-sec-head p {
    color: var(--at-muted);
    font-size: 13px;
    margin-top: 4px;
}

.at-sec-head a {
    font-size: 12.5px;
    font-weight: 500;
    border-bottom: 1px solid var(--at-gold);
    padding-bottom: 2px;
    color: var(--at-gold);
}

/* 品牌大图卡 */
.at-brands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.at-bcard {
    position: relative;
    height: 168px;
    overflow: hidden;
    border-radius: var(--at-radius);
    cursor: pointer;
    transition: transform .3s;
    background: var(--at-ink);
}

.at-bcard:hover {
    transform: translateY(-2px);
}

.at-bcard img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.at-bcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(12, 10, 8, .42) 0%, rgba(12, 10, 8, .1) 45%, rgba(12, 10, 8, .48) 100%);
}

.at-bcard .btxt {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    z-index: 2;
}

.at-bcard .btxt h3 {
    font-family: var(--at-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .1em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
    margin: 0;
}

@media (max-width: 900px) {
    .at-brands {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .at-brands {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   页脚
   ========================================================================== */

.at-foot {
    background: var(--at-ink);
    color: #cfc9bd;
    margin-top: 64px;
    padding: 48px 26px 26px;
}

.at-foot h4 {
    font-family: var(--at-sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 13px;
    font-weight: 600;
}

/* =============================================================================
   杂项
   ========================================================================== */

.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
}

.skip-to-main-content-link:focus {
    left: 8px;
    top: 8px;
    z-index: 999;
    background: var(--at-ink);
    color: #fff;
    padding: 8px 14px;
    border-radius: 2px;
}

/* 表单控件统一细边框 */
input, select, textarea {
    border-radius: 2px !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--at-ink) !important;
    box-shadow: none !important;
}

/* =============================================================================
   断点兼容层
   -----------------------------------------------------------------------------
   主题预构建产物里的 max-* 变体使用的是 `@media not all and (min-width:X)`
   这种写法，Chromium 不解析它，整块规则会被丢弃，于是 max-1180:hidden /
   flex-wrap / px-0 全部失效（移动端因此出现横向溢出与画廊错位）。
   这里用标准写法把同一批规则补回来。
   ========================================================================== */

@media (max-width: 1239.98px){.max-xl\:mb-5{margin-bottom:calc(var(--spacing) * 5)}.max-xl\:min-w-67\.5{min-width:calc(var(--spacing) * 67.5)}}
@media (max-width: 1179.98px){.max-1180\:mt-3\.5{margin-top:calc(var(--spacing) * 3.5)}.max-1180\:hidden{display:none}.max-1180\:w-full{width:100%}.max-1180\:max-w-full{max-width:100%}.max-1180\:flex-wrap{flex-wrap:wrap}.max-\[1180px\]\:gap-x-5{column-gap:calc(var(--spacing) * 5)}.max-\[1180px\]\:gap-x-9{column-gap:calc(var(--spacing) * 9)}.max-1180\:px-0{padding-inline:0}.max-1180\:px-5{padding-inline:calc(var(--spacing) * 5)}.max-1180\:px-8{padding-inline:calc(var(--spacing) * 8)}.max-1180\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}
@media (max-width: 1099.98px){.max-\[1100px\]\:gap-x-6{column-gap:calc(var(--spacing) * 6)}}
@media (max-width: 1059.98px){.max-1060\:block{display:block}.max-1060\:hidden{display:none}.max-1060\:w-full{width:100%}.max-1060\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.max-1060\:grid-cols-\[1fr\]{grid-template-columns:1fr}.max-1060\:flex-col{flex-direction:column}.max-1060\:flex-col-reverse{flex-direction:column-reverse}}
@media (max-width: 1023.98px){.max-lg\:relative{position:relative}.max-lg\:top-auto{top:auto}.max-lg\:-right-7{right:calc(var(--spacing) * -7)}.max-lg\:-left-7{left:calc(var(--spacing) * -7)}.max-lg\:mt-0{margin-top:0}.max-lg\:flex{display:flex}.max-lg\:grid{display:grid}.max-lg\:hidden{display:none}.max-lg\:w-auto{width:auto}.max-lg\:max-w-110\.5{max-width:calc(var(--spacing) * 110.5)}.max-lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.max-lg\:grid-cols-\[1fr\]{grid-template-columns:1fr}.max-lg\:flex-wrap{flex-wrap:wrap}.max-lg\:justify-center{justify-content:center}.max-lg\:gap-4{gap:calc(var(--spacing) * 4)}.max-lg\:gap-5{gap:calc(var(--spacing) * 5)}.max-lg\:gap-x-8{column-gap:calc(var(--spacing) * 8)}.max-lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.max-lg\:py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.max-lg\:opacity-100{opacity:1}.max-lg\:shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}
@media (max-width: 867.98px){.max-868\:w-full{width:100%}.max-868\:max-w-full{max-width:100%}.max-868\:text-\[294px\]\!{font-size:294px!important}}
@media (max-width: 767.98px){.max-md\:relative{position:relative}.max-md\:top-1{top:var(--spacing)}.max-md\:top-10{top:calc(var(--spacing) * 10)}.max-md\:top-\[60\%\]{top:60%}.max-md\:bottom-3\.5{bottom:calc(var(--spacing) * 3.5)}.max-md\:m-auto{margin:auto}.max-md\:mx-6{margin-inline:calc(var(--spacing) * 6)}.max-md\:my-0{margin-block:0}.max-md\:my-4{margin-block:calc(var(--spacing) * 4)}.max-md\:my-5{margin-block:calc(var(--spacing) * 5)}.max-md\:-mt-1{margin-top:calc(var(--spacing) * -1)}.max-md\:mt-0{margin-top:0}.max-md\:mt-1{margin-top:var(--spacing)}.max-md\:mt-2{margin-top:calc(var(--spacing) * 2)}.max-md\:mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.max-md\:mt-3{margin-top:calc(var(--spacing) * 3)}.max-md\:mt-4{margin-top:calc(var(--spacing) * 4)}.max-md\:mt-5{margin-top:calc(var(--spacing) * 5)}.max-md\:mt-6{margin-top:calc(var(--spacing) * 6)}.max-md\:mt-7{margin-top:calc(var(--spacing) * 7)}.max-md\:mt-8{margin-top:calc(var(--spacing) * 8)}.max-md\:mt-9{margin-top:calc(var(--spacing) * 9)}.max-md\:mt-10{margin-top:calc(var(--spacing) * 10)}.max-md\:mt-12{margin-top:calc(var(--spacing) * 12)}.max-md\:mt-32{margin-top:calc(var(--spacing) * 32)}.max-md\:mb-0{margin-bottom:0}.max-md\:mb-0\!{margin-bottom:0!important}.max-md\:mb-1{margin-bottom:var(--spacing)}.max-md\:mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.max-md\:mb-2{margin-bottom:calc(var(--spacing) * 2)}.max-md\:mb-2\.5{margin-bottom:calc(var(--spacing) * 2.5)}.max-md\:mb-4{margin-bottom:calc(var(--spacing) * 4)}.max-md\:mb-5{margin-bottom:calc(var(--spacing) * 5)}.max-md\:block{display:block}.max-md\:flex{display:flex}.max-md\:grid{display:grid}.max-md\:hidden{display:none}.max-md\:h-2{height:calc(var(--spacing) * 2)}.max-md\:h-4{height:calc(var(--spacing) * 4)}.max-md\:h-5{height:calc(var(--spacing) * 5)}.max-md\:h-6{height:calc(var(--spacing) * 6)}.max-md\:h-7{height:calc(var(--spacing) * 7)}.max-md\:h-8{height:calc(var(--spacing) * 8)}.max-md\:h-8\.5{height:calc(var(--spacing) * 8.5)}.max-md\:h-9\.5{height:calc(var(--spacing) * 9.5)}.max-md\:h-10{height:calc(var(--spacing) * 10)}.max-md\:h-10\.5{height:calc(var(--spacing) * 10.5)}.max-md\:h-16{height:calc(var(--spacing) * 16)}.max-md\:h-20{height:calc(var(--spacing) * 20)}.max-md\:h-25{height:calc(var(--spacing) * 25)}.max-md\:h-32{height:calc(var(--spacing) * 32)}.max-md\:h-36{height:calc(var(--spacing) * 36)}.max-md\:h-60{height:calc(var(--spacing) * 60)}.max-md\:h-fit{height:fit-content}.max-md\:h-full{height:100%}.max-md\:max-h-20{max-height:calc(var(--spacing) * 20)}.max-md\:max-h-60{max-height:calc(var(--spacing) * 60)}.max-md\:max-h-75{max-height:calc(var(--spacing) * 75)}.max-md\:min-h-75{min-height:calc(var(--spacing) * 75)}.max-md\:w-2{width:calc(var(--spacing) * 2)}.max-md\:w-6{width:calc(var(--spacing) * 6)}.max-md\:w-7{width:calc(var(--spacing) * 7)}.max-md\:w-16{width:calc(var(--spacing) * 16)}.max-md\:w-18{width:calc(var(--spacing) * 18)}.max-md\:w-18\.75{width:calc(var(--spacing) * 18.75)}.max-md\:w-20{width:calc(var(--spacing) * 20)}.max-md\:w-24{width:calc(var(--spacing) * 24)}.max-md\:w-25{width:calc(var(--spacing) * 25)}.max-md\:w-27\.5{width:calc(var(--spacing) * 27.5)}.max-md\:w-28{width:calc(var(--spacing) * 28)}.max-md\:w-28\.75{width:calc(var(--spacing) * 28.75)}.max-md\:w-32{width:calc(var(--spacing) * 32)}.max-md\:w-36{width:calc(var(--spacing) * 36)}.max-md\:w-44{width:calc(var(--spacing) * 44)}.max-md\:w-60{width:calc(var(--spacing) * 60)}.max-md\:w-62\.5{width:calc(var(--spacing) * 62.5)}.max-md\:w-\[90\%\]{width:90%}.max-md\:w-fit{width:fit-content}.max-md\:w-full{width:100%}.max-md\:w-full\!{width:100%!important}.max-md\:max-w-9{max-width:calc(var(--spacing) * 9)}.max-md\:max-w-19{max-width:calc(var(--spacing) * 19)}.max-md\:max-w-20{max-width:calc(var(--spacing) * 20)}.max-md\:max-w-38\.25{max-width:calc(var(--spacing) * 38.25)}.max-md\:max-w-56{max-width:calc(var(--spacing) * 56)}.max-md\:max-w-60{max-width:calc(var(--spacing) * 60)}.max-md\:max-w-62\.5{max-width:calc(var(--spacing) * 62.5)}.max-md\:max-w-75{max-width:calc(var(--spacing) * 75)}.max-md\:max-w-full{max-width:100%}.max-md\:min-w-18{min-width:calc(var(--spacing) * 18)}.max-md\:min-w-20{min-width:calc(var(--spacing) * 20)}.max-md\:min-w-40{min-width:calc(var(--spacing) * 40)}.max-md\:min-w-56{min-width:calc(var(--spacing) * 56)}.max-md\:min-w-60{min-width:calc(var(--spacing) * 60)}.max-md\:min-w-75{min-width:calc(var(--spacing) * 75)}.max-md\:flex-auto{flex:auto}.max-md\:flex-none{flex:none}.max-md\:translate-y-0{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.max-md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.max-md\:grid-cols-\[0\.5fr_2fr\]{grid-template-columns:.5fr 2fr}.max-md\:grid-cols-\[1fr\]{grid-template-columns:1fr}.max-md\:flex-nowrap{flex-wrap:nowrap}.max-md\:flex-wrap{flex-wrap:wrap}.max-md\:items-center{align-items:center}.max-md\:justify-between{justify-content:space-between}.max-md\:justify-center{justify-content:center}.max-md\:justify-normal{justify-content:normal}.max-md\:justify-items-center{justify-items:center}.max-md\:gap-0{gap:0}.max-md\:gap-0\.5{gap:calc(var(--spacing) * .5)}.max-md\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.max-md\:gap-2{gap:calc(var(--spacing) * 2)}.max-md\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}.max-md\:gap-4{gap:calc(var(--spacing) * 4)}.max-md\:gap-5{gap:calc(var(--spacing) * 5)}.max-md\:gap-7{gap:calc(var(--spacing) * 7)}.max-md\:gap-7\.5{gap:calc(var(--spacing) * 7.5)}.max-md\:gap-8{gap:calc(var(--spacing) * 8)}.max-md\:gap-x-1{column-gap:var(--spacing)}.max-md\:gap-x-1\.5{column-gap:calc(var(--spacing) * 1.5)}.max-md\:gap-x-2{column-gap:calc(var(--spacing) * 2)}.max-md\:gap-x-2\.5{column-gap:calc(var(--spacing) * 2.5)}.max-md\:gap-x-3{column-gap:calc(var(--spacing) * 3)}.max-md\:gap-x-4{column-gap:calc(var(--spacing) * 4)}.max-md\:gap-x-5{column-gap:calc(var(--spacing) * 5)}.max-md\:gap-y-0{row-gap:0}.max-md\:gap-y-1{row-gap:var(--spacing)}.max-md\:gap-y-1\.5{row-gap:calc(var(--spacing) * 1.5)}.max-md\:gap-y-2\.5{row-gap:calc(var(--spacing) * 2.5)}.max-md\:gap-y-5{row-gap:calc(var(--spacing) * 5)}.max-md\:place-self-auto{place-self:auto}.max-md\:rounded-full{border-radius:3.40282e38px}.max-md\:rounded-lg{border-radius:var(--radius-lg)}.max-md\:rounded-none{border-radius:0}.max-md\:rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.max-md\:rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.max-md\:border{border-style:var(--tw-border-style);border-width:1px}.max-md\:border-0{border-style:var(--tw-border-style);border-width:0}.max-md\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.max-md\:border-t-0{border-top-style:var(--tw-border-style);border-top-width:0}.max-md\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.max-md\:border-none{--tw-border-style:none;border-style:none}.max-md\:border-none\!{--tw-border-style:none!important;border-style:none!important}.max-md\:border-zinc-200{border-color:var(--color-zinc-200)}.max-md\:bg-gray-100\!{background-color:var(--color-gray-100)!important}.max-md\:bg-gray-200{background-color:var(--color-gray-200)}.max-md\:p-0{padding:0}.max-md\:p-2{padding:calc(var(--spacing) * 2)}.max-md\:p-2\.5{padding:calc(var(--spacing) * 2.5)}.max-md\:p-3{padding:calc(var(--spacing) * 3)}.max-md\:p-3\!{padding:calc(var(--spacing) * 3)!important}.max-md\:p-3\.5{padding:calc(var(--spacing) * 3.5)}.max-md\:p-4{padding:calc(var(--spacing) * 4)}.max-md\:p-4\!{padding:calc(var(--spacing) * 4)!important}.max-md\:p-5{padding:calc(var(--spacing) * 5)}.max-md\:p-8{padding:calc(var(--spacing) * 8)}.max-md\:px-0{padding-inline:0}.max-md\:px-0\!{padding-inline:0!important}.max-md\:px-1{padding-inline:var(--spacing)}.max-md\:px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.max-md\:px-2{padding-inline:calc(var(--spacing) * 2)}.max-md\:px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.max-md\:px-3{padding-inline:calc(var(--spacing) * 3)}.max-md\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-md\:px-5{padding-inline:calc(var(--spacing) * 5)}.max-md\:px-6{padding-inline:calc(var(--spacing) * 6)}.max-md\:px-8{padding-inline:calc(var(--spacing) * 8)}.max-md\:px-10{padding-inline:calc(var(--spacing) * 10)}.max-md\:py-0\!{padding-block:0!important}.max-md\:py-0\.5{padding-block:calc(var(--spacing) * .5)}.max-md\:py-1{padding-block:var(--spacing)}.max-md\:py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.max-md\:py-1\.5\!{padding-block:calc(var(--spacing) * 1.5)!important}.max-md\:py-2{padding-block:calc(var(--spacing) * 2)}.max-md\:py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.max-md\:py-3{padding-block:calc(var(--spacing) * 3)}.max-md\:py-3\!{padding-block:calc(var(--spacing) * 3)!important}.max-md\:py-4{padding-block:calc(var(--spacing) * 4)}.max-md\:py-8{padding-block:calc(var(--spacing) * 8)}.max-md\:pt-2{padding-top:calc(var(--spacing) * 2)}.max-md\:pt-2\.5\!{padding-top:calc(var(--spacing) * 2.5)!important}.max-md\:pt-4{padding-top:calc(var(--spacing) * 4)}.max-md\:pr-2\.5{padding-right:calc(var(--spacing) * 2.5)}.max-md\:pb-0{padding-bottom:0}.max-md\:pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.max-md\:pb-2{padding-bottom:calc(var(--spacing) * 2)}.max-md\:pb-3{padding-bottom:calc(var(--spacing) * 3)}.max-md\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.max-md\:pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.max-md\:pl-4{padding-left:calc(var(--spacing) * 4)}.max-md\:text-center{text-align:center}.max-md\:text-left{text-align:left}.max-md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.max-md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.max-md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.max-md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.max-md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.max-md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.max-md\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.max-md\:text-\[140px\]\!{font-size:140px!important}.max-md\:leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.max-md\:font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.max-md\:font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.max-md\:font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.max-md\:whitespace-break-spaces{white-space:break-spaces}.max-md\:whitespace-nowrap{white-space:nowrap}.max-md\:text-black{color:var(--color-black)}.max-md\:text-zinc-500{color:var(--color-zinc-500)}.max-md\:first\:ml-4:first-child{margin-left:calc(var(--spacing) * 4)}.max-md\:last\:mb-0:last-child{margin-bottom:0}.max-md\:last\:mb-0\!:last-child{margin-bottom:0!important}}
@media (max-width: 524.98px){.max-sm\:relative{position:relative}.max-sm\:top-2{top:calc(var(--spacing) * 2)}.max-sm\:top-2\.5{top:calc(var(--spacing) * 2.5)}.max-sm\:top-4{top:calc(var(--spacing) * 4)}.max-sm\:bottom-2\.5{bottom:calc(var(--spacing) * 2.5)}.max-sm\:mx-4{margin-inline:calc(var(--spacing) * 4)}.max-sm\:my-2{margin-block:calc(var(--spacing) * 2)}.max-sm\:my-4{margin-block:calc(var(--spacing) * 4)}.max-sm\:my-5{margin-block:calc(var(--spacing) * 5)}.max-sm\:-mt-1{margin-top:calc(var(--spacing) * -1)}.max-sm\:mt-0{margin-top:0}.max-sm\:mt-0\.5{margin-top:calc(var(--spacing) * .5)}.max-sm\:mt-1{margin-top:var(--spacing)}.max-sm\:mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.max-sm\:mt-2{margin-top:calc(var(--spacing) * 2)}.max-sm\:mt-3{margin-top:calc(var(--spacing) * 3)}.max-sm\:mt-4{margin-top:calc(var(--spacing) * 4)}.max-sm\:mt-5{margin-top:calc(var(--spacing) * 5)}.max-sm\:mt-6{margin-top:calc(var(--spacing) * 6)}.max-sm\:mt-7{margin-top:calc(var(--spacing) * 7)}.max-sm\:mt-8{margin-top:calc(var(--spacing) * 8)}.max-sm\:mt-10{margin-top:calc(var(--spacing) * 10)}.max-sm\:mb-0{margin-bottom:0}.max-sm\:mb-1{margin-bottom:var(--spacing)}.max-sm\:mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.max-sm\:mb-2{margin-bottom:calc(var(--spacing) * 2)}.max-sm\:mb-2\.5\!{margin-bottom:calc(var(--spacing) * 2.5)!important}.max-sm\:mb-5{margin-bottom:calc(var(--spacing) * 5)}.max-sm\:mb-10{margin-bottom:calc(var(--spacing) * 10)}.max-sm\:block{display:block}.max-sm\:flex{display:flex}.max-sm\:grid{display:grid}.max-sm\:hidden{display:none}.max-sm\:h-1\.5{height:calc(var(--spacing) * 1.5)}.max-sm\:h-3\.5{height:calc(var(--spacing) * 3.5)}.max-sm\:h-4{height:calc(var(--spacing) * 4)}.max-sm\:h-5{height:calc(var(--spacing) * 5)}.max-sm\:h-5\.25{height:calc(var(--spacing) * 5.25)}.max-sm\:h-6\.25{height:calc(var(--spacing) * 6.25)}.max-sm\:h-7{height:calc(var(--spacing) * 7)}.max-sm\:h-7\.5{height:calc(var(--spacing) * 7.5)}.max-sm\:h-8\.5{height:calc(var(--spacing) * 8.5)}.max-sm\:h-10{height:calc(var(--spacing) * 10)}.max-sm\:h-11\.5{height:calc(var(--spacing) * 11.5)}.max-sm\:h-15{height:calc(var(--spacing) * 15)}.max-sm\:h-20{height:calc(var(--spacing) * 20)}.max-sm\:h-25{height:calc(var(--spacing) * 25)}.max-sm\:h-fit{height:fit-content}.max-sm\:max-h-7{max-height:calc(var(--spacing) * 7)}.max-sm\:max-h-15{max-height:calc(var(--spacing) * 15)}.max-sm\:max-h-50{max-height:calc(var(--spacing) * 50)}.max-sm\:max-h-full{max-height:100%}.max-sm\:min-h-7{min-height:calc(var(--spacing) * 7)}.max-sm\:min-h-15{min-height:calc(var(--spacing) * 15)}.max-sm\:w-1\.5{width:calc(var(--spacing) * 1.5)}.max-sm\:w-3\/6{width:50%}.max-sm\:w-4{width:calc(var(--spacing) * 4)}.max-sm\:w-6\.25{width:calc(var(--spacing) * 6.25)}.max-sm\:w-10{width:calc(var(--spacing) * 10)}.max-sm\:w-15{width:calc(var(--spacing) * 15)}.max-sm\:w-17{width:calc(var(--spacing) * 17)}.max-sm\:w-17\.5{width:calc(var(--spacing) * 17.5)}.max-sm\:w-20{width:calc(var(--spacing) * 20)}.max-sm\:w-25{width:calc(var(--spacing) * 25)}.max-sm\:w-31{width:calc(var(--spacing) * 31)}.max-sm\:w-44{width:calc(var(--spacing) * 44)}.max-sm\:w-45{width:calc(var(--spacing) * 45)}.max-sm\:w-47\.5{width:calc(var(--spacing) * 47.5)}.max-sm\:w-auto\!{width:auto!important}.max-sm\:w-fit{width:fit-content}.max-sm\:w-full{width:100%}.max-sm\:max-w-15{max-width:calc(var(--spacing) * 15)}.max-sm\:max-w-20{max-width:calc(var(--spacing) * 20)}.max-sm\:max-w-47\.5{max-width:calc(var(--spacing) * 47.5)}.max-sm\:max-w-48{max-width:calc(var(--spacing) * 48)}.max-sm\:max-w-80{max-width:calc(var(--spacing) * 80)}.max-sm\:max-w-full{max-width:100%}.max-sm\:max-w-none\!{max-width:none!important}.max-sm\:min-w-7{min-width:calc(var(--spacing) * 7)}.max-sm\:min-w-15{min-width:calc(var(--spacing) * 15)}.max-sm\:min-w-27\.5{min-width:calc(var(--spacing) * 27.5)}.max-sm\:min-w-42\.5{min-width:calc(var(--spacing) * 42.5)}.max-sm\:min-w-47\.5{min-width:calc(var(--spacing) * 47.5)}.max-sm\:min-w-48{min-width:calc(var(--spacing) * 48)}.max-sm\:flex-auto{flex:auto}.max-sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.max-sm\:flex-col{flex-direction:column}.max-sm\:flex-wrap{flex-wrap:wrap}.max-sm\:items-center{align-items:center}.max-sm\:items-start{align-items:flex-start}.max-sm\:justify-between{justify-content:space-between}.max-sm\:justify-center{justify-content:center}.max-sm\:justify-normal{justify-content:normal}.max-sm\:justify-items-center{justify-items:center}.max-sm\:gap-0{gap:0}.max-sm\:gap-1{gap:var(--spacing)}.max-sm\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.max-sm\:gap-2{gap:calc(var(--spacing) * 2)}.max-sm\:gap-2\.5{gap:calc(var(--spacing) * 2.5)}.max-sm\:gap-3{gap:calc(var(--spacing) * 3)}.max-sm\:gap-4{gap:calc(var(--spacing) * 4)}.max-sm\:gap-5{gap:calc(var(--spacing) * 5)}.max-sm\:gap-7\.5{gap:calc(var(--spacing) * 7.5)}.max-sm\:gap-x-0{column-gap:0}.max-sm\:gap-x-1{column-gap:var(--spacing)}.max-sm\:gap-x-1\.5{column-gap:calc(var(--spacing) * 1.5)}.max-sm\:gap-x-2\.5{column-gap:calc(var(--spacing) * 2.5)}.max-sm\:gap-x-3\.5{column-gap:calc(var(--spacing) * 3.5)}.max-sm\:gap-x-5{column-gap:calc(var(--spacing) * 5)}.max-sm\:gap-y-0{row-gap:0}.max-sm\:gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.max-sm\:gap-y-2\.5{row-gap:calc(var(--spacing) * 2.5)}.max-sm\:gap-y-4{row-gap:calc(var(--spacing) * 4)}.max-sm\:gap-y-5{row-gap:calc(var(--spacing) * 5)}.max-sm\:gap-y-6{row-gap:calc(var(--spacing) * 6)}.max-sm\:place-self-center{place-self:center}.max-sm\:rounded-lg{border-radius:var(--radius-lg)}.max-sm\:rounded-lg\!{border-radius:var(--radius-lg)!important}.max-sm\:rounded-xl{border-radius:var(--radius-xl)}.max-sm\:rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.max-sm\:rounded-r-xl{border-top-right-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}.max-sm\:border-0{border-style:var(--tw-border-style);border-width:0}.max-sm\:border-2{border-style:var(--tw-border-style);border-width:2px}.max-sm\:border-none{--tw-border-style:none;border-style:none}.max-sm\:border-zinc-300{border-color:var(--color-zinc-300)}.max-sm\:p-0{padding:0}.max-sm\:p-0\!{padding:0!important}.max-sm\:p-1{padding:var(--spacing)}.max-sm\:p-1\.5{padding:calc(var(--spacing) * 1.5)}.max-sm\:p-2{padding:calc(var(--spacing) * 2)}.max-sm\:p-2\!{padding:calc(var(--spacing) * 2)!important}.max-sm\:p-2\.5{padding:calc(var(--spacing) * 2.5)}.max-sm\:p-3{padding:calc(var(--spacing) * 3)}.max-sm\:p-4{padding:calc(var(--spacing) * 4)}.max-sm\:p-5{padding:calc(var(--spacing) * 5)}.max-sm\:px-0{padding-inline:0}.max-sm\:px-1\.5\!{padding-inline:calc(var(--spacing) * 1.5)!important}.max-sm\:px-2{padding-inline:calc(var(--spacing) * 2)}.max-sm\:px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.max-sm\:px-3{padding-inline:calc(var(--spacing) * 3)}.max-sm\:px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.max-sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.max-sm\:px-4\!{padding-inline:calc(var(--spacing) * 4)!important}.max-sm\:px-5{padding-inline:calc(var(--spacing) * 5)}.max-sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.max-sm\:px-7{padding-inline:calc(var(--spacing) * 7)}.max-sm\:px-\[50\.8px\]{padding-inline:50.8px}.max-sm\:py-0\!{padding-block:0!important}.max-sm\:py-0\.5{padding-block:calc(var(--spacing) * .5)}.max-sm\:py-0\.5\!{padding-block:calc(var(--spacing) * .5)!important}.max-sm\:py-1{padding-block:var(--spacing)}.max-sm\:py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.max-sm\:py-1\.5\!{padding-block:calc(var(--spacing) * 1.5)!important}.max-sm\:py-2{padding-block:calc(var(--spacing) * 2)}.max-sm\:py-2\!{padding-block:calc(var(--spacing) * 2)!important}.max-sm\:py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.max-sm\:py-3{padding-block:calc(var(--spacing) * 3)}.max-sm\:py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.max-sm\:py-4{padding-block:calc(var(--spacing) * 4)}.max-sm\:py-5{padding-block:calc(var(--spacing) * 5)}.max-sm\:pb-0{padding-bottom:0}.max-sm\:pb-1\.5\!{padding-bottom:calc(var(--spacing) * 1.5)!important}.max-sm\:pb-2\.5{padding-bottom:calc(var(--spacing) * 2.5)}.max-sm\:text-center{text-align:center}.max-sm\:text-right{text-align:right}.max-sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.max-sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.max-sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.max-sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.max-sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.max-sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.max-sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.max-sm\:leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.max-sm\:leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.max-sm\:leading-20{--tw-leading:calc(var(--spacing) * 20);line-height:calc(var(--spacing) * 20)}.max-sm\:font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.max-sm\:font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.max-sm\:font-semibold\!{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}.max-sm\:text-zinc-500{color:var(--color-zinc-500)}.max-sm\:opacity-100{opacity:1}}
@media (max-width: 1023.98px){.max-lg\:ltr\:pl-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-left:0}}
@media (max-width: 767.98px){.max-md\:ltr\:right-1\.5:where(:dir(ltr),[dir=ltr],[dir=ltr] *){right:calc(var(--spacing) * 1.5)}.max-md\:ltr\:right-4:where(:dir(ltr),[dir=ltr],[dir=ltr] *){right:calc(var(--spacing) * 4)}.max-md\:ltr\:left-4:where(:dir(ltr),[dir=ltr],[dir=ltr] *){left:calc(var(--spacing) * 4)}.ltr\:max-md\:gap-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){gap:0}.max-md\:ltr\:pr-1:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:var(--spacing)}.max-md\:ltr\:pr-2\.5:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:calc(var(--spacing) * 2.5)}.max-md\:ltr\:pr-12:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:calc(var(--spacing) * 12)}.max-md\:ltr\:pl-2\.5:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-left:calc(var(--spacing) * 2.5)}}
@media (max-width: 524.98px){.max-sm\:ltr\:left-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){left:0}.max-sm\:ltr\:left-2:where(:dir(ltr),[dir=ltr],[dir=ltr] *){left:calc(var(--spacing) * 2)}.max-sm\:ltr\:pr-12:where(:dir(ltr),[dir=ltr],[dir=ltr] *){padding-right:calc(var(--spacing) * 12)}}
@media (max-width: 1023.98px){.max-lg\:rtl\:pr-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-right:0}}
@media (max-width: 767.98px){.max-md\:rtl\:right-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *){right:calc(var(--spacing) * 4)}.max-md\:rtl\:left-1\.5:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:calc(var(--spacing) * 1.5)}.max-md\:rtl\:left-4:where(:dir(rtl),[dir=rtl],[dir=rtl] *){left:calc(var(--spacing) * 4)}.rtl\:max-md\:gap-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){gap:0}.max-md\:rtl\:pr-2\.5:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-right:calc(var(--spacing) * 2.5)}.max-md\:rtl\:pl-1:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:var(--spacing)}.max-md\:rtl\:pl-2\.5:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:calc(var(--spacing) * 2.5)}.max-md\:rtl\:pl-12:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:calc(var(--spacing) * 12)}}
@media (max-width: 524.98px){.max-sm\:rtl\:right-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){right:0}.max-sm\:rtl\:pl-12:where(:dir(rtl),[dir=rtl],[dir=rtl] *){padding-left:calc(var(--spacing) * 12)}}
@media (max-width: 767.98px){.max-md\:\[\&\>\*\]\:\[\&\>\*\]\:rounded-full>*>*{border-radius:3.40282e38px}.max-md\:\[\&\>\*\]\:leading-6>*{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}}
@media (max-width: 524.98px){.max-sm\:\[\&\>\*\]\:leading-4>*{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}}

/* =============================================================================
   购物车 / 结算页
   -----------------------------------------------------------------------------
   作用域由 <body class="at-scope-..."> 提供（主题层布局里按路由名计算）：
     .at-scope-cart     购物车页
     .at-scope-checkout 结算页

   核心包的购物车/结算页是 Velocity 版式（深蓝圆角按钮 + 蓝色链接 + 16px 圆角），
   与本站「米色纸感 + 衬线标题 + 金色点缀」体系冲突。这里不改核心包，只在作用域内
   把颜色、字体、圆角、留白、按钮形状换成 ATELIER 体系；结构与交互逻辑全部保留。

   商品图沿用与首页/分类页/详情页同一套硬约束：
   固定比例的框 + object-fit: contain，既不撑破页面，也不被裁切或拉伸变形。
   ========================================================================== */

/* --- 通用：摘要卡 --- */
.at-sum {
    background: var(--at-paper);
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    padding: 24px 22px 22px;
}

.at-sum-title {
    font-family: var(--at-serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--at-line);
}

.at-sum-rows {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.at-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--at-ink-2);
}

.at-sum-row--btn {
    width: 100%;
    background: none;
    border: 0;
    padding-inline: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.at-sum-row--toggle {
    cursor: pointer;
}

.at-sum-val {
    color: var(--at-ink);
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

.at-sum-sub {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    color: var(--at-muted);
    margin-top: 2px;
}

.at-sum-row--sm {
    font-size: 12px;
    padding: 3px 0;
    color: var(--at-muted);
}

.at-sum-row--discount,
.at-sum-row--discount .at-sum-val {
    color: #b4483f;
}

.at-sum-row--stack {
    display: block;
    padding: 0;
}

.at-sum-row--total {
    border-top: 1px solid var(--at-line);
    margin-top: 14px;
    padding-top: 16px;
    font-size: 13.5px;
    color: var(--at-ink);
    letter-spacing: .04em;
}

.at-sum-total {
    font-family: var(--at-serif);
    font-size: 27px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--at-ink);
    white-space: nowrap;
}

.at-sum-break {
    padding: 6px 0 4px 12px;
    margin: 2px 0 4px;
    border-left: 1px solid var(--at-line-soft);
}

.at-sum-breakgrp + .at-sum-breakgrp {
    margin-top: 8px;
}

.at-sum-taxrate {
    font-size: 11.5px;
    color: var(--at-muted);
    margin: 4px 0 2px;
}

.at-sum-trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 58%;
}

/* 结算页摘要里的商品行 */
.at-sum-items {
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--at-line);
    display: grid;
    gap: 14px;
}

.at-sum-item {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.at-sum-item-img {
    width: 72px;
    height: 90px;
    flex: none;
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
    background: var(--at-cream);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
}

.at-sum-item-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.at-sum-item-info {
    min-width: 0;
    flex: 1;
}

.at-sum-item-name {
    font-size: 13px;
    line-height: 1.45;
    color: var(--at-ink);
    font-weight: 500;
    margin: 0;
}

.at-sum-item-price {
    font-size: 13px;
    color: var(--at-ink-2);
    margin: 4px 0 0;
}

.at-sum-item-price .at-sum-sub {
    display: inline;
    margin-left: 6px;
}

/* --- 通用：主行动按钮 --- */
.at-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 18px;
    padding: 15px 22px;
    background: var(--at-ink);
    color: #fff;
    border: 1px solid var(--at-ink);
    border-radius: var(--at-radius);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.at-cta:hover {
    background: #000;
    border-color: #000;
}

/* --- 购物车页 / 结算页：页面骨架 --- */
.at-scope-cart main,
.at-scope-checkout main {
    background: var(--at-cream);
}

.at-scope-cart main > div:first-child,
.at-scope-checkout main > div:first-child {
    background: var(--at-paper);
    border-bottom: 1px solid var(--at-line);
}

.at-scope-cart main > div:first-child > div,
.at-scope-checkout main > div:first-child > div {
    max-width: var(--at-shell);
    margin: 0 auto;
    padding: 15px 26px;
    border: 0 !important;
}

.at-scope-cart main > div:first-child img,
.at-scope-checkout main > div:first-child img {
    height: 30px;
    width: auto;
}

.at-scope-cart .text-blue-700,
.at-scope-checkout .text-blue-700 {
    color: var(--at-gold) !important;
    font-size: 12px;
    letter-spacing: .08em;
}

/* 面包屑 */
.at-scope-cart .mt-8\.5,
.at-scope-checkout .mt-8\.5 {
    margin-top: 22px;
}

/* --- 购物车页：商品列表 --- */
.at-scope-cart .border-zinc-200 {
    border-color: var(--at-line) !important;
}

.at-scope-cart .text-navyBlue,
.at-scope-checkout .text-navyBlue {
    color: var(--at-gold) !important;
}

.at-scope-cart .icon-uncheck,
.at-scope-checkout .icon-uncheck {
    color: var(--at-gold) !important;
}

/* 商品缩略图：4:5 定框 + contain，既不裁切也不变形 */
.at-scope-cart .h-27\.5 {
    height: 120px;
    width: 96px;
    max-width: 96px;
    object-fit: contain;
    background: var(--at-cream);
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
    padding: 4px;
}

.at-scope-cart .max-md\:h-20 {
    height: 90px;
    width: 72px;
    max-width: 72px;
}

/* 商品名 */
.at-scope-cart .text-base.font-medium {
    font-size: 13.5px;
    color: var(--at-ink);
    line-height: 1.45;
}

/* 价格 */
.at-scope-cart .text-lg.font-semibold {
    font-family: var(--at-serif);
    font-size: 20px;
    font-weight: 400;
}

/* 删除 / 移到心愿单 */
.at-scope-cart .text-base.text-blue-700 {
    color: var(--at-gold) !important;
    font-size: 12px;
    letter-spacing: .04em;
}

.at-scope-cart .text-base.text-blue-700:hover {
    color: var(--at-ink) !important;
}

/* 数量步进器 */
.at-scope-cart .rounded-\[54px\] {
    border-color: var(--at-line) !important;
    border-radius: var(--at-radius) !important;
    padding: 5px 11px;
    gap: 10px;
}

.at-scope-cart .icon-minus,
.at-scope-cart .icon-plus,
.at-scope-cart .icon-bin {
    color: var(--at-ink) !important;
    font-size: 18px !important;
}

/* 次级按钮（继续购物 / 更新购物车）
   全局的 .secondary-button 是「墨黑实心」，在购物车页两个并排会互相抢视觉，
   这里改成原型 .btn-line 那种描边样式，把重量让给主 CTA。 */
.at-scope-cart .secondary-button,
.at-scope-checkout .secondary-button {
    background: transparent !important;
    color: var(--at-ink) !important;
    border-color: var(--at-ink) !important;
    border-radius: var(--at-radius) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    padding: 12px 24px;
    max-height: none;
}

.at-scope-cart .secondary-button:hover,
.at-scope-checkout .secondary-button:hover {
    background: var(--at-gold-soft) !important;
    color: var(--at-ink) !important;
    border-color: var(--at-gold) !important;
    opacity: 1;
}

/* 主按钮（结算各步骤的「继续 / 下单」）
   全站 .primary-button 已经是金色主色，这里只统一形状与字距。 */
.at-scope-checkout .primary-button,
.at-scope-cart .primary-button {
    border-radius: var(--at-radius) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 14px 26px;
}

.at-scope-checkout .primary-button:hover,
.at-scope-cart .primary-button:hover {
    background: #b06a34 !important;
    border-color: #b06a34 !important;
    opacity: 1;
}

/* 空购物车 */
.at-scope-cart .py-32 img {
    opacity: .5;
    filter: grayscale(1);
}

.at-scope-cart .py-32 p {
    font-family: var(--at-serif);
    font-size: 22px;
    color: var(--at-ink);
}

/* --- 结算页 --- */
.at-scope-checkout .text-xl.font-medium,
.at-scope-checkout .text-2xl.font-medium {
    font-family: var(--at-serif);
    font-weight: 400;
    color: var(--at-ink);
}

.at-scope-checkout label {
    font-size: 12.5px;
    color: var(--at-ink-2);
}

.at-scope-checkout input[type="text"],
.at-scope-checkout input[type="email"],
.at-scope-checkout input[type="password"],
.at-scope-checkout input[type="number"],
.at-scope-checkout select,
.at-scope-checkout textarea {
    border: 1px solid var(--at-line) !important;
    background: var(--at-paper);
    border-radius: var(--at-radius) !important;
    color: var(--at-ink);
    font-size: 13.5px;
    padding: 11px 13px;
}

.at-scope-checkout input:hover,
.at-scope-checkout select:hover,
.at-scope-checkout textarea:hover {
    border-color: #d8d0bf !important;
}

/* 结算页右侧吸顶摘要 */
.at-scope-checkout .sticky {
    top: 24px;
}

/* =============================================================================
   迷你购物车抽屉
   -----------------------------------------------------------------------------
   抽屉由核心 v-mini-cart 渲染，主题层只在头部给它加一个 .at-minicart 作用域类，
   再在这里换成 ATELIER 体系。
   ========================================================================== */

.at-minicart .rounded-2xl.bg-navyBlue {
    background: var(--at-ink) !important;
    color: #fff !important;
    border-radius: var(--at-radius) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    padding: 15px 22px;
}

.at-minicart .text-blue-700 {
    color: var(--at-gold) !important;
    font-size: 12px;
}

.at-minicart .text-2xl.font-medium {
    font-family: var(--at-serif);
    font-weight: 400;
    color: var(--at-ink);
}

.at-minicart .text-3xl.font-semibold {
    font-family: var(--at-serif);
    font-weight: 400;
    font-size: 25px;
}

.at-minicart .border-zinc-200 {
    border-color: var(--at-line) !important;
}

/* 抽屉内商品缩略图：4:5 定框 + contain */
.at-minicart .max-w-28 {
    width: 72px;
    max-width: 72px;
    height: 90px;
    max-height: 90px;
    object-fit: contain;
    background: var(--at-cream);
    border: 1px solid var(--at-line-soft);
    border-radius: var(--at-radius);
    padding: 3px;
}

.at-minicart .rounded-\[54px\] {
    border-color: var(--at-line) !important;
    border-radius: var(--at-radius) !important;
    padding: 4px 10px;
}

/*
 * 商品名与价格。
 * 只圈 p 元素：抽屉底部的「继续结帐」也是 text-base font-medium，
 * 用 `.text-base.font-medium` 会把它的白字改成墨黑，正好和深色背景同色，
 * 按钮就变成一块看不见字的深色条。
 */
.at-minicart p.text-base.font-medium {
    font-size: 13px;
    color: var(--at-ink);
}

.at-minicart p.text-lg {
    font-size: 14px;
    color: var(--at-ink);
}

/* ══════════════════════════════════════════════════════════════════
   分类页左栏筛选 · ATELIER 主题
   ------------------------------------------------------------------
   参考 GUCCI 分类页（gucci.cn/zh/ca/…）的左栏分组筛选，
   版式对齐本项目原型 prototype/storefront.html 的 .fgroup：
     组标题大写字距、13px 勾选行、右侧数量、颜色用色块。
   ══════════════════════════════════════════════════════════════════ */

.at-filters-inner {
    display: flex;
    flex-direction: column;
}

.at-filters-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--at-line);
}

.at-filters-title {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--at-muted);
    font-weight: 500;
}

.at-filters-clear {
    font-size: 12px;
    color: var(--at-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.at-filters-clear:hover {
    color: var(--at-gold);
}

.at-filters-empty {
    font-size: 13px;
    color: var(--at-muted);
    line-height: 1.8;
}

.at-fgroup {
    margin-bottom: 26px;
}

.at-fgroup-title {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--at-muted);
    font-weight: 500;
    margin-bottom: 11px;
}

.at-fg-item,
.at-fg-link,
.at-fg-swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--at-ink-2);
    margin-bottom: 8px;
    cursor: pointer;
}

.at-fg-link {
    text-decoration: none;
}

.at-fg-item:hover,
.at-fg-link:hover,
.at-fg-swatch:hover {
    color: var(--at-ink);
}

.at-fg-item input[type='checkbox'],
.at-fg-item input[type='radio'] {
    width: 13px;
    height: 13px;
    flex: none;
    border: 1px solid #cfcabf;
    border-radius: 2px;
    accent-color: var(--at-ink);
    cursor: pointer;
}

.at-fg-name {
    flex: 1;
    min-width: 0;
}

.at-fg-count {
    margin-left: auto;
    font-family: var(--at-mono);
    font-size: 11px;
    color: #b0aca2;
    flex: none;
}

/* 颜色：色块（GUCCI / 原型都是色块，不是文字复选框） */
.at-fg-swatches {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.at-fg-swatch {
    margin-bottom: 6px;
}

.at-fg-swatch input[type='checkbox'] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.at-fg-swatch-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    border: 2px solid transparent;
    transition: border-color .18s;
}

.at-fg-swatch input:checked + .at-fg-swatch-dot {
    border-color: var(--at-ink);
}

.at-fg-swatch-name {
    flex: 1;
    min-width: 0;
}

/* 移动端底部条 */
.at-m-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--at-line);
}

.at-m-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--at-ink-2);
    cursor: pointer;
}

.at-m-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.at-m-drawer-head p {
    font-size: 15px;
    font-weight: 600;
    color: var(--at-ink);
}

.at-m-drawer-clear {
    font-size: 13px;
    color: var(--at-ink-2);
    cursor: pointer;
}

/* 抽屉里的排序条改成竖排，避免和桌面版挤在一起 */
.at-m-bar ~ * .at-sortbar,
.drawer .at-sortbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.drawer .at-sortbar-right {
    width: 100%;
    justify-content: space-between;
}

/* 当前所在的系列（同系列列表里高亮） */
.at-fg-link.on {
    color: var(--at-ink);
    font-weight: 600;
}

.at-fg-link.on .at-fg-name::after {
    content: '\00B7';
    margin-left: 5px;
    color: var(--at-gold);
    font-weight: 400;
}
/*
 * Narrow screen: the "Series" group becomes a horizontally scrolling chip row
 * (matching the prototype's .m-sec pills), instead of ten rows stacked vertically
 * and pushing the product grid off-screen.
 */
@media (max-width: 1180px) {
    .at-fg-series {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        margin-bottom: 18px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .at-fg-series::-webkit-scrollbar {
        display: none;
    }

    .at-fg-series .at-fgroup-title {
        flex: none;
        margin-bottom: 0;
    }

    .at-fg-series .at-fg-link {
        flex: none;
        margin-bottom: 0;
        gap: 6px;
        border: 1px solid var(--at-line);
        border-radius: 16px;
        padding: 6px 13px;
        font-size: 12px;
    }

    .at-fg-series .at-fg-count {
        margin-left: 0;
    }

    .at-fg-series .at-fg-link.on {
        border-color: var(--at-ink);
    }
}