:root{
    --yan-bg:#18181c;
    --yan-card:#23242a;
    --yan-border:#3b3320;
    --yan-gold:#ffd567;
    --yan-gold-deep:#c6a14a;
    --yan-text:#e2e2e2;
  }

  body {
    background: var(--yan-bg);
    color: var(--yan-text);
    font-family: 'Segoe UI','PingFang SC',Arial,sans-serif;
    margin:0;
    min-height:100vh;
    padding-bottom: 88px;
    -webkit-text-size-adjust: 100%;
  }

  a { color: inherit; text-decoration: none; transition: color .2s; }
  a:hover { color: var(--yan-gold); }

  button,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"] {
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
  }

  .topbar {
    background-color: #1a1a20;
    padding: 58px 10px 12px;
    border-bottom: 2px solid #2b2514;
  }

  .searchbar-sticky{
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:1200;
    padding:8px 10px;
    background:rgba(26,26,32,.96);
    border-bottom:1px solid rgba(198,161,74,.25);
    box-shadow:0 5px 18px rgba(0,0,0,.3);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  .top-carousel {
    max-width: 980px;
    height: 58px;
    margin: 10px auto 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(255,213,103,.10), rgba(35,36,42,.92) 42%, rgba(198,161,74,.12));
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
  }

  .top-carousel-track {
    height: 100%;
    display: flex;
    transition: transform .42s ease;
    will-change: transform;
  }

  .top-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .top-slide-text {
    text-align: center;
    min-width: 0;
  }

  .top-slide-title {
    font-size: 1.16em;
    font-weight: 900;
    letter-spacing: .06em;
    background: linear-gradient(92deg,#ffd567 30%,#fff3c5 48%,#c6a14a 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 18px #ffe1ab77;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-slide-desc {
    margin-top: 4px;
    font-size: .86em;
    color: #ffeab6;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .top-carousel-dots {
    position: absolute;
    right: 10px;
    bottom: 7px;
    display: flex;
    gap: 5px;
  }

  .top-carousel-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,234,182,.35);
    transition: width .2s, background .2s;
  }

  .top-carousel-dot.active {
    width: 14px;
    background: var(--yan-gold);
  }

  .searchbar-row {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
    align-items:center;
  }

  .site-logo{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:10px;
    overflow:hidden;
    background:#23242a;
    box-shadow:0 2px 10px #0004;
  }
  .site-logo img{display:block;width:100%;height:100%;object-fit:cover}

  .searchbar-simple {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background-color: var(--yan-card);
    border-radius: 12px;
    border: 1px solid rgba(198,161,74,.75);
    padding: 0 4px 0 10px;
    height: 38px;
    box-shadow: 0 2px 10px #0004;
  }

  .searchbar-simple input[type="text"] {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: .84rem;
    padding: 0;
    outline: none;
    letter-spacing: .02em;
  }

  .searchbar-simple input::placeholder { color:#b3a57a; }

  .searchbar-simple button {
    flex-shrink: 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background: linear-gradient(90deg,var(--yan-gold) 0%,var(--yan-gold-deep) 100%);
    color: #1b1b1f;
    border: none;
    border-radius: 10px;
    font-size: .9em;
    padding: 5px 9px;
    margin-left: 4px;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
  }

  .searchbar-simple button:hover {
    background: linear-gradient(90deg,#ffe6b7 0%,#e0c273 100%);
  }

  .announce-btn{
    flex: 0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height: 38px;
    padding: 0 11px;
    border-radius: 12px;
    border: 1px solid rgba(198,161,74,.75);
    background: var(--yan-card);
    color:#ffeab6;
    font-weight:800;
    font-size:.9em;
    white-space:nowrap;
    box-shadow: 0 2px 10px #0004;
    transition:transform .16s, border-color .16s, background .16s;
  }

  .announce-btn:hover{
    border-color:var(--yan-gold);
    background:#2c2d33;
    transform:translateY(-1px);
  }

  .announce-btn .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff4d4f;
    box-shadow:0 0 0 2px #23242a;
  }

  .icon { width: 18px; height: 18px; display:inline-block; vertical-align: -2px; }
  .icon-20 { width:20px; height:20px; }

  @media (max-width: 480px){
    .topbar{ padding: 52px 10px 10px; }
    .searchbar-sticky{padding:7px 9px}
    .top-carousel{ height: 54px; margin-top: 10px; border-radius: 12px; }
    .top-slide{ padding: 0 28px 0 12px; }
    .top-slide-title{ font-size: 1rem; letter-spacing: .03em; }
    .top-slide-desc{ font-size: .76rem; letter-spacing: 0; }
    .top-carousel-dots{ right: 8px; bottom: 6px; }
    .searchbar-row{ gap:8px; }
    .site-logo{width:36px;height:36px;border-radius:9px}
    .searchbar-simple{ height:36px; border-radius:9px; }
    .searchbar-simple input[type="text"]{ font-size:.78rem; }
    .searchbar-simple button{ padding:5px 8px; font-size:.78em; }
    .announce-btn{ height:36px; padding:0 9px; font-size:.78em; }
    .major-tabs{ gap:16px; padding-top:16px; }
    .major-tab{ font-size:.86rem; padding-bottom:9px; }
  }

  /* ===== 大类主标签 ===== */
  .major-tabs-wrap {
    background:#18181d;
    border-bottom:1px solid #2b2514;
  }

    .major-tabs {
      max-width:980px;
      margin:0 auto;
      display:flex;
      gap:18px;
      padding:8px 12px 0 12px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      justify-content:center;
      align-items:flex-end;
    }

  .major-tabs.is-wide{ justify-content:flex-start; }
  .major-tabs::-webkit-scrollbar{ display:none; }

.major-tab {
  position:relative;
  flex:0 0 auto;
  padding:8px 2px 10px;
  border:none;
  background:transparent;
  color:var(--yan-gold);
  font-weight:900;
  font-size:.92rem;
  letter-spacing:.03em;
  cursor:pointer;
  outline:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.major-tab.has-discount {
  padding-right: 2px;
}

.major-tab .tab-label {
  line-height:1;
}

.tab-discount-badge {
  position: static;
  transform: none;
  background: linear-gradient(90deg, #ff2d55, #ff6b35);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,45,85,.45);
  border: 1px solid rgba(255,255,255,.35);
  animation: discountPulse 1.4s ease-in-out infinite;
  z-index: 2;
}

@keyframes discountPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

  .major-tab::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    border-radius:3px;
    background:transparent;
    transition:background .15s, transform .15s;
  }

  .major-tab.active::after{
    background:var(--yan-gold);
    transform:scaleX(1);
  }

  .major-tab:not(.active)::after{
    transform:scaleX(0);
  }

  @media (max-width: 480px){
    .major-tabs{ gap:16px; padding-top:8px; }
    .major-tab{ font-size:.86rem; padding-bottom:9px; }
    .major-tab.has-discount{ padding-right:2px; }
    .tab-discount-badge{ font-size:9px; padding:2px 6px; }
  }

  /* ===== 香烟品牌 ===== */
  .brand-wrap {
    background:#16161a;
    border-bottom:1px dashed #2e2a1c;
  }

  .brand-row {
    max-width:980px;
    margin:0 auto;
    padding:10px 12px 8px;
  }

  .brand-top {
    display:flex;
    align-items:center;
    gap:4px;
  }

  .brand-firstline {
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    gap:5px;
    overflow:hidden;
    flex-wrap:nowrap;
    padding-right: 4px;
    box-sizing: border-box;
  }

  .brand-chip{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#23262a;
    color:var(--yan-gold);
    border-radius:999px;
    border:1px solid #3a3a3a;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
    text-align:center;
    padding:4px 9px;
    font-size:.78em;
  }

  .brand-chip.active{
    background:var(--yan-gold);
    color:#23201b;
    border-color:var(--yan-gold);
  }

  .brand-toggle {
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    user-select:none;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
    color:#ffeab6;
    font-size:.8em;
    font-weight:700;
    padding:0;
    -webkit-tap-highlight-color: transparent;
  }

  .brand-toggle span,
  .brand-toggle svg {
    background: transparent !important;
  }

  .brand-toggle .arrow { width:18px; height:18px; }
  .brand-more-panel { display:none; padding:6px 0 2px; }
  .brand-more-panel.open { display:block; }

  .brand-grid{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-start;
  }

  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 10px;
  }

  .product-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 1.2em;
    min-height: 220px;
  }

  @media (min-width: 800px) {
    .product-list {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  @media (max-width: 799px) {
    .product-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
  }

  @media (min-width: 1024px) {
    body {
      padding-bottom: 40px;
    }

    .topbar {
      padding: 58px 24px 14px;
    }

    .searchbar-row,
    .top-carousel,
    .major-tabs,
    .brand-row,
    .container {
      max-width: 1180px;
    }

    .searchbar-simple {
      height: 38px;
      padding-left: 14px;
    }

    .searchbar-simple input[type="text"] {
      font-size: .84rem;
    }

    .announce-btn {
      height: 38px;
      padding: 0 12px;
    }

    .top-carousel {
      height: 54px;
    }

    .major-tabs {
      gap: 34px;
      padding-top: 10px;
    }

    .major-tab {
      font-size: 1rem;
      padding-bottom: 12px;
    }

    .brand-row {
      padding: 12px 18px 10px;
    }

    .brand-chip {
      font-size: .84em;
      padding: 5px 12px;
    }

    .container {
      padding: 0 18px;
    }

    .product-list {
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      margin-top: 18px;
    }

  }

  @media (min-width: 1440px) {
    .searchbar-row,
    .top-carousel,
    .major-tabs,
    .brand-row,
    .container {
      max-width: 1320px;
    }

    .product-list {
      grid-template-columns: repeat(7, 1fr);
    }
  }

  .product-card {
    background-color:rgba(34,38,43,.98);
    border-radius: 10px;
    padding: 0;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    border: none;
    overflow: hidden;
    transition: box-shadow .18s, transform .13s;
    min-width: 0;
    height:100%;
  }

  .product-card:hover {
    transform: translateY(-3px) scale(1.012);
  }
  .product-card-link,.product-name-link{display:block;width:100%;color:inherit;text-decoration:none}

  .product-card .thumb-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    background: #14130f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  .product-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #221e11;
    margin: 0;
    transition: transform .16s;
    box-shadow: 0 2px 22px #c6a14a22;
  }

  .product-card:hover img { transform: scale(1.07); }

  .info {
    padding: 8px 6px 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex:1;
  }

  .info h2 {
    margin: 0 0 5px 0;
    font-size: 0.86em;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
    text-shadow:0 1px 5px #2b251470;
  }

  .info-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap:8px;
    margin-top:auto;
  }

  .price {
    color: var(--yan-gold);
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .price span {
    font-size: .7em;
    opacity: .92;
  }

  .sales {
    color: #bababa;
    font-size: .72em;
    font-weight: 500;
    margin-left: 6px;
  }

  .quick-cart-btn{
    flex:0 0 auto;
    min-width:48px;
    min-height:28px;
    margin:0;
    padding:0 10px;
    border:1px solid #ffd56766;
    border-radius:8px;
    background:#ffd56712;
    color:var(--yan-gold);
    font-size:.76em;
    font-weight:800;
    cursor:pointer;
    transition:background .16s,color .16s,transform .08s,opacity .16s;
  }
  .quick-cart-btn:hover{background:var(--yan-gold);color:#23201b}
  .quick-cart-btn:active{transform:scale(.97)}
  .quick-cart-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
  .quick-cart-btn.is-loading{opacity:.65;pointer-events:none}
  .quick-cart-btn.is-added{background:#2a4938;border-color:#56d892;color:#8ff0b8}
  @media(max-width:799px){
    .info{padding:7px 5px}
    .info-row{gap:4px}
    .price{font-size:.76em;white-space:nowrap}
    .quick-cart-btn{min-width:38px;min-height:26px;padding:0 6px;font-size:.7em;border-radius:7px}
  }
  .quick-cart-toast{
    position:fixed;left:50%;bottom:92px;z-index:1600;
    transform:translate(-50%,12px);opacity:0;pointer-events:none;
    max-width:calc(100vw - 28px);padding:10px 16px;border-radius:999px;
    background:#292c31;color:#ffd567;border:1px solid #55451e;
    box-shadow:0 8px 28px #0009;font-size:.9rem;white-space:nowrap;
    transition:opacity .2s,transform .2s;
  }
  .quick-cart-toast.show{opacity:1;transform:translate(-50%,0)}

  .soldout-badge-list {
    position:absolute;
    left:0;
    top:0;
    right:0;
    background:rgba(226,89,75,0.93);
    color:#fff;
    font-size:1em;
    font-weight:700;
    padding:7px 0;
    z-index: 9;
    letter-spacing:.15em;
    text-align:center;
  }

  .product-card.soldout img { filter: grayscale(1) brightness(0.82); }
  .product-card.soldout h2,
  .product-card.soldout .price,
  .product-card.soldout .sales { color:#aaa !important; }
  .product-card.soldout { cursor: not-allowed !important; }

  .product-card.recommended {
    box-shadow:0 8px 26px rgba(255,213,103,.10);
  }

  .recommend-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(90deg,var(--yan-gold),var(--yan-gold-deep));
    color: #23201b;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 900;
    line-height:1.2;
    margin-right:3px;
    transform:translateY(-1px);
  }

  .recommend-star{
    position:absolute;right:7px;top:7px;z-index:6;
    display:grid;place-items:center;width:auto;min-width:0;height:23px;padding:0 8px;box-sizing:border-box;
    border:1px solid rgba(255,239,183,.48);border-radius:999px;
    background:linear-gradient(135deg,#edc45d 0%,#c6922d 58%,#9b6918 100%);color:#fff;
    font-size:.68rem;font-weight:900;line-height:1;letter-spacing:.04em;box-shadow:0 2px 7px rgba(0,0,0,.42);
    pointer-events:none;
  }
  .thumb-sale-tag{
    position:absolute;left:7px;top:7px;z-index:6;
    padding:4px 7px;border-radius:5px;
    background:rgba(220,53,69,.94);color:#fff;
    font-size:.68rem;font-weight:900;line-height:1;
    box-shadow:0 3px 10px #0008;pointer-events:none;
  }

  .seckill-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(90deg,var(--yan-gold),var(--yan-gold-deep));
    color: #23201b;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: .72em;
    font-weight: 900;
    line-height:1.2;
    margin-right:3px;
    transform:translateY(-1px);
  }

  .name-row {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    width:100%;
    margin:0 0 5px 0;
    line-height:1.35;
  }
  .product-name-link{margin-bottom:5px}

  .pagination {
    display: flex;
    justify-content: center;
    align-items:center;
    gap: 6px;
    margin: 24px 0 12px 0;
    padding: 4px 8px;
    font-size: .86em;
    user-select: none;
    flex-wrap:wrap;
  }

  .pagination a,
  .pagination span {
    display: inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 30px;
    height:30px;
    box-sizing:border-box;
    text-align: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #202329;
    color: var(--yan-gold);
    border: 1px solid #c6a14a24;
    text-decoration: none;
    font-weight: 800;
    line-height:1;
    transition: background .12s, color .12s, border-color .13s, transform .08s, box-shadow .12s;
  }

  .pagination a:hover {
    background: var(--yan-gold);
    color: var(--yan-bg);
    border-color: var(--yan-gold);
    box-shadow:0 5px 14px rgba(255,213,103,.16);
  }

  .pagination a:active{
    transform:translateY(1px);
  }

  .pagination .active-page {
    background: linear-gradient(90deg,var(--yan-gold) 60%,var(--yan-gold-deep) 100%);
    color: var(--yan-bg);
    border-color: var(--yan-gold);
    font-weight: 900;
    pointer-events: none;
    min-width:34px;
  }

  .pagination .page-nav{
    min-width:54px;
    padding:0 11px;
  }

  .pagination .page-disabled{
    color:#666;
    border-color:#2c3035;
    background:#1b1d21;
    pointer-events:none;
  }

  .pagination .page-ellipsis{
    min-width:18px;
    padding:0 2px;
    color:#777;
    border:none;
    background:transparent;
    pointer-events:none;
  }

  @media(max-width:480px){
    .pagination{
      gap:5px;
      margin-top:20px;
      font-size:.8em;
    }
    .pagination a,
    .pagination span{
      min-width:28px;
      height:28px;
      padding:0 8px;
    }
    .pagination .page-nav{
      min-width:44px;
      padding:0 9px;
    }
  }

  .footer {
    color: #e3d59c;
    text-align: center;
    padding: 26px 0 14px;
    font-size: 0.78em;
    margin-bottom: 0;
    letter-spacing: .01em;
    background: var(--yan-bg);
  }

  .footer-age-warning{
    max-width:720px;
    margin:0 auto 8px;
    padding:0 14px;
    color:#aaa;
    font-size:.92em;
    line-height:1.65;
   }

  @media(max-width:480px){
    .footer{
      font-size:.72em;
      padding:22px 10px 12px;
    }
    .footer-age-warning{
      font-size:.9em;
      margin-bottom:7px;
      padding:0 6px;
    }
  }

  .loading-bar {
    position:absolute;
    left:0;
    right:0;
    top:-6px;
    height:3px;
    background:linear-gradient(90deg,var(--yan-gold),var(--yan-gold-deep));
    transform:translateX(-100%);
    animation: loadingBar 1.2s linear infinite;
  }

  @keyframes loadingBar {
    from {transform:translateX(-100%);}
    to   {transform:translateX(100%);}
  }

  .skeleton-card {
    border:2px solid #2a2a2a;
    border-radius:10px;
    overflow:hidden;
    background:#202225;
    height:100%;
  }

  .skeleton-thumb {
    width:100%;
    aspect-ratio:1/1;
    background: linear-gradient(90deg,#222,#262626,#222);
    animation: shimmer 1.2s infinite;
  }

  .skeleton-lines { padding:12px; }

  .skeleton-line {
    height:10px;
    margin:8px 0;
    background: linear-gradient(90deg,#222,#262626,#222);
    animation: shimmer 1.2s infinite;
    border-radius:6px;
  }

  @keyframes shimmer {
    0% { background-position:-200px 0; }
    100% { background-position:200px 0; }
  }

  .empty-state {
    width: 100%;
    height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9aa0a6;
    gap: 12px;
    grid-column: 1 / -1;
    padding: 28px 12px;
  }

  .empty-state svg {
    width: 48px;
    height: 48px;
    color: var(--yan-gold);
    opacity: 0.95;
  }

  .empty-state .empty-text {
    font-size: 1.05em;
    letter-spacing: .02em;
  }

  .empty-subtext {
    color: #777;
    font-size: .9em;
    line-height: 1.5;
  }

  .empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #1b1b1f;
    background: linear-gradient(90deg,var(--yan-gold),var(--yan-gold-deep));
    font-size: .88em;
    font-weight: 900;
  }

  .promo-mask {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:3000;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .promo-mask.show {
    opacity:1;
    pointer-events:auto;
  }

  .promo-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 84px);
    background: rgba(34,38,43,.98);
    border: 1.5px solid #c6a14a66;
    box-shadow: 0 18px 45px rgba(0,0,0,.5), 0 0 0 1px rgba(255,213,103,.1) inset;
    border-radius: 16px;
    z-index:3001;
    transform: translateY(30px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    overflow: hidden;
  }

  .promo-sheet.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .promo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(92deg,#ffd56722,#c6a14a11);
    border-bottom: 1px solid #c6a14a33;
  }

  .promo-title {
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--yan-gold);
    font-size: 1rem;
    text-shadow: 0 1px 10px #ffd56722;
  }

  .promo-close {
    border: none;
    background: transparent;
    color: #ffeab6;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .promo-close:hover { background: rgba(255,213,103,.12); }

  .promo-body {
    padding: 14px;
    color: #e9e4cf;
    line-height: 1.6;
    font-size: .98rem;
  }

  .promo-cta {
    display: flex;
    gap: 10px;
    padding: 0 14px 14px;
  }

  .promo-btn-primary {
    flex: 1;
    border: none;
    cursor: pointer;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 900;
    letter-spacing: .04em;
    background: linear-gradient(90deg,var(--yan-gold) 60%,var(--yan-gold-deep) 100%);
    color: #23201b;
    box-shadow: 0 10px 22px rgba(255,213,103,.18)
  }

  .promo-btn-secondary {
    flex: 1;
    border: 1.5px solid #c6a14a66;
    background: #23262a;
    color: #ffeab6;
    cursor: pointer;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .promo-foot {
    padding: 10px 14px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #c6a14a44;
    color: #bfbfbf;
    font-size: .86rem;
  }

  .promo-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
  }

  .promo-checkbox input { width: 16px; height: 16px; }
  .promo-note { color: #9d9d9d; }

  @media (max-width: 480px) {
    .promo-sheet {
      left: 10px;
      right: 10px;
      bottom: calc(env(safe-area-inset-bottom) + 72px);
      border-radius: 14px;
    }

    .promo-title {
      font-size: .92rem;
      letter-spacing: .02em;
    }

    .promo-body {
      padding: 12px;
      font-size: .88rem;
      line-height: 1.55;
    }

    .promo-cta {
      gap: 8px;
      padding: 0 12px 12px;
    }

    .promo-btn-primary,
    .promo-btn-secondary {
      min-height: 40px;
      padding: 9px 8px;
      border-radius: 10px;
      line-height: 1.2;
      white-space: normal;
      word-break: keep-all;
    }

    .promo-btn-primary {
      font-size: .82rem;
      letter-spacing: .02em;
    }

    .promo-btn-secondary {
      font-size: .78rem;
      letter-spacing: .02em;
    }

    .promo-foot {
      padding: 9px 12px 11px;
      font-size: .78rem;
      gap: 8px;
    }
  }

  @media (min-width: 800px) {
    .promo-sheet {
      left: calc(50% - 420px);
      right: calc(50% - 420px);
    }
  }