/* Preview-only layout. The original storefront files remain untouched. */
:root {
  --pv-width: 1320px;
  --pv-gap: clamp(14px, 2vw, 28px);
  --pv-card-radius: 16px;
}

html[data-skin="anime-archive"] {
  --paper:#101117; --surface:#1c1e27; --surface-2:#252732; --surface-3:#30323e;
  --glass-bg:#1c1e27; --glass-bg-2:#252732; --glass-filter:none; --glass-filter-strong:none;
  --ink:#f6f3ed; --ink-2:#c7c4c4; --ink-3:#aaa7aa; --ink-4:#89858d;
  --line:#383a45; --line-2:#52535e; --accent:#e83958; --accent-2:#f9c987;
  --accent-3:#e83958; --accent-ink:#ff8498; --accent-soft:#512733; --accent-ring:#e8395866;
  --grad-cta:linear-gradient(100deg,#e83958,#f06855); --grad-halo:none;
  --sh-1:none; --sh-2:none; --sh-3:none;
}
html[data-skin="blue-cinema"] {
  --paper:#0b2038; --surface:#173149; --surface-2:#1d3b52; --surface-3:#25475c;
  --glass-bg:#173149; --glass-bg-2:#1d3b52; --glass-filter:none; --glass-filter-strong:none;
  --ink:#f7f3e9; --ink-2:#c2d7da; --ink-3:#a0bdc3; --ink-4:#7da2ae;
  --line:#36566a; --line-2:#52768a; --accent:#3ed5c1; --accent-2:#e7bd6b;
  --accent-3:#f0c477; --accent-ink:#73f4dc; --accent-soft:#1f5557; --accent-ring:#3ed5c166;
  --grad-cta:linear-gradient(100deg,#278f99,#3ed5c1); --grad-halo:none;
  --sh-1:none; --sh-2:none; --sh-3:none;
}
html[data-skin="candy-album"] {
  --paper:#f7f0f9; --surface:#fffafe; --surface-2:#f1e6f5; --surface-3:#ead9ed;
  --glass-bg:#fffafe; --glass-bg-2:#f1e6f5; --glass-filter:none; --glass-filter-strong:none;
  --ink:#35283e; --ink-2:#5f5069; --ink-3:#796a80; --ink-4:#9b8ba3;
  --line:#dccbe2; --line-2:#c8abd2; --accent:#bd467d; --accent-2:#7650a2;
  --accent-3:#ee8caf; --accent-ink:#8e285a; --accent-soft:#f7dfeb; --accent-ring:#bd467d66;
  --grad-cta:linear-gradient(100deg,#bd467d,#9d5cbb); --grad-halo:none;
  --sh-1:none; --sh-2:none; --sh-3:none;
}

html[data-skin="anime-archive"] body,
html[data-skin="blue-cinema"] body,
html[data-skin="candy-album"] body { background:var(--paper); color:var(--ink); background-image:none; }
html[data-skin="anime-archive"] body { background-image:linear-gradient(#ffffff06 1px,transparent 1px); background-size:100% 48px; }
html[data-skin="blue-cinema"] body { background-image:radial-gradient(circle at 90% 8%,#3ed5c121,transparent 35%); }
html[data-skin="candy-album"] body { background-image:radial-gradient(circle at 0 0,#ffffff,transparent 45%); }

.preview-ribbon { display:flex; justify-content:center; align-items:center; gap:14px; min-height:34px; padding:6px 16px;
  background:var(--accent); color:#fff; font-size:12px; line-height:1.35; text-align:center; position:relative; z-index:202; }
.preview-ribbon strong { font-weight:800; }
html[data-skin="blue-cinema"] .preview-ribbon { color:#0b2038; }

body:not(.page-landing) .container { max-width:var(--pv-width); padding-inline:clamp(14px,3vw,36px); }
#site-nav { padding:0; background:var(--paper); border-bottom:1px solid var(--line); }
#site-nav .navbar { max-width:var(--pv-width); height:68px; padding-inline:clamp(14px,3vw,36px); border:0; border-radius:0;
  background:transparent; box-shadow:none; backdrop-filter:none; }
#site-nav .navbar-brand { font-weight:900; letter-spacing:-.035em; }
.site-footer { margin-top:clamp(44px,6vw,88px); border-top:1px solid var(--line); }

.shop-home { padding-top:var(--pv-gap); }
.shop-home .isekai-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);
  align-items:center; min-height:clamp(300px,33vw,450px); margin:0; border:1px solid var(--line); border-radius:22px;
  overflow:hidden; isolation:isolate; position:relative; box-shadow:none; background:var(--surface); }
.shop-home .isekai-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.65;
  background:linear-gradient(90deg,transparent 96%,var(--line) 100%) 0 0/42px 42px; }
html[data-skin="anime-archive"] .shop-home .isekai-hero { background:linear-gradient(115deg,#25202a,#481e31 72%,#86243e); }
html[data-skin="blue-cinema"] .shop-home .isekai-hero { background:linear-gradient(115deg,#12314d,#185360 72%,#267976); }
html[data-skin="candy-album"] .shop-home .isekai-hero { background:linear-gradient(115deg,#fff9fd,#f3dfe9 72%,#e9d3f7); }
.shop-home .isekai-hero-copy { padding:clamp(28px,5vw,72px); z-index:1; min-width:0; }
.shop-home .isekai-kicker { display:block; margin-bottom:18px; padding:0; background:none; border:0; color:var(--accent-ink);
  font-size:clamp(12px,1.2vw,15px); font-weight:800; letter-spacing:.05em; }
.shop-home .isekai-hero h1 { max-width:12em; font-size:clamp(32px,5vw,70px); line-height:1.11; letter-spacing:-.06em; font-weight:900; }
html[data-skin="blue-cinema"] .shop-home .isekai-hero h1 { font-family:var(--font-serif); letter-spacing:-.035em; }
.shop-home .isekai-hero p { max-width:34em; margin:20px 0 26px; color:var(--ink-2); font-size:clamp(14px,1.4vw,17px); }
.shop-home .isekai-hero-link { min-height:50px; padding:0 24px; border-radius:10px; background:var(--accent); color:#fff; box-shadow:none; }
html[data-skin="blue-cinema"] .shop-home .isekai-hero-link { color:#0b2038; }
.shop-home .isekai-hero img { width:auto; max-width:100%; height:clamp(265px,32vw,420px); object-fit:contain;
  align-self:end; justify-self:center; object-position:center bottom; }
html[data-skin="anime-archive"] .shop-home .isekai-hero img { filter:grayscale(.2) drop-shadow(0 12px 32px #08060a99); }
html[data-skin="blue-cinema"] .shop-home .isekai-hero img { filter:drop-shadow(0 16px 28px #091b35aa); }

.shop-home #shop-products { margin:0 !important; background:transparent; border:0; border-radius:0; box-shadow:none; backdrop-filter:none; overflow:visible; }
.shop-home #shop-products > .panel-header { padding:26px 0 18px; background:transparent; border:0; }
.shop-home #shop-products .panel-title { font-size:clamp(22px,2.4vw,34px); font-weight:900; letter-spacing:-.04em; }
.shop-home #shop-products > .panel-body { display:block !important; padding:0; }
.shop-home #shop-products .panel-header .icon { display:none; }

.shop-home .cats { display:flex !important; flex-wrap:nowrap !important; gap:8px !important; overflow-x:auto; overflow-y:hidden;
  flex-flow:row nowrap !important; grid-column:1 / -1 !important; grid-row:auto !important; width:100%;
  margin:0 !important; padding:10px max(0px,calc(50% - 72px)) 14px !important; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-inline:contain; touch-action:pan-x; cursor:grab; }
.shop-home .cats::-webkit-scrollbar { display:none; }
.shop-home .cats.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.shop-home .cats .chip { flex:0 0 auto !important; display:inline-flex; justify-content:center; min-height:48px; padding:8px 18px;
  border-radius:10px; white-space:nowrap; scroll-snap-align:center; font-size:14px; font-weight:700; user-select:none; }
.shop-home .cats .chip.is-primary { background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.04); }
html[data-skin="blue-cinema"] .shop-home .cats .chip.is-primary { color:#0b2038; }
.shop-home .subcats { display:flex; flex-wrap:wrap; gap:8px; min-height:0; margin:0 0 12px; padding:8px 0 14px;
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.shop-home .subcats .subcat { flex:0 0 auto; min-height:40px; padding:7px 16px; border-radius:8px; }
.shop-home .item-list { display:grid; grid-column:1 / -1 !important; grid-row:auto !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pv-gap); margin-top:12px; }
.shop-home .item-card { min-width:0; border:1px solid var(--line); border-radius:var(--pv-card-radius); background:var(--surface); box-shadow:none; }
.shop-home .item-card:hover { transform:translateY(-2px); border-color:var(--accent); }
.shop-home .item-card .item-thumb { aspect-ratio:4/3; }
.shop-home .item-card .item-info { padding:14px; gap:6px; }
.shop-home .item-card .goods-title { font-size:clamp(14px,1.2vw,17px); font-weight:800; line-height:1.4; }
.shop-home .item-card .price { font-size:clamp(17px,1.8vw,24px); font-weight:900; }

.page-item main.container, .page-query main.container, .page-login main.container,
.page-user main.container, .page-pay main.container { padding-top:clamp(20px,3vw,42px); }
.page-item .panel, .page-query .panel, .page-login .panel,
.page-user .panel, .page-pay .panel { border-radius:18px; background:var(--surface); border-color:var(--line);
  box-shadow:none; backdrop-filter:none; }
.page-item .item-detail-layout { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4vw,58px); }
.page-item .item-cover-wrap { min-width:0; }
.page-item .item-cover { width:100%; max-height:620px; object-fit:cover; border-radius:12px; }
.page-item .item-name { font-size:clamp(26px,3.5vw,48px); line-height:1.17; font-weight:900; letter-spacing:-.04em; }
.page-item .abacus { border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; }
.page-item .cash-pay { display:none; }
.page-item .btn-buy { min-height:54px; border-radius:10px; }
.page-query .container > .panel, .page-login .auth-card, .page-pay .container > .panel { max-width:900px; margin-inline:auto; }
.page-query .panel-header, .page-login .panel-header, .page-user .panel-header, .page-pay .panel-header {
  padding:20px 26px; background:var(--surface-2); }
.page-query .panel-body, .page-login .panel-body, .page-user .panel-body, .page-pay .panel-body { padding:clamp(20px,3vw,36px); }
.page-query h1, .page-login h1, .page-user h1, .page-pay h1 { font-size:clamp(24px,3vw,38px); letter-spacing:-.04em; }
.page-user .container { max-width:1120px; }

body.page-landing { background:var(--paper); background-image:none; }
.page-landing > .container { max-width:var(--pv-width); padding-inline:clamp(16px,3vw,36px); }
.page-landing .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.75fr); align-items:center;
  min-height:clamp(360px,45vw,570px); margin:clamp(22px,4vw,54px) 0 24px; padding:clamp(24px,5vw,68px);
  text-align:left; border-radius:22px; border:1px solid var(--line); background:var(--surface); overflow:hidden; }
.page-landing .hero-mascot { grid-column:2; grid-row:1 / span 4; justify-self:center; width:min(100%,340px); }
.page-landing .site-title { grid-column:1; grid-row:1; font-size:clamp(36px,6vw,82px); line-height:1.05; letter-spacing:-.065em; }
.page-landing .site-subtitle { grid-column:1; grid-row:2; color:var(--ink-2); font-size:clamp(15px,1.6vw,19px); }
.page-landing .trust-row { grid-column:1; grid-row:3; justify-content:flex-start; }
.page-landing .links-grid { gap:var(--pv-gap); }

:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (min-width:760px) { .shop-home .item-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1180px) { .shop-home .item-list { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:720px) {
  .preview-ribbon { flex-direction:column; gap:2px; font-size:11px; }
  #site-nav .navbar { height:58px; }
  .shop-home .isekai-hero { grid-template-columns:minmax(0,1fr) 36%; min-height:290px; }
  .shop-home .isekai-hero-copy { padding:24px 18px; }
  .shop-home .isekai-hero h1 { font-size:clamp(28px,7vw,43px); }
  .shop-home .isekai-hero p { font-size:13px; margin:12px 0 18px; }
  .shop-home .isekai-hero img { height:275px; }
  .shop-home .item-list { gap:12px; }
  .shop-home .item-card .item-info { padding:9px; }
  .page-item .item-detail-layout { display:block; }
  .page-landing .hero { grid-template-columns:1fr 35%; min-height:310px; padding:22px; }
  .page-landing .hero-mascot { grid-column:2; }
}
@media (max-width:430px) {
  .shop-home .isekai-hero { grid-template-columns:1fr; min-height:330px; }
  .shop-home .isekai-hero-copy { padding:24px 20px 90px; }
  .shop-home .isekai-hero img { position:absolute; right:-12px; bottom:-12px; height:180px; opacity:.66; }
  .shop-home .cats .chip { min-height:44px; }
  .page-landing .hero { display:block; min-height:390px; }
  .page-landing .hero-mascot { position:absolute; right:12px; bottom:12px; width:160px; opacity:.72; }
  .page-landing .site-title { position:relative; z-index:1; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
