/* ==========================================================
   OPJOYS Clone - Master Stylesheet (1:1 from opjoys-live theme)
   金标准来源: D:\非常重要\shopify_dm\opjoys\opjoys-live
   ========================================================== */

/* 防止 100vw 全宽区块（hero / showcase）触发横向滚动条 */
html, body { overflow-x: clip; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-heading: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --color-bg: #ffffff;
  --color-text: #232323;
  --color-muted: #888888;
  --max-w: 1400px;
}

html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4375;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================
   HEADER (header-custom)
   ========================================================== */
.header-custom {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0px;
}
.header-custom__inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}
.header-custom__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.header-custom__logo-img {
  height: 28px;
  width: auto;
  display: block;
  max-width: 120px;
  object-fit: contain;
}
.header-custom__nav { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 28px; }
.header-custom__nav > a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #232323;
  padding: 8px 0;
  transition: color 0.2s;
}
.header-custom__nav > a:hover { color: #ff466b; }
.header-custom__nav-item--has-dropdown { position: relative; }
.header-custom__dropdown {
  position: absolute;
  top: 100%; left: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  border-radius: 0 0 8px 8px;
  min-width: 200px;
  padding: 8px 0;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s;
  z-index: 50;
}
.header-custom__nav-item--has-dropdown:hover .header-custom__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.header-custom__dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #232323;
  transition: background 0.15s, color 0.15s;
}
.header-custom__dropdown a:hover { background: #fafafa; color: #ff466b; }
.header-custom__actions { display: none; align-items: center; gap: 18px; }
.header-custom__search {
  display: flex; align-items: center; gap: 8px;
  width: 200px;
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fafafa;
}
.header-custom__search input {
  flex: 1; border: 0; background: transparent; outline: none; font-size: 13px;
}
.header-custom__search svg { width: 16px; height: 16px; color: #888; flex-shrink: 0; }
.header-custom__icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  position: relative;
  color: #232323;
  transition: background 0.15s;
}
.header-custom__icon:hover { background: #f5f5f5; }
.header-custom__icon svg { width: 22px; height: 22px; }
.header-custom__cart-count {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: #232323;
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.header-custom__menu-toggle { display: none; }

@media (max-width: 1024px) {
  .header-custom__nav, .header-custom__search { display: none; }
  .header-custom__menu-toggle {
    display: inline-flex;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
  }
  .header-custom__inner { gap: 16px; padding: 0 16px; height: 64px; }
}

/* ==========================================================
   SECTION 1: Home Activity Products (Featured Drops)
   ========================================================== */
.home-mini-banner-wrap {
  width: 100%;
  background: #fff;
  padding: 18px 24px;
}

.home-mini-banner-wrap .banner {
  width: 100%;
  height: 120px;
  margin: auto;
  padding: 85px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff7ef, #fff, #fff3f3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(255, 120, 0, .15);
}

.home-mini-banner-wrap .banner::before,
.home-mini-banner-wrap .banner::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: .35;
}

.home-mini-banner-wrap .banner::before {
  background: #ff9a3c;
  left: -80px;
  top: -80px;
}

.home-mini-banner-wrap .banner::after {
  background: #ff5b7d;
  right: -60px;
  bottom: -90px;
}

.home-mini-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
}

.home-mini-banner-wrap .banner h1 {
  font-family: var(--font-body);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  color: #222;
  letter-spacing: 0;
  text-shadow: none;
}

.home-mini-banner-wrap .banner .accent {
  color: #ff6a00;
}

.home-mini-banner-wrap .sub {
  position: relative;
  min-height: 28px;
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  color: #666;
}

.home-mini-banner-wrap .item {
  width: 100%;
}

@media (max-width: 768px) {
  .home-mini-banner-wrap {
    padding: 10px 12px;
  }

  .home-mini-banner-wrap .banner {
    width: 100%;
    min-height: 112px;
    height: auto;
    border-radius: 16px;
    padding: 12px;
  }

  .home-mini-banner-wrap .banner h1 {
    font-size: clamp(26px, 8vw, 36px);
    line-height: 1.12;
  }

  .home-mini-banner-wrap .sub {
    min-height: auto;
    margin-top: 10px;
    font-size: 15px;
  }
}

.home-activity-products {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.home-activity-products .hero-header { width: 100%; height: 640px; position: relative; }
.home-activity-products .hero-contents {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
.home-activity-products .hero-bg { height: 100%; background-position: 50%; background-size: cover; }
.home-activity-products .hero-container {
  width: 100%; height: 100%; display: block; position: relative;
  text-decoration: none; color: inherit;
}
.home-activity-products .hero-name {
  position: absolute; top: 10%; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  z-index: 10; font-size: 30px; color: #fff;
  font-family: var(--font-heading); font-weight: 400;
  text-align: center; width: max-content;
  text-shadow: 6px 7px 0 rgba(0,0,0,.2);
}
.home-activity-products .hero-image {
  margin: 0 auto; padding: 20px;
  position: absolute; bottom: -5%; top: 10%; right: 0; left: 0;
  display: flex; align-items: flex-end; justify-content: center;
  transform: scale(1); transform-origin: center bottom;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275);
}
.home-activity-products .hero-image img {
  width: auto; max-width: none; height: 100%; margin: 0 auto; object-fit: contain;
}
.home-activity-products .hero-container:hover .hero-image { transform: scale(1.05); }
.home-activity-products .hero-action {
  position: absolute; z-index: 1; bottom: 10%; left: 0; right: 0;
  display: flex; justify-content: center;
}
.home-activity-products .hero-button {
  background: #000; border: 2px solid #fff; height: 50px; padding: 0 25px;
  border-radius: 99px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600;
  transition: all 0.3s ease;
}
.home-activity-products .hero-button:hover {
  background: #fff; color: #000; border: 2px solid #000;
}

@media (min-width: 769px) {
  .home-activity-products .hero-grid {
    --line-width: 3px; --line-color: #000; --angle: 10px;
    display: flex; flex-wrap: wrap;
    height: calc(100% + var(--line-width));
    width: calc(100% + var(--angle) + var(--line-width));
    margin-bottom: calc(var(--line-width) * -1);
    background: var(--line-color);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 0 100%);
  }
  .home-activity-products .grid-item {
    flex-shrink: 0; min-width: 0; border-width: 0;
    border-left: 0 solid transparent;
    border-bottom: var(--line-width) solid transparent;
    border-right: var(--line-width) solid transparent;
    border-top: 0 solid transparent;
    height: 50%; width: calc(25% + var(--angle));
    background: var(--line-color); overflow: hidden;
    margin-left: calc(var(--angle) * -1);
  }
  .home-activity-products .grid-item,
  .home-activity-products .grid-item-inner {
    -webkit-clip-path: polygon(var(--angle) 0, 100% 0, calc(100% - var(--angle)) 100%, 0 100%);
    clip-path: polygon(var(--angle) 0, 100% 0, calc(100% - var(--angle)) 100%, 0 100%);
  }
  .home-activity-products .grid-item-inner { width: 100%; height: 100%; }
}

@media (max-width: 768px) {
  .home-activity-products .hero-header { height: auto; padding: 0; }
  .home-activity-products .hero-contents { position: static; height: auto; }
  .home-activity-products .hero-grid {
    --angle: 15px; --line-width: 3px; --line-color: #000;
    height: auto; width: 100%;
    display: flex; flex-direction: column;
    background: none; clip-path: none;
  }
  .home-activity-products .grid-item {
    flex-shrink: 0; min-width: 0; border: none;
    height: 380px; width: 100%;
    background: none; overflow: hidden; position: relative;
  }
  .home-activity-products .grid-item::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; background: var(--line-color); z-index: -1;
  }
  .home-activity-products .grid-item-inner { height: calc(100% - var(--line-width)); margin: 0 auto; }
  .home-activity-products .hero-name { max-width: 420px; font-size: 32px; line-height: 32px; }
}

/* ==========================================================
   SECTION 2: Image Showcase (跑马灯)
   ========================================================== */
.image-showcase-section {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.image-showcase {
  width: 100%; overflow: hidden; background: #ffffff;
  margin: 40px 0; position: relative; height: 231px;
}
.image-scroll-container {
  display: flex; height: 100%;
  animation: showcase-scroll 40s linear infinite;
  will-change: transform;
}
.image-scroll-container.paused { animation-play-state: paused; }
.image-set { display: flex; flex-shrink: 0; }
.image-item {
  flex-shrink: 0; width: 165px; height: 231px;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.showcase-card {
  width: 100%; height: 100%; position: relative;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border-radius: 4px; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  clip-path: var(--clip-path, polygon(0 4px, calc(100% - 4px) 0, 100% calc(100% - 8px), 8px 100%));
}
.showcase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  clip-path: var(--clip-path-hover, polygon(4px 0, 100% 4px, calc(100% - 8px) 100%, 0 calc(100% - 8px)));
}
.showcase-card-background,
.showcase-card-title,
.showcase-card-hero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.showcase-card-background { z-index: 1; }
.showcase-card-title {
  z-index: 2; font-family: var(--font-heading);
  font-size: 18px; font-weight: 400; color: #fff;
  text-transform: uppercase; letter-spacing: 0.5px;
  text-align: center; padding: 20px 16px 0;
  line-height: 1.2; align-items: flex-start !important;
  word-wrap: break-word;
}
.showcase-card-hero { z-index: 3; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.showcase-card:hover .showcase-card-hero { transform: scale(1.08); }
.showcase-img { width: 100%; height: 100%; object-fit: cover; }
.showcase-card-hero .showcase-img { object-fit: contain; }
.image-showcase::before,
.image-showcase::after {
  content: ''; position: absolute; top: 0;
  width: 30px; height: 100%; z-index: 10; pointer-events: none;
}
.image-showcase::before { left: 0; background: linear-gradient(90deg, #ffffff 0%, transparent 100%); }
.image-showcase::after { right: 0; background: linear-gradient(90deg, transparent 0%, #ffffff 100%); }
@keyframes showcase-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 1024px) {
  .image-showcase { height: 196px; }
  .image-item { width: 149px; height: 196px; }
}
@media (max-width: 768px) {
  .image-showcase { height: 173px; margin: 30px 0; }
  .image-item { width: 140px; height: 173px; }
  .showcase-card-title { font-size: 14px; padding-top: 16px; }
}

/* ==========================================================
   SECTION 3 & 7: Youtooz Product Showcase (live now / upcoming)
   ========================================================== */
.youtooz-showcase-wrapper { width: 100%; box-sizing: border-box; }
.youtooz-section {
  padding: 60px 40px; background: #ffffff; width: 100%; box-sizing: border-box;
}
.youtooz-section .section-header { text-align: center; margin-bottom: 40px; }
.youtooz-section .section-title {
  font-family: var(--font-heading); font-size: 48px; font-weight: 400;
  text-transform: uppercase; margin: 0; letter-spacing: 1px; line-height: 1;
}
.youtooz-section .section-content { max-width: 1400px; margin: 0 auto; }
.youtooz-section .showcase-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  justify-content: center; width: 100%; max-width: 1200px; margin: 0 auto;
}
.youtooz-section .showcase-grid-item { width: 100%; }
.youtooz-section .product-card {
  width: 100%; background: #fff; position: relative; overflow: visible;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; cursor: pointer; padding-bottom: 20px;
}
.youtooz-section .product-card-media {
  width: 100%; aspect-ratio: 1; background: #f2f2f2;
  position: relative; overflow: hidden;
  --tl: 28px; --tr: 12px; --br: 2px; --bl: 2px;
  clip-path: polygon(0 var(--tl), calc(100% - var(--tr)) 0, 100% calc(100% - var(--br)), var(--bl) 100%);
  transition: clip-path 0.5s cubic-bezier(0.4,0,0.2,1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0;
}
.youtooz-section .product-card:hover .product-card-media {
  --tl: 20px; --tr: 10px; --br: 15px; --bl: 30px;
}
.youtooz-section .showcase-grid > .showcase-grid-item:nth-child(3n+2) .product-card-media {
  --tl: 1px; --tr: 30px; --br: 2px; --bl: 2px;
}
.youtooz-section .showcase-grid > .showcase-grid-item:nth-child(3n+2) .product-card:hover .product-card-media {
  --tl: 10px; --tr: 20px; --br: 30px; --bl: 15px;
}
.youtooz-section .product-card-media img {
  position: relative; max-width: 90%; max-height: 90%;
  width: auto; height: auto; transform: scale(0.8);
  transition: transform 0.65s cubic-bezier(0.2,0,0.2,1); object-fit: contain;
}
.youtooz-section .product-card:hover .product-card-media img { transform: scale(0.9); }
.youtooz-section .product-badge {
  pointer-events: none; z-index: 2; position: absolute;
  left: 20px; top: 25px; width: 62px; height: 62px;
}
.youtooz-section .product-badge-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--badge-gradient, linear-gradient(135deg, #3e3346, #4e2887));
  border-radius: 50%; color: #fff;
  font-family: var(--font-heading); font-size: 24px;
}
.youtooz-section .product-card-content {
  padding: 20px 16px 16px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; flex-grow: 1; position: relative;
}
.youtooz-section .product-card-button {
  color: #fff; border-radius: 14px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; border: none; white-space: nowrap;
  width: 150px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: filter 0.3s ease; z-index: 5;
}
.youtooz-section .product-card:hover .product-card-button { filter: brightness(1.1); }
.youtooz-section .product-card-category {
  font-size: 11px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 0.5px; margin: 0;
}
.youtooz-section .product-card-name {
  font-family: var(--font-heading); font-size: 22px; line-height: 1.2; margin: 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(135deg, #ff466f 0%, #ff8a9b 100%);
  text-align: center; word-break: break-word; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.youtooz-section .product-card-price {
  font-size: 16px; font-weight: bold; color: #000; margin-top: 4px;
}

/* Upcoming mode: grayscale → color on hover */
.youtooz-section[data-display-mode="upcoming"] .product-card,
.youtooz-section[data-display-mode="upcoming"] .product-card-media,
.youtooz-section[data-display-mode="upcoming"] .product-card-media img,
.youtooz-section[data-display-mode="upcoming"] .product-card-content {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.youtooz-section[data-display-mode="upcoming"] .product-card:hover,
.youtooz-section[data-display-mode="upcoming"] .product-card:hover .product-card-media,
.youtooz-section[data-display-mode="upcoming"] .product-card:hover .product-card-media img,
.youtooz-section[data-display-mode="upcoming"] .product-card:hover .product-card-content {
  filter: grayscale(0%);
}
.youtooz-section[data-display-mode="upcoming"] .product-card-button {
  background: linear-gradient(90deg, #888 0%, #666 100%);
}
.youtooz-section[data-display-mode="upcoming"] .product-card:hover .product-card-button {
  filter: saturate(1.2) brightness(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 1200px) {
  .youtooz-section .product-card-button { width: 130px; height: 35px; font-size: 9px; }
  .youtooz-section .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  .youtooz-section { padding: 50px 20px; }
  .youtooz-section .section-title { font-size: 40px; }
  .youtooz-section .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .youtooz-section .product-card-name { font-size: 18px; }
  .youtooz-section .product-card-button { width: 120px; height: 32px; }
}

/* ==========================================================
   SECTION 4 & 6: Series Collection (双卡片 + SVG边框)
   ========================================================== */
.series-collection-section {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.series-contain { margin: 0 auto; max-width: 1135px; padding: 60px 20px; }
.series-layout { display: flex; gap: 30px; justify-content: center; }
.series-layout_item { width: 531px; height: 430px; position: relative; }
.series-layout_item:first-child { clip-path: polygon(0 0, 100% 12px, 100% 100%, 0 100%); }
.series-layout_item:last-child { clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 100%); }
.series-box {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 40px; box-sizing: border-box; overflow: visible;
  text-decoration: none; color: inherit;
}
.series-box_bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center; z-index: 1;
}
.series-box_border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.series-box_border svg {
  width: 90%; height: 90%; position: absolute; top: 5%; left: 5%;
  transition: transform 0.3s ease;
}
.series-box:hover .series-box_border svg { transform: scale(1.08); }
.series-box_image {
  position: absolute; top: 7.5%; left: 7.5%; width: 85%; height: 85%;
  z-index: 3; transition: transform 0.3s ease;
}
.series-box_image img { width: 100%; height: 100%; object-fit: contain; }
.series-box:hover .series-box_image { transform: scale(1.08); }
.series-box-details {
  position: relative; z-index: 4; width: 100%;
  display: flex; flex-direction: column; gap: 16px;
}
.series-box-details_title {
  font-family: var(--font-heading); font-weight: 400;
  text-transform: uppercase; letter-spacing: 1px; margin: 0; line-height: 1.2;
}
.series-button {
  padding: 12px 24px; border-radius: 20px; border: none;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.3s ease;
}
.series-button svg { width: 1em; height: 1em; }
@media (max-width: 1024px) {
  .series-layout { flex-direction: column; gap: 20px; }
  .series-layout_item { width: 100%; height: 350px; }
}
@media (max-width: 768px) {
  .series-layout_item { height: 300px; }
  .series-box { padding: 30px 20px; }
  .series-button { padding: 10px 20px; font-size: 12px; }
}

/* ==========================================================
   SECTION 5: Community Designs Carousel
   ========================================================== */
.community-designs-section {
  background: linear-gradient(135deg, #FF467F 0%, #FF6B99 100%);
  padding: 50px 40px; width: 100%; max-width: 1105px; margin: 0 auto;
  position: relative; overflow: visible;
  clip-path: polygon(0 0, 100% 8px, 100% 100%, 0 100%);
}
.community-designs-section .community-header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 0 40px 0; gap: 40px; position: relative; z-index: 1;
}
.community-designs-section .community-header-content { flex: 1; }
.community-designs-section .community-title {
  font-family: var(--font-heading); font-size: 48px; font-weight: 400;
  color: #fff; text-transform: uppercase; margin: 0 0 12px 0;
  letter-spacing: 1px; line-height: 1;
}
.community-designs-section .community-tagline {
  font-family: var(--font-body); font-size: 16px; color: #fff; line-height: 1.5; margin: 0;
}
.community-designs-section .community-button {
  background: #000; color: #fff; padding: 12px 32px; border-radius: 24px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.3s ease; flex-shrink: 0;
}
.community-designs-section .community-button:hover { background: #222; transform: translateX(4px); }
.community-designs-section .community-button svg { width: 18px; height: 18px; }
.community-designs-section .community-carousel { width: 100%; overflow: hidden; position: relative; }
.community-designs-section .community-scroller {
  display: flex; gap: 24px;
  animation: scroll-community 50s linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.community-designs-section .community-scroller:hover { animation-play-state: paused; }
.community-designs-section .community-item { flex: 0 0 280px; position: relative; }
.community-designs-section .community-card {
  background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; height: 100%;
}
.community-designs-section .community-card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
.community-designs-section .community-image {
  width: 100%; aspect-ratio: 1; overflow: hidden; background: #f5f5f5;
}
.community-designs-section .community-image img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;
}
.community-designs-section .community-card:hover .community-image img { transform: scale(1.08); }
.community-designs-section .community-meta { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.community-designs-section .community-footer { display: flex; align-items: center; gap: 6px; }
.community-designs-section .community-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #FF467F 0%, #FF6B99 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.community-designs-section .community-info { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.community-designs-section .community-author {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #232323;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.community-designs-section .community-likes {
  display: flex; align-items: center; gap: 3px; font-size: 11px; color: #fff;
  white-space: nowrap; background: #000; padding: 3px 8px; border-radius: 10px; flex-shrink: 0;
}
.community-designs-section .community-likes svg { width: 12px; height: 12px; flex-shrink: 0; }
@keyframes scroll-community {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 1024px) {
  .community-designs-section { padding: 50px 30px; }
  .community-designs-section .community-title { font-size: 36px; }
  .community-designs-section .community-item { flex: 0 0 240px; }
}
@media (max-width: 768px) {
  .community-designs-section { padding: 50px 20px; }
  .community-designs-section .community-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .community-designs-section .community-title { font-size: 32px; }
  .community-designs-section .community-item { flex: 0 0 200px; }
}

/* ==========================================================
   SECTION 8: OPJOYS Plush Culture Gallery
   ========================================================== */
.opjoys-section-wrapper * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
.opjoys-section-wrapper {
  --opjoys-bg: #ff466b;
  --opjoys-card-bg: #FFFFFF;
  --opjoys-shadow: 0 2px 8px rgba(0,0,0,.1);
  --opjoys-hover-border: #FF467A;
  --opjoys-avatar-grad: linear-gradient(135deg, #FF6B8E 0%, #ff466b 100%);
  --opjoys-text: #232323;
  --opjoys-link: #FF467A;
  --opjoys-header-text: #ffffff;
  background: var(--opjoys-bg);
  width: 100%; position: relative;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.4375;
}
.opjoys-header {
  text-align: center; padding: 40px 20px 20px;
  color: var(--opjoys-header-text); font-size: 44px;
  font-family: var(--font-heading); font-weight: 400; letter-spacing: 2px; margin: 0;
}
.opjoys-card {
  width: 345px; position: relative; flex-shrink: 0; cursor: pointer;
  transition: all .3s ease; overflow: visible !important;
  text-decoration: none; display: block; margin-bottom: 20px;
}
.opjoys-card-x {
  position: absolute; top: 12px; right: 12px;
  width: 16px; height: 16px; color: var(--opjoys-text);
  font-weight: bold; font-size: 16px; cursor: pointer; z-index: 3;
  line-height: 1; user-select: none;
}
.opjoys-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--opjoys-card-bg); box-shadow: var(--opjoys-shadow);
  border: 3px solid transparent; transition: all .3s ease; z-index: 1;
  clip-path: var(--clip-path);
}
.opjoys-card:hover { transform: scale(1.02); z-index: 10; }
.opjoys-card:hover::before {
  border: 3px solid var(--opjoys-hover-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  clip-path: var(--clip-path-hover);
}
.opjoys-card-content-wrapper {
  position: absolute; top: 25px; left: 25px; right: 25px; bottom: 25px;
  z-index: 2; border-radius: 4px; padding: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: none; background: var(--opjoys-card-bg);
}
.opjoys-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.opjoys-avatar {
  background: var(--opjoys-avatar-grad);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 14px; flex-shrink: 0;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
}
.opjoys-user-info { flex: 1; min-width: 0; }
.opjoys-username {
  color: var(--opjoys-text); font-weight: 600; font-size: 14px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opjoys-handle {
  color: var(--opjoys-link); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opjoys-card-text {
  color: var(--opjoys-text); margin: 12px 0; font-size: 13px; line-height: 1.4375;
  flex: 1; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 6; -webkit-box-orient: vertical;
}
.opjoys-hashtags { color: var(--opjoys-link); font-size: 12px; margin-top: auto; font-weight: 500; }
.opjoys-card-image {
  width: 100%; height: 180px; border-radius: 4px; margin: 12px 0;
  overflow: hidden; flex-shrink: 0;
}
.opjoys-card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.opjoys-gallery-container {
  position: relative; overflow: hidden; min-height: 1080px; width: 100%;
  padding: 0 20px 100px;
}
.opjoys-row {
  display: flex; gap: 20px; position: absolute; left: 0;
  width: max-content; will-change: transform;
}
.opjoys-row#opjoysRow1 { top: 0; }
.opjoys-row#opjoysRow2 { top: 520px; }
.opjoys-row.animate { animation: opjoysScrollLeft 60s linear infinite; }
@keyframes opjoysScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer { background: #ffffff; border-top: 1px solid #f0f0f0; padding: 60px 40px 40px; }
.site-footer__inner { max-width: 1400px; margin: 0 auto; }
.site-footer__newsletter {
  text-align: center; padding: 0 0 48px;
  border-bottom: 1px solid #f0f0f0; margin-bottom: 40px;
}
.site-footer__newsletter h4 {
  font-family: var(--font-heading); font-size: 28px; font-weight: 400;
  margin-bottom: 8px; letter-spacing: 1px;
}
.site-footer__newsletter p { color: #666; font-size: 14px; margin-bottom: 20px; }
.site-footer__newsletter-form { display: flex; gap: 8px; max-width: 440px; margin: 0 auto; }
.site-footer__newsletter-form input {
  flex: 1; padding: 12px 18px; border: 1px solid #ddd; border-radius: 999px; font-size: 14px;
}
.site-footer__newsletter-form button {
  padding: 12px 24px; border-radius: 999px; background: #232323; color: #fff;
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; transition: background 0.2s;
}
.site-footer__newsletter-form button:hover { background: #ff466b; }
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;
}
.site-footer__brand-name { font-family: var(--font-heading); font-size: 28px; margin-bottom: 12px; }
.site-footer__brand-about { color: #666; font-size: 14px; max-width: 360px; margin-bottom: 16px; line-height: 1.6; }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a {
  width: 36px; height: 36px; background: #f5f5f5; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #232323; transition: background 0.15s, color 0.15s;
}
.site-footer__social a:hover { background: #232323; color: #fff; }
.site-footer__social svg { width: 18px; height: 18px; }
.site-footer__col h4 {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 16px; color: #232323;
}
.site-footer__col ul li { margin-bottom: 10px; }
.site-footer__col ul li a { color: #666; font-size: 14px; transition: color 0.15s; }
.site-footer__col ul li a:hover { color: #232323; }
.site-footer__bottom {
  border-top: 1px solid #f0f0f0; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #999;
}
@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ==========================================================
   Mobile bottom toolbar
   ========================================================== */
.halo-toolbar-mobile {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #f0f0f0; z-index: 100; padding: 8px 0;
}
.halo-toolbar-mobile ul { display: flex; justify-content: space-around; }
.halo-toolbar-mobile a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; color: #232323; padding: 4px 12px;
}
.halo-toolbar-mobile svg { width: 22px; height: 22px; }
@media (max-width: 768px) {
  .halo-toolbar-mobile { display: block; }
  body { padding-bottom: 64px; }
}

/* ==========================================================
   Generic page header (subpages)
   ========================================================== */
.page-header { background: #fafafa; padding: 48px 24px; text-align: center; }
.page-header h1 {
  font-family: var(--font-heading); font-size: 48px; font-weight: 400;
  letter-spacing: 1px; color: #232323;
}
.page-header p { color: #666; margin-top: 8px; font-size: 15px; }


/* ==========================================================
   COLLECTION PAGE (collections/all + taxonomy)
   Source: opjoys.cn_html/_realhtml/collections_all.html <style>
   ========================================================== */

    /* Scoped styles (copied and slightly namespaced) */
    * { box-sizing: border-box; }

    :root {
      --heading: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      --body: 'Inter', Helvetica, system-ui, sans-serif;
      --primary-color: #FF467F;
      --text-color: #232323;
      --bg-color: #FFFFFF;
    }

    .collection-section { font-family: var(--body); font-weight: 500; font-size: 16px; line-height: 1.4375; color: var(--text-color); background-color: var(--bg-color);
      /* Typography variables injected from section settings */
      --banner-title-size: 72px;
      --banner-title-weight: 400;
      --banner-title-color: #ffffff;
      --control-font-size: 18px;
      --control-font-weight: 600;
      --control-color: #222222;
      --product-name-size: 26px;
      --product-name-weight: 700;
      --product-name-color: #000000;
      --product-button-size: 16px;
      --product-button-weight: 700;
      --product-button-color: #ffffff;
      --product-category-size: 14px;
      --product-category-weight: 700;
      --product-category-color: #888888;
      --product-price-size: 18px;
      --product-price-weight: 800;
      --product-price-color: #000000;
    }

    .collection-banner { background: linear-gradient(135deg, #FF467F 0%, #FF6B99 100%); position: relative; padding: 80px 40px 100px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 0 100%); }
    .banner-content { max-width: 1400px; margin: 0 auto; text-align: center; }
    .collection-title { font-family: var(--heading); font-size: var(--banner-title-size); font-weight: var(--banner-title-weight); color: var(--banner-title-color); text-transform: uppercase; margin: 0; letter-spacing: 2px; line-height: 1; text-shadow: 3px 3px 0 rgba(0,0,0,0.15); }

    .page-container { max-width: 1400px; margin: 0 auto; padding: 60px 40px; }

    .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 60px; }
    .product-item { width: 100%; }
    .product-card { width: 100%; background: #fff; position: relative; overflow: visible; text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; transition: none; padding-bottom: 20px; }
    .product-media { width: 100%; aspect-ratio: 1; background: var(--env-keyColor, #f2f2f2); position: relative; overflow: visible; clip-path: polygon(0 var(--tl), calc(100% - var(--tr)) 0, 100% calc(100% - var(--br)), var(--bl) 100%); transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
    /* Left column (1st, 4th, 7th...) */
    .product-item:nth-child(3n+1) .product-media { --tl: 28px; --tr: 2px; --br: 2px; --bl: 12px; }
    /* Middle column (2nd, 5th, 8th...) - mirrored symmetry */
    .product-item:nth-child(3n+2) .product-media { --tl: 12px; --tr: 12px; --br: 12px; --bl: 12px; }
    /* Right column (3rd, 6th, 9th...) - mirror of left */
    .product-item:nth-child(3n) .product-media { --tl: 2px; --tr: 28px; --br: 12px; --bl: 2px; }
    /* Hover states for each column */
    .product-item:nth-child(3n+1):hover .product-media { --tl: 25px; --tr: 5px; --br: 5px; --bl: 20px; }
    .product-item:nth-child(3n+2):hover .product-media { --tl: 18px; --tr: 18px; --br: 18px; --bl: 18px; }
    .product-item:nth-child(3n):hover .product-media { --tl: 5px; --tr: 25px; --br: 20px; --bl: 5px; }
    .product-media img { position: relative; max-width: 90%; max-height: 90%; width: auto; height: auto; transform: scale(0.8); transition: transform 0.65s cubic-bezier(0.2, 0, 0.2, 1); object-fit: contain; }
    .product-card:hover .product-media img { transform: scale(0.9); }
    /* v1.0.55 Task 34：把 .product-badge 限定到 collection 页上下文，
     * 避免泄漏到首页 .youtooz-section 的产品卡（造成渐变圆背后出现黑方块） */
    .collection-section .product-badge { position: absolute; bottom: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }
    .product-content { padding: 0 16px 16px 16px; padding-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-grow: 1; position: relative; }
    .product-button { color: white; border-radius: 14px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; white-space: nowrap; width: 150px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); transition: filter 0.3s ease; z-index: 5; }
    .product-card:hover .product-button { filter: brightness(1.1); }
    .product-category { font-size: 0.7rem; font-weight: 700; color: #888888; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; }
    .product-name { font-family: var(--heading); font-size: 1.4rem; line-height: 1.2; margin: 0; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; word-break: break-word; min-height: 40px; display: flex; align-items: center; justify-content: center; }
    .product-price { font-size: 1rem; font-weight: bold; color: #000; margin-top: 4px; }

    @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .collection-title { font-size: 3rem; } }
    @media (max-width: 768px) { .page-container { padding: 40px 20px; } .collection-banner { padding: 60px 20px 80px; } .collection-title { font-size: 2.5rem; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .product-name { font-size: 1.1rem; } .product-button { width: 120px; height: 35px; font-size: 0.6rem; } }
    @media (max-width: 480px) { .collection-title { font-size: 1.8rem; } .product-grid { grid-template-columns: 1fr; gap: 16px; } }

    /* MINISO image adjustments (kept from original) */
    .image-zoom.image-adapt.adaptive_height { max-width: 80%; margin: 0 auto; display: block; position: relative; padding-top: 0; height: 400px; }
    .image-zoom.image-adapt.adaptive_height img[alt="MINISO"] { max-width: 100%; max-height: 400px; height: 100%; object-fit: cover; display: block; }
    .articleLookbook-item { max-height: 400px; overflow: hidden; position: relative; }
    .articleLookbook-title { bottom: 40px; }
    .articleLookbook-des { bottom: 0; }
    .image-zoom:hover img { transform: scale(1.1); transition: transform 0.3s ease; }

    /* Series selector and sort styles */
    .collection-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
    .series-selector { display:flex; gap:8px; flex-wrap:wrap; align-items:center; position:relative; }
    .series-btn {
      background: transparent;
      border: 1px solid rgba(0,0,0,0.06);
      color: #222;
      padding: 12px 28px;
      border-radius: 22px;
      font-size: 1.35rem;
      font-family: var(--heading);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.12s ease;
      box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    }
    .series-btn:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.08); }
    .series-btn.active {
      background: var(--primary-color, #FF467F);
      color: #fff;
      border-color: transparent;
    }

    .all-series-panel {
      position: absolute;
      top: calc(100% + 10px);
      left: 0;
      width: 360px;
      max-height: 360px;
      overflow: auto;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 14px 40px rgba(0,0,0,0.12);
      border-radius: 12px;
      padding: 8px;
      display: none;
      z-index: 40;
    }
    .all-series-list { display:flex; flex-direction:column; gap:6px; padding:6px; }
    .all-series-item { text-align:left; padding:12px 16px; border-radius:8px; background:transparent; border:none; cursor:pointer; font-family:var(--heading); font-size:1.25rem; }
    .all-series-item:hover { background: rgba(0,0,0,0.03); }

    .collection-sort {
      border: 1px solid rgba(0,0,0,0.06);
      padding: 12px 16px;
      border-radius: 10px;
      background: #fff;
      font-size: 1.25rem;
      font-family: var(--heading);
      font-weight: 600;
    }

    /* Make product card text use heading font and increase sizes */
    .product-button { color: white; border-radius: 14px; font-size: 1.2rem; font-family: var(--heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border: none; cursor: pointer; white-space: nowrap; width: 180px; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); transition: filter 0.3s ease; z-index: 5; }
    .product-category { font-size: 1.15rem; font-weight: 700; color: #888888; text-transform: uppercase; letter-spacing: 0.6px; margin: 0; font-family: var(--heading); }
    .product-name { font-family: var(--heading); font-size: 1.85rem; line-height: 1.15; margin: 0; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; word-break: break-word; min-height: 56px; display: flex; align-items: center; justify-content: center; }
    .product-price { font-size: 1.35rem; font-weight: 800; color: #000; margin-top: 8px; font-family: var(--heading); }

    @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .collection-title { font-size: 3rem; } .series-btn { font-size: 1.25rem; padding: 10px 18px; } }
    @media (max-width: 768px) { .page-container { padding: 40px 20px; } .collection-banner { padding: 60px 20px 80px; } .collection-title { font-size: 2.5rem; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .product-name { font-size: 1.55rem; } .product-button { width: 150px; height: 42px; font-size: 1rem; } .product-category { font-size: 1rem; } .product-price { font-size: 1.15rem; } .all-series-panel { width: 100%; left: 0; right: 0; top: calc(100% + 8px); } }
    @media (max-width: 480px) { .collection-title { font-size: 1.9rem; } .product-grid { grid-template-columns: 1fr; gap: 16px; } .series-btn { font-size: 1.1rem; padding: 10px 16px; } .product-name { font-size: 1.35rem; } .product-button { font-size: 0.95rem; width: 130px; height: 38px; } }


  

/* === PAGES CSS (about/blog/contact/etc) ===
   Source: opjoys.cn_html/_realhtml/pages_*.html <style> blocks
   ========================================================== */

/* ----- ABOUT PAGE (pages_about.html) ----- */

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #111;
    }
    .about-header {
      position: relative;
      background: #ff467f;
      padding: 100px 40px 160px;
      text-align: center;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 768px) {
      .about-header {
        padding: 80px 20px 120px;
      }
    }
    .about-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 80px;
      background: #ffffff;
      clip-path: ellipse(70% 100% at 50% 100%);
    }
    .about-header-left {
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    @media (max-width: 768px) {
      .about-header-left {
        left: 20px;
        top: 30px;
      }
    }
    .about-logo {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      color: #fff;
    }
    .about-subtitle {
      font-size: 13px;
      color: #ff467f;
      background-color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 4px;
      font-weight: 600;
    }
    .about-h1 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 90px;
      color: #fff;
      margin: 60px 0 0;
    }
    @media (max-width: 768px) {
      .about-h1 {
        font-size: 70px;
      }
    }
    .about-container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .about-content {
      max-width: 900px;
      margin: -120px auto 80px;
      padding: 100px 40px 80px;
      background: #fff;
      position: relative;
      z-index: 1;
      clip-path: polygon(0 0, 100% 30px, 100% 100%, 0 100%);
    }
    @media (max-width: 768px) {
      .about-content {
        margin: -80px auto 60px;
        padding: 80px 20px 60px;
        clip-path: polygon(0 0, 100% 50px, 100% 100%, 0 100%);
      }
    }

    .about-double {
      display: flex;
      gap: 80px;
      margin-bottom: 0px;
      padding-top: 23px;
    }
    @media (max-width: 768px) {
      .about-double {
        flex-direction: column;
        gap: 40px;
      }
    }
    .about-double-side {
      flex: 1;
    }
    .about-double-main {
      flex: 2;
    }
    .about-h2 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 36px;
      line-height: 1.2;
      color: #111;
    }
    @media (max-width: 768px) {
      .about-h2 {
        font-size: 28px;
      }
    }
    .about-highlight-pink {
      color: #ff467f;
    }

    .about-h3 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 32px;
      color: #111;
      margin-bottom: 20px;
    }
    .about-p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    .about-how-bar {
      background: #ff4669;
      padding: 60px 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      clip-path: polygon(1% 2%, 99% 0%, 100% 100%, 0% 98%);
      margin: 80px 0;
    }
    @media (max-width: 768px) {
      .about-how-bar {
        flex-direction: column;
        text-align: center;
        padding: 60px 40px;
      }
    }
    .about-how-heading {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 40px;
      color: #fff;
    }
    .about-how-button {
      background: #000;
      color: #fff;
      padding: 15px 30px;
      border-radius: 25px;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
    }
    .about-how-button:hover {
      background: #fff;
      color: #ff467f;
    }
    .about-footer-bg {
      background: #ff467f;
      padding: 100px 40px;
      text-align: center;
      color: #fff;
    }
    .about-footer-title {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 40px;
      margin-bottom: 20px;
    }
    .about-footer-note {
      font-size: 18px;
      margin-bottom: 30px;
    }
    .about-footer-btn {
      background: #fff;
      color: #ff467f;
      padding: 15px 30px;
      border-radius: 99px;
      font-weight: 600;
      font-size: 18px;
      text-decoration: none;
    }
  

/* ----- BLOG PAGE (pages_blog.html) ----- */

@font-face{
  font-family:'Luckiest Guy';
  src:url('https://community.youtooz.com/assets/fonts/luckiest-guy/subset-v1.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root {
  --opjoys-bg: #ff466b;
  --opjoys-card-bg: #FFFFFF;
  --opjoys-shadow: 0 2px 8px rgba(0,0,0,.1);
  --opjoys-hover-border: #ff467a;
  --opjoys-avatar-grad: linear-gradient(135deg, #ff6b8e 0%, #ff466b 100%);
  --opjoys-text: #232323;
  --opjoys-link: #ff467a;
  --opjoys-header-text: #ffffff;
  --opjoys-heading: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
  --opjoys-body: 'Inter var', Helvetica, system-ui, sans-serif;
}

.opjoys-section-wrapper * {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.opjoys-section-wrapper {
  background: var(--opjoys-bg);
  width: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  font-family: var(--opjoys-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4375;
}

.opjoys-header{
  text-align:center;
  padding: 40px 20px 20px;
  color: var(--opjoys-header-text);
  font-size: 2.8em;
  font-family: var(--opjoys-heading);
  font-weight: 400;
  letter-spacing: 2px;
  margin:0;
}

.opjoys-card {
  width:345px;
  position:relative;
  flex-shrink:0;
  cursor:pointer;
  transition:all .3s ease;
  overflow:visible!important;
  text-decoration:none;
  display:block;
  margin-bottom: 20px;
}

.opjoys-card-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--opjoys-text);
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
  user-select: none;
}

.opjoys-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--opjoys-card-bg);
  box-shadow:var(--opjoys-shadow);
  border: 3px solid transparent;
  transition:all .3s ease;
  z-index:1;
  clip-path:var(--clip-path);
}

.opjoys-card:hover {
  transform: scale(1.02);
  z-index:10;
}

.opjoys-card:hover::before{
  border:3px solid var(--opjoys-hover-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  clip-path:var(--clip-path-hover);
}

.opjoys-card-content-wrapper {
  position:absolute;
  top:25px;left:25px;right:25px;bottom:25px;
  z-index:2;
  border-radius:4px;
  padding:18px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  pointer-events:none;
  background:var(--opjoys-card-bg);
}

.opjoys-card-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.opjoys-avatar{
  background:var(--opjoys-avatar-grad);
  width:40px;height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  flex-shrink:0;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
}

.opjoys-user-info {
  flex:1;
  min-width:0;
}

.opjoys-username {
  color:var(--opjoys-text);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.opjoys-handle {
  color:var(--opjoys-link);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.opjoys-card-text {
  color:var(--opjoys-text);
  margin:12px 0;
  font-size:13px;
  line-height: 1.4375;
  flex:1;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
}

.opjoys-hashtags {
  color:var(--opjoys-link);
  font-size:12px;
  margin-top:auto;
  font-weight: 500;
}

.opjoys-card-image {
  width:100%;
  height:180px;
  border-radius:4px;
  margin:12px 0;
  overflow:hidden;
  flex-shrink:0;
}

.opjoys-card-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
}

.opjoys-social-icon {
  display: none;
}

.opjoys-gallery-container {
  position:relative;
  overflow:hidden;
  min-height:1080px;
  width:100%;
  padding: 0 20px 100px;
}

.opjoys-row {
  display:flex;
  gap:20px;
  padding:0;
  position:absolute;
  left:0;
  width:max-content;
  will-change:transform;
}

.opjoys-row#opjoysRow1 { top: 0; }
.opjoys-row#opjoysRow2 { top: 520px; }

.opjoys-row.animate {
  animation:opjoysScrollLeft 60s linear infinite;
}

@keyframes opjoysScrollLeft {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.opjoys-gallery-container::after {
  content: '';
  position: absolute;
  bottom: -500px;
  left: 0;
  right: 0;
  height: 500px;
  background: var(--opjoys-bg);
  z-index: -1;
  pointer-events: none;
}


/* ----- CONTACT PAGE (pages_contact.html) ----- */
#NotFoundSection-template--16161946665008__main .title + * {
    margin-top: 1rem;
  }

  @media screen and (min-width: 750px) {
    #NotFoundSection-template--16161946665008__main .title + * {
      margin-top: 2rem;
    }
  }
  .template-404 #MainContent {
    padding: 15px;
  }

  #NotFoundSection-template--16161946665008__main {
    margin-bottom: 0px;
    margin-top: 0px;
  }

  #NotFoundSection-template--16161946665008__main .content .title {
    position: relative;
    display: inline-block;
    z-index: 2;
    padding: 0 10px;
    line-height: 1;
    font-size: calc(var(--font-page-title-size) - 5px);
    margin-top: 0;
    margin-bottom: 10px;
    color: #232323;
  }

  #NotFoundSection-template--16161946665008__main .content .title:after {
    content: "";
    position: absolute;
    background: #efc3c0;
    width: 100%;
    height: calc(50% + 2px);
    top: calc(50% + 2px);
    left: 0;
    z-index: -1
  }

  #NotFoundSection-template--16161946665008__main .content .subtext {
    font-size: calc(var(--font-page-title-size) + 20px);
    display: block;
    margin-bottom: 15px;
    margin-top: 0;
    line-height: 1;
    color: #232323;
  }

  #NotFoundSection-template--16161946665008__main .content .page-desc {
    margin-bottom: 18px;
    font-size: 14px;
    color: #232323;
  }

  #NotFoundSection-template--16161946665008__main .content .link {
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #232323;
  }

  .template-404 .content {
    width: 90%;
    margin: 0 auto;
  }

  .template-404 .background-image img {
    margin: 0 auto;
  }

  
    #NotFoundSection-template--16161946665008__main .template-404 {
      padding-top: 100px;
      padding-bottom: 100px;
      background: #eeeeee
    }
  

  @media (max-width: 767px) {
    #NotFoundSection-template--16161946665008__main .background-image img.has-image-mb {
      display: none;
    }
    #NotFoundSection-template--16161946665008__main .background-image .no-image-mb {
      min-height: 300px;
      object-fit: cover;
    }
  }

  @media (min-width: 360px) {
    #NotFoundSection-template--16161946665008__main .content .title {
      font-size: var(--font-page-title-size);
    }

    #NotFoundSection-template--16161946665008__main .content .subtext {
      font-size: calc(var(--font-page-title-size) + 26px);
    }
  }

  @media (min-width: 768px) {
    .template-404 #MainContent {
      padding: 15px;
    }

    #NotFoundSection-template--16161946665008__main .template-404 {
      
        padding-top: 120px;
        padding-bottom: 120px;
      
    }

    #NotFoundSection-template--16161946665008__main .content .title {
      font-size: calc(var(--font-page-title-size) + 6px);
    }

    #NotFoundSection-template--16161946665008__main .content .subtext {
      font-size: calc(var(--font-page-title-size) + 36px);
    }

    #NotFoundSection-template--16161946665008__main {
      margin-bottom: 0px;
      margin-top: 0px;
    }
    .template-404 .content {
      width: 60%;
    }

    

    #NotFoundSection-template--16161946665008__main .background-image .image-mb {
      display: none;
    }
  }

  @media (min-width: 1025px) {
    #NotFoundSection-template--16161946665008__main .template-404 {
      margin-bottom: 0px;
      margin-top: 0px;
      
        padding-top: 150px;
        padding-bottom: 150px;
      
    }

    .template-404 .content {
      width: 50%;
    }

    #NotFoundSection-template--16161946665008__main .content .title {
      font-size: calc(var(--font-page-title-size) + 16px);
    }

    #NotFoundSection-template--16161946665008__main .content .subtext {
      font-size: calc(var(--font-page-title-size) + 56px);
    }
  }


/* ----- CONTACT-US PAGE (pages_contact-us.html) ----- */

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #111;
      line-height: 1.6;
    }
    .contact-header {
      position: relative;
      background: #ff467f;
      padding: 120px 40px 100px;
      text-align: center;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 768px) {
      .contact-header {
        padding: 100px 20px 80px;
      }
    }
    .contact-header-left {
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    @media (max-width: 768px) {
      .contact-header-left {
        left: 20px;
        top: 30px;
      }
    }
    .contact-logo {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      color: #fff;
    }
    .contact-subtitle {
      font-size: 13px;
      color: #ff467f;
      background-color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 4px;
      font-weight: 600;
    }
    .contact-header h1 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 90px;
      color: #fff;
      margin: 60px 0 0;
      text-transform: uppercase;
      line-height: 1;
    }
    @media (max-width: 768px) {
      .contact-header h1 {
        font-size: 70px;
      }
    }
    .contact-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 80px;
      background: #ffffff;
      clip-path: ellipse(70% 100% at 50% 100%);
    }
    .contact-content-wrapper {
      position: relative;
      margin-top: -60px;
      z-index: 1;
    }
    @media (max-width: 768px) {
      .contact-content-wrapper {
        margin-top: -40px;
      }
    }
    .contact-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 80px 20px 60px;
      background: #fff;
    }
    @media (max-width: 768px) {
      .contact-container {
        padding: 60px 20px 60px;
      }
    }
    .contact-h2 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 36px;
      color: #111;
      text-align: center;
      margin-bottom: 30px;
    }
    .contact-h6 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 24px;
      color: #111;
      text-align: center;
    }
    .contact-p {
      font-size: 16px;
      margin-bottom: 20px;
      text-align: center;
    }
    .contact-a {
      color: #ff467f;
      text-decoration: underline;
    }
    .contact-hr {
      margin: 40px 0;
      border: none;
      border-top: 1px solid #eee;
    }
    .contact-button-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding-bottom: 30px;
    }
    .contact-button {
      display: inline-block;
      background: #ff467f;
      color: #fff;
      padding: 15px 25px;
      border-radius: 99px;
      font-weight: 600;
      text-align: center;
      font-size: 16px;
      line-height: 19px;
      text-decoration: none;
    }
    .contact-button:hover {
      opacity: 0.9;
    }
  

/* ----- FAQ PAGE (pages_faq.html) ----- */

    *, *::before, *::after {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: 'Inter', Helvetica, system-ui, sans-serif;
      background: #ffffff;
      color: #111;
    }
    .faq-opjoys-header {
      position: relative;
      background: #ff467f;
      padding: 60px 20px 100px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .faq-opjoys-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 60px;
      background: #ffffff;
      clip-path: ellipse(70% 100% at 50% 100%);
    }
    .faq-header-left {
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    .faq-logo {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      color: #fff;
      margin: 0;
    }
    .faq-subtitle {
      font-size: 13px;
      color: #fff;
      margin-top: 4px;
      padding-left: 2px;
    }
    .faq-h1 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 90px;
      color: #fff;
      text-align: center;
      margin: 0;
      padding-top: 40px;
    }
    .faq-container {
      max-width: 900px;
      margin: -60px auto 0;
      padding: 0 20px 60px;
      position: relative;
      z-index: 1;
      background: #fff;
    }
    .faq-h6 {
      font-size: 20px;
      font-weight: 700;
      color: #111;
      margin: 40px 0 15px;
      position: relative;
      padding-left: 20px;
    }
    .faq-h6::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #ff467f;
    }
    .faq-blockquote {
      margin: 20px 0 40px;
      padding-left: 20px;
      color: #333;
      font-size: 16px;
      line-height: 1.6;
    }
    .faq-hr {
      border: none;
      border-top: 1px solid #eee;
      margin: 40px 0;
    }
    .faq-a {
      color: #ff467f;
      text-decoration: underline;
    }
    .faq-button-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 20px;
      margin: 20px 0;
    }
    .faq-button {
      display: inline-block;
      background: #ff467f;
      color: #fff;
      padding: 15px 30px;
      border-radius: 99px;
      font-weight: 600;
      font-size: 16px;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(255,70,127,0.3);
    }
    .faq-button:hover {
      background: #ff4669;
    }
  

/* ----- FIND-MY-OPJOYS PAGE (pages_find-my-opjoys.html) ----- */

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    #SearchSection-template--16161948270640__main {
        font-family: 'Inter', sans-serif;
        background: #ffffff;
        color: #232323;
        min-height: 100vh;
        overflow-x: hidden;
        --title-size: 61px;
        --card-image-height: 350px;
        --card-min-width: 340px;
        --button-font-size: 19px;
        --pattern-opacity: 0;
        --pattern-color: #fe467c;
    }

    /* 背景图案 */
    #SearchSection-template--16161948270640__main .background-pattern {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        opacity: 0.08;
        pointer-events: none;
    }

    #SearchSection-template--16161948270640__main .background-pattern::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background-image: 
            repeating-linear-gradient(45deg, transparent, transparent 35px, #fe467c 35px, #fe467c 70px),
            repeating-linear-gradient(-45deg, transparent, transparent 35px, #fe467c 35px, #fe467c 70px);
        transform: rotate(-15deg);
    }

    /* 搜索容器 */
    #SearchSection-template--16161948270640__main .search-page-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 80px 24px 60px;
        text-align: center;
    }

    /* Opjoys插图 */
    #SearchSection-template--16161948270640__main .search-page-illustration {
        width: 120px;
        height: auto;
        margin: 0 auto 24px;
        display: block;
    }

    /* 标题 */
    #SearchSection-template--16161948270640__main .search-page-title {
        font-family: 'Luckiest Guy', cursive;
        font-size: var(--title-size);
        color: #fe467c;
        text-transform: uppercase;
        margin-bottom: 40px;
        line-height: 1.1;
        letter-spacing: 1px;
    }

    /* 搜索表单 */
    #SearchSection-template--16161948270640__main .search-form-wrapper {
        margin-bottom: 60px;
    }

    #SearchSection-template--16161948270640__main .search-wrapper {
        display: flex;
        align-items: center;
        border: 2px solid #e0e0e0;
        border-radius: 50px;
        padding: 14px 24px;
        background: #fff;
        max-width: 600px;
        margin: 0 auto;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    #SearchSection-template--16161948270640__main .search-wrapper:focus-within {
        border-color: #fe467c;
        box-shadow: 0 4px 16px rgba(254, 70, 124, 0.15);
    }

    #SearchSection-template--16161948270640__main .search-icon {
        flex-shrink: 0;
        margin-right: 12px;
    }

    #SearchSection-template--16161948270640__main .search-icon svg {
        width: 22px;
        height: 22px;
        stroke: #fe467c;
    }

    #SearchSection-template--16161948270640__main .search-input-field {
        flex: 1;
        border: none;
        outline: none;
        font-size: 16px;
        font-family: 'Inter', sans-serif;
        color: #232323;
        background: transparent;
    }

    #SearchSection-template--16161948270640__main .search-input-field::placeholder {
        color: #999;
    }

    #SearchSection-template--16161948270640__main .search-submit-button {
        background: #fe467c;
        border: none;
        color: white;
        padding: 10px 28px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #SearchSection-template--16161948270640__main .search-submit-button:hover {
        background: #FF4669;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(254, 70, 124, 0.3);
    }

    /* 结果部分 */
    #SearchSection-template--16161948270640__main .search-results-section {
        margin-top: 40px;
        text-align: left;
    }

    #SearchSection-template--16161948270640__main .search-results-header {
        font-family: 'Luckiest Guy', cursive;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #232323;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    #SearchSection-template--16161948270640__main .search-results-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(var(--card-min-width), 1fr));
        gap: 28px;
        justify-content: center;
        margin: 0 auto;
        max-width: calc(3 * var(--card-min-width) + 56px);
        width: 100%;
    }

    /* 产品卡片 */
    #SearchSection-template--16161948270640__main .search-result-product-card {
        background: #fff;
        text-decoration: none;
        color: #232323;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        position: relative;
        overflow: visible;
        padding-bottom: 20px;
    }

    #SearchSection-template--16161948270640__main .search-result-product-card:hover {
        transform: none;
    }

    #SearchSection-template--16161948270640__main .search-result-card-media {
        width: 100%;
        aspect-ratio: 1;
        min-height: var(--card-image-height);
        background: var(--env-keyColor, #f2f2f2);
        position: relative;
        overflow: visible;
        --tl: 28px;
        --tr: 12px;
        --br: 2px;
        --bl: 2px;
        clip-path: polygon(0 var(--tl), calc(100% - var(--tr)) 0, 100% calc(100% - var(--br)), var(--bl) 100%);
        transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        overflow: hidden;
    }

    #SearchSection-template--16161948270640__main .search-result-product-card:hover .search-result-card-media {
        --tl: 20px;
        --tr: 10px;
        --br: 15px;
        --bl: 30px;
    }

    #SearchSection-template--16161948270640__main .search-results-grid > .search-result-product-card:nth-child(3n+2) .search-result-card-media {
        --tl: 1px;
        --tr: 30px;
        --br: 2px;
        --bl: 2px;
    }

    #SearchSection-template--16161948270640__main .search-results-grid > .search-result-product-card:nth-child(3n+2):hover .search-result-card-media {
        --tl: 10px;
        --tr: 20px;
        --br: 30px;
        --bl: 15px;
    }

    #SearchSection-template--16161948270640__main .search-result-card-media img {
        position: relative;
        max-width: 90%;
        max-height: 90%;
        width: auto;
        height: auto;
        transform: scale(0.8);
        transition: transform 0.65s cubic-bezier(0.2, 0, 0.2, 1);
        object-fit: contain;
    }

    #SearchSection-template--16161948270640__main .search-result-product-card:hover .search-result-card-media img {
        transform: scale(0.9);
    }

    #SearchSection-template--16161948270640__main .search-result-card-content {
        padding: 0 16px 16px 16px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex-grow: 1;
        position: relative;
    }

    /* Category label removed (series not available); if series support is added later, reintroduce styles here. */


    #SearchSection-template--16161948270640__main .search-result-card-name {
        font-family: 'Luckiest Guy', cursive;
        font-size: 1.4rem;
        line-height: 1.2;
        margin: 0;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-align: center;
        word-break: break-word;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #SearchSection-template--16161948270640__main .search-result-card-price {
        font-family: 'Luckiest Guy', cursive;
        font-size: 1.1rem;
        font-weight: 700;
        color: #000;
        margin-top: 6px;
    }

    #SearchSection-template--16161948270640__main .search-result-card-button {
        color: white;
        font-family: 'Luckiest Guy', cursive;
        border-radius: 14px;
        font-size: var(--button-font-size);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        width: 160px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        align-self: center;
        transition: filter 0.3s ease, transform 0.2s ease;
        z-index: 5;
    }

    #SearchSection-template--16161948270640__main .search-result-product-card:hover .search-result-card-button {
        filter: brightness(1.08);
        transform: translateX(-50%) translateY(-54%);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }

    /* 无结果 */
    #SearchSection-template--16161948270640__main .search-no-results {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }

    #SearchSection-template--16161948270640__main .search-no-results svg {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        opacity: 0.3;
    }

    /* 响应式 */
    @media (max-width: 768px) {
        #SearchSection-template--16161948270640__main .search-page-title {
            font-size: 32px;
        }

        #SearchSection-template--16161948270640__main .search-page-container {
            padding: 60px 20px 40px;
        }

        #SearchSection-template--16161948270640__main .search-page-illustration {
            width: 120px;
        }

        #SearchSection-template--16161948270640__main .search-wrapper {
            padding: 14px 20px;
        }

        #SearchSection-template--16161948270640__main .search-submit-button {
            padding: 8px 20px;
            font-size: 12px;
        }

        #SearchSection-template--16161948270640__main .search-results-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        #SearchSection-template--16161948270640__main .search-result-card-button {
            width: 150px;
            height: 40px;
            font-size: 0.85rem;
        }
    }

    @media (max-width: 1200px) {
        #SearchSection-template--16161948270640__main .search-results-grid {
            grid-template-columns: repeat(3, minmax(200px, 1fr));
            gap: 24px;
        }
        #SearchSection-template--16161948270640__main .search-result-card-media {
            min-height: 240px;
        }
    }

    @media (max-width: 480px) {
        #SearchSection-template--16161948270640__main .search-results-grid {
            grid-template-columns: 1fr;
            gap: 16px;
        }
        #SearchSection-template--16161948270640__main .search-result-card-button {
            width: 130px;
            height: 36px;
            font-size: 0.8rem;
        }
    }


/* ----- HOW-ITS-MADE PAGE (pages_how-its-made.html) ----- */

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #111;
      line-height: 1.6;
    }

    /* Banner 整体容器 */
    .banner {
      position: relative;
      background: #ff467f url(//youtooz.com/cdn/shop/t/8/assets/page-how-its-made-header-mast.jpg?v=142681230054749202291637191556) no-repeat bottom left;
      background-size: cover;
      padding: 180px 40px 140px;
      text-align: center;
      overflow: hidden;
    }
    @media (max-width: 768px) {
      .banner {
        padding: 120px 20px 100px;
      }
    }

    .banner-left {
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 2;
    }
    @media (max-width: 768px) {
      .banner-left {
        left: 20px;
        top: 30px;
      }
    }

    .logo {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      color: #fff;
    }

    .subtitle {
      font-size: 13px;
      color: #ff467f;
      background-color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 4px;
      font-weight: 600;
    }

    .banner h1 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 88px;
      line-height: 88px;
      color: #fff;
      margin: 20px 0 20px;
      text-transform: uppercase;
    }
    @media (max-width: 768px) {
      .banner h1 {
        font-size: 46px;
        line-height: 46px;
      }
    }

    .banner-description {
      font-size: 24px;
      line-height: 36px;
      color: #fff;
      max-width: 840px;
      margin: 0 auto 40px;
    }
    @media (max-width: 768px) {
      .banner-description {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 30px;
      }
    }

    .lets-start-button {
      display: inline-flex;
      align-items: center;
      background: #fff;
      color: #000;
      padding: 15px 20px;
      border-radius: 99px;
      font-weight: 600;
      font-size: 16px;
      line-height: 19px;
      cursor: pointer;
    }
    .lets-start-button:hover {
      background: #000;
      color: #fff;
    }
    .lets-start-button svg {
      margin-left: 5px;
    }

    .banner::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 80px;
      background: #ffffff;
      clip-path: ellipse(70% 100% at 50% 100%);
    }

    /* 正文区域 */
    .content-wrapper {
      position: relative;
      margin-top: -60px;
      z-index: 1;
    }
    @media (max-width: 768px) {
      .content-wrapper {
        margin-top: -40px;
      }
    }

    .container {
      max-width: 1340px;
      margin: 0 auto;
      padding: 0 30px;
    }
    @media (max-width: 800px) {
      .container {
        padding: 0 20px;
      }
    }

    /* 分割线容器（左侧粉色线） */
    .timeline-wrapper {
      position: relative;
      padding-left: 60px;
    }
    @media (max-width: 800px) {
      .timeline-wrapper {
        padding-left: 50px;
      }
    }

    .timeline-line {
      position: absolute;
      left: 0;
      top: 0;
      width: 6px;
      height: 100%;
      background: #ff467f;
    }

    .timeline-dot {
      position: absolute;
      left: -15px;
      width: 36px;
      height: 36px;
      background: #fff;
      border: 6px solid #ff467f;
      border-radius: 50%;
    }
    @media (max-width: 800px) {
      .timeline-dot {
        left: -12px;
        width: 30px;
        height: 30px;
      }
    }

    .MakingOf-connector-section {
      position: relative;
      padding: 115px 0 0;
    }
    @media (max-width: 800px) {
      .MakingOf-connector-section {
        padding-top: 65px;
      }
    }

    .MakingOf-connector-section--last .timeline-line {
      height: 115px;
    }
    @media (max-width: 800px) {
      .MakingOf-connector-section--last .timeline-line {
        height: 80px;
      }
    }

    .MakingOf-masonry-layout {
      display: flex;
      margin-left: -30px;
      margin-bottom: -30px;
    }
    .MakingOf-masonry-layout_column {
      width: 50%;
      padding-left: 30px;
    }
    @media (max-width: 1000px) {
      .MakingOf-masonry-layout {
        flex-direction: column;
        margin-left: 0;
      }
      .MakingOf-masonry-layout_column {
        width: auto;
        padding-left: 0;
      }
    }

    @media (max-width: 1000px) {
      .MakingOf-masonry-layout_column:nth-child(1) > .MakingOf-masonry-layout_column_item:nth-child(odd) { order: 1; }
      .MakingOf-masonry-layout_column:nth-child(1) > .MakingOf-masonry-layout_column_item:nth-child(even) { order: 3; }
      .MakingOf-masonry-layout_column:nth-child(2) > .MakingOf-masonry-layout_column_item:nth-child(odd) { order: 2; }
      .MakingOf-masonry-layout_column:nth-child(2) > .MakingOf-masonry-layout_column_item:nth-child(even) { order: 4; }
    }

    .MakingOf-masonry-layout_column_item {
      margin-bottom: 30px;
    }

    .MakingOf-section-head {
      margin-bottom: 20px;
    }

    .MakingOf-section-heading {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      line-height: 33px;
      text-transform: uppercase;
      color: #000000;
      margin-bottom: 10px;
    }
    @media (max-width: 700px) {
      .MakingOf-section-heading {
        font-size: 32px;
        line-height: 32px;
      }
    }

    .MakingOf-section-badge {
      font-weight: 900;
      font-size: 14px;
      line-height: 16px;
      text-transform: uppercase;
      color: #FFFFFF;
      padding: 10px 20px;
      border-radius: 99px;
      background: #ff467f;
      display: inline-flex;
    }

    .MakingOf-text {
      font-weight: 500;
      font-size: 18px;
      line-height: 36px;
      color: #000000;
    }
    @media (max-width: 700px) {
      .MakingOf-text {
        font-size: 16px;
        line-height: 32px;
      }
    }

    .MakingOf-media-box {
      border: 1px solid #DBDBDB;
      border-radius: 10px;
      overflow: hidden;
    }

    .MakingOf-media-box_media img {
      width: 100%;
      height: auto;
      display: block;
    }

    .MakingOf-media-box_caption {
      border-top: 1px solid #DBDBDB;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      text-align: center;
      color: #000000;
      padding: 10px 15px;
    }
    @media (max-width: 700px) {
      .MakingOf-media-box_caption {
        font-size: 14px;
      }
    }

    .MakingOf-stat-box {
      border: 1px solid #DBDBDB;
      border-radius: 10px;
      padding: 60px 30px;
    }

    .MakingOf-stat-box_heading {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 60px;
      line-height: 60px;
      text-align: center;
      text-transform: uppercase;
      color: #ff467f;
      margin-bottom: 8px;
    }

    .MakingOf-stat-box_text {
      font-weight: 500;
      font-size: 24px;
      line-height: 36px;
      text-align: center;
      color: #000000;
    }

    .MakingOf-stat-box_text--compact {
      font-size: 18px;
      line-height: 36px;
    }

    @media (max-width: 700px) {
      .MakingOf-stat-box {
        padding: 40px 15px;
      }
      .MakingOf-stat-box_heading {
        font-size: 42px;
        line-height: 42px;
      }
      .MakingOf-stat-box_text {
        font-size: 16px;
        line-height: 24px;
      }
    }

    .MakingOf-footer-image-positioning {
      padding: 60px 0 100px 0;
    }

    .MakingOf-full-width-media {
      border-radius: 10px;
      overflow: hidden;
      padding: 100px 40px;
      background: #ff467f no-repeat top center;
      background-size: 100% auto;
    }
    @media (max-width: 800px) {
      .MakingOf-full-width-media {
        padding: 70px 30px;
      }
    }
    @media (max-width: 500px) {
      .MakingOf-full-width-media {
        padding: 50px 20px;
      }
    }

    .MakingOf-full-width-media-heading {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      line-height: 42px;
      text-transform: uppercase;
      color: #FFFFFF;
    }
    @media (max-width: 700px) {
      .MakingOf-full-width-media-heading {
        font-size: 32px;
        line-height: 32px;
      }
    }

    .MakingOf-full-width-media-text {
      font-size: 18px;
      line-height: 36px;
      color: #FFFFFF;
      margin-top: 30px;
    }
    @media (max-width: 700px) {
      .MakingOf-full-width-media-text {
        font-size: 16px;
        line-height: 32px;
      }
    }
  

/* ----- SHIPPING-POLICY PAGE (pages_shipping-policy.html) ----- */

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #ffffff;
      color: #111;
      line-height: 1.6;
    }

    /* Terms Banner – 最高层显示 */
    .terms-header {
      position: relative;
      background: #ff467f;
      padding: 120px 40px 100px;
      text-align: center;
      overflow: hidden;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 768px) {
      .terms-header {
        padding: 100px 20px 80px;
      }
    }
    .terms-header-left {
      position: absolute;
      left: 40px;
      top: 40px;
      z-index: 20;
    }
    @media (max-width: 768px) {
      .terms-header-left {
        left: 20px;
        top: 30px;
      }
    }
    .terms-logo {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 42px;
      color: #fff;
    }
    .terms-subtitle {
      font-size: 13px;
      color: #ff467f;
      background-color: #fff;
      padding: 4px 10px;
      border-radius: 4px;
      display: inline-block;
      margin-top: 4px;
      font-weight: 600;
    }
    .terms-header h1 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 90px;
      color: #fff;
      margin: 60px 0 0;
      text-transform: uppercase;
      line-height: 1;
      position: relative;
      z-index: 15;
    }
    @media (max-width: 768px) {
      .terms-header h1 {
        font-size: 70px;
      }
    }
    .terms-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 80px;
      background: #ffffff;
      clip-path: ellipse(70% 100% at 50% 100%);
      z-index: 5;
    }

    .terms-content-wrapper {
      position: relative;
      margin-top: -60px;
      z-index: 1;
    }
    @media (max-width: 768px) {
      .terms-content-wrapper {
        margin-top: -40px;
      }
    }

    .terms-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 80px 20px 100px;
      background: #fff;
    }
    @media (max-width: 768px) {
      .terms-container {
        padding: 60px 20px 80px;
      }
    }

    .terms-h5 {
      font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
      font-size: 32px;
      color: #111;
      margin: 40px 0 20px;
    }

    .terms-p {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .terms-ul {
      padding-left: 30px;
      margin-bottom: 20px;
    }

    .terms-ul li {
      margin-bottom: 10px;
    }

    .terms-a {
      color: #ff467f;
      text-decoration: underline;
    }

    .terms-strong {
      color: #111;
    }
  


/* ----- SINGLE PRODUCT PAGE (products_emperors-horse.html) ----- */

  @font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-style: normal;
    src: url("https://youtooz.com/cdn/shop/t/8/assets/inter-upright.var.woff2") format("woff2 supports variations(gvar)"),
         url("https://youtooz.com/cdn/shop/t/8/assets/inter-upright.var.woff2") format("woff2-variations");
  }
  @font-face {
    font-family: 'Luckiest Guy';
    font-style: normal;
    font-weight: 400;
    src: url('https://youtooz.com/cdn/shop/t/8/assets/luckiestguy-fixed1.woff') format('woff');
  }

  .custom-product-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .custom-product-page {
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    transition: background 0.5s ease;
  }
  
  /* Modal Background */
  .modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b9d 100%);
    z-index: 1;
    transition: background 0.5s ease;
  }
  
  /* Modal Container */
  .modal-container {
    position: relative;
    z-index: 2;
    width: fit-content;
    max-width: 1350px;
    height: 890px;
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 0;
    clip-path: polygon(0 8px, 100% 2px, 100% calc(100% - 8px), 0 100%);
    transition: background 0.5s ease;
  }
  
  @media screen and (max-width: 989px) {
    .modal-container {
      flex-direction: column;
      height: auto;
      max-height: 90vh;
      width: 100%;
    }
  }
  
  /* Left Side - Gallery */
  .modal-left {
    width: 453px;
    background: #f9f9f9;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px;
    overflow: visible;
    transition: background 0.5s ease;
  }
  
  @media screen and (max-width: 989px) {
    .modal-left {
      width: 100%;
      padding: 20px;
    }
  }
  
  /* Gallery Main */
  .gallery-container {
    position: relative;
    flex: 1;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
  }
  
  .gallery-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .gallery-main img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }
  
  /* Navigation Arrows */
  .gallery-nav {
    position: absolute;
    width: 50px;
    height: 50px;
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 15;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .gallery-nav::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    clip-path: polygon(5% 0, 95% 5%, 100% 90%, 0 100%);
    z-index: -1;
  }
  
  .gallery-nav.prev {
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .gallery-nav.next {
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .gallery-nav:hover::before {
    background: #fe467c;
    clip-path: polygon(10% 5%, 90% 0, 100% 100%, 0 95%);
  }
  
  /* Thumbnails */
  .gallery-thumbs {
    display: flex;
    gap: 12px;
    list-style: none;
    overflow-x: auto;
  }
  
  .gallery-thumb {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s;
    background: #f5f5f5;
    flex-shrink: 0;
  }
  
  .gallery-thumb.active {
    border-color: #fe467c;
  }
  
  .gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Right Side - Content */
  .modal-right {
    width: 897px;
    padding: 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: background 0.5s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  
  .modal-right::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 897px;
    height: 200px;
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b9d 100%);
    z-index: -1;
    transition: background 0.5s ease;
    pointer-events: none;
  }
  
  @media screen and (max-width: 989px) {
    .modal-right {
      width: 100%;
      padding: 20px;
    }
  }
  
  .modal-right::-webkit-scrollbar {
    width: 8px;
  }
  
  .modal-right::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  .modal-right::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
  }
  
  .modal-right::-webkit-scrollbar-thumb:hover {
    background: #999;
  }
  
  /* Close Button */
  .modal-close {
    position: absolute;
    top: 40px;
    right: 60px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #1e1e1e;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: bold;
  }
  
  .modal-close::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    clip-path: polygon(5% 0, 95% 5%, 100% 90%, 0 100%);
    z-index: 0;
  }
  
  .modal-close::after {
    content: "✕";
    position: absolute;
    z-index: 1;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-close:hover::before {
    background: #1e1e1e;
    clip-path: polygon(10% 5%, 90% 0, 100% 100%, 0 95%);
  }
  
  .modal-close:hover {
    color: #fff;
  }
  
  /* Product Category */
  .product-category {
    color: #999;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }
  
  .product-category a {
    color: inherit;
    text-decoration: none;
  }
  
  /* Product Header */
  .product-header {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  
  /* Product Name */
  .product-name {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 48px;
    font-weight: 400;
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    line-height: 1.1;
    text-transform: capitalize;
    flex: 1;
    transition: background 0.5s ease;
  }
  
  @media screen and (max-width: 989px) {
    .product-name {
      font-size: 32px;
    }
  }
  
  /* Product Price */
  .product-price {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 36px;
    font-weight: 400;
    color: #333;
    margin-bottom: 0;
    white-space: nowrap;
  }
  
  @media screen and (max-width: 989px) {
    .product-price {
      font-size: 28px;
    }
  }
  
  /* Variants */
  .variants-container {
    margin-bottom: 0;
    flex: 1;
  }
  
  .variants-action-wrapper {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
  }
  
  .variants-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 12px;
    letter-spacing: 1px;
  }
  
  .variants {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  
  .variant-option {
    flex: 1;
    min-width: 200px;
    padding: 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.03);
  }
  
  .variant-option.active {
    border-color: #fe467c;
    background: #fff;
    box-shadow: 0px 5px 10px rgba(254, 70, 124, 0.15);
  }
  
  .variant-option:hover {
    border-color: #fe467c;
    box-shadow: 0px 5px 10px rgba(254, 70, 124, 0.1);
  }
  
  .variant-image {
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  
  .variant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .variant-info {
    flex: 1;
  }
  
  .variant-name {
    font-size: 12px;
    color: #999;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  
  .variant-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }
  
  /* Quantity & Button */
  .action-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 0;
    align-items: stretch;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .quantity-selector {
    display: flex;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 25px;
    width: fit-content;
    background: #fff;
    padding: 0 12px;
    height: 48px;
  }
  
  .qty-btn {
    display: none;
  }
  
  .qty-input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
  }
  
  /* Style number input arrows */
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: auto;
    margin: 0;
    width: 20px;
  }
  
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button {
    opacity: 1;
  }
  
  .add-to-cart {
    padding: 0 32px;
    height: 48px;
    background: #fe467c;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0px 5px 10px rgba(254, 70, 124, 0.2);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .add-to-cart:hover {
    background: #e03e70;
    box-shadow: 0px 8px 15px rgba(254, 70, 124, 0.3);
  }
  
  /* Pre-order Info */
  .pre-order-info {
    background: #fff;
    padding: 16px;
    border-left: 4px solid #fe467c;
    margin-bottom: 24px;
    border-radius: 6px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.03);
  }
  
  .pre-order-label {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 16px;
    color: #1e1e1e;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
  }
  
  .pre-order-date {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #fe467c;
  }
  
  /* Ships Worldwide Banner */
  .ships-banner {
    background: linear-gradient(90deg, #ff6b9d 0%, #ff8c42 100%);
    color: #fff;
    padding: 24px 40px;
    margin-bottom: 32px;
    margin-top: 24px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: background 0.5s ease;
    position: relative;
  }
  
  .ships-banner span {
    display: inline-block;
    white-space: nowrap;
  }
  
  .ships-banner-scroll {
    animation: ships-scroll 16s linear infinite;
  }
  
  @keyframes ships-scroll {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
      opacity: 1;
    }
    100% {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
  
  /* Product Details */
  .product-details {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #f0f0f0;
  }
  
  .details-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #efefef;
  }
  
  .details-row:last-child {
    border-bottom: none;
  }
  
  .detail-label {
    font-size: 12px;
    color: #ccc;
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .detail-value {
    font-size: 13px;
    font-weight: 600;
    color: #333;
  }
  
  /* Description */
  .description {
    margin-bottom: 32px;
  }
  
  .description h2 {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #fe467c;
    margin-bottom: 16px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
  }
  
  .description p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 16px;
  }
  
  .description h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e;
    margin-top: 24px;
    margin-bottom: 12px;
    text-transform: capitalize;
  }
  
  /* Links */
  .description a {
    color: #fe467c;
    text-decoration: none;
    font-weight: 500;
  }
  
  .description a:hover {
    text-decoration: underline;
  }
  
  /* Copyright */
  .copyright {
    font-size: 12px;
    color: #999;
    margin-top: 16px;
  }
  
  /* Collection */
  .collection-section {
    margin-top: 0px;
    padding-top: 0px;
    border-top: 1px solid #efefef;
  }
  
  .collection-title {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #1e1e1e;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  @media screen and (max-width: 768px) {
    .collection-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }
  
  @media screen and (max-width: 480px) {
    .collection-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .product-card {
    background: #fff;
    position: relative;
    overflow: visible;
    cursor: pointer;
    transition: none;
    padding-bottom: 20px;
  }
  
  .product-card:hover {
    transform: none;
  }
  
  .card-image {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    position: relative;
    overflow: visible;
    --tl: 28px;
    --tr: 12px;
    --br: 2px;
    --bl: 2px;
    clip-path: polygon(0 var(--tl), calc(100% - var(--tr)) 0, 100% calc(100% - var(--br)), var(--bl) 100%);
    transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    overflow: hidden;
  }
  
  .product-card:hover .card-image {
    --tl: 20px;
    --tr: 10px;
    --br: 15px;
    --bl: 30px;
  }
  
  .collection-grid > :nth-child(3n+2) .card-image {
    --tl: 1px;
    --tr: 30px;
    --br: 2px;
    --bl: 2px;
  }
  
  .collection-grid > :nth-child(3n+2):hover .card-image {
    --tl: 10px;
    --tr: 20px;
    --br: 30px;
    --bl: 15px;
  }
  
  .card-image img {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
    transform: scale(0.8);
    transition: transform 0.65s cubic-bezier(0.2, 0, 0.2, 1);
    object-fit: contain;
  }
  
  .product-card:hover .card-image img {
    transform: scale(0.9);
  }
  
  .card-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(138, 43, 226, 0.85);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  
  .card-content {
    padding: 0 16px 16px 16px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
    position: relative;
  }
  
  .card-category {
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0;
    display: block;
  }

  .card-name {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-align: center;
    word-break: break-word;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e1e1e;
  }

  .card-price {
    font-size: 1.1rem;
    font-weight: 600;
    color: #666;
    margin-top: 6px;
  }
  
  .card-button {
    color: white;
    border-radius: 14px;
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    width: 150px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: filter 0.3s ease;
    z-index: 5;
    background: linear-gradient(90deg, #ff8c42 0%, #ff6b9d 100%);
  }

  .product-card:hover .card-button {
    filter: brightness(1.1);
  }

  /* Success Toast */
  .success-toast {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    animation: slideUp 0.3s ease;
  }

  .success-toast.active {
    display: flex;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .toast-content {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
  }

  .toast-text {
    font-weight: 600;
    color: #333;
  }

  .toast-buttons {
    display: flex;
    gap: 12px;
  }

  .goto-cart-btn {
    padding: 12px 24px;
    background: #fff;
    color: #333;
    border: 2px solid #ddd;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
  }

  .goto-cart-btn:hover {
    background: #f5f5f5;
    border-color: #999;
  }

  .close-toast-btn {
    padding: 12px 24px;
    background: #fe467c;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
  }

  .close-toast-btn:hover {
    background: #e03e70;
  }

.auto-slider-track {
    display: flex;
    gap: 32px;
    animation: scroll 45s linear infinite;
    width: max-content;
    align-items: flex-end;
    padding: 30px 0; /* 防止卡片被外层裁切容器剪掉顶部/底部 */
}
.auto-slider-section h2 {
    font-family: "Luckiest Guy", cursive !important;
    font-size: 4.2rem !important;       
    font-weight: 400;
    letter-spacing: 2px;
    text-shadow: none;
    color: #ffffff;
}
.auto-slide-card {
    flex: 0 0 auto;
    width: var(--card-w);
    background: white;
    border: 6px solid white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.15);
    transition: transform .3s;
    margin-top: calc(var(--wave,0) * -1px);
    z-index: calc(200 + var(--wave,0));

    /* 果冻入场 */
    opacity: 0;
    transform: scale(0.5) translateY(50px);
    animation: jellyPop 2.4s cubic-bezier(0.34, 0.02, 0.22, 1.4) forwards;
    animation-delay: calc(var(--index) * 1s);
}

.auto-slide-card:hover { transform: translateY(-10px); }

.auto-img { width: var(--card-w); height: var(--card-h); background:#fff; overflow:hidden; }
.auto-img img.cover { width:100%; height:100%; object-fit:cover; }

.placeholder { width:100%; height:100%; background:#eee; display:grid; place-items:center; color:#999; font-size:1.1rem; }

.auto-info { padding:16px 12px 20px; text-align:center; font-family:'Fredoka',sans-serif; }
.auto-info h4 { font-size:1.35rem; font-weight:700; margin:0 0 8px; line-height:1.2; }
.auto-info p { font-weight:700; color:#ff466f; font-size:1.3rem; }

@keyframes jellyPop {
    0%   { opacity:0; transform:scale(0.5) translateY(50px); }
    40%  { opacity:1; transform:scale(1.3) translateY(-50px); }
    65%  { transform:scale(0.96) translateY(5px); }
    80%  { transform:scale(1.06) translateY(-3px); }
    92%  { transform:scale(0.98) translateY(2px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}

@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.auto-slider-track:hover { animation-play-state: paused; }

@media (max-width:max-width: 768px) {
    .auto-slider-track { gap:20px; animation-duration:55s; }
    .auto-slide-card {
        --card-w: calc(var(--card-w) * 0.85);
        --card-h: calc(var(--card-h) * 0.85);
    }
}
    /* Modal 遮罩 */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s;
        padding: 20px;
        overflow-y: auto;
    }
    .modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .modal-content {
        position: relative;
        background: #ffffff;
        border: none;
        border-radius: 40px;
        max-width: 1400px;
        width: 100%;
        max-height: 95vh;
        overflow-y: auto;
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        padding: 40px;
    }
    .modal-close {
        position: absolute;
        top: 20px;
        right: 28px;
        font-size: 52px;
        cursor: pointer;
        z-index: 10;
        color: #ff466f;
        line-height: 1;
        opacity: 0.8;
        transition: opacity 0.3s;
    }
    .modal-close:hover {
        opacity: 1;
    }



/* ==================== 搜索框和排序工具栏样式 ==================== */
.toolbar-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 32px;
    max-width: 1600px;
    margin: 40px auto 60px auto !important;
    padding: 0 5%;
    position: relative;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;           /* 小屏幕自动换行 */
}
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 12px;
}

.search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.search-icon.hidden {
    opacity: 0;
}

.search-input {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    padding: 10px 48px 10px 20px;
    border: 3px solid white;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.2s;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    width: 280px;
    height: 44px;
    color: #333;
}

.search-input:focus {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

/* ==================== 筛选器样式 ==================== */
.filter-section {
    margin-bottom: 32px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.filter-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-tabs.hidden {
    display: none;
}

.expand-btn {
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    padding: 10px 24px;
    border: 3px solid white;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    color: #333;
}

.expand-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}

.expand-btn svg {
    transition: transform 0.3s;
    color: #333;
}

/* ==================== 排序样式 ==================== */
.sort-section {
    display: flex;
    align-items: center;
    padding: 6px 12px;
}

.sort-select {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    padding: 10px 20px;
    border: 3px solid white;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    font-weight: 600;
    height: 44px;
    width: 280px;
    color: #333;
}

.sort-select:focus {
    outline: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}


/* ==================== 无结果提示 ==================== */
.no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    opacity: 0.6;
    font-size: 1.2rem;
    color: #ffffff;
}


/* ==================== 基础样式 ==================== */
.section-template--17922933686320__vote_for_design_djEmYE {
--bg: linear-gradient(135deg, #ff466f 0%, #e6234f 100%);
--ink: #ffffff;
--frame: #ffffff;
--pucky: #ff466f;
--molly: #ff466f;
--card-bg: #ffffff;
}
.section-template--17922933686320__vote_for_design_djEmYE * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.section-template--17922933686320__vote_for_design_djEmYE {
position: relative;
background: var(--bg);
font-family: 'Nunito', sans-serif;
color: var(--ink);
min-height: 100vh;
}
.view-container {
display: none;
}
.view-container.active {
display: block;
}
header {
position: relative;
z-index: 100;
padding: 32px 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Fredoka', sans-serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--ink);
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 48px;
height: 48px;
background: white;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2);
}
.nav-menu {
display: flex;
gap: 28px;
list-style: none;
}
.nav-menu a {
font-family: 'Fredoka', sans-serif;
font-size: 1.1rem;
color: var(--ink);
text-decoration: none;
padding: 10px 20px;
border-radius: 20px;
transition: all 0.3s;
font-weight: 600;
}
.nav-menu a:hover {
background: white;
color: #ff466f;
transform: translateY(-2px);
}
.hero {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 10px 5% 0;
}

.hero h1 {
    font-family: "Luckiest Guy", cursive !important;
    font-size: 6.5rem !important;
    font-weight: 400;
    letter-spacing: 1.1;
    margin-bottom: 20px;
    text-shadow: none;
    color: #ffffff;
}
.hero p {
font-size: 1.35rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto 32px;
color: #ffffff;
}
.filter-tab {
font-family: 'Fredoka', sans-serif;
font-size: 1.1rem;
padding: 12px 32px;
border: 4px solid white;
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s;
font-weight: 600;
color: #333;
}
.filter-tab:hover {
transform: translateY(-4px);
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}
.filter-tab.active {
background: white;
color: #ff466f;
}
.gallery {
position: relative;
z-index: 10;
padding: 0 5% 80px;
max-width: 1600px;
margin: 0 auto;
margin-top: 40px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
justify-items: center;
}
.design-card {
background: var(--card-bg);
border: 6px solid white;
border-radius: 28px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.15);
transition: all 0.3s;
text-decoration: none;
color: inherit;
display: block;
width: 100%;
max-width: 380px;
}
.design-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 0 rgba(0, 0, 0, 0.15);
}
.card-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #ffffff;
    border-bottom: 6px solid white;
    overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
}
.design-card:hover .card-image img {
transform: scale(1.08);
}
.placeholder-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #e5e5e5;
color: #999;
}
.card-content {
padding: 20px 24px 24px;
}
.card-title,
.auto-info h4 {
    font-family: "Luckiest Guy", cursive !important;
    font-size: 2rem !important;
    letter-spacing: 1px;
    color: #333;
}
.card-designer {
font-size: 1rem;
opacity: 0.7;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 6px;
color: #333;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 3px solid rgba(0, 0, 0, 0.08);
}
.like-count {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.1rem;
color: #333;
}
.heart-icon::before {
content: '♥';
font-size: 24px;
color: #ff466f;
}
.view-badge {
font-family: 'Fredoka', sans-serif;
font-size: 0.9rem;
padding: 6px 16px;
background: #ff466f;
color: white;
border-radius: 16px;
font-weight: 600;
}
.back-btn {
position: fixed;
top: 24px;
left: 24px;
z-index: 1000;
width: 56px;
height: 56px;
background: white;
border: 5px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
transition: all 0.3s;
text-decoration: none;
color: #ff466f;
font-size: 1.8rem;
font-weight: bold;
}
.back-btn:hover {
transform: translateY(-4px);
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.15);
}
.detail-container {
position: relative;
z-index: 10;
max-width: 1400px;
margin: 0 auto;
padding: 100px 5% 80px;
}
.detail-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.image-section {
position: sticky;
top: 100px;
}
.main-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #ffffff;
    border: 8px solid white;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 16px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 24px;
}
.main-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.thumbnail {
    aspect-ratio: 1/1;
    background: #ffffff;
    border: 4px solid white;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}
.thumbnail:hover {
transform: translateY(-4px);
box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1);
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-section {
background: white;
border: 6px solid white;
border-radius: 32px;
padding: 48px;
box-shadow: 0 12px 0 rgba(0, 0, 0, 0.15);
}
.design-title {
font-family: 'Fredoka', sans-serif;
font-size: 3.2rem;
font-weight: 700;
margin-bottom: 16px;
color: #333;
}
.designer-info {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 4px solid rgba(0, 0, 0, 0.08);
}
.designer-avatar {
width: 56px;
height: 56px;
background: #ff466f;
border: 4px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
}
.designer-details h3 {
font-family: 'Fredoka', sans-serif;
font-size: 1.3rem;
color: #333;
}
.designer-details p {
opacity: 0.6;
font-size: 0.95rem;
color: #333;
}
.stats-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 32px;
}
.stat-item {
text-align: center;
padding: 20px;
background: #f9f9f9;
border: 4px solid white;
border-radius: 20px;
}
.stat-number {
font-family: 'Fredoka', sans-serif;
font-size: 2rem;
font-weight: 700;
display: block;
margin-bottom: 6px;
color: #ff466f;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.7;
font-weight: 600;
color: #333;
}
.description {
margin-bottom: 32px;
}
.description h4 {
font-family: 'Fredoka', sans-serif;
font-size: 1.4rem;
margin-bottom: 12px;
color: #333;
}
.description p {
line-height: 1.7;
font-size: 1.1rem;
opacity: 0.85;
color: #333;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.tag {
font-family: 'Fredoka', sans-serif;
padding: 10px 24px;
background: #f9f9f9;
border: 3px solid white;
border-radius: 20px;
font-size: 0.95rem;
font-weight: 600;
color: #333;
}
.action-buttons {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.btn {
font-family: 'Fredoka', sans-serif;
padding: 18px 32px;
border: none;
border-radius: 24px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-vote {
background: #ff466f;
color: white;
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
}
.btn-vote:hover {
transform: translateY(-4px);
box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
}
.btn-secondary {
background: white;
color: #ff466f;
border: 4px solid white;
box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 9px 0 rgba(0, 0, 0, 0.1);
}
.related-section {
margin-top: 80px;
}
.section-title {
font-family: 'Fredoka', sans-serif;
font-size: 2.4rem;
text-align: center;
margin-bottom: 48px;
color: white;
}
.related-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 28px;
justify-items: center;
}
.related-card {
background: white;
border: 5px solid white;
border-radius: 24px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
transition: all 0.3s;
text-decoration: none;
color: inherit;
width: 100%;
max-width: 260px;
}
.related-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 0 rgba(0, 0, 0, 0.15);
}
.related-image {
    width: 100%;
    aspect-ratio: 1/1;
    background: #eae6df;
    border-bottom: 5px solid white;
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-info {
padding: 16px 20px;
}
.related-title {
font-family: 'Fredoka', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
color: #333;
}
.related-likes {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: #ff466f;
}
@media (max-width: 1400px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
.related-grid {
    grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.detail-layout {
    grid-template-columns: 1fr;
    gap: 40px;
}

.image-section {
    position: relative;
    top: 0;
}

.related-grid {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
    .search-box,
    .sort-section {
        width: 100%;
    }
    
    .search-input,
    .sort-select {
        width: 100%;
    }
}

@media (max-width: 480px) {
.gallery-grid {
grid-template-columns: 1fr;
}
.related-grid {
    grid-template-columns: 1fr;
}
}

/* ==========================================================
   PRODUCT DETAIL PAGE (custom-product-page)
   1:1 from opjoys.cn static gold-standard: products/emperors-horse.html
   ========================================================== */
.custom-product-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.custom-product-page {
    font-family: 'Inter var', Helvetica, system-ui, sans-serif;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding: 20px;
    position: relative;
    transition: background 0.5s ease;
}

.custom-product-page .modal-bg {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 99%;
    background: linear-gradient(135deg, #ff8c42 0%, #ff6b9d 100%);
    z-index: 1;
    transition: background 0.5s ease;
    pointer-events: none;
}

.custom-product-page .modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 100px);
    max-height: 900px;
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 0;
    clip-path: polygon(0 8px, 100% 2px, 100% calc(100% - 8px), 0 100%);
    transition: background 0.5s ease;
    margin: 0 auto;
}

@media screen and (max-width: 989px) {
    .custom-product-page .modal-container {
        flex-direction: column;
        height: auto;
        max-height: none;
        width: 100%;
    }
}

.custom-product-page .modal-left {
    width: 453px;
    background: #f9f9f9;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px;
    overflow: visible;
    transition: background 0.5s ease;
    flex-shrink: 0;
}

@media screen and (max-width: 989px) {
    .custom-product-page .modal-left {
        width: 100%;
        padding: 20px;
    }
}

.custom-product-page .gallery-container {
    position: relative;
    flex: 1;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.custom-product-page .gallery-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-product-page .gallery-main img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.custom-product-page .modal-right {
    flex: 1;
    min-width: 0;
    padding: 40px 60px 40px 40px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    transition: background 0.5s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 989px) {
    .custom-product-page .modal-right {
        width: 100%;
        padding: 20px;
    }
}

.custom-product-page .modal-right::-webkit-scrollbar {
    width: 8px;
}

.custom-product-page .modal-right::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-product-page .modal-right::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 4px;
}

.custom-product-page .modal-right::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.custom-product-page .modal-close {
    position: absolute;
    top: 40px;
    right: 60px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: #1e1e1e;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: bold;
}

.custom-product-page .modal-close::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    clip-path: polygon(5% 0, 95% 5%, 100% 90%, 0 100%);
    z-index: 0;
}

.custom-product-page .modal-close::after {
    content: "✕";
    position: absolute;
    z-index: 1;
    color: inherit;
    font-size: 28px;
    line-height: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-product-page .modal-close:hover::before {
    background: #1e1e1e;
    clip-path: polygon(10% 5%, 90% 0, 100% 100%, 0 95%);
}

.custom-product-page .modal-close:hover {
    color: #fff;
}

.custom-product-page .product-category {
    color: #999;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.custom-product-page .product-category a {
    color: inherit;
    text-decoration: none;
}

.custom-product-page .product-header {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.custom-product-page .product-name {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.1;
    text-transform: capitalize;
    flex: 1;
    transition: background 0.5s ease;
}

@media screen and (max-width: 989px) {
    .custom-product-page .product-name {
        font-size: 32px;
    }
}

.custom-product-page .product-badge-custom {
    display: inline-block;
    padding: 6px 14px;
    background: #fe467c;
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.custom-product-page .ships-banner {
    color: #fff;
    padding: 24px 40px;
    margin-bottom: 32px;
    margin-top: 24px;
    border-radius: 4px;
    text-align: center;
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: background 0.5s ease;
    position: relative;
    /* Override default static-text ships-banner from front-page.php */
    flex-direction: row;
    height: auto;
    min-height: auto;
}

.custom-product-page .ships-banner span {
    display: inline-block;
    white-space: nowrap;
}

.custom-product-page .ships-banner-scroll {
    animation: ships-scroll 16s linear infinite;
}

@keyframes ships-scroll {
    0% { transform: translateX(100%); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}

.custom-product-page .description {
    margin-bottom: 32px;
}

.custom-product-page .description h2 {
    font-family: 'Luckiest Guy', Helvetica, system-ui, sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #fe467c;
    margin-bottom: 16px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.custom-product-page .description p {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 16px;
}

.custom-product-page .description h3 {
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e;
    margin-top: 24px;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.custom-product-page .description a {
    color: #fe467c;
    text-decoration: none;
    font-weight: 500;
}

.custom-product-page .description a:hover {
    text-decoration: underline;
}

/* 移动端调整 */
@media screen and (max-width: 989px) {
    .custom-product-page {
        padding: 10px;
        min-height: auto;
    }
    .custom-product-page .modal-container {
        height: auto;
    }
    .custom-product-page .modal-right {
        max-height: none;
    }
    .custom-product-page .modal-close {
        top: 20px;
        right: 20px;
    }
}

/* ==========================================================
   HEADER-CUSTOM (1:1 from opjoys.com)
   ========================================================== */
.header-custom {
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-custom__inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}
.header-custom__logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
    flex-shrink: 0;
}
.header-custom__logo-img {
    height: 40px;
    width: auto;
    display: block;
    max-width: 180px;
    object-fit: contain;
}
.header-custom__nav {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}
.header-custom__nav > a,
.header-custom__nav .menu-item > a,
.header-custom__nav-item--has-dropdown > a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #232323;
    padding: 8px 0;
    text-decoration: none;
    transition: color 0.2s;
}
.header-custom__nav > a:hover,
.header-custom__nav .menu-item > a:hover,
.header-custom__nav-item--has-dropdown > a:hover {
    color: #ff466b;
}
.header-custom__nav-item--has-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.header-custom__nav-item--has-dropdown > a {
    cursor: pointer;
}
.header-custom__nav-item--has-dropdown > a:hover {
    color: #ff466b;
}
.header-custom__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    border-radius: 0 0 8px 8px;
    min-width: 200px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s;
    z-index: 50;
}
.header-custom__nav-item--has-dropdown:hover .header-custom__dropdown,
.header-custom__nav-item--has-dropdown.open .header-custom__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-custom__dropdown a {
    display: block;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #232323;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.header-custom__dropdown a:hover {
    background: #fafafa;
    color: #ff466b;
}
.header-custom__actions {
    display: none;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}
.header-custom__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 200px;
    padding: 8px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fafafa;
    box-sizing: border-box;
}
.header-custom__search form {
    flex: 1;
    display: flex;
}
.header-custom__search input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    color: #232323;
    min-width: 0;
}
.header-custom__search svg {
    width: 16px;
    height: 16px;
    color: #888;
    flex-shrink: 0;
}
.header-custom__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    color: #232323;
    text-decoration: none;
    transition: background 0.15s;
}
.header-custom__icon:hover {
    background: #f5f5f5;
}
.header-custom__icon svg {
    width: 22px;
    height: 22px;
}
.header-custom__cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #232323;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-custom__menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: #232323;
    cursor: pointer;
    padding: 4px;
}
.header-custom__menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================
   MOBILE-NAV (drawer, hidden by default)
   ========================================================== */
.header-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: #ffffff;
    padding: 80px 24px 24px;
    border-left: 1px solid #f0f0f0;
    box-shadow: -8px 0 32px rgba(0,0,0,0.10);
    overflow-y: auto;
    z-index: 200;
    box-sizing: border-box;
}
.header-mobile-nav::before {
    content: '¹5';
    position: absolute;
    top: 20px;
    right: 24px;
    color: #232323;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}
.header-mobile-nav a {
    display: block;
    color: #232323;
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s;
}
.header-mobile-nav a:hover {
    color: #ff466b;
}
.header-mobile-nav a:last-child {
    border-bottom: none;
}
.header-mobile-nav[hidden] {
    display: none !important;
}
.header-mobile-nav:not([hidden]) {
    display: block;
}
.header-mobile-nav:not([hidden])::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
    pointer-events: none;
}
.header-mobile-nav:not([hidden])::before {
    z-index: 2;
}

/* 移动端 / 平板：≤1024px */
@media (max-width: 1024px) {
    .header-custom__nav,
    .header-custom__search {
        display: none;
    }
    .header-custom__actions {
        display: flex;
        margin-left: auto;
    }
    .header-custom__actions .header-custom__icon {
        display: none;
    }
    .header-custom__menu-toggle {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
    }
    .header-custom__inner {
        gap: 16px;
        padding: 0 16px;
        height: 64px;
    }
    .header-custom__logo-img {
        height: 32px;
    }
}

.header-mobile-nav::before {
    content: none;
    display: none;
}
.header-mobile-nav:not([hidden])::after {
    content: none !important;
    display: none !important;
}
.header-mobile-nav__close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: #f7f7f7;
    color: #232323;
}
.header-mobile-nav ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-mobile-nav li {
    margin: 0;
    padding: 0;
}
.header-mobile-nav-backdrop {
    position: fixed;
    top: 0;
    right: min(320px, 85vw);
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000 !important;
    pointer-events: auto;
}
.header-mobile-nav {
    background: #ffffff !important;
    z-index: 10010 !important;
    pointer-events: auto;
    isolation: isolate;
}
.header-mobile-nav-backdrop[hidden] {
    display: none !important;
}
body.mobile-nav-open {
    overflow: hidden;
}

/* ==========================================================
   2026-06-24 修复包：双滚动条 / product-media 等高 / 静态页遮挡
   ========================================================== */

/* 1) 强制单一滚动条：禁止 html 单独滚动 */
html { overflow-y: auto !important; height: auto !important; }
body { overflow-y: visible !important; height: auto !important; position: relative; }

/* 2) product-media 统一高度（aspect-ratio 在部分布局下失效，加 max-height 兜底） */
.opjoys-collection .product-media,
.product-grid .product-media,
.product-item .product-media {
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 320px;
    min-height: 280px;
}
.opjoys-collection .product-media img,
.product-grid .product-media img,
.product-item .product-media img {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 3) 静态页顶部留出 sticky header 空间
 *    v1.0.48：根据用户反馈，FAQ 与 Contact 页面去掉 padding-top: 80px !important
 *             （内容容器自带 header），仅保留 shipping/about/privacy/blog 的 80px。
 *    v1.0.49：partner / insights 同样去掉 80px（用户反馈）。
 *    v1.0.54：blog 列表页也去掉 80px（.page-header 自带 80px 顶部 padding）。 */
.opjoys-static-page,
.opjoys-page-shipping-policy,
.opjoys-page-about,
.opjoys-page-privacy-policy {
    padding-top: 80px !important;
}
.opjoys-page-faq,
.opjoys-page-contact,
.opjoys-page-blog,
.page-template-page-partner .partner-page-wrap,
.page-template-page-insights .partner-page-wrap,
.partner-page-wrap.opjoys-static-page {
    padding-top: 0 !important;
}
.opjoys-static-page .terms-header,
.opjoys-static-page .about-header,
.opjoys-static-page .faq-opjoys-header,
.opjoys-static-page .contact-header,
.opjoys-static-page .shopify-policy__container,
.opjoys-static-page .blog-header,
.opjoys-static-page .privacy-header {
    padding-top: 40px !important;
    margin-top: 0 !important;
}

/* 4) community 页 modal 默认隐藏兜底（防止 CSS 解析失败时闪现） */
#designModal.modal-overlay {
    display: none !important;
}
#designModal.modal-overlay.active {
    display: flex !important;
}

/* ==========================================================
   2026-06-24 修复包 2：博客导入文章整体居中（v1.0.37 改用 block + auto margin 防弹方案）
   * 原 flex column + width:100% 在部分浏览器下会被识别为填满交叉轴，
   * 导致 align-items:center / margin:0 auto 都失效。改用 block 元素 +
   * 显式 width + margin-left/right:auto，是 W3C 规范保证的水平居中。
   ========================================================== */

/* 主容器：留出 sticky header 空间 + 内部内容水平居中
 * v1.0.65 Task 45：去掉 padding-top: 80px（sticky header 本身有高度，
 * 用户反馈 /2025/10/28/why-we-still-want-things-we-can-touch/ 顶部空白过大）。
 * 保留底 padding 80px 作为正文与 footer 的过渡。 */
.opjoys-single-post.opjoys-imported-article,
body.single-post .wrapper-body.opjoys-imported-article,
#MainContent.opjoys-imported-article {
    display: block !important;
    width: 100%;
    max-width: 100% !important;
    padding: 0 20px 80px !important;
    margin: 0 auto !important;
    text-align: center; /* 让 inline/inline-block 子元素 inherit 居中 */
    box-sizing: border-box;
}

/* v1.0.61 Task 40：导入型博客文章的特色图片横幅
 * 来源：page-blog.php 卡片里的封面图被 side-load 进 WP 媒体库后，
 *       作为 _thumbnail_id 设置。single.php 的 $is_import 分支渲染到这里。
 * 样式定位：贴在 .blog-custom-hero 上方，全宽 + 限高 + 圆角下沿，过渡到 hero 渐变。
 */
.opjoys-imported-article .blog-custom-cover {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 24px 0;
    box-sizing: border-box;
}
.opjoys-imported-article .blog-custom-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
    .opjoys-imported-article .blog-custom-cover { padding: 12px 12px 0; }
    .opjoys-imported-article .blog-custom-cover img { max-height: 320px; border-radius: 10px; }
}

/* v1.0.66 Task 46：/insights/ 页面的 .section 顶部留白收紧
 * 原 .section { padding: 96px 0 } 在 partner-style.css:259
 * insights 页面 hero 之后第一个 section 顶部 96px 太空，改 32px。
 * 不动 partner-style.css 是因为 .section 还被 /partner/ 等页面共用。 */
.opjoys-page-insights .section { padding-top: 32px; }

/* v1.0.66 Task 46：/insights/ 卡片可点击 */
.opjoys-page-insights .case[data-href] {
    cursor: pointer;
}
.opjoys-page-insights .case[data-href]:hover {
    border-color: var(--c-primary, #ff466b);
}

/* Hero 区块：标题 + 元信息 整体居中
 * v1.0.40：宽度改为 100%（全宽通栏），加渐变背景 + 微纹理增强视觉层次
 * v1.0.47：高度从 min-height:60vh + padding:100px 40px 收紧为 auto + 48px 32px，
 *          原因：用户反馈 hero 占据一屏以上，首屏看不到正文，无意义。
 * 内部 hero-content 仍以 1400px 容器约束，保证标题不超长一行 */
.opjoys-imported-article .blog-custom-hero {
    display: flex !important;
    flex-direction: column;
    justify-content: center;   /* 垂直居中 */
    align-items: center;       /* 水平居中 */
    min-height: auto;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 48px 32px !important;
    text-align: center;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at top, rgba(255, 70, 107, 0.10) 0%, rgba(255, 70, 107, 0) 60%),
        linear-gradient(180deg, #fff8fa 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(255, 70, 107, 0.12);
}
.opjoys-imported-article .blog-custom-hero-content {
    display: block !important;
    width: 100%;
    max-width: 1400px;        /* 跟 article 对齐，标题不让超长一行 */
    margin: 0 auto;
    text-align: center;
}
.opjoys-imported-article .blog-custom-hero h1 {
    display: block;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 1100px;        /* 长标题仍可读 */
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.opjoys-imported-article .blog-custom-meta {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    font-size: 14px;
    color: #888;
    letter-spacing: 0.3px;
}

/* 文章主体：水平居中（v1.0.39 max-width 800 → 1400，匹配 hero 宽度） */
.opjoys-imported-article .blog-custom-article,
body.single-post .blog-custom-article,
#MainContent .blog-custom-article {
    display: block !important;
    width: min(100%, 1400px) !important;
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px 100px !important;
    text-align: left;
    box-sizing: border-box;
}

/* 内容容器：居中 + 内边距 */
.opjoys-imported-article .blog-custom-article-content {
    display: block !important;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px !important;
    text-align: left;
    box-sizing: border-box;
}
.opjoys-imported-article .blog-custom-article-content > p,
.opjoys-imported-article .blog-custom-article-content > div {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 高亮引用块：居中 */
.opjoys-imported-article .blog-custom-highlight {
    display: block;
    width: 100%;
    margin: 28px auto !important;
    text-align: center;
    box-sizing: border-box;
}

/* 返回按钮：居中显示（block + fit-content + margin:auto，跨浏览器最稳） */
.opjoys-imported-article .blog-custom-back-btn {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 40px auto 0 !important;
    padding: 14px 32px !important;
    background: #ff466b !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s, transform 0.2s;
}
.opjoys-imported-article .blog-custom-back-btn:hover {
    background: #e6355a !important;
    transform: translateY(-2px);
}

/* 响应式：移动端缩小内边距 + hero 高度 + 字号 */
@media (max-width: 768px) {
    .opjoys-imported-article .blog-custom-hero {
        min-height: auto !important;
        padding: 32px 20px !important;
    }
    .opjoys-imported-article .blog-custom-hero h1 {
        font-size: clamp(26px, 7vw, 38px);
        margin-bottom: 16px;
    }
    .opjoys-imported-article .blog-custom-meta {
        gap: 12px;
        font-size: 13px;
    }
    .opjoys-imported-article .blog-custom-article {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 60px !important;
    }
    .opjoys-imported-article .blog-custom-article-content {
        padding: 30px 20px !important;
    }
}

/* 段落排版：阅读体验（line-height + 段间距） */
.opjoys-imported-article .blog-custom-article-content > p {
    font-size: 17px;
    line-height: 1.85 !important;
    margin: 0 0 24px !important;
    color: #2a2a2a;
}
.opjoys-imported-article .blog-custom-article-content > p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================
   v1.0.41 原生博客 .blog-detail 样式（与 imported 视觉对齐）
   ========================================================== */

/* 主容器：跟 .opjoys-imported-article 一样撑满视口 */
body.single-post .site-main {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
body.single-post .opjoys-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* hero 区：entry-header 改成全宽通栏 + 粉色渐变背景（跟 imported hero 一致）
 * v1.0.53 Task 32：原 min-height: 60vh + padding: 100px 40px 留白过大，
 *                 改为 min-height: auto + padding: 56px 24px，给标题/元信息留呼吸感即可。
 */
body.single-post .blog-detail .entry-header,
.opjoys-native-article .entry-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
    width: 100%;
    margin: 0;
    padding: 56px 24px;
    text-align: center;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at top, rgba(255, 70, 107, 0.10) 0%, rgba(255, 70, 107, 0) 60%),
        linear-gradient(180deg, #fff8fa 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(255, 70, 107, 0.12);
}
body.single-post .blog-detail .entry-header h1.entry-title {
    display: block;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 1100px;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    font-weight: 800;
}
body.single-post .blog-detail .entry-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    font-size: 14px;
    color: #888;
    letter-spacing: 0.3px;
}
body.single-post .blog-detail .entry-meta > * {
    display: inline-block;
}

/* 文章正文容器：限宽 720px 居中 + 内边距 */
body.single-post .blog-detail .entry-content,
.opjoys-native-article .entry-content {
    display: block;
    width: min(100%, 1400px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px 100px;
    box-sizing: border-box;
}
body.single-post .blog-detail .entry-content > *,
.opjoys-native-article .entry-content > * {
    display: block;
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
body.single-post .blog-detail .entry-content > p,
.opjoys-native-article .entry-content > p {
    font-size: 17px;
    line-height: 1.85;
    margin: 0 0 24px;
    color: #2a2a2a;
}
body.single-post .blog-detail .entry-content > p:last-child {
    margin-bottom: 0;
}
body.single-post .blog-detail .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px auto;
}

/* v1.0.67 Task 47：原生博客正文 h2/h3/ul/li 排版（与 imported 视觉对齐）
 * 背景：用 _migrate_insights_cases.php 导入的 12 篇 insights 文章正文里有
 * <h2>核心要点</h2> <ul><li>… 等，原来没专门样式，看起来很裸。 */
body.single-post .blog-detail .entry-content h2,
.opjoys-native-article .entry-content h2 {
    font-size: clamp(24px, 3vw, 30px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #1a1a1a;
    margin: 48px auto 20px;
    text-align: left;
}
body.single-post .blog-detail .entry-content h3,
.opjoys-native-article .entry-content h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #1a1a1a;
    margin: 36px auto 14px;
    text-align: left;
}
body.single-post .blog-detail .entry-content ul,
body.single-post .blog-detail .entry-content ol,
.opjoys-native-article .entry-content ul,
.opjoys-native-article .entry-content ol {
    margin: 0 auto 24px;
    padding-left: 24px;
    text-align: left;
}
body.single-post .blog-detail .entry-content ul li,
.opjoys-native-article .entry-content ul li {
    position: relative;
    list-style: none;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.75;
    color: #2a2a2a;
}
body.single-post .blog-detail .entry-content ul li::before,
.opjoys-native-article .entry-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff466b, #ff8aa6);
}
body.single-post .blog-detail .entry-content ol li,
.opjoys-native-article .entry-content ol li {
    font-size: 17px;
    line-height: 1.75;
    color: #2a2a2a;
    margin-bottom: 10px;
}
body.single-post .blog-detail .entry-content a,
.opjoys-native-article .entry-content a {
    color: #ff466b;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 70, 107, 0.4);
    transition: text-decoration-color 0.15s ease;
}
body.single-post .blog-detail .entry-content a:hover,
.opjoys-native-article .entry-content a:hover {
    text-decoration-color: #ff466b;
}
body.single-post .blog-detail .entry-content blockquote,
.opjoys-native-article .entry-content blockquote {
    margin: 32px auto;
    padding: 20px 28px;
    border-left: 4px solid #ff466b;
    background: #fff5f8;
    border-radius: 0 12px 12px 0;
    color: #5a3a44;
    font-size: 17px;
    line-height: 1.7;
    font-style: italic;
}

/* 文章 footer：标签居中显示 */
body.single-post .blog-detail .entry-footer {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 40px;
    text-align: center;
}
body.single-post .blog-detail .entry-footer:empty {
    display: none;
}
body.single-post .blog-detail .tags-links a {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px;
    background: #f5f5f7;
    color: #666;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}

/* 上下篇导航：限宽 + 居中 */
body.single-post .post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 30px 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}
body.single-post .post-navigation a {
    color: #ff466b;
    text-decoration: none;
    font-weight: 600;
}
body.single-post .post-navigation a:hover {
    text-decoration: underline;
}

/* 评论区域如果显示：限宽对齐 */
body.single-post .comments-area,
body.single-post #comments {
    max-width: 720px;
    margin: 0 auto 80px;
    padding: 0 40px;
}
/* v1.0.42 兜底：品牌博客站默认隐藏评论区（single.php 已不再调用 comments_template） */
body.single-post .comments-area,
body.single-post #comments,
body.single-post #respond {
    display: none !important;
}

/* 响应式：移动端
 * v1.0.53 Task 32：移动端同步收紧 entry-header（min-height 移除，padding 60→40px）
 */
@media (max-width: 768px) {
    body.single-post .blog-detail .entry-header {
        min-height: auto;
        padding: 40px 20px;
    }
    body.single-post .blog-detail .entry-header h1.entry-title {
        font-size: clamp(26px, 7vw, 38px);
        margin-bottom: 16px;
    }
    body.single-post .blog-detail .entry-meta {
        gap: 12px;
        font-size: 13px;
    }
    body.single-post .blog-detail .entry-content {
        padding: 40px 20px 60px;
    }
    body.single-post .blog-detail .entry-footer,
    body.single-post .post-navigation {
        padding: 20px;
    }
}

/* ==========================================================
   2026-06-24 修复包 3：FAQ 遮挡 / product modal-bg / 双滚动条
   ========================================================== */

/* Task 7: FAQ "我的订单需要帮助？" 被遮挡
   原因：.faq-container 有 margin: -60px auto 0（向上拉 60px 与粉色 header 重叠）
   + sticky header 80px + 上面 .faq-opjoys-header padding 100px
   方案：去掉负 margin，改为正值 margin + 加 padding-top */
.faq-container {
    margin: 0 auto !important;
    padding: 60px 20px 60px !important;
}
/* 第一个 h6 顶部留出更多空间，避免紧贴 sticky header */
.faq-container .faq-h6:first-child {
    margin-top: 60px !important;
}

/* Task 6: 商品详情页 .modal-bg width:99% —— 已在 line 5785 应用，
   但 99% 在部分视口下右侧会漏出 1% 白边。这里用更稳的方式：
   width:100vw + max-width:100% 保证既不溢出也不漏白 */
.custom-product-page .modal-bg {
    width: 100vw !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}
.custom-product-page {
    max-width: 100% !important;
    overflow-x: clip !important;
}

/* Task 8: plush-toy 等集合页双滚动条根治
   原因：line 7 html, body { overflow-x: hidden } 改为 overflow-x: clip 已修
   这里再加保险：所有可能产生二级滚动的容器都强制单一滚动 */
.opjoys-collection,
.opjoys-collection .wrapper-body,
body.opjoys-collection,
body.opjoys-collection > .wrapper-body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
}

/* Task 9 兜底：所有产品卡片图（不局限于 opjoys-collection）都限制 max-height */
.product-card .product-media,
.product-card .card-image,
.design-card .product-media {
    max-height: 320px;
}
.product-card .product-media img,
.product-card .card-image img {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================
   2026-06-24 修复包 4：Task 13 hero-action 隐藏
   * v1.0.48：追加 .hero-button（购买按钮本体），此前只隐藏了 .hero-action
   *          外层容器，但内部 .hero-button 仍然以 flex 形式可见。
   ========================================================== */
.hero-action,
.home-activity-products .hero-action,
.hero-actions,
.hero-action .hero-button,
.hero-button {
    display: none !important;
}

/* ==========================================================
   2026-06-24 修复包 5：Task 15 日期归档页 + 博客详情页润色
   问题：/2025/10/28/ 等日期归档页 .blog-grid / .blog-card 完全无 CSS，
         10 张卡片渲染成无样式纯文本列表；详情页 meta 分隔等细节缺失。
   ========================================================== */

/* 日期归档/博客列表：响应式网格 */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 48px auto 80px;
    padding: 0 24px;
}

/* 单张卡片：圆角 + 阴影 + hover 浮起 */
.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* 图片区：16:9 比例 + 无特色图时用渐变占位（不漏空白） */
.blog-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.blog-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #ffb3c1 0%, #ff6f91 50%, #ff466b 100%);
    overflow: hidden;
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

/* 标签 chip */
.blog-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #ff466b;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.4px;
}

/* 信息区 */
.blog-card-info {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.blog-card-title {
    font-family: 'Luckiest Guy', 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
}
.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-card-title a:hover {
    color: #ff466b;
}
.blog-card-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #999;
}
.blog-card-date,
.blog-card-username {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* page-header（标题区）渐变背景 + 大字号 */
.page-header {
    background: linear-gradient(180deg, #fff5f7 0%, #fff 100%);
    padding: 80px 24px 48px;
    text-align: center;
}
.page-header h1.page-title {
    font-family: 'Luckiest Guy', sans-serif;
    font-size: clamp(28px, 4vw, 40px);
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}

/* 详情页 meta 分隔符 + 字体（mar/03/2026 旁边加 · 分隔） */
.opjoys-imported-article .blog-custom-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888;
}
.opjoys-imported-article .blog-custom-meta span + span::before {
    content: '·';
    margin-right: 12px;
    color: #ccc;
    font-weight: 400;
}

/* 详情页正文段落上下间距更舒展 */
.opjoys-imported-article .blog-custom-article-content > p {
    margin: 0 0 22px;
    line-height: 1.75;
}

/* 移动端：blog-grid 单列 + 字号缩小 */
@media (max-width: 640px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 16px;
        margin: 32px auto 60px;
    }
    .blog-card-title {
        font-size: 16px;
    }
    .blog-card-info {
        padding: 16px 18px 20px;
    }
    .page-header {
        padding: 60px 20px 32px;
    }
}

/* ==========================================================
   2026-06-25 修复包 6：Task 24 社区设计 Modal 投票体验
   1) .modal-content 隐藏滚动条（保留可滚动行为）
   2) #vote-email 美化：圆角、阴影、品牌粉色 focus 描边
   ========================================================== */

/* 隐藏 modal-content 滚动条 —— 三套写法覆盖所有主流浏览器 */
#designModal .modal-content,
.design-detail-modal-wrapper .modal-content,
.modal-overlay .modal-content {
    /* Chrome / Safari / Opera / Edge */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE10+ / old Edge */
}
#designModal .modal-content::-webkit-scrollbar,
.design-detail-modal-wrapper .modal-content::-webkit-scrollbar,
.modal-overlay .modal-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

/* 邮箱输入框：投票时显示 */
#vote-email,
.opjoys-vote-email {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 14px 18px !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #232323;
    background: #fff;
    border: 2px solid #ffe1e8 !important;
    border-radius: 14px !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 6px rgba(255, 70, 107, 0.06);
}
#vote-email::placeholder,
.opjoys-vote-email::placeholder {
    color: #b5b5b5;
    font-size: 14px;
}
#vote-email:focus,
.opjoys-vote-email:focus {
    border-color: #ff466b !important;
    box-shadow: 0 0 0 4px rgba(255, 70, 107, 0.12) !important;
}

/* 投票按钮：v1.0.48 强化品牌感 + 与输入框对齐 */
#designModal .btn-vote,
.action-buttons .btn-vote,
.opjoys-vote-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    background: #ff466b !important;
    color: #fff !important;
    border: none;
    border-radius: 14px !important;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(255, 70, 107, 0.25);
}
#designModal .btn-vote:hover,
.action-buttons .btn-vote:hover,
.opjoys-vote-btn:hover {
    background: #e6355a !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 70, 107, 0.32);
}
#designModal .btn-vote:disabled,
.action-buttons .btn-vote:disabled,
.opjoys-vote-btn.is-voted,
.opjoys-vote-btn:disabled {
    background: #ffb9c6 !important;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ==========================================================
   2026-06-25 修复包 7：Task 29 社区设计 Modal 全面优化
   背景：原 modal 存在 5 个问题
     1) .section-template--17922933686320__vote_for_design_djEmYE * 把
        modal-content 的 padding:40px 重置为 0
     2) overlay 是 rgba(255,255,255,0.95) 全白蒙层，modal 看不出层次
     3) 无打开动画，弹窗瞬现
     4) close 按钮只是 52px 的 ×，无视觉容器
     5) 移动端两栏挤压
   ========================================================== */

/* 1) 修复：把 modal 内的 padding 恢复回来（#designModal ID 选择器特异性高） */
#designModal .modal-content {
    padding: 32px !important;
}

/* 2) 暗色蒙层 + 平滑淡入 */
#designModal.modal-overlay {
    background: rgba(23, 23, 27, 0.72) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 32px !important;
    transition: opacity 0.28s ease !important;
}

/* 3) 打开/关闭动画（scale + opacity） */
#designModal .modal-content {
    transform: scale(0.94) translateY(20px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.24s ease-out !important;
    will-change: transform, opacity;
}
#designModal.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* 4) 关闭按钮：圆形白底 + 阴影 + hover
 *    v1.0.58 Task 37：隐藏原 ::before 不规则形状伪元素。
 *    根因：原 .modal-close::before 用 clip-path:polygon 做不规则白底，
 *          :hover::before 把它变深色 #1e1e1e。v1.0.52 改成圆形按钮后，
 *          hover 时深色不规则形状会盖在圆形按钮上方，视觉错乱。
 *          按钮 background 已提供白底，::before 多余，直接 display:none。
 */
#designModal .modal-close {
    width: 44px !important;
    height: 44px !important;
    top: 20px !important;
    right: 20px !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    color: #ff466b !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    border: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    z-index: 20 !important;
}
#designModal .modal-close::before {
    display: none !important;
}
#designModal .modal-close:hover {
    transform: rotate(90deg) scale(1.05);
    background: #ff466b !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 70, 107, 0.45) !important;
}

/* 5) detail-layout：减少 gap，给图片区加圆角卡片感 */
#designModal .detail-layout {
    gap: 40px !important;
    padding: 0 !important;
}
#designModal .image-section .main-image {
    background: #fafafa !important;
    border-radius: 24px !important;
    padding: 32px !important;
    margin: 0 !important;
    border: 1px solid #f0f0f0;
}
#designModal .info-section {
    padding: 8px 16px 8px 8px !important;
}

/* 6) 标题 + meta 信息排版优化 */
#designModal .design-title {
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.15 !important;
    margin-bottom: 20px !important;
}
#designModal .designer-info {
    margin-bottom: 24px !important;
}
#designModal .designer-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 10px rgba(255, 70, 107, 0.25);
}
#designModal .stats-row {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe1e8 100%) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}
#designModal .stat-number {
    font-size: 28px !important;
    color: #ff466b !important;
}

/* 7) 描述区 + tags */
#designModal .description h4 {
    font-size: 14px !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 12px !important;
}
#designModal .description p {
    color: #444 !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
}
#designModal .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px !important;
}
#designModal .tags .tag {
    display: inline-block;
    padding: 6px 14px;
    background: #fff0f3;
    color: #ff466b;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* 8) Related section 改成卡片样式 */
#designModal .related-section {
    margin: 40px 0 8px !important;
    padding: 32px !important;
    background: #fafafa;
    border-radius: 24px;
}
#designModal .related-section .section-title {
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 22px !important;
    color: #232323;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px !important;
}
#designModal .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
#designModal .related-grid .related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
#designModal .related-grid .related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
#designModal .related-grid .related-card .related-image {
    background: #fff;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
#designModal .related-grid .related-card .related-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}
#designModal .related-grid .related-card .related-info {
    padding: 12px;
    text-align: center;
}
#designModal .related-grid .related-card .related-title {
    font-size: 13px;
    font-weight: 600;
    color: #232323;
    margin: 0 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#designModal .related-grid .related-card .related-likes {
    font-size: 12px;
    color: #ff466b;
    font-weight: 600;
}

/* 9) 移动端：单列 + 紧凑 padding */
@media (max-width: 900px) {
    #designModal.modal-overlay {
        padding: 12px !important;
    }
    #designModal .modal-content {
        padding: 20px !important;
        border-radius: 24px !important;
    }
    #designModal .detail-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    #designModal .image-section .main-image {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    #designModal .info-section {
        padding: 0 !important;
    }
    #designModal .related-section {
        padding: 20px !important;
        margin-top: 24px !important;
    }
    #designModal .related-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }
}
@media (max-width: 480px) {
    #designModal .design-title {
        font-size: 24px !important;
    }
    #designModal .modal-close {
        width: 38px !important;
        height: 38px !important;
        font-size: 22px !important;
    }
}

/* 10) 防止页面背景滚动条位移 */
body.modal-open {
    overflow: hidden;
    padding-right: var(--opjoys-scrollbar-w, 0px);
}


/* v1.0.55 Task 34：.product-badge 限定到 collection 上下文（防止泄漏到首页） */

/* v1.0.56 Task 35：邮件订阅表单反馈消息样式 */
.site-footer__newsletter-form .opjoys-newsletter-msg {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.site-footer__newsletter-form input[type="email"] {
    min-width: 200px;
}