﻿/* OctShop desktop storefront theme — inspired by modern multi-merchant malls */
:root {
    --brand: #e93323;
    --brand-dark: #cf2518;
    --brand-soft: #fff1ef;
    --ink: #222;
    --muted: #888;
    --surface: #fff;
    --page: #f5f5f5;
    --radius: 14px;
    --shadow: 0 8px 28px rgba(31, 35, 41, .08);
}

html, body { background: var(--page) !important; color: var(--ink); }
body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }

@media (min-width: 769px) {
    html { overflow-x: hidden !important; }
    body { padding-bottom: 0 !important; min-width: 1080px; }
    body::before { display: none; }
    .pc-promo {
        display: flex;
        height: 86px;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 6px;
        background: radial-gradient(circle at 22% 20%, rgba(255,255,255,.24), transparent 18%),
                    radial-gradient(circle at 80% 80%, rgba(255,205,188,.25), transparent 24%),
                    linear-gradient(110deg, #9d0710 0%, #e4251b 48%, #ff6a42 100%);
    }

    body .oct-header {
        position: relative !important;
        inset: auto !important;
        box-sizing: border-box;
        height: 108px !important;
        max-width: 1200px;
        margin: 0 auto !important;
        padding: 34px 235px 24px 250px !important;
        background: #fff !important;
        z-index: 3;
    }
    .pc-logo {
        position: absolute;
        left: 0;
        top: 29px;
        color: var(--brand);
        font-size: 30px;
        line-height: 52px;
        font-weight: 900;
        letter-spacing: -1px;
        text-decoration: none;
    }
    .pc-cart {
        position: absolute;
        right: 0;
        top: 35px;
        width: 156px;
        height: 42px;
        border: 1px solid #ddd;
        border-radius: 24px;
        color: var(--brand);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        background: #fff;
        text-decoration: none;
    }
    .pc-cart:hover { border-color: var(--brand); color: var(--brand-dark); }
    .oct-header .goods-search {
        height: 46px;
        justify-content: flex-start;
        box-sizing: border-box;
        padding-left: 24px;
        border: 2px solid var(--brand);
        border-radius: 26px;
        color: #aaa;
        background: #fff;
        cursor: text;
        box-shadow: 0 5px 16px rgba(233,51,35,.08);
    }
    .oct-header .goods-search::after {
        content: "搜索";
        margin-left: auto;
        width: 92px;
        height: 42px;
        margin-right: -5px;
        border-radius: 24px;
        color: #fff;
        background: var(--brand);
        text-align: center;
        line-height: 42px;
        font-weight: 600;
    }
    .goods-search img { display: none; }

    body .oct-header-sub {
        position: relative !important;
        top: auto !important;
        height: 52px;
        border-bottom: 2px solid var(--brand);
        background: #fff;
        z-index: 2;
    }
    .goods-type-nav { position:relative; box-sizing:border-box; width:1200px; height:52px; margin:0 auto; padding:0 0 0 240px; overflow:hidden; }
    .goods-type-ul { height: 52px; justify-content: center; gap: 0; }
    .pc-category-trigger {
        display: flex;
        position:absolute;
        left:0;
        top:0;
        width: 218px;
        height: 52px;
        align-items: center;
        justify-content: center;
        border-radius: 12px 12px 0 0;
        color: #fff;
        background: var(--brand);
        font-size: 17px;
        font-weight: 600;
        text-decoration:none;
    }
    .pc-category-trigger:hover { color:#fff; background:var(--brand-dark); }
    .goods-type-ul li { margin: 0 !important; }
    .goods-type-ul li:nth-of-type(n+7) { display: none; }
    .goods-type-ul li div {
        min-width: 116px;
        height: 52px;
        border: 0 !important;
        color: #333;
        text-align: center;
        line-height: 52px;
        font-size: 16px;
    }
    .goods-type-ul li div:hover, .goods-type-li-current { color: var(--brand) !important; }

    body .oct-content { position: relative; top: auto !important; max-width: none; background: var(--page); }
    #mescroll {
        position: relative !important;
        inset: auto !important;
        width: 1200px !important;
        height: auto !important;
        margin: 0 auto;
        padding: 20px 0 60px;
        overflow: visible !important;
        display: grid;
        grid-template-columns: 218px minmax(0, 1fr) 200px;
        grid-auto-flow: row;
        gap: 18px 20px;
        background: transparent;
    }

    .nav-list {
        grid-column: 1;
        grid-row: 1;
        height: 360px;
        box-sizing: border-box;
        padding: 12px 10px !important;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    .nav-list .sliderMainContent { height: 338px !important; }
    .nav-list .content-slider > li {
        height: auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-content: start !important;
    }
    .nav-item {
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        padding: 8px 2px;
        border-radius: 9px;
        color: #444;
        font-size: 13px;
        transition: .2s ease;
    }
    .nav-item:hover { color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
    .nav-item img { width: 34px !important; height: 34px !important; margin-bottom: 4px !important; object-fit: contain; }

    .oct-slider {
        grid-column: 2;
        grid-row: 1;
        position: relative;
        height: 360px;
        margin: 0 !important;
        padding-right: 0;
        box-sizing: border-box;
    }
    .pc-user-card {
        grid-column: 3;
        grid-row: 1;
        box-sizing: border-box;
        height: 360px;
        padding: 62px 15px 16px;
        border-radius: var(--radius);
        color: #666;
        text-align: center;
        background: radial-gradient(circle at 50% 35px, #f1f3f7 0 28px, transparent 29px), #fff;
        box-shadow: var(--shadow);
    }
    .pc-user-card h3 { margin:0 0 4px; color:#444; font-size:16px; }
    .pc-user-card p { margin:0 0 16px; color:#aaa; font-size:12px; }
    .pc-user-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
    .pc-user-actions a { display:flex; min-height:38px; padding:5px; align-items:center; justify-content:center; border:1px solid #eee; border-radius:9px; color:#555; font-size:12px; text-decoration:none; background:#fff; }
    .pc-user-actions a:first-child { grid-column:1/-1; color:#fff; border-color:var(--brand); background:var(--brand); }
    .pc-user-actions a:hover { color:var(--brand); border-color:#ffc1bb; background:var(--brand-soft); }
    .pc-user-actions a:first-child:hover { color:#fff; background:var(--brand-dark); }
    .oct-slider .sliderMainContent, .oct-slider .content-slider li { height: 360px !important; border-radius: var(--radius); }
    .oct-slider .img-slider, .oct-slider .img-slider img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius); }
    .oct-slider .slider-pager-content { right: 16px; bottom: 16px; opacity: .8; }

    #SectionContent { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
    .second-kill, .gg-bar {
        box-sizing: border-box;
        margin: 0 !important;
        padding: 18px !important;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: 0 3px 16px rgba(31,35,41,.05);
    }
    .second-kill-title { font-size: 19px; padding: 0 0 15px !important; }
    .second-kill-title > div:first-child { position: relative; padding-left: 13px; }
    .second-kill-title > div:first-child::before { content:""; position:absolute; left:0; top:5px; width:4px; height:18px; border-radius:2px; background:var(--brand); }
    .second-kill-list { flex-wrap: nowrap; gap: 10px; }
    .second-kill-list a { flex: 1; width: auto !important; border-radius: 10px; background: #f7f7f7; }
    .second-kill-list img { aspect-ratio: 1; object-fit: cover; transition: .25s ease; }
    .second-kill-list a:hover img { transform: scale(1.04); }
    .gg-bar { height: 180px !important; overflow: hidden; }
    .gg-bar img { height: 100%; object-fit: cover; border-radius: 10px; }

    #mescroll > div[style*="padding-bottom: 8px"] { grid-column: 1/-1; display:none; }
    .goods-list {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
        margin: 0 !important;
        padding: 22px 0 0 !important;
        background: transparent !important;
    }
    .goods-list::before {
        content: "猜你喜欢";
        grid-column: 1 / -1;
        margin-bottom: 2px;
        color: #222;
        text-align: center;
        font-size: 25px;
        font-weight: 700;
        letter-spacing: 3px;
    }
    .goods-item {
        width: auto !important;
        margin: 0 !important;
        border: 1px solid transparent;
        border-radius: 12px !important;
        box-shadow: 0 3px 16px rgba(31,35,41,.04);
        overflow: hidden !important;
        transition: .22s ease;
    }
    .goods-item:hover { transform: translateY(-5px); border-color: #ffd0cb; box-shadow: 0 12px 28px rgba(31,35,41,.11); }
    .goods-item a, .goods-item img { height: 220px !important; }
    .goods-item img { object-fit: cover; border-radius: 0 !important; transition: .25s ease; }
    .goods-item:hover img { transform: scale(1.025); }
    .goods-item-title, .goods-name { height: 46px; padding: 10px 12px 4px !important; font-size: 14px !important; line-height: 20px; }
    .goods-item-price, .goods-price { padding: 7px 12px 14px !important; }
    .goods-price-left b, .goods-price b { color: var(--brand) !important; font-size: 19px !important; }
    .goods-item .goods-item-badge { top: 10px !important; left: 10px !important; padding: 3px 9px !important; background: var(--brand) !important; }
    .btn-more-goods { grid-column: 1/-1; width: 180px; margin: 12px auto 0 !important; border: 1px solid #ddd; transition:.2s; }
    .btn-more-goods:hover { color:var(--brand); border-color:var(--brand); }
    #mescroll > div:last-child { grid-column:1/-1; padding-bottom:20px !important; }

    .oct-footer {
        position: fixed !important;
        left: auto !important;
        right: 18px;
        bottom: 70px !important;
        width: 58px !important;
        height: auto !important;
        padding: 5px 0;
        flex-direction: column;
        border: 0 !important;
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--shadow);
        z-index: 20;
    }
    .oct-footer a { width: 58px !important; min-height: 58px; padding: 7px 2px !important; border-bottom: 1px solid #f2f2f2; box-sizing:border-box; font-size:11px !important; }
    .oct-footer a:last-child { border-bottom:0; }
    .oct-footer img { width: 22px !important; height: 22px !important; }
    .oct-footer a:hover, .oct-footer .nav-current { color:var(--brand) !important; background:var(--brand-soft); }

    .pc-site-footer { display:block; margin-top:12px; color:#666; background:#fff; border-top:1px solid #eee; }
    .pc-service-strip { display:grid; width:1200px; margin:0 auto; padding:30px 0; grid-template-columns:repeat(4,1fr); border-bottom:1px solid #eee; }
    .pc-service-item { display:flex; gap:12px; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:#333; }
    .pc-service-item b { display:flex; width:38px; height:38px; align-items:center; justify-content:center; border:2px solid var(--brand); border-radius:50%; color:var(--brand); font-size:20px; }
    .pc-footer-main { display:grid; width:1200px; margin:0 auto; padding:34px 0 28px; grid-template-columns:repeat(5,1fr); gap:44px; }
    .pc-footer-col h4 { margin:0 0 14px; color:#222; font-size:15px; }
    .pc-footer-col a { display:block; margin:9px 0; color:#777; font-size:13px; text-decoration:none; }
    .pc-footer-col a:hover { color:var(--brand); }
    .pc-footer-brand { font-size:13px; line-height:25px; }
    .pc-footer-brand strong { display:block; margin-bottom:7px; color:var(--brand); font-size:22px; }
    .pc-copyright { padding:18px; color:#999; border-top:1px solid #f0f0f0; text-align:center; font-size:12px; background:#fafafa; }
}

@media (max-width: 768px) {
    .pc-promo, .pc-logo, .pc-cart, .pc-category-trigger, .pc-user-card, .pc-site-footer { display:none !important; }
    body .oct-header { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05); }
    .oct-header .goods-search { background:#f5f5f5; border-radius:22px; }
    .goods-item { box-shadow:0 3px 14px rgba(31,35,41,.06); }
    .goods-item img { object-fit:cover; }
    .oct-footer { box-shadow:0 -3px 16px rgba(31,35,41,.08); }
}


/* 2026-08-09 brand/header and discount refinement */
.pc-logo { display:flex!important; align-items:center; gap:12px; max-width:300px; font-size:25px!important; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-logo-mark { width:42px; height:42px; border-radius:14px; display:inline-flex; flex:none; align-items:center; justify-content:center; color:#fff; font-size:24px; font-weight:800; background:linear-gradient(135deg,#ff5b39,#e93323); box-shadow:0 8px 20px rgba(233,51,35,.25); }
.oct-header { border-bottom:1px solid rgba(238,238,238,.75); }
.goods-search { box-shadow:0 6px 20px rgba(233,51,35,.08); }
.section-content .second-kill { width:100%!important; float:none!important; }
.section-content .second-kill-list { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:18px!important; padding:18px!important; }
.section-content .second-kill-list a { display:block; min-width:0; border-radius:12px; overflow:hidden; background:#f7f7f7; }
.section-content .second-kill-list img { display:block!important; width:100%!important; height:220px!important; object-fit:contain!important; padding:8px; box-sizing:border-box; background:#fff; transition:transform .25s ease; }
.section-content .second-kill-list a:hover img { transform:scale(1.035); }
@media (max-width:768px) {
  .section-content .second-kill-list { gap:8px!important; padding:10px!important; }
  .section-content .second-kill-list img { height:auto!important; aspect-ratio:1/1; padding:4px; }
}

/* ===== PC商城首页设计稿重构 v2 ===== */
@media (min-width:769px){
  :root{--design-width:1380px;--brand:#f2362f;--line:#f0ded9;--cream:#fff9f5}
  body{min-width:1180px;background:linear-gradient(#fff 0 170px,#fafafa 480px,#fff8f3 100%)!important}
  .design-shell{width:var(--design-width);margin:auto;display:flex;align-items:center;gap:34px}
  .design-topbar{height:34px;background:#f7f7f7;border-bottom:1px solid #eee;color:#666;font-size:12px}
  .design-topbar .design-shell{height:34px}.design-topbar nav{margin-left:auto;display:flex}.design-topbar a{color:#555;padding:0 14px;border-right:1px solid #ddd;text-decoration:none}.design-topbar a:hover{color:var(--brand)}
  body .oct-header{max-width:var(--design-width);height:104px!important;padding:25px 240px 17px 340px!important}
  .pc-logo{top:22px!important;max-width:330px!important;line-height:normal!important}.pc-logo-mark{font-family:Georgia;font-size:31px!important;background:none!important;color:var(--brand)!important;box-shadow:none!important;width:58px!important;height:58px!important;border-radius:0!important;border-right:2px solid var(--brand)}
  .pc-brand-word{display:flex;flex-direction:column}.pc-brand-word b{color:#191919;font-size:28px;letter-spacing:4px}.pc-brand-word small{color:#777;font-size:11px;letter-spacing:5px;margin-top:5px;font-weight:400}
  .oct-header .goods-search{height:44px;border-radius:22px}.oct-header .goods-search::after{height:40px;line-height:40px}.pc-cart{top:27px;width:135px;border-radius:6px;color:#222}.pc-cart::before{content:'🛒';margin-right:10px}
  body .oct-header-sub{height:48px;border-bottom:0}.goods-type-nav{width:var(--design-width);height:48px;padding-left:230px;overflow:visible}.pc-category-trigger{width:220px;height:48px;border-radius:6px 6px 0 0;font-size:15px}.goods-type-ul{display:none!important}.design-main-nav{display:flex;height:48px;align-items:center;gap:58px;padding-left:48px}.design-main-nav a{color:#222;text-decoration:none;font-size:14px}.design-main-nav a:hover{color:var(--brand)}.design-main-nav em{background:var(--brand);color:#fff;border-radius:4px;padding:1px 4px;font-size:8px;font-style:normal}
  body .oct-content{background:transparent}.pc-promo{display:none!important}
  #mescroll{width:var(--design-width)!important;padding:0 0 32px;grid-template-columns:220px minmax(0,1fr) 318px;gap:10px 12px}
  .nav-list{height:327px;border:1px solid var(--line);border-radius:0 0 6px 6px;box-shadow:none;padding:8px 13px!important;background:#fff}.nav-list .sliderMainContent{height:311px!important}.nav-list .content-slider>li{grid-template-columns:1fr!important}.nav-item{display:flex!important;align-items:center;justify-content:flex-start!important;height:29px;padding:2px 10px!important;font-size:13px}.nav-item img{width:18px!important;height:18px!important;margin:0 14px 0 0!important}.nav-item::after{content:'›';margin-left:auto;color:#999}
  .oct-slider{height:327px}.oct-slider .sliderMainContent,.oct-slider .content-slider li,.oct-slider .img-slider,.oct-slider .img-slider img{height:327px!important;border-radius:6px}.oct-slider .img-slider{overflow:hidden;background:#f7f7f7}.oct-slider .img-slider img{object-fit:contain}
  .pc-user-card{height:327px;padding:12px;border:1px solid var(--line);border-radius:6px;box-shadow:none;background:linear-gradient(135deg,#fff8f4,#fff)}.pc-user-card h3,.pc-user-card>p,.pc-user-actions{display:none}.design-notice,.design-coupons{background:#fff;border:1px solid #eee;border-radius:6px;text-align:left;margin-bottom:10px}.design-notice>div,.design-coupons>div:first-child{display:flex;justify-content:space-between;padding:10px 12px 7px}.design-notice a,.design-coupons a{font-size:11px;color:#666}.design-notice ul{margin:0;padding:0 22px 9px}.design-notice li{font-size:11px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-coupons #HomeCouponList{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 8px 8px}.design-coupons #HomeCouponList a{display:flex;flex-direction:column;align-items:center;padding:8px 2px;border:1px dashed #ffb8a8;border-radius:8px;color:#555;text-decoration:none;background:#fff8f5}.design-coupons strong{color:var(--brand);font-size:20px}.design-coupons small{font-size:9px}.design-coupons em{font-style:normal;color:#fff;background:var(--brand);border-radius:9px;padding:2px 7px;margin-top:5px;font-size:9px}
  .design-trust{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);height:44px;background:#fff;border:1px solid #eee}.design-trust span{display:flex;align-items:center;justify-content:center;gap:7px;border-right:1px solid #eee;font-size:12px}.design-trust b{display:flex;width:23px;height:23px;border-radius:50%;align-items:center;justify-content:center;color:#fff;background:var(--brand)}.design-trust small{display:block;color:#999;font-size:9px}
  #SectionContent{grid-column:1/-1;grid-template-columns:1fr;margin-top:2px}.second-kill{padding:12px!important;border:1px solid var(--line);border-radius:7px!important;box-shadow:none}.second-kill-title{display:flex;align-items:center;justify-content:space-between;font-size:18px!important;padding-bottom:10px!important}.second-kill-list{grid-template-columns:repeat(8,minmax(0,1fr))!important;padding:0!important;gap:10px!important}.section-content .second-kill-list img{height:128px!important}.second-kill-list a{border:1px solid #f2f2f2}
  .design-brand-shops,.design-category-floor{grid-column:1/-1;border:1px solid #eee;border-radius:7px;background:#fff;padding:10px 12px}.design-brand-shops header,.design-category-floor header{display:flex;align-items:center;justify-content:space-between}.design-brand-shops h2,.design-category-floor h2{margin:0 0 10px;font-size:18px}.design-brand-shops h2 small,.design-category-floor h2 small{font-size:11px;color:#999;font-weight:400;margin-left:12px}.design-brand-shops header>a,.design-category-floor header>a{font-size:11px;color:#666}.brand-shop-list{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.brand-shop-list>a{display:flex;align-items:center;gap:10px;border:1px solid #eee;border-radius:5px;padding:9px;color:#222;text-decoration:none}.brand-shop-list img{width:56px;height:42px;object-fit:cover;border-radius:4px}.brand-shop-list div{min-width:0;display:flex;flex-direction:column}.brand-shop-list b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-shop-list small{font-size:9px;color:#999}.brand-shop-list em{font-size:9px;color:var(--brand);font-style:normal;margin-top:3px}
  .category-goods-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}.category-goods-grid a{display:flex;min-width:0;flex-direction:column;color:#222;text-decoration:none}.category-goods-grid img{width:100%;height:105px;object-fit:contain;background:#fafafa;border-radius:5px}.category-goods-grid span{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.category-goods-grid b{color:var(--brand);font-size:12px}
  .design-recommend{grid-column:1/-1;display:grid;grid-template-columns:150px 1fr;gap:12px}.recommend-title{border-radius:7px;padding:18px;background:linear-gradient(135deg,#fff8f3,#fff);border:1px solid #f2e4dc}.recommend-title h2{margin:0;font-size:20px}.recommend-title p{color:#888}.recommend-title a{display:inline-block;background:var(--brand);color:#fff;border-radius:14px;padding:5px 14px;font-size:11px}.recommend-goods-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.recommend-goods-grid a{display:block;color:#222;text-decoration:none}.recommend-goods-grid img{width:100%;height:122px;object-fit:cover;border-radius:7px}.recommend-goods-grid span{display:none}
  .goods-list{grid-template-columns:repeat(6,1fr);gap:10px;padding-top:14px!important}.goods-item a,.goods-item img{height:190px!important}.goods-list::before{font-size:21px}.goods-item-title{font-size:12px!important}
  .design-float-tools{position:fixed;right:24px;top:46%;z-index:30;width:58px;border:1px solid #ddd;border-radius:14px;background:#fff;overflow:hidden}.design-float-tools a{display:flex;flex-direction:column;align-items:center;color:#333;text-decoration:none;padding:8px 2px;border-bottom:1px solid #eee;font-size:18px}.design-float-tools span{font-size:10px;margin-top:3px}.design-float-tools a:hover{color:var(--brand);background:#fff4f2}
  .oct-footer{display:none!important}.pc-site-footer{background:#202226;color:#ddd;margin-top:0}.pc-service-strip{width:var(--design-width);padding:18px 0;border-bottom-color:#444}.pc-footer-main{display:none}.pc-service-item{color:#ddd}.pc-copyright{background:#202226;border-top-color:#333;color:#aaa}
}
@media(max-width:768px){.design-topbar,.design-main-nav,.design-trust,.design-brand-shops,.design-category-floor,.design-recommend,.design-float-tools,.design-notice,.design-coupons{display:none!important}}

/* Homepage CMS article areas */
@media(min-width:769px){
 .design-notice>div>span{font-size:10px;color:#aaa}.design-notice li a{display:block;color:#444;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-notice li a:hover{color:var(--brand)}.article-empty{color:#aaa}
 .design-help-articles{grid-column:1/-1;margin-top:4px;padding:18px 20px 20px;background:#fff;border:1px solid #eee;border-radius:7px}.design-help-articles>header{display:flex;align-items:baseline;gap:14px;margin-bottom:13px;border-bottom:1px solid #eee}.design-help-articles h2{margin:0;padding:0 0 10px;font-size:20px;border-bottom:3px solid var(--brand)}.design-help-articles header p{margin:0;color:#999;font-size:12px}.help-article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.help-article-list article{position:relative;min-height:116px;padding:15px 16px 36px;border:1px solid #eee;border-radius:7px;background:#fafafa}.help-article-list h3{margin:0 0 8px;font-size:15px}.help-article-list h3 a{color:#222;text-decoration:none}.help-article-list h3 a:hover{color:var(--brand)}.help-article-list p{margin:0;color:#777;font-size:12px;line-height:21px}.help-more{position:absolute;left:16px;bottom:12px;color:var(--brand);font-size:11px;text-decoration:none}.help-empty{grid-column:1/-1;padding:24px;text-align:center;color:#aaa}
}
@media(max-width:768px){.design-help-articles{display:none!important}}
@media(min-width:769px){
 .design-login-box{display:flex;align-items:center;gap:10px;margin-bottom:9px;padding:8px 9px;border-radius:7px;background:linear-gradient(135deg,#fff2ed,#fff)}.design-avatar{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;color:#ddd;background:#f1f2f5}.design-login-box b{font-size:11px;color:#333}.design-login-box p{display:block!important;margin:4px 0 0!important;text-align:left}.design-login-box a{color:var(--brand);font-size:11px;text-decoration:none}.design-login-box span{margin:0 4px;color:#aaa}
 .pc-user-card{padding-top:9px}.design-notice,.design-coupons{margin-bottom:7px}.design-notice ul{padding-bottom:6px}.design-notice li{line-height:18px}.design-coupons #HomeCouponList a{padding:5px 2px}.design-coupons strong{font-size:17px}
 .article-group-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.article-group-columns>section{min-width:0}.article-group-columns>section>header{border-bottom:1px solid #eee;margin-bottom:10px}.article-group-columns h2{display:inline-block}.article-group-columns .help-article-list{grid-template-columns:1fr}.article-group-columns .help-article-list article{min-height:88px}.pc-copyright{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.pc-copyright #FooterCopyrightList{display:flex;gap:12px;flex-wrap:wrap}.pc-copyright #FooterCopyrightList span{color:#aaa}
}


/* Compact homepage article directory */
@media(min-width:769px){
 .design-avatar{overflow:hidden;color:#c5c9d0;background:#eef0f3}.design-avatar svg{width:30px;height:30px;fill:#c5c9d0;stroke:none}
 .article-group-columns .help-article-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px 8px!important;max-height:210px;overflow-y:auto;padding-right:4px;align-content:start}
 .article-group-columns .help-article-list article{min-height:0!important;height:auto;padding:0!important;border:0!important;border-radius:5px;background:#f7f8fa}
 .article-group-columns .help-article-list article h3{margin:0!important;font-size:12px;font-weight:500}
 .article-group-columns .help-article-list article h3 a{position:relative;display:block;padding:9px 22px 9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .article-group-columns .help-article-list article h3 a:after{content:'›';position:absolute;right:9px;color:#aaa}
 .article-group-columns .help-article-list article p,.article-group-columns .help-article-list article .help-more{display:none!important}
 .article-group-columns .help-article-list::-webkit-scrollbar{width:5px}.article-group-columns .help-article-list::-webkit-scrollbar-thumb{border-radius:5px;background:#ddd}
}
