/** Shopify CDN: Minification failed

Line 16:2 Unexpected "="
Line 20:0 Comments in CSS use "/* ... */" instead of "//"
Line 21:0 Comments in CSS use "/* ... */" instead of "//"
Line 22:0 Comments in CSS use "/* ... */" instead of "//"
Line 23:0 Comments in CSS use "/* ... */" instead of "//"
Line 24:0 Comments in CSS use "/* ... */" instead of "//"
Line 25:0 Comments in CSS use "/* ... */" instead of "//"
Line 26:0 Comments in CSS use "/* ... */" instead of "//"
Line 27:0 Comments in CSS use "/* ... */" instead of "//"
Line 853:0 Comments in CSS use "/* ... */" instead of "//"

**/

* ============================================
   标题样式 - 从旧的foucus 主题中提取，使得现有页面的样式能保持跟迁移之前一致
   ============================================ */

// .heading, h0, h1, h2, h3, h4, h5, h6, .prose :is(h1, h2, h3, h4, h5, h6) {
//   font-family: var(--heading-font-family);
//   font-weight:var(--heading-font-weight);
//   font-style:var(--heading-font-style);
//   letter-spacing:var(--heading-letter-spacing);
//   text-transform:var(--heading-text-transform);
//   overflow-wrap:anywhere;
// }

.h0 {
  font-size: var(--text-h0);
  line-height: 1;
}

.text-subdued {
    color: #5e5e5e;
}
h1, .prose h1:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h1);
  line-height: 1.1;
  font-family: var(--heading-font-family);
  font-weight:var(--heading-font-weight);
  font-style:var(--heading-font-style);
  letter-spacing:var(--heading-letter-spacing);
  text-transform:var(--heading-text-transform);
  overflow-wrap:anywhere;
}

h2, .prose h2:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h2);
  line-height: 1.1;
}

.h3, .prose h3:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h3);
  line-height: 1.2;
}

.accordion--lg, .prose h4:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h4);
  line-height: 1.3;
}

.h5, .prose h5:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h5);
  line-height: 1.4;
}

.h6, .prose h6:not(h0, h1, h2, h3, h4, h5, h6) {
  font-size: var(--text-h6);
  line-height: 1.4;
}
.heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .prose :is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    overflow-wrap: anywhere;
}
.h3, .prose h3:not(.h0,.h1,.h2,.h3,.h4,.h5,.h6) {
    font-size: var(--text-h3);
    line-height: 1.2;
}


/* 响应式标题尺寸 */
@media screen and (min-width: 700px) {
  .sm\:h0 {
    font-size: var(--text-h0);
    line-height: 1;
  }

  .sm\:h1 {
    font-size: var(--text-h1);
    line-height: 1.1;
  }

  .sm\:h2 {
    font-size: var(--text-h2);
    line-height: 1.1;
  }

  .sm\:h3 {
    font-size: var(--text-h3);
    line-height: 1.2;
  }

  .sm\:h4 {
    font-size: var(--text-h4);
    line-height: 1.3;
  }

  .sm\:h5 {
    font-size: var(--text-h5);
    line-height: 1.4;
  }

  .sm\:h6 {
    font-size: var(--text-h6);
    line-height: 1.4;
  }
  .article>.container {
        gap: var(--spacing-16);
    }
}

b, strong {
    font-weight: bolder;
}

/* 辅助类 */
.subheading {
  font-weight: bold;
}

.line-through {
  text-decoration: line-through;
}

.break-all {
  overflow-wrap: anywhere;
}

.hyphenate {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.truncate-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.line-clamp {
  -webkit-line-clamp: var(--line-clamp-count, 2);
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* prose 相关样式 */
.prose * + :is(h0, h1, h2, h1, h2) {
  margin-top: 1.5em;
}

.prose :is(h0, h1, h2, h3, h4, h1, h2, h3, h4) + * {
  margin-top: 0.75em;
}

.prose *+span:not(:empty,.metafield-multi_line_text_field) {

    display: inline-block;
}
.prose>:first-child, .prose>:first-child :first-child {
  margin-block-start: 0 !important;

}

@supports (height: 1lh) {
    :is(.link,.prose a:not(.button)) {
        background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.2lh) / 100% 1px no-repeat;
    }
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}

.link, .prose a:not(.button) {
    text-underline: none;
    background: linear-gradient(to right, currentColor, currentColor) 0 min(100%, 1.35em) / 100% 1px no-repeat;
    transition: background-size .3s ease-in-out, color .3s ease-in-out;
}

button, select {
    text-transform: none;
}

.bg-custom {
    background: rgb(var(26,26,26));
}
.text-custom {
    color: rgb(var(--text-color));
}
.text-with-icon {
    gap: var(--spacing-3);
    align-items: center;
    display: flex;
}
.section {
  --context-section-spacing-block-start: var(--section-outer-spacing-block);
  --context-section-spacing-block-end: var(--section-outer-spacing-block);
  --context-section-spacing-inline: var(--container-gutter);
  --calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start)));
  --calculated-section-spacing-block-end: var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end)));
  --calculated-section-spacing-inline: var(--section-spacing-inline, var(--context-section-spacing-inline));
  --container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width));
  --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width, 0px)) / 2);
  --section-stack-spacing-inline: var(--section-inner-spacing-inline, 0px);
  padding-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
  padding-inline-end: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
  padding-block-start: calc(var(--background-differs-from-previous) * var(--calculated-section-spacing-block-start));
  padding-block-end: var(--calculated-section-spacing-block-end);
}
.section {
    padding-block-start: 96px;
    padding-block-end: 96px;
}

.section--tight {
  --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start))));
  --calculated-section-spacing-block-end: min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end))));
  --calculated-section-spacing-inline: min(48px, var(--section-spacing-inline, var(--context-section-spacing-inline)));
}

.section--narrow {
  --container-max-width: var(--container-narrow-max-width);
}

@media screen and (min-width: 700px) {
  .section--tight {
    --calculated-section-spacing-block-start: min(48px, var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start, 0px))));
    --calculated-section-spacing-block-end: min(48px, var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end, 0px))));
  }

  .section-boxed {
    --context-section-spacing-block-start: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block)));
    --context-section-spacing-block-end: min(var(--section-inner-max-spacing-block, var(--section-outer-spacing-block)));
    --context-section-spacing-inline: var(--section-inner-spacing-inline);
    --container-inner-width: calc(var(--container-max-width) - var(--container-outer-width) * 2);
    --container-outer-width: var(--calculated-section-spacing-inline);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-block);
    margin-block-start: calc(var(--background-differs-from-previous) * var(--section-outer-spacing-block-start, var(--section-outer-spacing-block)));
    margin-block-end: var(--section-outer-spacin-block-end, var(--section-outer-spacing-block));
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    padding-block-start: var(--calculated-section-spacing-block-start);
    padding-inline-start: var(--calculated-section-spacing-inline);
    padding-inline-end: var(--calculated-section-spacing-inline);
  }
}
*, :before, :after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    border-color: rgb(var(--text-color) / .12);
    border:none;
}

#MainContent .shopify-section, [role=main] .shopify-section {
    --section-is-first: 0;
    --hash-difference: calc(var(--section-background-hash) - var(--previous-section-background-hash, -1));
    --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference));
    --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
    background: rgb(var(--background));
    position: relative;
}
#MainContent .shopify-section:not(.contents) ,[role=main] .shopify-section:not(.contents) {
    display: flow-root;
}
html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    interpolate-size: allow-keywords;
    scroll-padding-block-start: calc(var(--sticky-area-height) + 20px);
    line-height: 1.5;
}

body {
    --background: var(--background-primary);
    --text-color: var(--text-primary);
    background: rgb(var(--background));
    color: rgb(var(--text-color));
    font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
    letter-spacing: var(--text-letter-spacing);
    margin: 0;
    position: relative;
}

/* ============================================
   shopify-section 样式
   ============================================ */

[role="main"] .shopify-section {
    --section-is-first: 0;
    --hash-difference: calc(var(--section-background-hash) - var(--previous-section-background-hash, -1));
    --hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference));
    --background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
    background: rgb(var(--background));
    position: relative;
}

[role="main"] .shopify-section:not(.contents) {
    display: flow-root;
}

[role="main"] .shopify-section:empty {
    display: none;
}

[role="main"] .shopify-section:first-child {
    --section-is-first: 1;
}


.prose *+:is(p,div,ul,ol) {
    margin-block-start: var(--spacing-3);
}
@media screen and (min-width: 700px) {
    .shopify-section:first-child {
        --section-outer-spacing-block-start: 24px;
    }
    .prose *+:is(p,div,ul,ol) {
        margin-block-start: var(--spacing-4);
    }
}

/* ============================================
   文本尺寸和颜色样式
   ============================================ */

.text-xs {
  font-size: var(--text-xs);
  line-height: 1.7;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: 1.6;
}



/* ============================================
   布局辅助类
   ============================================ */

.justify-items-center {
  justify-items: safe center;
}

.text-center {
  text-align: center;
}

/* ============================================
   prose 样式
   ============================================ */

.prose {
  align-items: start;
  display: grid;
}
.prose ul, .list-disc {
    list-style: inside;
}
.prose ul, .prose ol {
    row-gap: .6em;
    display: grid;
}
.prose ol, .list-decimal {
    list-style: inside decimal;
}

ol, ul, menu {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ============================================
   form 相关样式
   ============================================ */

.form {
  align-content: start;
  gap: var(--spacing-4);
  display: grid;
}

.fieldset, .input-row {
  gap: var(--input-gap);
  display: grid;
}

.fieldset-with-submit {
  align-items: start;
  gap: var(--spacing-4);
  display: grid;
}

@media screen and (min-width: 700px) {
  .form:not(.form--tight) {
    gap: var(--spacing-6);
  }

  .input-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fieldset-with-submit {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}

/* ============================================
   input 相关样式
   ============================================ */



:is(.input:focus, .textarea:focus, .select:focus-visible) {
  border-color: currentColor;
  outline: none;
  box-shadow: inset 0 0 0 1px;
}

.textarea {
  height: auto;
  vertical-align: top;
  padding-block-start: var(--spacing-4);
  padding-block-end: var(--spacing-4);
}

.select {
  gap: var(--spacing-4);
  justify-content: space-between;
  align-items: center;
  padding-inline-end: calc(var(--input-padding-inline) * 2);
  display: flex;
}

.form-control {
  text-align: start;
  position: relative;
}

.block-label {
  width: fit-content;
  margin-block-end: var(--spacing-2);
  display: block;
}

/* ============================================
   banner 样式
   ============================================ */

.banner {
  align-items: start;
  gap: var(--spacing-3-5);
  padding: var(--spacing-3-5);
  border-radius: var(--rounded-xs);
  font-size: var(--text-sm);
  color: rgb(0,163,65);
  background: rgb(var(--banner-background));
  grid-template-columns: max-content auto;
  display: grid;
}

.banner--error {
  --banner-background: rgb(224,224,232);
  --banner-color: var(--error-text);
}



.banner--sm {
  padding: var(--spacing-2);
  font-size: var(--text-sm);
}

@media screen and (min-width: 700px) {
  .banner--with-icon {
    grid-template-columns: max-content auto max-content;
    align-items: center;
  }

  .banner--with-icon svg {
    --icon-offset: 0;
  }

  .banner--with-icon > .button {
    grid-column-start: 3;
  }
}

/* ============================================
   button 样式
   ============================================ */

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  text-align: inherit;
  background-color: #0000;
  background-image: none;
}

button, label, summary, [role="button"], [type="checkbox"], [type="radio"], [type="submit"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

/* ============================================
   其他辅助类
   ============================================ */

.h0 {
  font-size: var(--text-h0);
  line-height: 1;
}

.h2, .prose h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-size: var(--text-h2);
  line-height: 1.1;
}

/* ============================================
   背景类
   ============================================ */

.bg-custom {
  background: rgb(var(--background));
}

.bg-gradient {
  background-image: var(--gradient);
}

.bg-secondary {
  background: rgb(var(--text-color) / .05);
}

.bg-error {
  background: rgb(var(--error-background));
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(var(--backdrop-blur, 0px));
  backdrop-filter: blur(var(--backdrop-blur, 0px));
}

/* ============================================
   尺寸和对象相关类
   ============================================ */

.h-full {
  height: 100%;
}
.w-full {
    width: 100%;
}

.object-cover {
  object-fit: cover;
  object-position: center;
}

.justify-center {
    justify-content: safe center;
}

.input.is-floating, .select.is-floating {
    height: calc(var(--input-height) + .625rem);
    padding-block-start: var(--spacing-4);
}
input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], textarea, select, .input-quantity [data-control] {
    border-radius: 8px !important;
}

input, .textarea, .select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--input-height);
    border-radius: var(--rounded-input);
    background: rgb(var(--input-background, transparent));
    color: rgb(var(--input-text-color, var(--text-color)));
    text-align: start;
    border-width: 1px;
    padding-inline-start: var(--input-padding-inline);
    padding-inline-end: var(--input-padding-inline);
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    text-transform: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, label, summary, [role=button], [type=checkbox], [type=radio], [type=submit] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}

:is(:is(.input,.textarea):focus~.floating-label,:is(.input,.textarea):not(:placeholder-shown)~.floating-label,:is(.input,.textarea,.select):autofill~.floating-label,.select:valid~.floating-label) {
    transform: scale(.65) translateY(calc(-1 * var(--spacing-4)));
}
:is(.input,.textarea,.select):autofill~.floating-label {
    color: #000;
}

.floating-label:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) {
    left: 1px;
}
.floating-label {
    height: calc(var(--input-height) + .625rem);
    top: 0;
    opacity: .5;
    pointer-events: none;
    transform-origin: var(--transform-origin-start);
    grid-auto-flow: column;
    align-items: center;
    column-gap: .5rem;
    margin-inline-start: var(--spacing-4);
    transition: transform .2s ease-in-out;
    display: grid;
    position: absolute;
}

@media screen and (min-width: 700px) {
    .floating-label {
        margin-inline-start: var(--spacing-5);
    }
}

.input, .textarea, .select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: var(--input-height);
  border-radius: var(--rounded-input);
  background: rgb(var(--input-background, transparent));
  color: rgb(var(--input-text-color, var(--text-color)));
  text-align: start;
  border-width: 1px;
  padding-inline-start: var(--input-padding-inline);
  padding-inline-end: var(--input-padding-inline);
}
button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    text-align: inherit;
    background-color: #0000;
    background-image: none;
}
button, label, summary, [role=button], [type=checkbox], [type=radio], [type=submit] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
}
.button, .btn {
    --button-background: var(--button-background-primary) / var(--button-background-opacity, 1);
    --button-text-color: var(--button-text-primary);
    --button-outline-color: var(--button-background-primary);
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--rounded-button);
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
    font-size: var(--text-sm);
    letter-spacing: var(--text-letter-spacing);
    padding-block-start: var(--spacing-2-5);
    padding-block-end: var(--spacing-2-5);
    padding-inline-start: var(--spacing-5);
    padding-inline-end: var(--spacing-5);
    font-weight: 700;
    line-height: 1.6;
    transition: background-color .15s ease-in-out, color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: inline-block;
    position: relative;
}
.button--xl {
    font-size: var(--text-base);
    padding-block-start: var(--spacing-4);
    padding-block-end: var(--spacing-4);
    padding-inline-start: var(--spacing-8);
    padding-inline-end: var(--spacing-8);
}

@media screen and (min-width: 700px) {
    .button--xl {
        padding-block-start: 1.075rem;
        padding-block-end: 1.075rem;
        padding-inline-start: var(--spacing-10);
        padding-inline-end: var(--spacing-10);
        border-radius: 60px;
    }
        .button, .btn {
        padding-block-start: var(--spacing-3);
        padding-block-end: var(--spacing-3);
        padding-inline-start: var(--spacing-6);
        padding-inline-end: var(--spacing-6);
    }
}

.blockquote, .prose blockquote {
    --quote-width: 51px;
    --quote-height: 37px;
    --quote-inset-block-start: calc(var(--spacing-5) * -1);
    --quote-inset-inline-start: var(--spacing-1);
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: 700;
    position: relative;
}

.prose blockquote {
    --quote-inset-block-start: calc(var(--spacing-4) * -1);
    --quote-inset-inline-start: calc(50% - (var(--quote-width) / 2));
    text-align: center;
    font-size: var(--text-h5);
    margin-block-start: var(--spacing-10);
    margin-block-end: var(--spacing-14);
    line-height: 1.2;
}
:is(.blockquote, .prose blockquote):before {
  content: "";
  width: var(--quote-width);
  height: var(--quote-height);
  background: #e8e8e8;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='86' height='55' viewBox='0 0 86 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.3163 54.6H42.5163L60.3163 0.400024H85.5163L71.3163 54.6ZM29.3163 54.6H0.716309L18.9163 0.400024H44.1163L29.3163 54.6Z' fill='%23252627'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='86' height='55' viewBox='0 0 86 55' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.3163 54.6H42.5163L60.3163 0.400024H85.5163L71.3163 54.6ZM29.3163 54.6H0.716309L18.9163 0.400024H44.1163L29.3163 54.6Z' fill='%23252627'/%3E%3C/svg%3E%0A");
  -webkit-mask-size: var(--quote-width) var(--quote-height);
  mask-size: 85px 55px;
  position: absolute;
  top: -15px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  z-index: -1;
  left:-455px;
  
}
@media screen and (max-width: 769px) {
  :is(.blockquote, .prose blockquote):before {
    mask-size: 51px 37px;
    top: -10px;
  }
  
}

:is(.blockquote,.prose blockquote):not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):before {
    left: var(--quote-inset-inline-start);
}

@media screen and (min-width: 1150px) {
    .prose :is(.h0,.h1,.h2,h1,h2)+* {
        margin-block-start: var(--spacing-8);
    }
    .prose *+:is(.h2,.h3,.h4,h2,h3,h4) {
        margin-block-start: var(--spacing-6);
    }
    .prose :is(.h3,.h4,h3,h4)+* {
        margin-block-start: var(--spacing-6);
    }
    .section-stack__main {
        width: var(--section-stack-main, 50%);
        margin-left: auto;
        margin-right: auto;
    }
    .prose blockquote {
        --quote-width: 85px;
        --quote-height: 55px;
        --quote-inset-block-start: calc(var(--spacing-5) * -1);
    }
}

.banner--success {
  background: rgb(224, 244, 232);
  --banner-color: var(--success-text);
}

.banner--warning {
  --banner-background: var(--warning-background);
  --banner-color: var(--warning-text);
}
.icon {
    vertical-align: middle;
    display: block;
}

/* 修复所有图标 stroke-width 为 0 导致不显示的问题 */
svg.icon-blog-date,
svg.icon-blog-author {
    stroke-width: 1.5px !important;
}
svg.icon-blog-date path,
svg.icon-blog-author path {
    stroke-width: 1.5px !important;
}

.offset-icon {
    --icon-baseline-distance: 1.6em;
    --icon-offset: calc((var(--icon-baseline-distance) - var(--icon-height)) / 2);
    top: var(--icon-offset);
    position: relative;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}
.pl-5, .px-5 {
    padding-left: 5px !important;
}
.pb-5, .py-5 {
    padding-bottom: 5px !important;
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}
.pr-5, .px-5 {
    padding-right: 5px !important;
}


//footer 部分
.payments>.row {
  margin-left: -5px;
  margin-right: -5px;
}

.payments .icon {
  width: 62px;
  height: initial;
  min-width: 62px;
  min-height: initial;
}

.payments--size-37 .icon {
  width: 37px;
  min-width: 37px;
}

.footer__payments {
  margin-top: -5px;
  margin-bottom: -5px;
}

/* 间距 */
.page-spacer {
    margin-block-start: var(--spacing-8);
    margin-block-end: var(--section-outer-spacing-block);
}
@media screen and (min-width: 1000px) {
    .page-spacer {
        margin-block-start: var(--spacing-16);
    }
        .article-content {
        border-bottom: 1px solid #e3e3e3;
        padding-block-start: var(--spacing-16);
        padding-block-end: var(--spacing-18);
    }
}

/* default container */
@media screen and (min-width: 700px) {
    .shopify-section:first-child {
        --section-outer-spacing-block-start: 24px;
    }
}
#MainContent .shopify-section:first-child, [role=main] .shopify-section:first-child {
    --section-is-first: 1;
}
.container {
    --container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--container-gutter) * 2, var(--container-max-width));
    --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width)) / 2);
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}

#MainContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.page {
    gap: var(--spacing-12);
    max-width: var(80ch, 80ch);
    grid-auto-columns: minmax(0, 1fr);
    margin-inline-start: auto;
    margin-inline-end: auto;
    display: grid;
}

.object-contain {
    object-fit: contain;
    object-position: center;
}

/* 面包屑导航样式 */

.global-breadcrumbs {
  color: #646864;
  background-color: var(--page-body);
  padding-block: var(--spacing-4);
}

.global-breadcrumbs.product-page {
  padding-block: var(--spacing-6);
}

.global-breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

.global-breadcrumbs li {
  display: flex;
  align-items: center;
}

.global-breadcrumbs li:not(:last-child)::after {
  content: '>';
  margin-inline-start: var(--spacing-2);
  color: #9ca3af;
  font-size: 14px;
}

.global-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.global-breadcrumbs a:hover {
  color: var(--text-color);
  text-decoration: underline;
}

.global-breadcrumbs span {
  color: rgb(100,104,100);
  font-size: 14px;
  font-weight: 500;
}

.shopify-section--game-2048{
  background: var(--page-body) !important;
}

summary {
  -webkit-user-select: none;
  user-select: none;
  list-style-type: none;
}

summary::-webkit-details-marker {
  display: none;
}

.bold {
    font-weight: 700;
}

.accordion {
  --accordion-spacing: var(--spacing-5);
  box-sizing: content-box;
  border-block-start-width: 1px;
  border-block-end-width: 1px;
}

/* Accordion disclosure animation support */
.accordion[is="accordion-disclosure"] {
  overflow: visible;
  height: auto;
  transition: none;
}

.accordion summary {
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion__toggle {
  gap: var(--spacing-2);
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--accordion-spacing);
  padding-block-end: var(--accordion-spacing);
  display: flex;
}

.accordion__content {
  margin-block-end: var(--accordion-spacing);
  padding-inline-end: var(--spacing-6);
  transform: translateY(-4px);
  /* Initial state for animation */
  opacity: 1;
}

/* Closed state - content is hidden when details is not open */
.accordion:not([open]) .accordion__content {
  display: none;
}

/* Open state - ensure content is visible and properly styled */
.accordion[open] .accordion__content {
  display: block;
  opacity: 1;
  transform: translateY(-4px);
}

.accordion__content:has(.image-filter-list) {
  padding-inline-end: 0;
}

.accordion--lg {
  --accordion-spacing: var(--spacing-8);
}

.accordion + .accordion {
  border-block-start-width: 0;
}

.accordion-box {
  padding: var(--spacing-1) var(--spacing-6);
}

.accordion-box > :first-child {
  border-block-start-width: 0;
}

.accordion-box > :last-child {
  border-block-end-width: 0;
}

/* aria-expanded state (for custom components) */
.group[aria-expanded=true] .circle-chevron.group-expanded\:colors:not([disabled]) {
    background: #1a1a1a;
    color: #ffffff;
}
.group[aria-expanded=true] .circle-chevron.group-expanded\:rotate {
    transform: rotate(calc(var(--transform-logical-flip) * 180deg));
}

/* details element open state (for accordion components) */
details.group[open] .circle-chevron.group-expanded\:colors:not([disabled]) {
    background: #1a1a1a;
    color: #ffffff;
}
details.group[open] .circle-chevron.group-expanded\:rotate {
    transform: rotate(calc(var(--transform-logical-flip) * 180deg));
}


@media screen and (pointer: fine) {
  /* Regular hover state */
  .group:hover .circle-chevron.group-hover\:colors:not([disabled]), .circle-chevron.hover\:colors:hover:not([disabled]) {
    background: #1a1a1a;
    color: #ffffff;
  }

  /* Hover + expanded combined state - ensures hover always shows #1a1a1a */
  .group:hover .circle-chevron.group-hover\:colors.group-expanded\:colors:not([disabled]),
  details.group[open]:hover .circle-chevron.group-hover\:colors.group-expanded\:colors:not([disabled]),
  .group[aria-expanded=true]:hover .circle-chevron.group-hover\:colors.group-expanded\:colors:not([disabled]) {
    background: #1a1a1a !important;
    color: #ffffff !important;
  }
}
.circle-chevron {
    width: var(--spacing-6);
    height: var(--spacing-6); 
    border-radius: var(--rounded-full);
    background: #dddddd;
    flex-shrink: 0;
    place-items: center;
    transition: all .2s ease-in-out;
    display: grid;
}

.section-stack__main  .accordion.group {
  border-bottom: 1px solid #dddddd !important;
  border-block-end-width: 1px !important;
}

/* Remove border from last accordion - using :last-of-type to ignore script tags */
.accordion-box .accordion.group:last-of-type,
.section-stack__main .accordion.group:last-of-type {
  border-bottom: none !important;
  border-block-end-width: 0 !important;
}
.section-stack {
    gap: var(--section-stack-spacing-block, 0px) var(--section-stack-spacing-inline, 0px);
    grid-auto-columns: minmax(0, 1fr);
    display: grid;
}

/* ============================================
   pc--opt-out 表单样式修复
   ============================================ */
.pc--opt-out-form-container{
  gap: 0 !important;
}

/* Checkbox 样式 */
.pc--show-email-field input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    left: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.pc--show-email-field input[type="checkbox"]:checked {
    background-color: #3273f6 !important;
    border-color: none !important;
}

.pc--show-email-field input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Label 样式 */
.pc--show-email-field label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 14px !important;
    color: #000 !important;
    line-height: 1.5 !important;
    margin-block-end: var(--spacing-4) !important;
    cursor: pointer !important;
}



.pc--opt-out-form-field {
    margin-block-end: var(--spacing-3);
}

.pc--opt-out-form-field label {
    display: block !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-block-end: var(--spacing-2) !important;
    font-weight: 500 !important;
}

.pc--opt-out-form-field input[type="email"] {
    width: 100% !important;
    height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border: 2px solid !important;
}

.pc--opt-out-form-field input[type="email"]:focus {
    outline: none !important;
    border-color: #333 !important;
    box-shadow: 0 0 0 1px #333 !important;
}

/* Opt out 按钮样式 */
.pc--opt-out-form-button {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: 2px solid #333 !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}



#pc--opt-out-form button{
  width: fit-content !important;
}

@media screen and (max-width: 1024px) {
    #pc--opt-out-form button{
  width: 100% !important;
}
}

/* ============================================
   Wordle 自定义下拉组件样式（移动端修复）
   ============================================ */

#wordle .custom-select-container {
    position: relative !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

#wordle .custom-select-trigger {
    width: 70px !important;
    height: 32px !important;
    padding: 4px 8px !important;
    border: none !important;
    border-radius: 4px !important;
    background: var(--border-secondary) !important;
    color: var(--color-tone-1) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

#wordle .custom-select-trigger:hover {
    background: var(--fg-secondary) !important;
}

#wordle .custom-select-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    display: none !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    margin-top: 2px !important;
    -webkit-overflow-scrolling: touch !important;
}

#wordle .custom-select-dropdown.show {
    display: block !important;
}

#wordle .custom-select-option {
    padding: 8px 12px !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 13px !important;
    -webkit-tap-highlight-color: transparent !important;
}

#wordle .custom-select-option:hover,
#wordle .custom-select-option:active {
    background: var(--border-secondary) !important;
}

#wordle .custom-select-option.selected {
    background: var(--color-correct) !important;
    color: #fff !important;
}

.article-banner {
    grid: var(--article-banner-grid);
    column-gap: var(--article-banner-column-gap);
    align-items: var(--article-banner-horizontal-alignement, center);
    max-width: var(--article-banner-max-width);
    box-sizing: content-box;
    justify-items: center;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-block-start: var(--article-banner-padding-block-start, 0);
    display: grid;
    position: relative;
}
.article-banner:before {
    content: "";
    width: calc((100vw - var(--scrollbar-width, 0px)));
    height: var(--article-banner-before-height);
    pointer-events: none;
    background-color: var(--article-banner-background);
    position: absolute;
    top: 0;
}

.article-banner__content {
    gap: var(--spacing-6);
    padding: var(--article-banner-content-padding-block-start) var(--article-banner-content-padding-inline) var(--article-banner-content-padding-block-end);
    justify-items: var(--article-banner-vertical-alignement, center);
    text-align: var(--article-banner-vertical-alignement, center);
    z-index: 2;
    display: grid;
}
.article__meta {
    justify-content: var(--article-banner-meta-vertical-alignment, center);
    row-gap: var(--spacing-2);
    column-gap: var(--spacing-4);
    flex-wrap: wrap;
    display: flex;
}
.text-with-icon {
    gap: var(--spacing-3);
    align-items: center;
    display: flex;
}
.link-faded {
    opacity: .7;
    transition: opacity .2s ease-in-out;
}
.text-with-icon>svg {
    flex-shrink: 0;
}
.icon {
    vertical-align: middle;
    display: block;
}
@media screen and (min-width: 1150px) {
    .article-banner__content {
        grid-area: var(--article-banner-grid-area, content);
    }
    .article__meta {
        column-gap: var(--spacing-6);
    }
    .article__meta .text-with-icon {
        gap: var(--spacing-2-5);
    }
}

@media screen and (min-width: 1150px) {
    .article-banner {
        padding-inline-start: var(--container-gutter);
        padding-inline-end: var(--container-gutter);
}
}

@media screen and (min-width: 700px) {
    .article {
        --article-margin-block-end: var(--spacing-28);
    }
}
@media screen and (min-width: 1000px) {
    .article-content {
        border-bottom-width: 1px;
        padding-block-start: var(--spacing-16);
        padding-block-end: var(--spacing-18);
    }
}

.article-content {
    width: 100%;
    max-width: var(--article-max-width);
    grid-template-columns: minmax(0, 1fr);
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-block-start: var(--spacing-10);
}

.article-comments__form {
    padding: 3rem;
}

.v-stack {
    display: grid;
}
.gap-4 {
    gap: var(--spacing-4);
}
.gap-6 {
    gap: var(--spacing-6);
}
.gap-8 {
    gap: var(--spacing-8);
}

@media screen and (min-width: 700px) {
    .prose :is(p img:not([style*=float]):only-child,div img:not([style*=float]):only-child,figure,video) {
        margin-block: var(--spacing-12);
    }
    .sm\:gap-8 {
        gap: var(--spacing-8);
    }
}
@media screen and (max-width: 768px) {
    .blog-post-card__figure img {
        max-height: 200px !important;
    }
}
.scroll-area {
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    overflow: auto hidden;
}

.prose :is(p img:not([style*=float]):only-child,div img:not([style*=float]):only-child,figure,video) {
@media screen and (min-width: 700px) {
    img {
        max-width: min(var(--image-max-width, 100%), 100%);
    }
}
}
img {
    color: #0000;
    max-width: min(var(--image-mobile-max-width, var(--image-max-width, 100%)), 100%);
    object-fit: inherit;
    object-position: inherit;
    height: auto;
}
img, video, iframe, object {
    vertical-align: middle;
    display: block;
}

.blog-post-card__figure img {
    max-height: 240px;
}
.blog-post-card {
    --blog-post-card-badge-spacing: var(--spacing-3);
    --blog-post-card-figure-gap: var(--spacing-5);
    --blog-post-card-meta-gap: var(--spacing-1) var(--spacing-5);
    gap: var(--blog-post-card-figure-gap);
    align-content: start;
    display: grid;
    overflow: hidden;
    border: 1px solid rgb(var(--border-primary));
}

@media screen and (min-width: 768px) {
    .blog-post-card {
        --blog-post-card-badge-spacing: var(--spacing-4);
        --blog-post-card-figure-gap: var(--spacing-6);
        --blog-post-card-meta-gap: var(--spacing-2) var(--spacing-6);
    }
}

.share-buttons {
    align-items: center;
    gap: var(--spacing-2-5);
    display: flex;
}
.gap-3 {
    gap: var(--spacing-3);
}
.h-stack {
    align-items: center;
    display: flex;
}
@media screen and (min-width: 700px) {
    .sm\:hidden {
        display: none;
    }
    .sm\:gap-10 {
        gap: var(--spacing-10);
    }
}

.share-buttons__item {
    width: var(--spacing-8-5);
    height: var(--spacing-8-5);
    opacity: .7;
    background: rgb(var(--text-color) / 0);
    border-radius: var(--rounded-full);
    place-content: center;
    transition: opacity .2s ease-in-out, background .2s ease-in-out;
    display: grid;
}
.share-buttons__item:hover {
    opacity: 1;
    background: #e8e8e8;
}

.article-content>.share-buttons .share-buttons__item {
    width: var(--spacing-10);
    height: var(--spacing-10);
    opacity: 1;
}

/* ============================================
   blog-post-card 样式
   ============================================ */

.blog-post-card__figure {
  display: block;
  position: relative;
  overflow: hidden;
}

.blog-post-card__figure > .badge {
  z-index: 1;
  position: absolute;
  top: var(--blog-post-card-badge-spacing);
}

.blog-post-card__figure > .badge:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  left: var(--blog-post-card-badge-spacing);
}

.blog-post-card__figure img {
  max-height: 240px;
}

.blog-post-card__figure > .badge:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  right: var(--blog-post-card-badge-spacing);
}

.blog-post-card__meta {
  gap: var(--blog-post-card-meta-gap);
  flex-wrap: wrap;
  display: flex;
}

.blog-post-card--featured {
  grid-column: 1 / -1;
  gap: 0;
}

.blog-post-card--featured .blog-post-card__info {
  padding: var(--spacing-5);
}

/* ============================================
   article-navigation 样式
   ============================================ */

.article-navigation {
  gap: var(--spacing-6);
  max-width: var(--article-max-width);
  display: grid;
}

.article-prev-next {
  gap: var(--spacing-5);
  grid: auto / auto-flow 75vw;
  display: grid;
}

.prose *+:is(.h3,.h4,.h5,.h6,h3,h4,h5,h6) {
    margin-block-start: var(--spacing-3);
}
.bleed {
    scroll-padding-inline: var(--container-outer-width);
    margin-inline-start: calc(-1 * var(--container-outer-width));
    margin-inline-end: calc(-1 * var(--container-outer-width));
    padding-inline-start: var(--container-outer-width);
    padding-inline-end: var(--container-outer-width);
    display: grid;
}

@media screen and (min-width: 700px) {
  .article-navigation {
    --navigation-margin-block: var(--spacing-16);
    gap: var(--spacing-10);
  }

  .article-navigation__title > svg {
    width: 27px;
    height: 24px;
  }

  .article-prev-next {
    gap: var(--spacing-12);
    grid: auto / repeat(2, minmax(0, 1fr));
  }
}

/* ============================================
   article-comments 样式
   ============================================ */

.article-comments {
  --comments-padding-inner: var(--spacing-6);
  gap: var(--spacing-12);
  max-width: var(--article-max-width);
  display: grid;
}

.comments-list {
  gap: var(--spacing-4);
  padding: var(--comments-padding-inner);
  display: grid;
}

.comment {
  gap: var(--spacing-3);
  display: grid;
}

.comment:not(:first-child) {
  padding-block-start: var(--spacing-4);
}

.article-comments__form {
  padding: var(--comments-padding-inner);
}

@media screen and (min-width: 700px) {
  .article-comments {
    --comments-padding-inner: var(--spacing-12);
  }

  .comments-list {
    gap: var(--spacing-8);
  }

  .comment {
    gap: var(--spacing-6);
    display: flex;
  }

  .comment:not(:first-child) {
    padding-block-start: var(--spacing-8);
  }

  .comment__gravatar {
    width: var(--spacing-12);
    height: var(--spacing-12);
  }
}

/* ============================================
   修复所有图标 stroke-width 为 0 导致不显示的问题
   ============================================ */

svg[stroke-width="0"] {
    stroke-width: 1.5px !important;
}


.article>.container {
    justify-content: safe center;
    gap: var(--spacing-10);
    margin-block-end: var(--article-margin-block-end);
    display: grid;
}

.snap-center {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.blog-post-card__meta {
    gap: var(--blog-post-card-meta-gap);
    flex-wrap: wrap;
    display: flex;
}

.h4, .prose h4:not(.h0,.h1,.h2,.h3,.h4,.h5,.h6) {
    font-size: var(--text-h4);
    line-height: 1.3;
}

.button--subdued {
    --button-background: var(--text-color) / .1 !important;
    --button-text-color: var(--text-color) !important;
    --button-outline-color: var(--text-color) !important;
    color: #000;
}

.button--lg {
    font-size: var(--text-base);
    padding-block-start: .8125rem;
    padding-block-end: .8125rem;
    padding-inline-start: var(--spacing-6);
    padding-inline-end: var(--spacing-6);
}

@media screen and (max-width: 699px) {
  .sm-max\:hidden {
        display: none;
    }
}

.rounded {
    border-radius: var(--rounded) !important;
}

table {
    width: 100%;
}
table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}
table:not(.table--bordered) :is(th,td):first-child {
    padding-inline-start: 0;
}
thead th {
    border-block-end-width: 1px;
}
thead{
  border-bottom: 1px solid #e6e7eb;
}
tbody tr:not(:last-child) {
  border-bottom: 1px solid #e6e7eb;
}
th, td {
    padding: var(--spacing-4);
    vertical-align: top;
}
th {
    text-align: start;
}