/** Shopify CDN: Minification failed

Line 6027:18 Unexpected "{"
Line 6027:27 Expected ":"
Line 6027:34 Unexpected "{"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
    background-color: #283047;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    width: 100%;
    position: relative;
    z-index: 1002;
  }

  .announcement-bar__text {
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    white-space: nowrap;
  }

  @media (max-width: 1024px) {
    .announcement-bar__text {
      font-size: 14px;
    }
  }

  @media (max-width: 768px) {
    .announcement-bar__text {
      font-size: 12px;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:books (INDEX:4) */
.books {
    position: relative;
    padding: 80px 0 100px;
    background: #FEF9F5;
    overflow: hidden;
  }

  .books__inner {
    margin: 0 auto;
  }

  .books__header {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .books__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    color: #283047;
    margin: 0;
  }

  .books__subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    margin: 0;
  }

  .books__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .book-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .book-card:hover {
    transform: scale(1.04);
    box-shadow:
      0 2px 8px rgba(40, 48, 71, 0.04),
      0 8px 22px rgba(40, 48, 71, 0.09),
      0 20px 42px rgba(232, 124, 101, 0.08);
  }

  .book-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 260px;
    background: #efe6e2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
  }

  .books .book-card__media > img {
    width: 75%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .books .book-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .book-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }

  .book-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .books .book-card__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #283047;
    margin: 0;
  }

  .books .book-card__desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #6b7280;
    margin: 0;
  }

  .books .book-card__price {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #283047;
    margin: 8px 0 0 0;
  }

  .books .book-card__wishlist {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .books .book-card__wishlist .book-card__wishlist-slot {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: auto;
  }

  .books .book-card__wishlist .book-card__wishlist-slot > *,
  .books .book-card__wishlist > .frcp-wishlist-wrapper,
  .books .book-card__wishlist .book-card__wishlist-slot .frcp-wishlist-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .books .book-card__wishlist--content .book-card__wishlist-slot .frcp-wishlist-wrapper,
  .books .book-card__wishlist--content .book-card__wishlist-slot :where(button, a, [role="button"]) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #fbf0ec !important;
    color: #E87C65 !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    position: relative !important;
    gap: 0 !important;
  }

  .books .book-card__wishlist--content .book-card__wishlist-slot svg,
  .books .book-card__wishlist--content .book-card__wishlist-slot img {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    display: block !important;
    color: #E87C65 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .books .book-card__wishlist--content .book-card__wishlist-slot svg,
  .books .book-card__wishlist--content .book-card__wishlist-slot svg * {
    stroke: currentColor !important;
  }

  .books .book-card__wishlist--media {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  .books .book-card__wishlist--content {
    flex-shrink: 0;
  }

  .book-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .book-card__stars {
    color: #f4a738;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
  }

  .book-card__reviews {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #888;
  }

  .books .book-card__btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e87c65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 32px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
  }

  .books .book-card__btn:hover {
    background-color: #d96b52;
  }

  .books__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }

  .decor {
    position: absolute;
    display: block;
  }

  .decor--left-top {
    width: 52px;
    left: max(20px, calc(50% - 600px - 40px));
    top: 40%;
  }

  .decor--left-bottom {
    width: 28px;
    left: max(30px, calc(50% - 600px - 10px));
    top: 60%;
  }

  .decor--right-top {
    width: 46px;
    left: min(calc(100% - 60px), calc(50% + 600px + 20px));
    top: 20%;
  }

  .decor--right-middle {
    width: 32px;
    left: min(calc(100% - 40px), calc(50% + 600px + 30px));
    top: 55%;
  }

  .decor--right-bottom {
    width: 28px;
    left: min(calc(100% - 50px), calc(50% + 600px + 10px));
    bottom: 10%;
  }

  .decor--tablet-extra {
    display: none;
  }

  .decor--mobile-orange {
    display: none;
  }

  .decor--mobile-purple {
    display: none;
  }

  @media (max-width: 1200px) and (min-width: 1024px) {
    .books .book-card__media > img {
      width: 85%;
    }
  }

  @media (max-width: 1024px) {
    .books .books__inner {
      padding-inline: 40px;
    }

    .books .books__grid {
      gap: 16px;
    }

    .books .book-card__title {
      font-size: 24px;
    }

    .books .book-card__media {
      padding: 10px;
    }

    .books .book-card__media > img {
      width: 85%;
    }

    .books .books__header,
    .books .books__grid {
      position: relative;
      z-index: 1;
    }

    .books .decor {
      left: auto;
      right: auto;
    }

    .books .decor--left-top {
      left: 20px;
      top: 115px;
    }

    .books .decor--right-top {
      right: 20px;
      top: 100px;
    }

    .books .decor--left-bottom {
      left: 40px;
      top: auto;
      bottom: 40px;
    }

    .books .decor--right-bottom {
      right: 30px;
      bottom: 30px;
    }

    .books .decor--right-middle {
      display: none;
    }

    .books .decor--tablet-extra {
      display: block;
      position: absolute;
      width: 21px;
      height: auto;
      right: 55px;
      top: 145px;
      z-index: 2;
    }
  }

  @media (max-width: 1024px) and (min-width: 768px) {
      .books {
        padding-top: 60px;
  }

    .books .books__title {
      font-size: 32px;
    }

    .books .books__subtitle {
      font-size: 16px;
    }
  }

  @media (max-width: 768px) {
    .books .reviews-label {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .books .books__inner {
      padding-inline: 16px;
    }

    .books .books__header {
      margin: 0 auto 32px;
    }

    .books .books__title {
      font-size: 28px;
    }

    .books .books__subtitle {
      font-size: 16px;
      max-width: 330px;
      margin: 0 auto;
    }

    .books .books__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .books .book-card__title {
      font-size: 20px;
    }

    .books .book-card__media {
      border-radius: 16px 16px 0 0;
    }

    .books .book-card__media > img {
      width: 75%;
      max-width: 85%;
      height: auto;
      display: block;
      border-radius: 0;
    }

    .books .book-card__content {
      padding: 12px 8px;
    }

    .books .book-card__wishlist--content {
      display: none;
    }

    .books .book-card__wishlist--media {
      display: flex;
      top: 12px;
      right: 12px;
    }

    .books .book-card__wishlist {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }

    .books .book-card__wishlist .book-card__wishlist-slot {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }
  }

  @media (max-width: 620px) {
    .books .book-card__media > img {
      width: 85%;
      max-width: 85%;
    }

    .books .books__header {
      position: relative;
      padding-top: 30px;
    }

    .books .decor--left-top,
    .books .decor--right-top {
      position: absolute;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
    }

    .books .decor--left-top {
      top: 84px;
      left: 10px;
    }

    .books .decor--right-top:not(.decor--mobile-orange) {
      display: none;
    }

    .books .decor--mobile-orange {
      display: block;
      position: absolute;
      width: 24px;
      height: auto;
      top: 125px;
      right: 10px;
    }

    .books .decor--tablet-extra {
      display: none;
    }

    .books .decor--right-bottom:not(.decor--mobile-purple) {
      display: none;
    }

    .books .decor--mobile-purple {
      display: block;
      position: absolute;
      bottom: 35px;
      right: 10px;
      rotate: 35deg;
    }
  }

  .star-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  @keyframes star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes star-scale {
    to { transform: scale(1.2); }
  }

  @keyframes star-color-filter {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  .star-wrapper--1 {
    animation: star-scale 4s ease-in-out infinite alternate 0s;
  }
  .star-wrapper--1 img {
    animation: star-rotate 8s linear infinite 0s, star-color-filter 8s ease-in-out infinite 0s;
  }

  .star-wrapper--2 {
    animation: star-scale 3s ease-in-out infinite alternate -1s;
  }
  .star-wrapper--2 img {
    animation: star-rotate 10s linear infinite reverse -2s, star-color-filter 8s ease-in-out infinite -3s;
  }

  .star-wrapper--3 {
    animation: star-scale 5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--3 img {
    animation: star-rotate 6s linear infinite -4s, star-color-filter 8s ease-in-out infinite -5s;
  }

  .star-wrapper--4 {
    animation: star-scale 4.5s ease-in-out infinite alternate -3s;
  }
  .star-wrapper--4 img {
    animation: star-rotate 12s linear infinite reverse -1s, star-color-filter 8s ease-in-out infinite -6s;
  }

  .star-wrapper--5 {
    animation: star-scale 3.5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--5 img {
    animation: star-rotate 9s linear infinite -3s, star-color-filter 8s ease-in-out infinite -1s;
  }

  .star-wrapper--6 {
    animation: star-scale 4s ease-in-out infinite alternate -4s;
  }
  .star-wrapper--6 img {
    animation: star-rotate 7s linear infinite reverse -5s, star-color-filter 8s ease-in-out infinite -2s;
  }

  .star-wrapper--7 {
    animation: star-scale 5s ease-in-out infinite alternate -1s;
  }
  .star-wrapper--7 img {
    animation: star-rotate 11s linear infinite -2s, star-color-filter 8s ease-in-out infinite -4s;
  }

  .star-wrapper--8 {
    animation: star-scale 3s ease-in-out infinite alternate -3s;
  }
  .star-wrapper--8 img {
    animation: star-rotate 6s linear infinite reverse -6s, star-color-filter 8s ease-in-out infinite -2s;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .book-card:hover {
      transform: scale(1.02);
      box-shadow:
        0 2px 6px rgba(40, 48, 71, 0.04),
        0 6px 16px rgba(40, 48, 71, 0.08),
        0 14px 30px rgba(232, 124, 101, 0.06);
    }
  }

  @media (max-width: 767px) {
    .book-card {
      will-change: auto;
      transition: none;
    }
    .book-card:hover {
      transform: none;
      box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    }
  }

  @media (hover: none) {
    .book-card {
      will-change: auto;
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }
    .book-card:hover {
      transform: none;
      box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    }
    .book-card:active {
      transform: scale(0.99);
      box-shadow: 0 1px 6px rgba(40, 48, 71, 0.05);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .book-card {
      transition: box-shadow 0.2s ease-out;
      will-change: auto;
    }
    .book-card:hover,
    .book-card:active {
      transform: none;
    }
    .star-wrapper,
    .star-wrapper img {
      animation: none;
    }
  }
/* END_SECTION:books */

/* START_SECTION:cart (INDEX:5) */
.cart-layout {
    --layout-col-gap: 32px;
    --layout-sticky-top: 24px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    align-items: start;
    gap: var(--layout-col-gap);
  }

  .cart-layout__main {
    min-width: 0;
    max-width: 610px;
    display: flex;
    flex-direction: column;
  }

  .cart-layout__summary {
    width: 100%;
    max-width: 400px;
    position: sticky;
    top: var(--layout-sticky-top);
    max-height: calc(100vh - var(--layout-sticky-top) * 2);
    overflow-y: auto;
    margin-top: 44px;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .cart-layout {
      --layout-col-gap: 24px;
      --layout-summary-width: clamp(260px, 32%, 300px);
    }
  }

  @media (max-width: 767px) {
    .cart-layout {
      grid-template-columns: 1fr;
    }

    .cart-layout__summary {
      position: static;
    }
  }

  :root {
    --font-weight-light: 300;
    --font-weight-medium: 500;

    --cart-bg: #ffffff;
    --cart-border: #e8e0d8;
    --cart-text: #283047;
    --cart-text-muted: #6e6b67;
    --cart-text-desc: #4D4D4D;
    --cart-accent: #E8830A;
    --cart-image-main: 120px;
    --cart-image-extra: 72px;
    --cart-radius-block: 16px;
    --cart-radius-pill: 20px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;
  }

  .cart-items__container {
    display: flex;
    flex-direction: column;
  }

  .cart-empty {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 60px 16px;
  }

  .cart-empty__card {
    max-width: 420px;
    width: 100%;
    background: var(--cart-bg);
    border: 1px solid var(--cart-border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
  }

  .cart-empty__title {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--cart-text);
    margin: 0 0 12px;
  }

  .cart-empty__text {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #6B6B6B;
    margin: 0 0 24px;
    line-height: 1.5;
  }

  .cart-empty__button {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 999px;
    background: #E87C65;
    color: #fff;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
  }

  .cart-empty__button:hover {
    opacity: 0.9;
  }

  .cart-empty[hidden],
  .cart-items__books-section[hidden],
  .cart-items__extras-section[hidden],
  .cart-upsell[hidden],
  .cart-layout__summary[hidden],
  [data-cart-items][hidden] {
    display: none;
  }

  .cart-items__extras-section {
    margin-top: var(--sp-4);
  }

  .cart-items__group {
    background: var(--cart-bg);
    border: 1px solid var(--cart-border);
    border-radius: var(--cart-radius-block);
    padding: var(--sp-4);
  }

  .cart-items__books-section .cart-items__group {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .cart-items__group + .cart-items__group {
    margin-block-start: var(--sp-8);
  }

  .cart-items__group-title {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--cart-text);
    margin: 0;
    padding-block-end: var(--sp-4);
  }

  .cart-item__divider {
    height: 1px;
    background-color: var(--cart-border);
  }

  .cart-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: var(--sp-4);
    row-gap: 0;
  }

  .cart-item--main {
    background: var(--cart-bg);
    border: 1px solid var(--cart-border);
    border-radius: var(--cart-radius-block);
    padding: var(--sp-4);
  }

  .cart-item__media {
    order: 1;
    flex-shrink: 0;
    width: var(--cart-image-main);
    height: var(--cart-image-main);
    border-radius: 8px;
    overflow: hidden;
    background: none;
  }

  .cart-item__media--empty {
    background: #f0ede8;
  }

  .cart-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-item--extra .cart-item__media {
    width: var(--cart-image-extra);
    height: var(--cart-image-extra);
  }

  .cart-item__content {
    order: 2;
    flex: 1;
    min-width: 0;
    min-height: var(--cart-image-main);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .cart-item--extra .cart-item__content {
    min-height: var(--cart-image-extra);
  }

  .cart-item__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
  }

  .cart-item__row--top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: flex-start;
  }

  .cart-item__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cart-text);
  }

  .cart-item__price {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 24px;
    font-weight: 400;
    color: var(--cart-text);
    white-space: nowrap;
  }

  .cart-item__menu {
    display: none;
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    justify-self: end;
  }

  .cart-item__menu-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin-left: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--cart-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    list-style: none;
  }

  .cart-item__menu-trigger::-webkit-details-marker {
    display: none;
  }

  .cart-item__menu-trigger::marker {
    content: "";
  }

  @media (min-width: 768px) {
    .cart-item__menu:not([open]) > .cart-item__menu-panel,
    .cart-item__menu[open] > .cart-item__menu-panel {
      position: static;
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      width: auto;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }

  .menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--cart-text-muted);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  .menu__divider {
    display: none;
  }

  .menu__edit:hover,
  .menu__edit:focus-visible,
  .menu__edit:active {
    background-color: #FBF0EC;
    text-decoration: none;
  }

  .menu__remove {
    color: var(--cart-text-muted);
  }

  .menu__remove:hover,
  .menu__remove:focus-visible,
  .menu__remove:active {
    background-color: #FFE4E6;
    text-decoration: none;
  }

  .menu__icon {
    display: none;
  }

  .menu__item span {
    display: block;
  }

  .cart-item__menu-panel .cart-item__edit,
  .cart-item__menu-panel .cart-item__remove {
    text-decoration: none;
  }

  .cart-item__actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--sp-3);
    flex-shrink: 0;
    width: 32px;
    min-width: 32px;
  }

  .cart-item__edit,
  .cart-item__remove {
    display: inline-flex;
  }

  button.cart-item__edit {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
  }

  .cart-item__tags {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: 10px;
  }

  .cart-item__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: #EFE9F5;
    border: none;
    border-radius: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--cart-text-muted);
    white-space: nowrap;
  }

  .cart-item__edit {
    flex-shrink: 0;
    align-self: flex-start;
    font-size: 14px;
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    color: var(--cart-text-muted);
    text-decoration: none;
  }

  .cart-item__edit:hover {
    text-decoration: underline;
  }

  body.cart-edit-modal-open {
    overflow: hidden;
  }

  .cart-item__open-details {
    font-size: 13px;
    color: var(--cart-accent);
    text-decoration: none;
  }

  .cart-item__open-details:hover {
    text-decoration: underline;
  }

  .cart-item__qty {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #878787;
    border-radius: var(--cart-radius-pill);
    overflow: hidden;
    width: fit-content;
  }

  .cart-item__qty button {
    width: 32px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--cart-text);
    padding: 0;
  }

  .cart-item__qty button:hover {
    background-color: #f5f0eb;
  }

  .cart-item__qty input {
    width: 33px;
    height: 30px;
    border: none;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--cart-text);
    background: transparent;
    padding: 0;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .cart-item__qty input::-webkit-inner-spin-button,
  .cart-item__qty input::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  .cart-item__remove {
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: var(--cart-text-muted);
    text-decoration: none;
  }

  .cart-item__remove:hover {
    color: #c0392b;
    text-decoration: underline;
  }

  .cart-item__remove--inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .cart-item__remove-icon {
    width: 12px;
    height: 15px;
    flex-shrink: 0;
    display: block;
  }

  @media (min-width: 768px) {
    .cart-item__content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "title price" "tags edit" "qty remove";
      column-gap: var(--sp-3);
      row-gap: 8px;
      align-items: start;
    }

    .cart-item__row--top,
    .cart-item__row--middle,
    .cart-item__row--bottom,
    .cart-item__actions {
      display: contents;
    }

    .cart-item__title {
      grid-area: title;
    }

    .cart-item__price {
      grid-area: price;
      min-width: 80px;
      margin-left: 0;
      margin-bottom: 0;
      justify-self: end;
      align-self: start;
      text-align: right;
    }

    .cart-item__tags {
      grid-area: tags;
      margin-bottom: 0;
    }

    .cart-item__edit {
      grid-area: edit;
      display: inline-flex;
      margin-left: auto;
      justify-self: end;
      align-self: center;
    }

    .cart-item__remove {
      display: inline-flex;
    }

    .cart-item__qty {
      grid-area: qty;
    }

    .cart-item__remove {
      grid-area: remove;
      margin-left: auto;
      justify-self: end;
      align-self: center;
    }
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .cart-items {
      --cart-image-main: 100px;
      --cart-image-extra: 64px;
    }

    .cart-items__group + .cart-items__group {
      margin-block-start: var(--sp-6);
    }

    .cart-items__group {
      padding: var(--sp-4);
    }
  }

  @media (max-width: 767px) {
    .cart-items {
      --cart-image-main: 88px;
      --cart-image-extra: 56px;
    }

    .cart-items__group + .cart-items__group {
      margin-block-start: var(--sp-6);
    }

    .cart-items__group {
      padding: var(--sp-4);
      border-radius: var(--sp-3);
    }
  }

  .cart-layout {
    --font-family-base: 'Kanit'
    , sans-serif;
    --font-family-accent: 'KoPub Batang'
    , serif;
    --font-size-title: 24px;
    --font-size-body: 16px;
    --font-size-small: 13px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --cart-card: #ffffff;
    --radius-block: 16px;
    --radius-pill: 999px;
  }

  body {
    font-family: 'Kanit'
    , sans-serif;
    color: #1f2937;
  }

  .cart-item__title {
    font-family: var(--font-family-accent);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-regular);
  }

  .cart-upsell__name {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1f2937;
  }

  .cart-upsell {
    --cart-bg: #f5efea;
    --cart-card: #ffffff;
    --cart-border: #e6e0db;
    --cart-text: #1f2937;
    --cart-text-muted: #6b7280;
    --cart-accent: #e8755a;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
  }

  .cart-upsell__container {
    margin-top: var(--sp-8);
  }

  .cart-upsell__title {
    font-size: 20px;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--sp-4);
  }

  .cart-upsell__card {
    background: #ffffff;
    border: 1px solid #e6e0db;
    border-radius: 16px;
    padding: 16px;
  }

  .cart-upsell__list {
    display: flex;
    flex-direction: column;
  }

  .cart-upsell__item {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    min-height: 92px;
    padding: 16px 0;
    border-top: 1px solid #e6e0db;
  }

  .cart-upsell__item:first-child {
    border-top: none;
    padding-top: 0;
  }

  .cart-upsell__item:last-child {
    padding-bottom: 0;
  }

  .cart-upsell__media {
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    background: none;
    border-radius: var(--sp-2);
    overflow: hidden;
  }

  .cart-upsell__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-upsell__media--empty {
    background: #eeeeee;
  }

  .cart-upsell__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 92px;
  }

  .cart-upsell__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .cart-upsell__price {
    font-size: 18px;
    font-weight: var(--font-weight-regular);
  }

  .cart-upsell__description {
    font-size: 14px;
    font-weight: var(--font-weight-light);
    color: #4D4D4D;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-upsell__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--sp-2);
  }

  .cart-upsell__details {
    all: unset;
    display: inline-block;
    padding-top: 16px;
    padding-bottom: 5px;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 14px;
    font-weight: var(--font-weight-light);
    line-height: 1;
    color: var(--cart-accent);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .cart-upsell__details:hover {
    text-decoration: underline;
  }

  .cart-upsell__add {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    color: var(--cart-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease-out
    , transform 0.2s ease-out;
  }

  .cart-upsell__add.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .cart-upsell__add.is-success {
    transform: scale(0.96);
  }

  .cart-item__extras.is-highlight {
    animation: extrasPulse 0.45s ease-out;
  }

  @keyframes extrasPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.01);
    }
    100% {
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell__add,
    .cart-item__extras.is-highlight {
      animation: none;
      transition: none;
    }
  }

  .cart-summary {
    background: #ffffff;
    border: 1px solid #FBF0EC;
    border-radius: 16px;
    padding: 16px;
  }

  .cart-summary__header {
    margin-bottom: 4px;
  }

  .cart-summary__title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #1f2937;
  }

  .cart-summary__divider {
    height: 1px;
    background: #e6e0db;
    margin: 16px 0;
  }

  .cart-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .cart-summary__row:last-child {
    margin-bottom: 0;
  }

  .cart-summary__label {
    font-size: 18px;
    color: #6b7280;
    font-weight: 400;
  }

  .cart-summary__value {
    font-size: 20px;
    font-weight: 400;
    color: #1f2937;
  }

  .cart-summary__value--muted {
    color: #6b7280;
    font-weight: 400;
    font-size: 18px;
  }

  .cart-summary__coupon-label {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--cart-text);
    margin-bottom: 8px;
  }

  .cart-summary__coupon-field {
    position: relative;
  }

  .cart-summary__coupon-input {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #ebeae8;
    padding: 0 44px 0 16px;
    background: #F6F6F6;
    outline: none;
    box-shadow: none;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #4D4D4D;
    box-sizing: border-box;
    appearance: none;
  }

  .cart-summary__coupon-input::placeholder {
    color: #878787;
    opacity: 1;
  }

  .cart-summary__coupon-input:focus {
    border-color: #ebeae8;
    outline: none;
    box-shadow: none;
  }

  .cart-summary__coupon-status-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    height: 16px;
    display: block;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .cart-summary__coupon-status-icon[hidden],
  .cart-summary__coupon-message[hidden],
  .cart-summary__coupon-message-icon[hidden] {
    display: none;
  }

  .cart-summary__coupon-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 12px 0 0;
    color: #FF3B5C;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: 0;
  }

  .cart-summary__coupon-message-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: block;
  }

  .cart-summary__coupon.is-success .cart-summary__coupon-message {
    color: #5FD584;
  }

  .cart-summary__coupon.is-error .cart-summary__coupon-input {
    border-color: #FF3B5C;
  }

  .cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: -6px;
  }

  .cart-summary__total-label {
    font-size: 20px;
    font-weight: 400;
    color: #1f2937;
  }

  .cart-summary__total-value {
    font-size: 20px;
    font-weight: 400;
    color: #1f2937;
  }

  .cart-summary__checkout {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: #e8755a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-summary__checkout:hover {
    opacity: 0.9;
  }

  .cart-page {
    width: 100%;
    background: #fef9f5;
    min-height: 100vh;
    padding-block: 40px;
  }


  .cart-page__container {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 100px;
    padding-bottom: 80px;
  }

  .cart-item__extras {
    order: 3;
    width: 100%;
    margin-top: 16px;
    border-top: 1px solid var(--cart-border);
    padding-top: var(--sp-4);
    font-family: 'Kanit'
    , sans-serif;
  }

  .cart-item__extras,
  .cart-item__extras * {
    font-family: 'Kanit'
    , sans-serif;
  }

  .cart-item .cart-item__extras * {
    font-family: 'Kanit'
    , sans-serif;
  }

  .cart-item .cart-item__extras .cart-item__extras-title {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #1f2937;
  }

  .cart-extra {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
  }

  .cart-extra:first-of-type {
    padding-top: 0;
  }

  .cart-extra__media {
    flex-shrink: 0;
    width: 80px;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    background: none;
  }

  .cart-extra__media--empty {
    background: #f0ede8;
  }

  .cart-extra__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cart-extra__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .cart-extra__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .cart-item .cart-item__extras .cart-extra__name {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #1f2937;
  }

  .cart-item .cart-item__extras .cart-extra__price {
    flex-shrink: 0;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
  }

  button.cart-extra__details {
    all: unset;
    cursor: pointer;
  }

  .cart-item .cart-item__extras .cart-extra__details {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 14px;
    color: #e76f51;
    text-decoration: none;
    font-weight: var(--font-weight-light);
  }

  .cart-extra__details:hover {
    text-decoration: underline;
  }

  .cart-extra__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  .cart-extra__remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--cart-text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-light);

  }

  .cart-extra__remove:hover {
    color: #c0392b;
    text-decoration: underline;
  }

  .cart-extra__remove-icon {
    width: 12px;
    height: 15px;
    flex-shrink: 0;
    display: block;
  }

  .cart-page__title {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.49;
    letter-spacing: 0;
    color: #283047;
    margin: 0 0 24px;
  }

  @media (max-width: 1024px) {
    .cart-page__container {
      padding-inline: 40px;
      padding-bottom: 48px;
    }

    .cart-layout {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .cart-layout__main,
    .cart-layout__summary,
    .cart-summary {
      width: 100%;
      max-width: none;
    }

    .cart-layout__summary,
    .cart-summary {
      position: static;
    }

    .cart-layout__summary {
      top: auto;
      max-height: none;
      overflow-y: visible;
      margin-top: 0;
    }

    .cart-upsell__list {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .cart-upsell__item {
      width: 100%;
    }

    .cart-item__media {
      width: 120px;
      height: 120px;
    }
  }

  @media (max-width: 767px) {
    .cart-page {
      padding-block: 24px;
    }

    .cart-page__container {
      padding-inline: 24px;
      padding-bottom: 48px;
    }

    .cart-page__title {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .cart-items {
      --cart-image-main: 80px;
    }

    .cart-items__group {
      padding: 16px;
    }

    .cart-item {
      flex-direction: row;
      align-items: flex-start;
      position: relative;
    }

    .cart-item__media {
      width: 100px;
      height: 110px;
    }

    .cart-item__content {
      min-width: 0;
      min-height: auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;

      grid-template-areas: "title menu" "tags tags" "qty price";
      column-gap: 12px;
      row-gap: var(--sp-2);
      padding-right: 0;
    }

    .cart-item__row {
      display: contents;
    }

    .cart-item__row--top {
      display: contents;
    }

    .cart-item__title {
      grid-area: title;
      font-size: 18px;
    }

    .cart-item__price {
      grid-area: price;
      position: static;
      font-size: 18px;
      margin-left: auto;
      white-space: nowrap;
      justify-self: end;
      align-self: center;
    }

    .cart-item__row--middle {
      display: contents;
    }

    .cart-item__row--bottom {
      display: contents;
    }

    .cart-item__tags {
      grid-area: tags;
      min-width: 0;
      margin-bottom: 0;
    }

    .cart-item__actions {
      display: none;
    }

    .cart-item__menu {
      display: block;
      grid-area: menu;
      justify-self: end;
      align-self: start;
      margin-left: 0;
    }

    .cart-item__menu-trigger {
      display: inline-flex;
      margin-left: 0;
    }

    .cart-item__menu:not([open]) > .cart-item__menu-panel {
      display: none;
    }

    .cart-item__menu[open] > .cart-item__menu-panel {
      position: absolute;
      display: block;
      top: auto;
      right: 0;
      bottom: calc(100% + 8px);
      z-index: 10;
      width: 138px;
      padding: 12px;
      background: #fff;
      border: 1px solid var(--cart-border);
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    .menu__item {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px;
      border-radius: 12px;
      font-size: 16px;
      color: var(--cart-text);
    }

    .menu__edit:hover,
    .menu__edit:focus-visible,
    .menu__edit:active {
      background-color: #FBF0EC;
      text-decoration: none;
    }

    .menu__item.menu__remove {
      color: #FF3B6A;
    }

    .menu__remove:hover,
    .menu__remove:focus-visible,
    .menu__remove:active {
      background-color: #FFE4E6;
      text-decoration: none;
    }

    .menu__icon {
      display: block;
      flex: 0 0 auto;
      width: 12px;
      height: 15px;
      filter: brightness(0) saturate(100%) invert(42%) sepia(96%) saturate(3006%) hue-rotate(315deg) brightness(104%) contrast(103%);
    }

    .menu__divider {
      display: block;
      height: 1px;
      margin: 4px 0;
      background: #EAEAEA;
    }

    .cart-item__qty {
      grid-area: qty;
      flex: 0 0 auto;
    }

    .cart-upsell__item {
      gap: 12px;
    }

    .cart-extra {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--sp-3);
    }

    .cart-extra__content {
      flex: 1;
    }

    .cart-extra__price {
      margin-left: auto;
      white-space: nowrap;
    }

    .cart-upsell__header {
      flex-wrap: nowrap;
      gap: 4px 12px;
    }

    .cart-upsell__price {
      font-size: 16px;
    }

    .cart-summary__title {
      font-size: 20px;
    }
  }

  .extras-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  .extras-modal.is-open {
    display: flex;
  }

  .extras-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .extras-modal__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 536px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  .extras-modal__header {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
  }

  .extras-modal__back {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }

  .extras-modal__back img {
    width: 12px;
    height: 10px;
  }

  .extras-modal__back span {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .extras-modal__back:hover {
    opacity: 0.8;
  }

  .extras-modal__main {
    display: flex;
    gap: 24px;
    padding-top: 12px;
    align-items: flex-start;
  }

  .extras-modal__image {
    flex-shrink: 0;
    width: 260px;
    height: 260px;
    border-radius: 16px;
    overflow: hidden;
    background: #f0ede8;
  }

  .extras-modal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  .extras-modal__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .extras-modal__title {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cart-text);
    margin: 0;
  }

  .extras-modal__short-description {
    font-size: 16px;
    font-weight: var(--font-weight-light);
    color: var(--cart-text-desc);
    line-height: 1.4;
    margin: 0;
  }

  .extras-modal__price {
    font-size: 18px;
    font-weight: var(--font-weight-regular);
    color: var(--cart-text);
  }

  .extras-modal__heading {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: -8px;
    letter-spacing: -0.08px;
  }

  .extras-modal__benefits {
    margin-top: 20px;
  }

  .benefit {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
  }

  .benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding-top: 8px;
    flex-shrink: 0;
  }

  .benefit__icon img {
    width: 25px;
    height: 25px;
  }

  .benefit__text {
    font-size: 14px;
    color: #666;
  }

  .extras-modal__footer {
    display: flex;
    justify-content: center;
  }

  .extras-modal__add {
    display: block;
    width: 156px;
    padding: 10px;
    background: #E87C65;
    margin-top: 12px;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s ease;
  }

  .extras-modal__add:hover {
    opacity: 0.9;
  }

  .extras-modal__add.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .extras-modal__selection {
    display: none;
    flex-direction: column;
    gap: 16px;
  }

  .extras-modal__content.is-step-selection .extras-modal__details {
    display: none;
  }

  .extras-modal__content.is-step-selection .extras-modal__selection {
    display: flex;
  }

  .extras-selection__title {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    color: var(--cart-text);
    margin: 0;
  }

  .extras-selection__subtitle {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 300;
    font-size: 16px;
    text-align: center;
    color: #6B6B6B;
    margin: 0;
    line-height: 1.5;
  }

  .extras-modal__selection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .extras-selection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #E2DBFF;
    background: #FCF9FF;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease
    , border 0.2s ease;
  }

  @media (hover: hover) {
    .extras-selection-item:hover {
      background: #F7F2FB;
    }
  }

  .extras-selection-item.is-checked {
    border-color: #E2DBFF;
    background-color: #F7F2FB;
  }

  .extras-selection-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #9B79B6;
    accent-color: #9B79B6;
    cursor: pointer;
  }

  .extras-selection-item input[type="checkbox"]:checked {
    background-color: #9B79B6;
    border-color: #9B79B6;
  }

  @media (max-width: 767px) {
    .extras-selection-item input[type="checkbox"] {
      width: 22px;
      height: 22px;
    }
  }

  .extras-selection-item__img {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
  }

  .extras-selection-item__img--empty {
    background: #f0ede8;
  }

  .extras-selection-item__info {
    flex: 1;
    min-width: 0;
  }

  .extras-selection-item__title {
    font-family: 'KoPub Batang'
    , serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--cart-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .extras-selection-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .extras-selection-item__tags:empty {
    margin-top: 0;
  }

  .extras-selection-item__tags span {
    font-family: 'Kanit'
    , sans-serif;
    font-size: 12px;
    font-weight: 300;
    padding: 4px 8px;
    border-radius: 999px;
    background: #F1EDF7;
    color: #5F5F5F;
  }

  .extras-modal__selection-all {
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 400;
    font-size: 16px;
    padding: 12px;
    border: 1px solid #E2DBFF;
    background: #FCF9FF;
    border-radius: 12px;
    transition: background 0.2s ease
    , border-color 0.2s ease;
  }

  @media (hover: hover) {
    .extras-modal__selection-all:hover {
      background: #F7F2FB;
    }
  }

  .extras-modal__selection-all.is-checked {
    border-color: #E2DBFF;
    background: #F7F2FB;
  }

  .extras-modal__selection-all label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .extras-modal__selection-all input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #9B79B6;
    accent-color: #9B79B6;
    cursor: pointer;
  }

  @media (max-width: 767px) {
    .extras-modal__selection-all input[type="checkbox"] {
      width: 22px;
      height: 22px;
    }
  }

  .extras-modal__selection-all span {
    font-size: 16px;
    font-weight: 400;
    color: var(--cart-text);
  }

  .extras-modal__selection-cta {
    display: block;
    width: 100%;
    padding: 14px;
    background: #E87C65;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: 'Kanit'
    , sans-serif;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s ease;
  }

  .extras-modal__selection-cta:hover:not(:disabled) {
    opacity: 0.9;
  }

  .extras-modal__selection-cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .extras-modal__selection-cta.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  @media (max-width: 768px) {
    .cart-upsell__details {
      padding: 0;
      margin-top: 4px;
    }

    .cart-upsell__footer {
      margin-top: 0;
    }

    .extras-modal__main {
      flex-direction: column;
      gap: 16px;
    }

    .extras-modal__image {
      width: 100%;
      max-height: 250px;
      overflow: hidden;
    }

    .extras-modal__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .extras-modal__info {
      gap: 2px;
    }

    .extras-modal__content {
      padding: 16px;
    }

    .extras-modal__footer {
      justify-content: center;
    }
  }


  @media (max-width: 768px) {
    .sticky-checkout {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
      background: #fff;
      border-top: 1px solid var(--cart-border);
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);

      transform: translateY(100%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)
      , opacity 0.2s ease;
    }

    .sticky-checkout.is-visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .sticky-checkout__total {
      font-family: 'Kanit'
      , sans-serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--cart-text);
    }

    .sticky-checkout__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      border-radius: 999px;
      background: #e8755a;
      color: #fff;
      font-family: 'Kanit'
      , sans-serif;
      font-size: 15px;
      font-weight: var(--font-weight-medium);
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }

    .sticky-checkout__btn:hover {
      opacity: 0.88;
    }

    body.has-sticky-checkout .cart-page {
      padding-bottom: 80px;
    }
  }

  @media (max-width: 767px) {
    body:has(.cart-page) .site-footer {
      display: none;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:6) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collection_all (INDEX:7) */
.collection-all {
    position: relative;
    min-height: 100vh;
    padding: 60px 0 100px;
    background: #FEF9F5;
    overflow: hidden;
  }

  @media (max-width: 1023px) {
    .collection-all {
      --collection-drawer-top-offset: 0px;
    }

    .collection-all__breadcrumb,
    .collection-all__title,
    .collection-all__mobile-filter-bar,
    .collection-all__products {
      transition: filter 220ms ease, opacity 220ms ease;
      will-change: filter, opacity;
    }

    .collection-all.is-filters-open .collection-all__breadcrumb,
    .collection-all.is-filters-open .collection-all__title,
    .collection-all.is-filters-open .collection-all__mobile-filter-bar,
    .collection-all.is-filters-open .collection-all__products {
      filter: blur(10px);
      opacity: 0.5;
      pointer-events: none;
      user-select: none;
    }
  }

  .collection-all__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
  }

  .collection-all__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    color: #6B7280;
    margin-bottom: 24px;
  }

  .collection-all__breadcrumb a {
    color: #6B7280;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .collection-all__breadcrumb a:hover {
    color: #283047;
  }

  .breadcrumb__separator {
    color: #9CA3AF;
  }

  .breadcrumb__current {
    color: #283047;
    font-weight: 400;
  }
  
  .collection-all__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.2;
    color: #283047;
    margin: 0 0 40px;
  }

  .collection-all__mobile-filter-bar {
    display: none;
    margin-bottom: 24px;
  }

  .collection-all__filter-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid #E6E2DD;
    border-radius: 24px;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #283047;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .collection-all__filter-trigger:hover {
    background: #FEFAF7;
    border-color: #D4C4B0;
  }

  .collection-all__filter-trigger svg {
    color: #649BC0;
  }

  .collection-all__filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #FFB7A8;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px;
  }

  .collection-all__filter-overlay {
    display: none;
  }

  @media (max-width: 1023px) {
    .collection-all__filter-overlay {
      display: block;
      position: fixed;
      top: var(--collection-drawer-top-offset);
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(18, 31, 55, 0.18);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 998;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 220ms ease, visibility 220ms ease;
    }

    .collection-all__filter-overlay[hidden] {
      display: none;
    }
  }

  .collection-all__filter-drawer-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #EBEAE8;
    position: sticky;
    top: 0;
    background: #FEF9F5;
    z-index: 10;
  }

  .collection-all__filter-drawer-header .filters__title {
    margin: 0;
    font-size: 20px;
  }

  .collection-all__filter-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #283047;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
  }

  .collection-all__filter-drawer-close:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .collection-all__layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 40px;
    align-items: start;
  }

  .collection-all__filters {
    position: sticky;
    top: 20px;
  }

  .filters-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .filters__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
  }

  .filters__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.48;
    color: #283047;
    margin: 0;
  }

  .filters__clear-all {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    color: #FF8080;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .filters__clear-all[hidden] {
    display: none;
  }

  .filters__clear-all:disabled,
  .filters__clear-all.is-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
  }

  .filters__clear-all:hover:not(:disabled):not(.is-disabled) {
    opacity: 0.8;
  }

  .filters__active-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    min-height: 36px;
    background: #FFFFFF;
    border: 1px solid #E6E2DD;
    border-radius: 18px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    color: #283047;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }

  .filter-pill:hover {
    border-color: #D4C4B0;
    background: #FEFAF7;
  }

  .filter-pill__text {
    display: inline-block;
  }

  .filter-pill__close {
    color: #FF7A7A;
    font-size: 16px;
    line-height: 1;
    font-weight: 300;
  }

  .filters__divider {
    height: 1px;
    background: #EBEAE8;
    margin: 0;
    width: 100%;
  }

  .filters-form > .filter-group {
    margin-top: 20px;
  }

  .filters-form > .filter-group:first-of-type {
    margin-top: 0;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .filter-group__title-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
  }

  .filter-group__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.48;
    color: #283047;
    margin: 0;
  }

  .filter-group__chevron {
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .filter-group__chevron {
      transition: none;
    }
  }

  .filter-group.is-open .filter-group__chevron {
    transform: rotate(90deg);
  }

  .filter-group__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filter-group__options[hidden],
  .filter-group__price[hidden],
  .filter-group__sort[hidden] {
    display: none;
  }

  .filter-group__sort {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .filter-group__option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.48;
    color: #283047;
  }

  .filter-group__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .filter-group__radio-control {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #D8D8D8;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    flex: 0 0 20px;
    position: relative;
  }

  .filter-group__radio-control::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transform: scale(0.7);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .filter-group__radio:checked + .filter-group__radio-control {
    border-color: #E87C65;
    box-shadow: 0 0 0 3px rgba(232, 124, 101, 0.12);
    background: #FFFFFF;
  }

  .filter-group__radio:checked + .filter-group__radio-control::after {
    background: #E87C65;
    transform: scale(1);
  }

  .filter-group__option:hover .filter-group__radio-control {
    border-color: #E87C65;
  }

  .filter-group__radio:focus-visible + .filter-group__radio-control {
    outline: 2px solid rgba(232, 124, 101, 0.4);
    outline-offset: 2px;
  }

  .filter-group__label {
    user-select: none;
    flex: 1;
  }

  .filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.48;
    color: #283047;
  }

  .filter-option input[type="checkbox"],
  .filter-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    background: #FEF9F5;
    border: 1px solid #FFB7A8;
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
  }

  .filter-option input[type="checkbox"]:checked,
  .filter-option input[type="radio"]:checked {
    background: #FFB7A8;
    border-color: #FFB7A8;
  }

  .filter-option input[type="checkbox"]:checked::after,
  .filter-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .filter-option__label {
    user-select: none;
    flex: 1;
  }

  .filter-group__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .filters__apply-btn {
    width: 100%;
    padding: 12px 24px;
    background: #FFB7A8;
    color: #283047;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 4px;
  }

  .filters__apply-btn:hover {
    background: #FFA394;
  }

  .collection-all__products {
    min-width: 0;
  }

  .collection-all__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      filter 180ms ease;
  }

  .collection-all__grid.is-updating {
    opacity: 0.4;
    transform: translateY(8px);
    filter: blur(1px);
    pointer-events: none;
  }

  .collection-all [data-product-card] {
    transition:
      opacity 220ms ease,
      transform 220ms ease;
  }

  .collection-all [data-product-card].is-card-entering {
    opacity: 0;
    transform: translateY(12px);
  }

  .collection-all [data-product-card].is-card-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .collection-all .book-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    min-width: 0;
  }

  .collection-all .book-card:hover {
    transform: scale(1.04);
    box-shadow:
      0 2px 8px rgba(40, 48, 71, 0.04),
      0 8px 22px rgba(40, 48, 71, 0.09),
      0 20px 42px rgba(232, 124, 101, 0.08);
  }

  .collection-all .book-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 260px;
    background: #efe6e2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
  }

  .collection-all .book-card__media > img {
    width: 75%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .collection-all .book-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .collection-all .book-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }

  .collection-all .book-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .collection-all .book-card__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #283047;
    margin: 0;
  }

  .collection-all .book-card__desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #6b7280;
    margin: 0;
  }

  .collection-all .book-card__price {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #283047;
    margin: 8px 0 0 0;
  }

  .collection-all .book-card__wishlist {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .collection-all .book-card__wishlist .book-card__wishlist-slot {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: auto;
  }

  .collection-all .book-card__wishlist .book-card__wishlist-slot > *,
  .collection-all .book-card__wishlist > .frcp-wishlist-wrapper,
  .collection-all .book-card__wishlist .book-card__wishlist-slot .frcp-wishlist-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .collection-all .book-card__wishlist--content .book-card__wishlist-slot .frcp-wishlist-wrapper,
  .collection-all .book-card__wishlist--content .book-card__wishlist-slot :where(button, a, [role="button"]) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #fbf0ec !important;
    color: #E87C65 !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    position: relative !important;
    gap: 0 !important;
  }

  .collection-all .book-card__wishlist--content .book-card__wishlist-slot svg,
  .collection-all .book-card__wishlist--content .book-card__wishlist-slot img {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    display: block !important;
    color: #E87C65 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .collection-all .book-card__wishlist--content .book-card__wishlist-slot svg,
  .collection-all .book-card__wishlist--content .book-card__wishlist-slot svg * {
    stroke: currentColor !important;
  }

  .collection-all .book-card__wishlist--media {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  .collection-all .book-card__wishlist--content {
    flex-shrink: 0;
  }

  .collection-all .book-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .collection-all .book-card__stars {
    color: #f4a738;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
  }

  .collection-all .book-card__reviews {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #888;
  }

  .collection-all .book-card__btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e87c65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 32px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
  }

  .collection-all .book-card__btn:hover {
    background-color: #d96b52;
  }

  .collection-all [data-product-card][hidden],
  .collection-all [data-product-card].is-hidden-by-filters {
    display: none !important;
  }

  .collection-all__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
  }

  .collection-all__empty[hidden] {
    display: none !important;
  }

  .collection-all__empty h2 {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #283047;
    margin: 0 0 12px;
  }

  .collection-all__empty p {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #6B7280;
    margin: 0 0 24px;
  }

  .collection-all__empty-btn {
    display: inline-block;
    padding: 12px 32px;
    background: #E87C65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .collection-all__empty-btn:hover {
    background-color: #d96b52;
  }

  .collection-all__pagination {
    margin-top: 40px;
    text-align: center;
  }

  .collection-all__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }

  .decor {
    position: absolute;
    display: block;
  }

  .decor--left-top {
    width: 52px;
    left: max(20px, calc(50% - 720px - 60px));
    top: 20%;
  }

  .decor--left-bottom {
    width: 28px;
    left: max(30px, calc(50% - 720px - 50px));
    top: 60%;
  }

  .decor--right-top {
    width: 46px;
    left: min(calc(100% - 60px), calc(50% + 720px + 20px));
    top: 25%;
  }

  .decor--right-middle {
    width: 32px;
    left: min(calc(100% - 40px), calc(50% + 720px + 30px));
    top: 50%;
  }

  .decor--right-bottom {
    width: 28px;
    left: min(calc(100% - 50px), calc(50% + 720px + 10px));
    bottom: 15%;
  }

  .star-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  @keyframes star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes star-scale {
    to { transform: scale(1.2); }
  }

  @keyframes star-color-filter {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  .star-wrapper--1 {
    animation: star-scale 4s ease-in-out infinite alternate 0s;
  }
  .star-wrapper--1 img {
    animation: star-rotate 8s linear infinite 0s, star-color-filter 8s ease-in-out infinite 0s;
  }

  .star-wrapper--2 {
    animation: star-scale 3s ease-in-out infinite alternate -1s;
  }
  .star-wrapper--2 img {
    animation: star-rotate 10s linear infinite reverse -2s, star-color-filter 8s ease-in-out infinite -3s;
  }

  .star-wrapper--3 {
    animation: star-scale 5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--3 img {
    animation: star-rotate 6s linear infinite -4s, star-color-filter 8s ease-in-out infinite -5s;
  }

  .star-wrapper--4 {
    animation: star-scale 4.5s ease-in-out infinite alternate -3s;
  }
  .star-wrapper--4 img {
    animation: star-rotate 12s linear infinite reverse -1s, star-color-filter 8s ease-in-out infinite -6s;
  }

  .star-wrapper--5 {
    animation: star-scale 3.5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--5 img {
    animation: star-rotate 9s linear infinite -3s, star-color-filter 8s ease-in-out infinite -1s;
  }

  /* Disable burger menu while filters are open (tablet/mobile only) */
  @media (max-width: 1023px) {
    html.collection-filters-open .header__burger,
    body.collection-filters-open .header__burger {
      pointer-events: none;
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  @media (min-width: 1024px) {
    .collection-all__mobile-filter-bar,
    .collection-all__filter-overlay,
    .collection-all__filter-drawer-header {
      display: none !important;
    }

    .collection-all__layout {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 40px;
      align-items: start;
    }

    .collection-all__filters {
      grid-column: 1;
      grid-row: 1;
      position: sticky;
      top: 120px;
      width: 100%;
      height: auto;
      max-height: none;
      transform: none;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      z-index: auto;
    }

    .collection-all__products {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      width: 100%;
    }
  }

  @media (max-width: 1023px) {
    .collection-all__mobile-filter-bar {
      display: flex;
    }

     .filters__active-pills {
      padding-top: 16px;
      max-height: 220px;
    }

    .star-wrapper--1 {
      display: none;
    }

    .filters__header {
      display: none;
    }

    .collection-all__filter-drawer-header {
      display: flex;
    }

    .collection-all__layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .collection-all__filters {
      position: fixed;
      top: var(--collection-drawer-top-offset);
      right: 0;
      bottom: 0;
      left: auto;
      z-index: 999;
      width: min(420px, 90vw);
      height: calc(100dvh - var(--collection-drawer-top-offset));
      max-height: calc(100dvh - var(--collection-drawer-top-offset));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      background: #FEF9F5;
      box-shadow: -16px 0 40px rgba(18, 31, 55, 0.16);
      transform: translateX(100%);
      visibility: hidden;
      pointer-events: none;
      transition: transform 260ms ease, visibility 260ms ease;
      padding: 0;
    }

    .collection-all__filters.is-open {
      transform: translateX(0);
      visibility: visible;
      pointer-events: auto;
    }

    .star-wrapper--2 {
      display: none;
    }

    .filters-form {
      padding: 24px;
      padding-top: 0px;
    }
  }

  @media (max-width: 767px) {
    .collection-all__filters {
      width: min(304px, 92vw);
    }

    .filters__active-pills {
      padding-top: 16px;
      max-height: 180px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .collection-all__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-all__filters {
      transition: none;
    }

    .collection-all__filter-overlay {
      animation: none;
    }
  }

  @media (max-width: 1023px) {
    .collection-all__container {
      padding: 0 40px;
    }

    .collection-all__layout {
      display: block;
    }

    .collection-all .book-card__title {
      font-size: 24px;
    }

    .collection-all .book-card__media {
      padding: 10px;
    }

    .collection-all .book-card__media > img {
      width: 85%;
    }

    .decor--left-top {
      left: 20px;
      top: 150px;
    }

    .decor--right-top {
      right: 20px;
      top: 120px;
    }

    .decor--left-bottom {
      left: 40px;
      bottom: 100px;
    }

    .decor--right-bottom {
      right: 30px;
      bottom: 80px;
    }

    .decor--right-middle {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .collection-all {
      padding: 40px 0 80px;
    }

    .collection-all__container {
      padding: 0 16px;
    }

    .collection-all__title {
      font-size: 28px;
      margin-bottom: 24px;
    }

    .collection-all__layout {
      display: block;
    }

    .filters__header {
      padding-bottom: 12px;
    }

    .filters__title {
      font-size: 18px;
    }

    .collection-all__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .collection-all .book-card__title {
      font-size: 20px;
    }

    .collection-all .book-card__media {
      border-radius: 16px 16px 0 0;
    }

    .collection-all .book-card__media > img {
      width: 75%;
      max-width: 85%;
      height: auto;
      display: block;
      border-radius: 0;
    }

    .collection-all .book-card__content {
      padding: 12px 8px;
    }

    .collection-all .book-card__wishlist--content {
      display: none;
    }

    .collection-all .book-card__wishlist--media {
      display: flex;
      top: 12px;
      right: 12px;
    }

    .collection-all .book-card__wishlist {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }

    .collection-all .book-card__wishlist .book-card__wishlist-slot {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }

    .collection-all .reviews-label {
      display: none;
    }

    .decor--left-top {
      top: 100px;
      left: 10px;
    }

    .decor--right-top {
      top: 140px;
      right: 10px;
    }

    .decor--left-bottom {
      bottom: 50px;
      left: 20px;
    }

    .decor--right-bottom {
      bottom: 40px;
      right: 10px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-all .book-card {
      transition: box-shadow 0.2s ease-out;
      will-change: auto;
    }
    .collection-all .book-card:hover,
    .collection-all .book-card:active {
      transform: none;
    }
    .star-wrapper,
    .star-wrapper img {
      animation: none;
    }
    .collection-all__grid,
    .collection-all [data-product-card],
    .collection-all__empty {
      transition: none !important;
      animation: none !important;
    }
  }

  @media (hover: none) {
    .collection-all .book-card {
      will-change: auto;
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }
    .collection-all .book-card:hover {
      transform: none;
      box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    }
    .collection-all .book-card:active {
      transform: scale(0.99);
      box-shadow: 0 1px 6px rgba(40, 48, 71, 0.05);
    }
  }
/* END_SECTION:collection_all */

/* START_SECTION:collections (INDEX:8) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:custom-section (INDEX:9) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:footer (INDEX:11) */
.site-footer {
    background: #283047;
    color: #fff;
    font-family: 'Kanit', sans-serif;
    position: relative;
    padding-top: 60px;
  }

  .site-footer__clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transform: translateY(-60%);
    pointer-events: none;
  }

  .site-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
  }

  .site-footer__body {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr 1.5fr;
    gap: 40px;
    padding: 64px 0 48px;
  }

  .site-footer__logo-link {
    display: inline-block;
    margin-bottom: 16px;
  }

  .site-footer__tagline {
    font-size: 16px;
    line-height: 1.5;
    max-width: 220px;
    color: #fff;
    margin: 0;
    font-weight: 300;
  }

  .site-footer__nav-title {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 16px;
    color: #fff;
  }

  .site-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site-footer__nav-link {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
  }

  .site-footer__nav-link:hover {
    opacity: 0.75;
  }

  .site-footer__phone,
  .site-footer__email {
    font-size: 16px;
    color: #fff;
    margin: 0 0 8px;
    font-weight: 300;
  }

  .site-footer__socials {
    display: flex;
    gap: 16px;
    margin-top: 20px;
  }

  .site-footer__social-link {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-footer__social-link:hover {
    opacity: 0.75;
  }

  .site-footer__social-link img {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }

  .site-footer__separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0;
  }

  .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }

  .site-footer__copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
  }

  .site-footer__privacy-link {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
  }

  .site-footer__privacy-link:hover {
    opacity: 0.75;
  }

  .site-footer__privacy--mobile {
    display: none;
  }

  @media (max-width: 1024px) {
    .site-footer {
      padding-top: 20px;
    }

    .site-footer__inner {
      padding: 0 40px;
    }

    .site-footer__body {
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 24px;
    }

    .site-footer__brand {
      grid-row: 1 / 3;
      grid-column: 1;
    }

    .site-footer__nav-group:nth-child(2) {
      grid-row: 1;
      grid-column: 2;
    }

    .site-footer__nav-group:nth-child(3) {
      grid-row: 1;
      grid-column: 3;
    }

    .site-footer__nav-group:nth-child(4) {
      grid-row: 2;
      grid-column: 2;
    }

    .site-footer__contacts {
      grid-row: 2;
      grid-column: 3;
    }
  }

  @media (max-width: 768px) {
    .site-footer__inner {
      padding: 0 16px;
    }

    .site-footer__body {
      grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
      grid-row: unset;
      grid-column: 1 / -1;
      margin-bottom: 8px;
    }

    .site-footer__nav-group:nth-child(2),
    .site-footer__nav-group:nth-child(3),
    .site-footer__nav-group:nth-child(4),
    .site-footer__contacts {
      grid-row: unset;
      grid-column: unset;
    }

    .site-footer__email {
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .site-footer__privacy--mobile {
      display: block;
    }

    .site-footer__privacy-link {
      display: none;
    }

    .site-footer__bottom {
      flex-direction: column;
      gap: 8px;
      text-align: center;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:12) */
.header {
    background-color: #fef9f5;
    width: 100%;
  }

  .header__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 8px 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .header__logo a {
    display: block;
    line-height: 0;
  }

  .header__logo img {
    display: block;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .header__nav a {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    color: #283047;
    text-decoration: none;
    white-space: nowrap;
  }

  .header__nav a:hover {
    opacity: 0.7;
  }


  .header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .header__actions a {
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .header__actions img {
    display: block;
  }

  .header__burger {
    display: none;
    width: 24px;
    height: 24px;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .header__burger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #283047;
    border-radius: 2px;
  }

  .header__cart {
    position: relative;
  }

  .cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: #E76F51;
    color: #fff;
    border-radius: 999px;
    padding: 0 4px;
    box-sizing: border-box;
    pointer-events: none;
    transition: transform 0.2s ease;
  }

  .cart-badge[hidden] {
    display: none;
  }

  .cart-badge.updated {
    transform: scale(1.25);
  }

  @media (max-width: 1150px) {
    .header__logo img {
      width: 138px;
      height: 39px;
      object-fit: contain;
    }
  }

  @media (max-width: 1024px) {
    .header__inner {
      padding: 12px 40px;
    }

    .header__logo {
      order: 2;
      margin-left: 0;
    }

    .header__nav {
      display: none;
    }

    .header__actions {
      order: 3;
      gap: 16px;
      margin-left: auto;
    }

    .header__actions img {
      width: 20px;
      height: 22px;
    }

    .header__burger {
      display: flex;
      width: 14px;
      height: 14px;
      order: 1;
      margin-right: 16px;
      margin-left: 0;
    }

    .header__burger span {
      height: 1.5px;
    }
  }

  @media (max-width: 768px) {
    .header__inner {
      padding: 12px 24px;
    }
  }

  #how-the-magic-happens,
  #from-photo-to-storybook-character,
  #stories-for-every-age-and-stage,
  #customer-reviews,
  #faq,
  #what-adventure-awaits-today,
  #bestselling-stories {
    scroll-margin-top: 80px;
  }

  @media (max-width: 1024px) {
    #how-the-magic-happens,
    #from-photo-to-storybook-character,
    #stories-for-every-age-and-stage,
    #customer-reviews,
    #faq,
    #what-adventure-awaits-today,
    #bestselling-stories {
      scroll-margin-top: 60px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:13) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .icon {
    width: 300px;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:hero (INDEX:14) */
.hero {
    background-color: #FEF9F5;
    overflow: hidden;
  }

  .hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
  }

  .hero__content {
    flex: 1;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: clamp(100px, 10vw, 140px);
  }

  .hero__headings {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hero__title {
    font-family: 'KoPub Batang'
    , Georgia
    , serif;
    font-weight: 700;
    font-size: 65px;
    line-height: 1.1;
    color: #283047;
    max-width: 530px;
    margin: 0;
  }

  .hero__description {
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    max-width: 460px;
    margin: 0;
  }

  .hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    background-color: #e87c65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 14px 36px;
    border-radius: 32px;
    white-space: nowrap;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hero__button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .hero__button:hover {
    background-color: #d96b52;
    transform: scale(1.04);
  }

  .hero__button:hover::after {
    opacity: 1;
  }

  .hero__button:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  .hero__decor {
    position: absolute;
    pointer-events: none;
    user-select: none;
    display: block;
  }

  .hero__decor--cloud-left {
    width: 38%;
    bottom: 2%;
    left: -2%;
  }

  .hero__decor--cloud-right {
    width: 28%;
    top: 22%;
    right: -2%;
  }

  .hero__decor--cloud-bottom {
    width: 26%;
    bottom: 14%;
    right: 5%;
  }

  .hero__decor--moon {
    width: 7%;
    top: 1%;
    right: 1%;
  }

  .hero__decor--star-blue-lg {
    width: 8%;
    top: 7%;
    left: 5%;
  }

  .hero__decor--star-purple-sm {
    width: 4%;
    top: 20%;
    left: 9%;
  }

  .hero__decor--star-dark-top {
    width: 4.5%;
    top: 0;
    left: 46%;
    transform: rotate(15deg);
  }

  .hero__decor--star-blue-sm {
    width: 4%;
    top: 25%;
    right: -4%;
  }

  .hero__decor--star-dark-left {
    width: 3%;
    top: 55%;
    left: 5%;
    transform: rotate(-20deg);
  }

  .hero__decor--star-purple-btm {
    width: 3%;
    bottom: 7%;
    left: 38%;
  }

  .hero__decor--star-dark-btm {
    width: 3.5%;
    bottom: 27%;
    right: 2%;
    transform: rotate(10deg);
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .hero__decor--cloud-left {
      width: 34%;
      bottom: 1%;
      left: -1%;
    }
    .hero__decor--cloud-right {
      width: 24%;
      top: 20%;
      right: -1%;
    }
    .hero__decor--cloud-bottom {
      width: 22%;
      bottom: 12%;
      right: 4%;
    }
    .hero__decor--moon {
      width: 7%;
      top: 1%;
      right: 1%;
    }
    .hero__decor--star-blue-lg {
      width: 7%;
      top: 7%;
      left: 5%;
    }
    .hero__decor--star-purple-sm {
      width: 3.5%;
      top: 20%;
      left: 9%;
    }
    .hero__decor--star-dark-top {
      width: 4%;
      top: -1%;
      left: 46%;
      transform: rotate(15deg);
    }
    .hero__decor--star-blue-sm {
      width: 3.5%;
      top: 25%;
      right: -4%;
    }
    .hero__decor--star-dark-left {
      width: 3%;
      top: 55%;
      left: 5%;
      transform: rotate(-20deg);
    }
    .hero__decor--star-purple-btm {
      width: 3%;
      bottom: 7%;
      left: 38%;
    }
    .hero__decor--star-dark-btm {
      width: 3.5%;
      bottom: 27%;
      right: 2%;
      transform: rotate(10deg);
    }
  }

  @media (max-width: 767px) {
    .hero__decor--moon {
      width: 8%;
      top: 3%;
      right: 4%;
    }
    .hero__decor--cloud-left {
      width: 40%;
      bottom: 0;
      left: -2%;
    }
    .hero__decor--star-blue-lg {
      width: 9%;
      top: 7%;
      left: 4%;
    }
    .hero__decor--star-purple-btm {
      width: 4%;
      bottom: 5%;
      left: 40%;
    }
  }

  .hero__media {
    flex: 1.45;
    max-width: 650px;
    position: relative;
  }

  .hero__media-bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__media-bg::before {
    content: '';
    position: absolute;
    inset: clamp(-160px, -28%, -100px) clamp(-140px, -24%, -80px);
    background: radial-gradient(ellipse 80% 65% at 48% 40%, rgba(213, 204, 250, 0.45) 0%, rgba(213, 204, 250, 0.22) 40%, rgba(213, 204, 250, 0) 70%);
    z-index: 0;
    pointer-events: none;
  }

  .hero__image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

  @media (min-width: 1315px) {
    .hero__media-bg::before {
      inset: clamp(-140px, -24%, -100px) clamp(-120px, -20%, -80px);
      background: radial-gradient(ellipse 80% 65% at 50% 38%, rgba(213, 204, 250, 0.45) 0%, rgba(213, 204, 250, 0.20) 35%, rgba(213, 204, 250, 0) 60%);
    }
  }

  @media (min-width: 1024px) and (max-width: 1160px) {
    .hero__inner {
      gap: 5px;
    }
  }

  @media (min-width: 1024px) and (max-width: 1370px) {
    .hero__title {
      font-size: clamp(48px, calc(-5.3px + 4.9vw), 65px);
    }
  }

  @media (min-width: 1024px) and (max-width: 1050px) {
    .hero__title {
      font-size: 44px;
    }
  }

  @media (max-width: 1024px) {
    .hero__inner {
      padding-inline: 24px;
      padding-block: 16px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023px) {
    .hero__inner {
      gap: 0;
    }

    .hero__content {
      flex: 1;
      padding-block: 60px;
    }

    .hero__media {
      flex: 1.2;
      max-width: 460px;
      display: flex;
      justify-content: center;
    }

    .hero__title {
      font-size: 40px;
      line-height: 42px;
      letter-spacing: 0;
      max-width: 400px;
    }

    .hero__description {
      font-weight: 300;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0;
      max-width: 320px;
    }
  }

  @media (max-width: 767px) {
    .hero__inner {
      flex-direction: column;
      gap: 0;
    }

    .hero__media {
      order: -1;
      width: 100%;
    }

    .hero__content {
      align-items: center;
      text-align: center;
      padding-block: 24px 48px;
      gap: 20px;
    }

    .hero__title {
      font-size: 40px;
      margin: 0 auto;
    }

    .hero__description {
      max-width: none;
      margin: 0 auto;
      font-size: 16px;
    }

    .hero__button {
      align-self: center;
    }
  }

  @media (min-width: 520px) and (max-width: 768px) {
    .hero__media {
      max-width: 570px;
      margin-inline: auto;
    }
  }

  @media (max-width: 520px) {
    .hero__button {
      align-self: stretch;
    }

    .hero__title {
      font-size: 40px;
      max-width: 315px;
      margin: 0 auto;
    }

    .hero__description {
      max-width: 360px;
      margin: 0 auto;
    }
  }

  @keyframes hero-cloud-sway {
    0%   { transform: rotate(-6deg); }
    50%  { transform: rotate(5deg); }
    100% { transform: rotate(-6deg); }
  }

  @keyframes hero-star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes hero-star-fade {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 1; }
  }

  .hero__decor--cloud-left {
    animation: hero-cloud-sway 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: -1.2s;
    will-change: transform;
  }

  .hero__decor--cloud-right {
    animation: hero-cloud-sway 7.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite reverse;
    animation-delay: -2.4s;
    will-change: transform;
  }

  .hero__decor--cloud-bottom {
    animation: hero-cloud-sway 5.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    animation-delay: -0.7s;
    will-change: transform;
  }

  .hero__decor--star-blue-lg {
    animation: hero-star-rotate 10s linear infinite,
               hero-star-fade 4s ease-in-out infinite;
  }

  .hero__decor--star-purple-sm {
    animation: hero-star-rotate 12s linear infinite reverse,
               hero-star-fade 3.5s ease-in-out infinite;
  }

  .hero__decor--star-dark-top {
    animation: hero-star-rotate 8s linear infinite,
               hero-star-fade 4.5s ease-in-out infinite;
  }

  .hero__decor--star-blue-sm {
    animation: hero-star-rotate 13s linear infinite reverse,
               hero-star-fade 3.5s ease-in-out infinite;
  }

  .hero__decor--star-dark-left {
    animation: hero-star-rotate 11s linear infinite,
               hero-star-fade 5s ease-in-out infinite;
  }

  .hero__decor--star-purple-btm {
    animation: hero-star-rotate 9s linear infinite reverse,
               hero-star-fade 4s ease-in-out infinite;
  }

  .hero__decor--star-dark-btm {
    animation: hero-star-rotate 12s linear infinite reverse,
               hero-star-fade 3s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    [class*="hero__decor--"] {
      animation: none !important;
    }
    .hero__button {
      transition: none;
    }
    .hero__button::after {
      transition: none;
    }
    .hero__button:hover,
    .hero__button:active {
      transform: none;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:inside-the-book (INDEX:16) */
.inside-book {
    position: relative;
    padding: 80px 0 100px;
    background: #FEF9F5;
    overflow: hidden;
  }

  .inside-book__container {
    margin: 0 auto;
  }

  .inside-book__header {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .inside-book__heading {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    color: #283047;
    margin: 0;
  }

  .inside-book__subheading {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    margin: 0;
    max-width: 500px;
  }

  .inside-book__list {
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .inside-book__row {
    display: flex;
    align-items: center;
    gap: 73px;
  }

  .inside-book__row.is-reversed {
    flex-direction: row-reverse;
  }

  .inside-book__media {
    flex: 1 1 45%;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
  }

  .inside-book__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    display: block;
  }

  .inside-book__content {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .inside-book__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    color: #283047;
    margin: 0;
  }

  .inside-book__text {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    color: #283047;
    margin: 0;
  }

  .inside-book__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 32px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    white-space: nowrap;
  }

  @media (hover: hover) {
    .inside-book__btn:hover {
      transform: scale(1.03);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
      filter: brightness(1.05);
    }
  }

  .inside-book__btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }

  .inside-book__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }

  .inside-book__decor-item {
    position: absolute;
    display: block;
  }

  .inside-book__decor-item--left-top    { width: 52px; }
  .inside-book__decor-item--left-bottom { width: 28px; }
  .inside-book__decor-item--right-top   { width: 46px; }
  .inside-book__decor-item--right-middle { width: 32px; }
  .inside-book__decor-item--right-bottom { width: 28px; }

  @media (min-width: 1024px) {
    .inside-book__decor-item--left-top {
      left: max(20px, calc(50% - 600px - 40px));
      top: 55%;
    }

    .inside-book__decor-item--left-bottom {
      left: max(30px, calc(50% - 600px - 10px));
      bottom: 30%;
    }

    .inside-book__decor-item--right-top {
      right: max(20px, calc(50% - 600px - 40px));
      left: auto;
      top: 18%;
    }

    .inside-book__decor-item--right-middle {
      right: max(40px, calc(50% - 600px - 20px));
      left: auto;
      bottom: 60%;
      top: auto;
    }

    .inside-book__decor-item--right-bottom {
      right: max(30px, calc(50% - 600px - 30px));
      left: auto;
      bottom: 10%;
    }
  }

  @media (min-width: 1024px) and (max-width: 1075px) {
    .inside-book__content {
      flex: 1 1 60%;
    }

    .inside-book__title {
      font-size: 31px;
    }
  }

  @media (min-width: 1024px) and (max-width: 1200px) {
    .inside-book__row {
      gap: 40px;
    }

    .inside-book__media {
      flex: 0 1 45%;
      min-width: 320px;
    }

    .inside-book__content {
      gap: 12px;
    }
  }

  @media (min-width: 768px) and (max-width: 1024px) {
    .inside-book__container {
      padding-inline: 40px;
    }

    .inside-book__row {
      gap: 32px;
    }

    .inside-book__media {
      flex: 1 1 42%;
    }

    .inside-book__media img {
      height: clamp(260px, 36vw, 320px);
      object-fit: cover;
    }

    .inside-book__content {
      flex: 1 1 58%;
      min-width: 0;
      gap: 12px;
    }

    .inside-book__heading {
      font-size: 32px;
    }

    .inside-book__subheading {
      font-size: 16px;
    }

    .inside-book__title {
      font-size: 28px;
      letter-spacing: -0.7px;
    }

    .inside-book__decor-item--left-top {
      left: 20px;
      top: 40%;
      width: 42px;
    }

    .inside-book__decor-item--left-bottom {
      left: 85px;
      top: 42%;
      width: 22px;
      rotate: -51deg;
    }

    .inside-book__decor-item--right-top {
      display: none;
    }

    .inside-book__decor-item--right-middle {
      top: 69%;
      right: 3%;
    }

    .inside-book__decor-item--right-bottom {
      right: 30px;
      left: auto;
      bottom: 10%;
    }
  }

  @media (max-width: 767px) {
    .inside-book {
      padding: 60px 0 80px;
    }

    .inside-book__decor {
      display: none;
    }

    .inside-book__container {
      padding-inline: 16px;
    }

    .inside-book__header {
      margin-bottom: 40px;
    }

    .inside-book__heading {
      font-size: 28px;
    }

    .inside-book__subheading {
      font-size: 16px;
    }

    .inside-book__list {
      gap: 48px;
    }

    .inside-book__row,
    .inside-book__row.is-reversed {
      flex-direction: column;
      gap: 24px;
    }

    .inside-book__media {
      flex: none;
      width: 100%;
    }

    .inside-book__media img {
      height: clamp(240px, 38vw, 300px);
      object-fit: cover;
    }

    .inside-book__content {
      flex: none;
      width: 100%;
      gap: 16px;
    }

    .inside-book__title {
      font-size: 28px;
    }

    .inside-book__btn {
      width: auto;
      align-self: flex-start;
    }
  }

  @media (max-width: 509px) {
    .inside-book__btn {
      width: 100%;
    }
  }

  .inside-book__cloud {
    position: absolute;
    bottom: -51px;
    left: 0;
    width: 100%;
    height: 35%;
    background-repeat: repeat-x;
    background-size: 869px 100%;
    background-position: 0 bottom;
    pointer-events: none;
    animation: cloud-move 35s linear infinite;
  }

  @media (max-width: 1024px) {
    .inside-book__cloud {
      height: 41%;
    }
  }

  @keyframes cloud-move {
    from { background-position-x: 0; }
    to   { background-position-x: -869px; }
  }

  .star-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  @keyframes star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes star-scale {
    to { transform: scale(1.2); }
  }

  @keyframes star-color-filter {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  .star-wrapper--1 {
    animation: star-scale 4s ease-in-out infinite alternate 0s;
  }
  .star-wrapper--1 img {
    animation: star-rotate 8s linear infinite 0s, star-color-filter 8s ease-in-out infinite 0s;
  }

  .star-wrapper--2 {
    animation: star-scale 3s ease-in-out infinite alternate -1s;
  }
  .star-wrapper--2 img {
    animation: star-rotate 10s linear infinite reverse -2s, star-color-filter 8s ease-in-out infinite -3s;
  }

  .star-wrapper--3 {
    animation: star-scale 5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--3 img {
    animation: star-rotate 6s linear infinite -4s, star-color-filter 8s ease-in-out infinite -5s;
  }

  .star-wrapper--4 {
    animation: star-scale 4.5s ease-in-out infinite alternate -3s;
  }
  .star-wrapper--4 img {
    animation: star-rotate 12s linear infinite reverse -1s, star-color-filter 8s ease-in-out infinite -6s;
  }

  .star-wrapper--5 {
    animation: star-scale 3.5s ease-in-out infinite alternate -2s;
  }
  .star-wrapper--5 img {
    animation: star-rotate 9s linear infinite -3s, star-color-filter 8s ease-in-out infinite -1s;
  }

  @media (prefers-reduced-motion: reduce) {
    .star-wrapper,
    .star-wrapper img,
    .inside-book__cloud {
      animation: none;
    }
  }
/* END_SECTION:inside-the-book */

/* START_SECTION:product-how-it-works (INDEX:20) */
.product-how-it-works {
    --product-how-it-works-bg: #FEF9F5;
    --product-how-it-works-text: #283047;
    --product-how-it-works-text-muted: #4D4D4D;
    --product-how-it-works-connector: #9BB3C9;
    --product-how-it-works-card-border: #D6E3F0;
    --product-how-it-works-button: #E2765C;
    --product-how-it-works-button-hover: #CF6449;
    background: var(--product-how-it-works-bg);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 120px;
    width: 100vw;
  }

  .product-how-it-works__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1440px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    width: 100%;
  }

  .product-how-it-works__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .product-how-it-works__star {
    position: absolute;
    display: block;
    height: auto;
  }

  .product-how-it-works__star img {
    display: block;
    height: auto;
    width: 100%;
  }

  .product-how-it-works__star--top-left {
    top: 1px;
    left: 56px;
    width: 60px;
  }

  .product-how-it-works__star--top-right {
    top: 36px;
    right: 60px;
    width: 36px;
  }

  .product-how-it-works__star--bottom-left {
    bottom: 72px;
    left: 48px;
    width: 52px;
  }

  .product-how-it-works__star--bottom-right {
    bottom: 154px;
    right: 52px;
    width: 34px;
  }

  .product-how-it-works__header,
  .product-how-it-works__steps,
  .product-how-it-works__cta {
    position: relative;
    z-index: 1;
  }

  .product-how-it-works__header {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .product-how-it-works__title {
    color: var(--product-how-it-works-text);
    font-family: 'KoPub Batang', serif;
    font-size: 38px;
    line-height: 1.2;
    margin: 0 0 16px;
  }

  .product-how-it-works__subtitle {
    color: var(--product-how-it-works-text-muted);
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    margin: 0 auto;
    max-width: 658px;
  }

  .product-how-it-works__steps {
    margin-top: 60px;
  }

  .product-how-it-works__steps-list {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    width: 100%;
  }

  .product-how-it-works__connector {
    display: none;
  }

  .product-how-it-works__step-cloud {
    display: none;
  }

  .product-how-it-works__step {
    align-items: center;
    display: flex;
    flex-direction: column;
    opacity: 0;
    position: relative;
    text-align: center;
    transform: translateY(-20px);
  }

  .product-how-it-works__step:not(:last-child)::after {
    background-image: repeating-linear-gradient(
      to right,
      var(--product-how-it-works-connector) 0,
      var(--product-how-it-works-connector) 6px,
      transparent 6px,
      transparent 12px
    );
    content: "";
    height: 1px;
    opacity: 0;
    position: absolute;
    right: -30px;
    top: 48px;
    transform: scaleX(0);
    transform-origin: left center;
    width: 60px;
  }

  .product-how-it-works__step.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .product-how-it-works__step.is-visible::after {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .product-how-it-works__step:nth-child(1) {
    transition-delay: 0s;
  }

  .product-how-it-works__step:nth-child(1).is-visible::after {
    transition-delay: 0.25s;
  }

  .product-how-it-works__step:nth-child(3) {
    transition-delay: 0.3s;
  }

  .product-how-it-works__step:nth-child(3).is-visible::after {
    transition-delay: 0.55s;
  }

  .product-how-it-works__step:nth-child(5) {
    transition-delay: 0.6s;
  }

  .product-how-it-works__step:nth-child(5).is-visible::after {
    transition-delay: 0.85s;
  }

  .product-how-it-works__step:nth-child(7) {
    transition-delay: 0.9s;
  }

  .product-how-it-works__step-icon {
    display: flex;
    justify-content: center;
  }

  .product-how-it-works__step-icon img {
    display: block;
  }

  .product-how-it-works__step-text {
    color: var(--product-how-it-works-text);
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 auto;
    max-width: 160px;
    padding-top: 12px;
    text-align: center;
  }

  .product-how-it-works__cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-bottom: 50px;
  }

  .product-how-it-works__button {
    background: var(--product-how-it-works-button);
    border: none;
    border-radius: 999px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.08px;
    line-height: 18px;
    padding: 14px 28px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .product-how-it-works__button::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.05));
    border-radius: inherit;
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s ease-out;
  }

  .product-how-it-works__button:hover {
    background: var(--product-how-it-works-button-hover);
    transform: scale(1.04);
  }

  .product-how-it-works__button:hover::after {
    opacity: 1;
  }

  .product-how-it-works__button:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) inset;
    transform: scale(0.97);
    transition-duration: 0.1s;
  }

  @keyframes product-how-it-works-star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes product-how-it-works-star-scale {
    to { transform: scale(1.2); }
  }

  @keyframes product-how-it-works-star-color-filter {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  .product-how-it-works__star-wrapper--1 {
    animation: product-how-it-works-star-scale 4s ease-in-out infinite alternate 0s;
  }

  .product-how-it-works__star-wrapper--1 img {
    animation: product-how-it-works-star-rotate 8s linear infinite 0s,
      product-how-it-works-star-color-filter 8s ease-in-out infinite 0s;
  }

  .product-how-it-works__star-wrapper--2 {
    animation: product-how-it-works-star-scale 3s ease-in-out infinite alternate -1s;
  }

  .product-how-it-works__star-wrapper--2 img {
    animation: product-how-it-works-star-rotate 10s linear infinite reverse -2s,
      product-how-it-works-star-color-filter 8s ease-in-out infinite -3s;
  }

  .product-how-it-works__star-wrapper--3 {
    animation: product-how-it-works-star-scale 5s ease-in-out infinite alternate -2s;
  }

  .product-how-it-works__star-wrapper--3 img {
    animation: product-how-it-works-star-rotate 6s linear infinite -4s,
      product-how-it-works-star-color-filter 8s ease-in-out infinite -5s;
  }

  .product-how-it-works__star-wrapper--4 {
    animation: product-how-it-works-star-scale 4.5s ease-in-out infinite alternate -3s;
  }

  .product-how-it-works__star-wrapper--4 img {
    animation: product-how-it-works-star-rotate 12s linear infinite reverse -1s,
      product-how-it-works-star-color-filter 8s ease-in-out infinite -6s;
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .product-how-it-works {
      padding-top: 24px;
      padding-bottom: 60px;
    }

    .product-how-it-works__inner {
      padding-left: 40px;
      padding-right: 40px;
    }

    .product-how-it-works__title {
      font-size: 32px;
    }

    .product-how-it-works__subtitle {
      font-size: 18px;
      max-width: 557px;
    }

    .product-how-it-works__header {
      margin-bottom: 32px;
    }

    .product-how-it-works__steps {
      margin-top: 28px;
    }

    .product-how-it-works__steps-list {
      padding-top: 36px;
    }

    .product-how-it-works__step:not(:last-child)::after {
      right: -20px;
      top: 42px;
      width: 40px;
    }

    .product-how-it-works__step-icon img {
      width: 84%;
      height: auto;
    }

    .product-how-it-works__step-text {
      max-width: 138px;
      padding-top: 10px;
    }

    .product-how-it-works__star--top-left {
      left: 28px;
      top: 2px;
      width: 42px;
    }

    .product-how-it-works__star--top-right {
      right: 30px;
      top: 18px;
      width: 26px;
    }

    .product-how-it-works__star--bottom-left {
      bottom: 56px;
      left: 24px;
      width: 34px;
    }

    .product-how-it-works__star--bottom-right {
      display: none;
    }
  }

  @media (max-width: 767px) and (min-width: 581px) {
    .product-how-it-works__header {
      margin-bottom: 28px;
    }

    .product-how-it-works__steps {
      margin-top: 20px;
    }

    .product-how-it-works__steps-list {
      column-gap: 0;
      padding-top: 20px;
    }

    .product-how-it-works__step-icon {
      display: none;
    }

    .product-how-it-works__step-cloud {
      display: flex;
      justify-content: center;
    }

    .product-how-it-works__step-cloud img {
      display: block;
      height: auto;
      width: 75%;
    }

    .product-how-it-works__step:not(:last-child)::after {
      right: -18px;
      top: 38px;
      width: 36px;
    }

    .product-how-it-works__step-text {
      font-size: 13px;
      max-width: 120px;
      padding-top: 8px;
    }

    .product-how-it-works__star--top-left {
      left: 20px;
      top: 10px;
      width: 32px;
    }

    .product-how-it-works__star--top-right {
      right: 20px;
      top: 20px;
      width: 22px;
    }

    .product-how-it-works__star--bottom-left {
      display: none;
    }

    .product-how-it-works__star--bottom-right {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .product-how-it-works {
      padding-top: 24px;
      padding-bottom: 40px;
    }

    .product-how-it-works__inner {
      padding-left: 24px;
      padding-right: 24px;
    }

    .product-how-it-works__title {
      font-size: 28px;
    }

    .product-how-it-works__subtitle {
      font-size: 16px;
    }

    .product-how-it-works__header {
      margin-bottom: 24px;
    }

    .product-how-it-works__steps {
      margin-top: 20px;
    }

    .product-how-it-works__step-text {
      margin: 0;
      max-width: none;
      padding-top: 0;
    }

    .product-how-it-works__cta {
      margin-left: auto;
      margin-right: auto;
      max-width: 320px;
      padding-bottom: 60px;
      width: 100%;
    }

    .product-how-it-works__button {
      width: 100%;
    }
  }

  @media (max-width: 580px) {
    .product-how-it-works__header {
      margin-bottom: 36px;
    }

    .product-how-it-works__steps-list {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 0 16px;
      width: 100%;
    }

    .product-how-it-works__connector {
      display: none;
    }

    .product-how-it-works__step {
      position: relative;
      width: 100%;
    }

    .product-how-it-works__step:not(:last-child)::after {
      display: none;
    }

    .product-how-it-works__step-icon {
      display: none;
    }

    .product-how-it-works__step-cloud {
      display: flex;
      height: 120px;
      justify-content: center;
      position: absolute;
      top: 50%;
      width: 135px;
      z-index: 2;
    }

    .product-how-it-works__step.is-left .product-how-it-works__step-cloud {
      left: -19px;
      transform: translateY(-53%);
    }

    .product-how-it-works__step.is-right .product-how-it-works__step-cloud {
      right: -25px;
      transform: translateY(-50%);
    }

    .product-how-it-works__step-cloud img {
      display: block;
      height: auto;
      width: 100%;
    }

    .product-how-it-works__step-content {
      background: #FFFFFF;
      border: 1px solid var(--product-how-it-works-card-border);
      border-radius: 16px;
      box-sizing: border-box;
      padding: 9px 0;
      width: 100%;
    }

    .product-how-it-works__step-text {
      display: block;
      font-size: 18px;
      line-height: 1.4;
      width: 100%;
    }

    .product-how-it-works__step.is-left .product-how-it-works__step-text {
      padding-left: 125px;
      padding-right: 16px;
      text-align: left;
    }

    .product-how-it-works__step.is-right .product-how-it-works__step-text {
      padding-left: 16px;
      padding-right: 125px;
      text-align: left;
    }

    .product-how-it-works__star--top-left {
      left: 14px;
      top: 10px;
      width: 28px;
    }

    .product-how-it-works__star--top-right {
      right: 14px;
      top: 18px;
      width: 18px;
    }

    .product-how-it-works__star--bottom-left {
      display: none;
    }

    .product-how-it-works__star--bottom-right {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-how-it-works__button,
    .product-how-it-works__button::after,
    .product-how-it-works__step,
    .product-how-it-works__step::after,
    .product-how-it-works__star-wrapper,
    .product-how-it-works__star-wrapper img {
      transition: none !important;
    }

    .product-how-it-works__button:hover,
    .product-how-it-works__button:active {
      transform: none;
    }

    .product-how-it-works__step {
      opacity: 1 !important;
      transform: none !important;
    }

    .product-how-it-works__step::after {
      opacity: 1 !important;
      transform: none !important;
    }

    .product-how-it-works__star-wrapper,
    .product-how-it-works__star-wrapper img {
      animation: none !important;
    }
  }
/* END_SECTION:product-how-it-works */

/* START_SECTION:product-photo-guidelines (INDEX:22) */
#shopify-section-{{ section.id }} {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .product-photo-guidelines {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-color: #EFE9F5;
    padding: 100px 0;
  }

  .product-photo-guidelines__clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transform: translateY(-60%);
    pointer-events: none;
  }

  .product-photo-guidelines__decor-star {
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  .product-photo-guidelines__decor-star--black {
    top: 8%;
    left: 6%;
    width: 28px;
    height: auto;
  }

  .product-photo-guidelines__decor-star--white {
    top: 15%;
    left: 3%;
    width: 40px;
    height: auto;
  }

  .product-photo-guidelines__decor-star--blue {
    top: 60%;
    right: 4%;
    width: 45px;
    height: auto;
  }

  .product-photo-guidelines__container {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    box-sizing: border-box;
  }

  .product-photo-guidelines__header {
    text-align: center;
    margin-bottom: 64px;
  }

  .product-photo-guidelines__heading {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 400;
    color: #1a2332;
    margin: 0 auto 20px;
    font-family: 'KoPub Batang'
    , serif;
    max-width: 543px;
  }

  .product-photo-guidelines__subtitle {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
    color: #4a5568;
    margin: 0 auto;
    max-width: 543px;
  }

  .product-photo-guidelines__content {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 24px 48px;
    align-items: stretch;
    overflow: hidden;
  }

  .product-photo-guidelines__cards {
    grid-column: 1;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
  }

  .product-photo-guidelines__card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-top-width: 10px;
    cursor: default;
    transition: none;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  .product-photo-guidelines__card--positive {
    border-top-color: #22c55e;
    border-left-color: #22c55e;
    border-right-color: #22c55e;
    border-bottom-color: #22c55e;
  }

  .product-photo-guidelines__card--negative {
    border-top-color: #ef4444;
    border-left-color: #ef4444;
    border-right-color: #ef4444;
    border-bottom-color: #ef4444;
  }

  .product-photo-guidelines__card:hover {
    transform: none;
    box-shadow: none;
  }

  .product-photo-guidelines__card-image-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 16px;
  }

  .product-photo-guidelines__card-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .product-photo-guidelines__card-badge {
    position: absolute;
    bottom: 64px;
    right: -4px;
    width: 24px;
    height: 24px;
    z-index: 2;
  }

  .product-photo-guidelines__card--overlap .product-photo-guidelines__card-image-wrapper {
    width: 90px;
    height: 90px;
  }

  .product-photo-guidelines__card-image--main {
    position: relative;
    z-index: 0;
  }

  .product-photo-guidelines__card-image--small {
    position: absolute;
    bottom: -12px;
    left: -13px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
    border: 2px solid white;
  }

  .product-photo-guidelines__card-badge--main {
    bottom: -4px;
    right: -4px;
    z-index: 1;
    display: none;
  }

  .product-photo-guidelines__card-badge--small {
    bottom: 10px;
    left: -23px;
    z-index: 3;
  }

  .product-photo-guidelines__card-title {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 400;
    color: #1a2332;
    margin: 0 0 10px;
    overflow-wrap: break-word;
  }

  .product-photo-guidelines__card-description {
    font-size: 15px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
    overflow-wrap: break-word;
  }

  .product-photo-guidelines__sidebar {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
    min-width: 0;
    align-items: start;
  }

  .product-photo-guidelines__checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
  }

  .product-photo-guidelines__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .product-photo-guidelines__checklist-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
  }

  .product-photo-guidelines__checklist-text {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.08px;
    color: #1a2332;
    overflow-wrap: break-word;
  }

  .product-photo-guidelines__upload {
    background: #ffffff;
    border: 2px dashed #60a5fa;
    border-radius: 14px;
    padding: 28px;
    width: 100%;
    margin: 0;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: flex-end;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
  }

  .product-photo-guidelines__upload:focus-visible {
    outline: 2px solid #4A97CB;
    outline-offset: 3px;
    background: #C8E7FF;
    border-color: #4A97CB;
  }

  @media (hover: hover) {
    .product-photo-guidelines__upload:hover {
      background: #C8E7FF;
      border-color: #4A97CB;
      transform: translateY(-1px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-photo-guidelines__upload {
      transition: none;
    }
  }

  .product-photo-guidelines__upload-icon {
    width: 70px;
    height: 48px;
    margin: 0 auto 12px;
    display: block;
  }

  .product-photo-guidelines__upload-title {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: #1a2332;
    margin: 0 0 6px;
  }

  .product-photo-guidelines__upload-helper {
    font-size: 14px;
    line-height: 1.4;
    color: #6b7280;
    margin: 0;
  }

  @media (max-width: 1200px) and (min-width: 1024px) {

    .product-photo-guidelines__content {
      gap: 20px 40px;
      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.95fr);
    }

    .product-photo-guidelines__cards {
      gap: 20px;
    }

    .product-photo-guidelines__card {
      min-height: 200px;
    }

    .product-photo-guidelines__sidebar {
      gap: 20px;
    }

    .product-photo-guidelines__upload {
      padding: 24px;
    }
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .product-photo-guidelines {
      padding: 80px 0;
    }

    .product-photo-guidelines__container {
      padding: 0 40px;
    }

    .product-photo-guidelines__heading {
      font-size: 32px;
    }

    .product-photo-guidelines__subtitle {
      font-size: 16px;
      max-width: 447px;
    }

    .product-photo-guidelines__decor-star--blue {
      top: 65%;
      width: 35px;
    }

    .product-photo-guidelines__content {
      gap: 18px 32px;
      grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.9fr);
    }

    .product-photo-guidelines__card-badge {
      position: absolute;
      bottom: 53px;
      right: -4px;
      width: 24px;
      height: 24px;
      z-index: 2;
    }

    .product-photo-guidelines__cards {
      gap: 18px;
    }

    .product-photo-guidelines__card {
      padding: 20px;
      min-height: 170px;
    }

    .product-photo-guidelines__card-image-wrapper {
      width: 90px;
      height: 90px;
    }

    .product-photo-guidelines__card--overlap .product-photo-guidelines__card-image-wrapper {
      width: 90px;
      height: 90px;
    }

    .product-photo-guidelines__card-badge--small {
      bottom: 7px;
      left: -22px;
    }

    .product-photo-guidelines__card-title {
      font-size: 20px;
    }

    .product-photo-guidelines__card-description {
      font-size: 14px;
    }

    .product-photo-guidelines__checklist {
      gap: 12px;
    }

    .product-photo-guidelines__checklist-text {
      font-size: 15px;
    }

    .product-photo-guidelines__sidebar {
      gap: 18px;
    }

    .product-photo-guidelines__upload {
      padding: 22px;
    }

    .product-photo-guidelines__upload-icon {
      width: 40px;
      height: 40px;
    }

    .product-photo-guidelines__upload-title {
      font-size: 16px;
    }
  }

  @media (max-width: 767px) {
    .product-photo-guidelines {
      padding: 60px 0;
    }

    .product-photo-guidelines__container {
      padding: 0 24px;
    }

    .product-photo-guidelines__header {
      margin-bottom: 48px;
    }

    .product-photo-guidelines__heading {
      font-size: 32px;
      margin-bottom: 16px;
    }

    .product-photo-guidelines__subtitle {
      font-size: 15px;
    }

    .product-photo-guidelines__content {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 32px;
    }

    .product-photo-guidelines__cards {
      grid-column: auto;
      grid-row: auto;
      gap: 18px;
    }

    .product-photo-guidelines__card {
      padding: 16px;
    }

    .product-photo-guidelines__sidebar {
      grid-column: auto;
      grid-row: auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .product-photo-guidelines__card-image-wrapper {
      width: 90px;
      height: 90px;
      margin-bottom: 12px;
    }

    .product-photo-guidelines__card-badge {
      width: 24px;
      height: 24px;
    }

    .product-photo-guidelines__card--overlap .product-photo-guidelines__card-image-wrapper {
      width: 90px;
      height: 90px;
    }

    .product-photo-guidelines__card-badge--small {
      width: 24px;
      height: 24px;
      bottom: 7px;
      left: -25px;
    }

    .product-photo-guidelines__card-title {
      font-size: 20px;
      margin-bottom: 8px;
      padding-top: 8px;
    }

    .product-photo-guidelines__card-description {
      font-size: 14px;
    }

    .product-photo-guidelines__checklist {
      display: none;
    }

    .product-photo-guidelines__upload {
      padding: 20px 24px;
      align-self: auto;
      width: 100%;
    }

    .product-photo-guidelines__decor-star--black {
      display: none;
    }

    .product-photo-guidelines__decor-star--white {
      top: 3%;
      left: 4%;
      width: 32px;
    }

    .product-photo-guidelines__decor-star--blue {
      top: 2%;
      right: 5%;
      width: 35px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-photo-guidelines__card {
      transition: none;
    }

    .product-photo-guidelines__card:hover {
      transform: none;
    }
  }
/* END_SECTION:product-photo-guidelines */

/* START_SECTION:product-recommendations (INDEX:23) */
.product-recommendations {
    position: relative;
    padding: 90px;
    background: #FEF9F5;
    overflow-x: clip;
    overflow-y: visible;
  }

  .product-recommendations__inner {
    margin: 0 auto;
    max-width: 1240px;
    padding-bottom: 65px;
  }

  .product-recommendations__header {
    text-align: center;
    max-width: 520px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-recommendations__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: #283047;
    margin: 0;
  }

  .product-recommendations__subtitle {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    color: #4d4d4d;
    margin: 0;
  }

  .product-recommendations__carousel {
    position: relative;
    max-width: 1160px;
    margin-inline: auto;
  }

  .product-recommendations__viewport {
    overflow: hidden;
    max-width: 1039px;
    margin-inline: auto;
  }

  .product-recommendations__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-recommendations__track::-webkit-scrollbar {
    display: none;
  }

  .product-recommendations__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    box-shadow: 2px 2px 4.5px rgba(213, 213, 213, 0.25);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .product-recommendations__arrow svg {
    width: 24px;
    height: 24px;
    color: #283047;
  }

  .product-recommendations__arrow:hover {
    transform: translateY(-50%) scale(1.05);
    box-shadow: 2px 2px 8px rgba(213, 213, 213, 0.35);
  }

  .product-recommendations__arrow:focus-visible {
    outline: 2px solid #e87c65;
    outline-offset: 2px;
  }

  .product-recommendations__arrow--prev {
    left: -60px;
  }

  .product-recommendations__arrow--next {
    right: -60px;
  }

  .product-recommendations .book-card {
    flex: 0 0 333px;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .product-recommendations .book-card:hover {
    transform: scale(1.04);
    box-shadow:
      0 2px 8px rgba(40, 48, 71, 0.04),
      0 8px 22px rgba(40, 48, 71, 0.09),
      0 20px 42px rgba(232, 124, 101, 0.08);
  }

  .product-recommendations .book-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 260px;
    background: #fbf0ec;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
  }

  .product-recommendations .book-card__media > img {
    width: 75%;
    height: auto;
    object-fit: contain;
    display: block;
  }

  .product-recommendations .book-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .product-recommendations .book-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }

  .product-recommendations .book-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .product-recommendations .book-card__title {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #283047;
    margin: 0;
  }

  .product-recommendations .book-card__desc {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #6b7280;
    margin: 0;
  }

  .product-recommendations .book-card__price {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    color: #283047;
    margin: 8px 0 0 0;
  }

  .product-recommendations .book-card__wishlist {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .product-recommendations .book-card__wishlist .book-card__wishlist-slot {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    pointer-events: auto;
  }

  .product-recommendations .book-card__wishlist .book-card__wishlist-slot > *,
  .product-recommendations .book-card__wishlist > .frcp-wishlist-wrapper,
  .product-recommendations .book-card__wishlist .book-card__wishlist-slot .frcp-wishlist-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }

  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot .frcp-wishlist-wrapper,
  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot :where(button, a, [role="button"]) {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: #fbf0ec !important;
    color: #E87C65 !important;
    box-shadow: none !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-decoration: none !important;
    overflow: hidden !important;
    position: relative !important;
    gap: 0 !important;
  }

  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot svg,
  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot img {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    display: block !important;
    color: #E87C65 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot svg,
  .product-recommendations .book-card__wishlist--content .book-card__wishlist-slot svg * {
    stroke: currentColor !important;
  }

  .product-recommendations .book-card__wishlist--media {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  .product-recommendations .book-card__wishlist--content {
    flex-shrink: 0;
  }

  .product-recommendations .book-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .product-recommendations .book-card__stars {
    color: #f4a738;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
  }

  .product-recommendations .book-card__reviews {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 13px;
    color: #888;
  }

  .product-recommendations .book-card__btn {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e87c65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 32px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
  }

  .product-recommendations .book-card__btn:hover {
    background-color: #d96b52;
  }

  .product-recommendations__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
  }

  .product-recommendations .decor {
    position: absolute;
    display: block;
  }

  .product-recommendations .decor--left-top {
    width: 52px;
    left: max(20px, calc(50% - 600px - 40px));
    top: 40%;
  }

  .product-recommendations .decor--left-bottom {
    width: 28px;
    left: max(30px, calc(50% - 600px - 10px));
    top: 60%;
  }

  .product-recommendations .decor--right-top {
    width: 46px;
    left: min(calc(100% - 60px), calc(50% + 600px + 20px));
    top: 20%;
  }

  .product-recommendations .decor--right-middle {
    width: 32px;
    left: min(calc(100% - 40px), calc(50% + 600px + 30px));
    top: 55%;
  }

  .product-recommendations .decor--right-bottom {
    width: 28px;
    left: min(calc(100% - 50px), calc(50% + 600px + 10px));
    bottom: 10%;
  }

  .product-recommendations .decor--tablet-extra {
    display: none;
  }

  .product-recommendations .decor--mobile-orange {
    display: none;
  }

  .product-recommendations .decor--mobile-purple {
    display: none;
  }

  .product-recommendations .star-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  @keyframes star-rotate {
    to { transform: rotate(360deg); }
  }

  @keyframes star-scale {
    to { transform: scale(1.2); }
  }

  @keyframes star-color-filter {
    0%   { filter: hue-rotate(0deg); }
    50%  { filter: hue-rotate(180deg); }
    100% { filter: hue-rotate(360deg); }
  }

  .product-recommendations .star-wrapper--1 {
    animation: star-scale 4s ease-in-out infinite alternate 0s;
  }
  .product-recommendations .star-wrapper--1 img {
    animation: star-rotate 8s linear infinite 0s, star-color-filter 8s ease-in-out infinite 0s;
  }

  .product-recommendations .star-wrapper--2 {
    animation: star-scale 3s ease-in-out infinite alternate -1s;
  }
  .product-recommendations .star-wrapper--2 img {
    animation: star-rotate 10s linear infinite reverse -2s, star-color-filter 8s ease-in-out infinite -3s;
  }

  .product-recommendations .star-wrapper--3 {
    animation: star-scale 5s ease-in-out infinite alternate -2s;
  }
  .product-recommendations .star-wrapper--3 img {
    animation: star-rotate 6s linear infinite -4s, star-color-filter 8s ease-in-out infinite -5s;
  }

  .product-recommendations .star-wrapper--4 {
    animation: star-scale 4.5s ease-in-out infinite alternate -3s;
  }
  .product-recommendations .star-wrapper--4 img {
    animation: star-rotate 12s linear infinite reverse -1s, star-color-filter 8s ease-in-out infinite -6s;
  }

  .product-recommendations .star-wrapper--5 {
    animation: star-scale 3.5s ease-in-out infinite alternate -2s;
  }
  .product-recommendations .star-wrapper--5 img {
    animation: star-rotate 9s linear infinite -3s, star-color-filter 8s ease-in-out infinite -1s;
  }

  .product-recommendations .star-wrapper--6 {
    animation: star-scale 4s ease-in-out infinite alternate -4s;
  }
  .product-recommendations .star-wrapper--6 img {
    animation: star-rotate 7s linear infinite reverse -5s, star-color-filter 8s ease-in-out infinite -2s;
  }

  .product-recommendations .star-wrapper--7 {
    animation: star-scale 5s ease-in-out infinite alternate -1s;
  }
  .product-recommendations .star-wrapper--7 img {
    animation: star-rotate 11s linear infinite -2s, star-color-filter 8s ease-in-out infinite -4s;
  }

  .product-recommendations .star-wrapper--8 {
    animation: star-scale 3s ease-in-out infinite alternate -3s;
  }
  .product-recommendations .star-wrapper--8 img {
    animation: star-rotate 6s linear infinite reverse -6s, star-color-filter 8s ease-in-out infinite -2s;
  }

  @media (min-width: 1024px) {
    .product-recommendations__viewport {
      max-width: 1075px;
      overflow: visible;
    }

    .product-recommendations__track {
      width: calc(100% + 112px);
      padding: 48px 56px 88px;
      margin: -48px -56px -88px;
      box-sizing: border-box;
    }

    .product-recommendations__arrow {
      display: flex;
    }
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .product-recommendations {
      padding-top: 100px;
      padding-bottom: 150px;
      padding-left: 0px;
      padding-right: 0px;
    }

    .product-recommendations__title {
      font-size: 32px;
    }

    .product-recommendations__viewport {
      max-width: none;
    }

    .product-recommendations__track {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      overflow-x: visible;
    }

    .product-recommendations .book-card {
      flex: none;
      width: 100%;
    }

    .product-recommendations .book-card__title {
      font-size: 24px;
    }

    .product-recommendations .book-card__media {
      padding: 10px;
    }

    .product-recommendations .book-card__media > img {
      width: 85%;
    }

    .product-recommendations .book-card:hover {
      transform: scale(1.02);
      box-shadow:
        0 2px 6px rgba(40, 48, 71, 0.04),
        0 6px 16px rgba(40, 48, 71, 0.08),
        0 14px 30px rgba(232, 124, 101, 0.06);
    }

    .product-recommendations .decor--left-top {
      left: 20px;
      top: 115px;
    }

    .product-recommendations .decor--right-top {
      right: 20px;
      left: auto;
      top: 100px;
    }

    .product-recommendations .decor--left-bottom {
      left: 40px;
      top: auto;
      bottom: 60px;
    }

    .product-recommendations .decor--right-bottom {
      right: 30px;
      left: auto;
      bottom: 80px;
    }

    .product-recommendations .decor--right-middle {
      display: none;
    }

    .product-recommendations .decor--tablet-extra {
      display: block;
      position: absolute;
      width: 21px;
      height: auto;
      right: 55px;
      top: 145px;
      z-index: 2;
    }
  }

  @media (max-width: 767px) {
    .product-recommendations {
      padding: 50px 0px;
      padding-bottom: 130px;
    }

    .product-recommendations__header {
      margin: 0 auto 32px;
    }

    .product-recommendations__title {
      font-size: 28px;
    }

    .product-recommendations__subtitle {
      font-size: 16px;
      max-width: 330px;
      margin: 0 auto;
    }

    .product-recommendations__viewport {
      max-width: none;
    }

    .product-recommendations__track {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      overflow-x: visible;
    }

    .product-recommendations .book-card {
      flex: none;
      width: 100%;
    }

    .product-recommendations .book-card__title {
      font-size: 20px;
    }

    .product-recommendations .book-card__media {
      border-radius: 16px 16px 0 0;
    }

    .product-recommendations .book-card__media > img {
      width: 75%;
      max-width: 85%;
      height: auto;
      display: block;
      border-radius: 0;
    }

    .product-recommendations .book-card__content {
      padding: 12px 8px;
    }

    .product-recommendations .book-card__wishlist--content {
      display: none;
    }

     .product-recommendations .star-wrapper--2 {
        display: none;
  }

  .product-recommendations .star-wrapper--4 {
        display: none;
  }

    .product-recommendations .book-card__wishlist--media {
      display: flex;
      top: 12px;
      right: 12px;
    }

    .product-recommendations .book-card__wishlist {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }

    .product-recommendations .book-card__wishlist .book-card__wishlist-slot {
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      flex: 0 0 40px;
    }

    .product-recommendations .reviews-label {
      display: none;
    }

    .product-recommendations__header {
      position: relative;
      padding-top: 30px;
    }

    .product-recommendations .decor--left-top {
      top: 40px;
      left: 10px;
      width: 32px;
    }

    .product-recommendations .decor--right-top:not(.decor--mobile-orange) {
      display: none;
    }

    .product-recommendations .decor--mobile-orange {
      display: block;
      position: absolute;
      width: 18px;
      height: auto;
      top: 55px;
      right: 2px;
    }

    .product-recommendations .decor--tablet-extra {
      display: none;
    }

    .product-recommendations .decor--right-bottom:not(.decor--mobile-purple) {
      display: none;
    }

    .product-recommendations .decor--mobile-purple {
      display: block;
      position: absolute;
      bottom: 68px;
      right: 10px;
      rotate: 35deg;
    }

    .product-recommendations .book-card {
      will-change: auto;
      transition: none;
    }

    .product-recommendations .book-card:hover {
      transform: none;
      box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    }
  }

  @media (max-width: 620px) {
    .product-recommendations .book-card__media > img {
      width: 85%;
      max-width: 85%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-recommendations__track {
      scroll-behavior: auto;
    }

    .product-recommendations .book-card {
      transition: none;
      will-change: auto;
    }

    .product-recommendations .book-card:hover {
      transform: none;
    }

    .product-recommendations .star-wrapper,
    .product-recommendations .star-wrapper img {
      animation: none;
    }
  }

  @media (hover: none) {
    .product-recommendations .book-card {
      will-change: auto;
      transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
    }

    .product-recommendations .book-card:hover {
      transform: none;
      box-shadow: 0 2px 12px rgba(40, 48, 71, 0.07);
    }

    .product-recommendations .book-card:active {
      transform: scale(0.99);
      box-shadow: 0 1px 6px rgba(40, 48, 71, 0.05);
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-transformation (INDEX:24) */
.product-transformation {
    position: relative;
    background: #D8EBFA;
    padding: 80px 0 100px;
    overflow: visible;
  }

  .product-transformation > * {
    position: relative;
    z-index: 2;
  }

  .product-transformation__inner {
    margin: 0 auto;
  }

  .product-transformation__header {
    text-align: center;
    margin-bottom: 44px;
  }

  .product-transformation__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: #283047;
    margin: 0 auto;
    max-width: 600px;
    padding-bottom: 10px;
  }

  .product-transformation__subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    margin: 0 auto;
    max-width: 429px;
  }

  .product-transformation__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
  }

  .product-transformation__card {
    flex: 1 1 0;
    max-width: 320px;
    min-width: 0;
    aspect-ratio: 320 / 420;
  }

  .product-transformation__cta {
    display: flex;
    justify-content: center;
    margin-top: 48px;
  }

  .product-transformation__button {
    display: inline-block;
    background: #E2765C;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.08px;
    text-align: center;
    text-decoration: none;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .product-transformation__button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .product-transformation__button:hover {
    background: #cf6449;
    transform: scale(1.04);
  }

  .product-transformation__button:hover::after {
    opacity: 1;
  }

  .product-transformation__button:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  @media (max-width: 1024px) {
    .product-transformation__title {
      font-size: 32px;
      max-width: none;
    }

    .product-transformation__subtitle {
      font-size: 16px;
      max-width: 390px;
    }
  }

  @media (max-width: 767px) {
    .product-transformation__title {
      font-size: 28px;
    }

    .product-transformation {
      padding: 60px 0 80px;
    }

    .product-transformation__grid {
      flex-direction: column;
      align-items: center;
    }

    .product-transformation__card {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 320 / 420;
    }

    .product-transformation__card:nth-child(1),
    .product-transformation__card:nth-child(3) {
      display: none;
    }

    .product-transformation__button {
      width: 100%;
      max-width: 320px;
    }
  }

  @media (min-width: 550px) and (max-width: 767px) {
    .product-transformation__card {
      max-width: 420px;
    }

    .product-transformation__button {
      max-width: 420px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-transformation__button {
      transition: none;
    }
    .product-transformation__button::after {
      transition: none;
    }
    .product-transformation__button:hover,
    .product-transformation__button:active {
      transform: none;
    }
  }
/* END_SECTION:product-transformation */

/* START_SECTION:product (INDEX:26) */
.product-page-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-bg-page, #FEF9F5);
    padding: 60px 0 80px;
    font-family: 'Kanit', sans-serif;
  }

  .product-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }

  .product-page__media {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .product-page__main-image {
    border-radius: 16px;
    background: #efe6e2;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-page__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .product-page__image--placeholder {
    width: 60%;
    height: auto;
    opacity: 0.4;
  }

  .product-page__thumbnails {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .product-page__thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: #efe6e2;
    cursor: pointer;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
  }

  .product-page__thumb--active,
  .product-page__thumb:hover {
    border-color: #E87C65;
  }

  .product-page__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-page__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .product-page__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.15;
    color: #283047;
    margin: 0;
  }

  .product-page__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .product-page__price-regular,
  .product-page__price-sale {
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: #283047;
  }

  .product-page__price-sale {
    color: #E87C65;
  }

  .product-page__price-compare {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #888;
    text-decoration: line-through;
  }

  .product-page__description {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: #4d4d4d;
    padding-bottom: 8px;
    border-bottom: 1px solid #D0E6F4;
  }

  .product-page__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .product-page__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .product-page__label {
    font-family: 'Kanit', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    color: #283047;
    letter-spacing: 0.02em;
  }

  .product-page__select-wrap {
    position: relative;
  }

  .product-page__select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #283047;
    pointer-events: none;
  }

  .product-page__select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 16px;
    border: 1px solid #D0E6F4;
    border-radius: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #283047;
    background-color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
  }

  .product-page__select:focus {
    outline: none;
    border-color: #E87C65;
  }

  .product-page__field--qty {
    width: auto;
    align-self: flex-start;
  }

  .product-page__qty {
    width: 96px;
    height: 48px;
    padding: 0 12px;
    border: 1px solid #D0E6F4;
    border-radius: 8px;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #283047;
    text-align: center;
    background-color: #ffffff;
    box-sizing: border-box;
  }

  .product-page__qty:focus {
    outline: none;
    border-color: #E87C65;
  }

  /* ── Actions ───────────────────────────────────── */
  .product-page__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }

  .product-page__btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 32px;
    background-color: #E87C65;
    color: #ffffff;
    font-family: 'Kanit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.01em;
  }

  .product-page__btn-cart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .product-page__btn-cart:hover:not(:disabled) {
    background-color: #D96B52;
    transform: scale(1.04);
  }

  .product-page__btn-cart:hover:not(:disabled)::after {
    opacity: 1;
  }

  .product-page__btn-cart:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  .product-page__btn-cart:disabled {
    background-color: #c8c8c8;
    cursor: not-allowed;
  }

  .product-page__actions .shopify-payment-button__button--unbranded {
    border-radius: 32px !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    height: 52px !important;
  }

  @media (max-width: 1024px) {
    .product-page__inner {
      padding-inline: 40px;
    }

    .product-page__grid {
      gap: 40px;
    }

    .product-page__title {
      font-size: 32px;
    }
  }

  @media (max-width: 767px) {
    .product-page-wrapper {
      padding: 32px 0 56px;
    }

    .product-page__inner {
      padding-inline: 16px;
    }

    .product-page__grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .product-page__title {
      font-size: 28px;
    }

    .product-page__price-regular,
    .product-page__price-sale {
      font-size: 24px;
    }

    .product-page__price-compare {
      font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-page__btn-cart {
      transition: none;
    }
    .product-page__btn-cart::after {
      transition: none;
    }
    .product-page__btn-cart:hover:not(:disabled),
    .product-page__btn-cart:active:not(:disabled) {
      transform: none;
    }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:27) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:stories-for-every-age (INDEX:29) */
.stories {
    font-family: 'Kanit', sans-serif;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    padding-top: 50px;
    min-height: 700px;
    grid-column: 1 / -1;
    background-color: #FBF1E0;
    overflow: visible;
  }

  .stories::before {
    content: "";
    position: absolute;
    top: -65px;
    left: 50%;
    width: 100vw;
    height: 131px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
  }

  .stories__inner {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding-bottom: 80px;
  }

  .stories__header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .stories__title {
    font-family: 'KoPub Batang', serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    color: #283047;
    margin: 0;
  }

  .stories__text {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #4D4D4D;
    margin: 0;
    font-family: 'Work Sans';
  }

  .stories__highlight {
    font-weight: 500;
    color: #E87C65;
  }

  .stories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .stories-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }

  .stories-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    pointer-events: none;
    transform-origin: bottom center;
    transform: scale(2.4);
    opacity: 0;
    filter: blur(6px);
    transition:
      transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 1s ease-out,
      filter 1s ease-out;
    will-change: transform;
    backface-visibility: hidden;
  }

  .stories-card--blue::before,
  .stories-card--peach::before {
    top: auto;
    bottom: 0;
    background-position: bottom center;
  }

  .stories-card--purple::before {
    transform-origin: top center;
    transform: scale(3);
  }


  .stories-card.is-visible::before {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }

  .stories__grid > .stories-card:nth-child(1)::before { transition-delay: 0.05s; }
  .stories__grid > .stories-card:nth-child(2)::before { transition-delay: 0.25s; }
  .stories__grid > .stories-card:nth-child(3)::before { transition-delay: 0.45s; }

  .stories-card--blue   { background-color: #EFF7FA; }
  .stories-card--purple { background-color: #EFE9F5; }
  .stories-card--peach  { background-color: #FBF0EC; }

  .stories-card__media {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 130px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }

  .stories-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .stories-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    gap: 0;
    position: relative;
    z-index: 1;
  }

  .stories__grid > .stories-card:nth-child(1),
  .stories__grid > .stories-card:nth-child(3) {
    align-self: stretch;
    height: 100%;
  }

  .stories__grid > .stories-card:nth-child(1) .stories-card__content,
  .stories__grid > .stories-card:nth-child(3) .stories-card__content {
    height: 100%;
  }

  .stories-card__age {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.125;
    letter-spacing: -0.08px;
    margin-bottom: 8px;
  }

  .stories-card--blue   .stories-card__age { color: #649BC0; }
  .stories-card--purple .stories-card__age { color: #9B79B6; }
  .stories-card--peach  .stories-card__age { color: #E87C65; }

  .stories-card__title {
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: #283047;
    margin: 0 0 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .stories-card__desc {
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    color: #283047;
    margin: 0 0 16px;
    flex: 1;
  }

  .stories-card__button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 12px 32px;
    border-radius: 32px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.125;
    letter-spacing: -0.08px;
    color: #ffffff;
    text-decoration: none;
    margin-top: auto;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .stories-card__button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .stories-card__button:hover {
    opacity: 0.88;
    transform: scale(1.04);
  }

  .stories-card__button:hover::after {
    opacity: 1;
  }

  .stories-card__button:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  .stories-card--blue   .stories-card__button { background-color: #649BC0; }
  .stories-card--purple .stories-card__button { background-color: #9B79B6; }
  .stories-card--peach  .stories-card__button { background-color: #E87C65; }

  @media (min-width: 768px) and (max-width: 1023px) {
    .stories {
      padding-top: 0px;
    }

    .stories__inner {
      padding: 55px 40px 59px;
    }

    .stories__header {
      margin-bottom: 40px;
    }

    .stories__title {
      font-size: 32px;
    }

    .stories__text {
      font-size: 16px;
      max-width: 450px;
      margin: 0 auto;
    }

    .stories__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .stories-card {
      padding: 12px;
    }

    .stories-card__title {
      font-size: 24px;
    }

    .stories-card__media {
      height: 130px;
    }
  }

  @media (max-width: 767px) {
    .stories__inner {
      padding: 64px 16px 48px;
    }

    .stories__header {
      margin-bottom: 32px;
    }

    .stories__title {
      font-size: 28px;
    }

    .stories__text {
      font-size: 16px;
      max-width: 343px;
      margin: 0 auto;
    }

    .stories__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .stories-card {
      padding-top: 16px;
      padding-bottom: 16px;
      width: 100%;
      max-width: 100%;
    }

    .stories-card::before {
      background-size: 100% auto;
      background-repeat: no-repeat;
    }

    .stories-card--blue::before,
    .stories-card--peach::before {
      background-position: bottom center;
    }

    .stories-card--purple::before {
      background-position: top center;
    }

    .stories-card__media {
      height: 120px;
      margin-bottom: -10px;
    }

    .stories-card__content {
      gap: 8px;
    }

    .stories-card__age {
      font-size: 14px;
    }

    .stories-card__title {
      font-size: 20px;
      white-space: normal;
    }

    .stories-card__desc {
      font-size: 14px;
      flex: initial;
    }

    .stories-card__button {
      display: block;
      width: 100%;
      height: 48px;
      padding: 0;
      font-size: 14px;
      border-radius: 999px;
      margin-top: 4px;
      line-height: 48px;
    }
  }

  @media (max-width: 767px) and (min-width: 640px) {
    .stories-card__desc {
      font-size: 14px;
      flex: initial;
      max-width: 195px;
      margin: 0 auto;
    }
  }

  @media (max-width: 640px) {
    .stories {
      padding-top: 0;
      min-height: auto;
    }

    .stories__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .stories-card {
      padding-top: 16px;
      padding-bottom: 16px;
      height: auto;
      max-height: none;
      overflow: hidden;
    }

    .stories__grid > .stories-card:nth-child(1),
    .stories__grid > .stories-card:nth-child(3) {
      align-self: auto;
      height: auto;
    }

    .stories__grid > .stories-card:nth-child(1) .stories-card__content,
    .stories__grid > .stories-card:nth-child(3) .stories-card__content {
      height: auto;
    }

    .stories-card__media {
      height: 140px;
      max-height: 140px;
      overflow: hidden;
    }

    .stories-card__media img {
      transform: translateY(-10%);
      max-width: 70%;
    }

    .stories-card__content {
      gap: 1px;
      flex: initial;
      height: auto;
    }

    .stories-card__age {
      font-size: 13px;
    }

    .stories-card__title {
      font-size: 20px;
      white-space: normal;
    }

    .stories-card__desc {
      font-size: 15px;
      flex: initial;
      max-width: 320px;
      margin: 0 auto;
    }

    .stories-card__button {
      display: inline-flex;
      width: auto;
      align-self: center;
      height: 42px;
      padding: 0 20px;
      font-size: 14px;
      border-radius: 999px;
      margin-top: 12px;
      line-height: normal;
    }
  }

  @media (min-width: 641px) and (max-width: 768px) {
    .stories-card .stories-card__media img {
      max-width: 80%;
      margin-left: auto;
      margin-right: auto;
      display: block;
      transform: translateY(-10%);
    }
  }

  @media (min-width: 550px) and (max-width: 768px) {
    .stories-card::before {
      background-size: 100% auto;
      background-position: bottom center;
    }

    .stories-card--purple::before {
      background-position: top center;
    }
  }

  @media (max-width: 768px) {
    .stories {
      padding-top: 0;
      min-height: 500px;
    }

    .stories-card {
      padding-left: 8px;
      padding-right: 8px;
    }

    .stories-card__media {
      aspect-ratio: 16 / 9;
      max-height: 400px;
      height: auto !important;
      display: block;
    }

    .stories-card__media img {
      max-width: 75%;
      margin: 0 auto;
      display: block;
      transform: translateY(-5%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .stories-card::before {
      transition: none;
      transform: scale(1) translateY(0);
      opacity: 1;
      filter: none;
    }
    .stories-card__button {
      transition: none;
    }
    .stories-card__button::after {
      transition: none;
    }
    .stories-card__button:hover,
    .stories-card__button:active {
      transform: none;
    }
  }
/* END_SECTION:stories-for-every-age */

/* START_SECTION:story-theme-grid (INDEX:30) */
.story-theme-grid {
    width: 100%;
    background: #FEF9F5;
    padding-top: 10px;
    padding-bottom: 80px;
    position: relative;
  }

  .story-theme-grid__container {
    position: relative;
    z-index: 1;
  }

  .story-theme-grid__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .story-theme-grid__bee {
    position: absolute;
    top: 56px;
    width: 70px;
    height: 70px;
    pointer-events: none;
    will-change: transform;
    animation: bee-lifecycle 20s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }

  .story-theme-grid__bee--left {
    left: max(10px, calc((100% - 1200px) / 2 - 90px));
  }

  .story-theme-grid__bee--right {
    right: max(10px, calc((100% - 1200px) / 2 - 90px));
    top: 30%;
    animation-name: bee-lifecycle-right;
    animation-delay: -10s;
  }

  @keyframes bee-lifecycle {
    0%   { opacity: 0; transform: translate(0,     0)     scale(0.95); }
    15%  { opacity: 1; transform: translate(6px,  -5px)   scale(1.01); }
    28%  { opacity: 1; transform: translate(-2px, -12px)  scale(0.98); }
    42%  { opacity: 1; transform: translate(10px, -8px)   scale(1.02); }
    56%  { opacity: 1; transform: translate(3px,  -17px)  scale(0.97); }
    68%  { opacity: 1; transform: translate(9px,  -11px)  scale(1.01); }
    78%  { opacity: 1; transform: translate(4px,  -6px)   scale(0.99); }
    90%  { opacity: 0; transform: translate(0,    -2px)   scale(0.95); }
    100% { opacity: 0; transform: translate(0,     0)     scale(0.95); }
  }

  @keyframes bee-lifecycle-right {
    0%   { opacity: 0; transform: translate(0,     0)     scale(-0.95, 0.95); }
    15%  { opacity: 1; transform: translate(-6px, -5px)   scale(-1.01, 1.01); }
    28%  { opacity: 1; transform: translate(2px,  -12px)  scale(-0.98, 0.98); }
    42%  { opacity: 1; transform: translate(-10px,-8px)   scale(-1.02, 1.02); }
    56%  { opacity: 1; transform: translate(-3px, -17px)  scale(-0.97, 0.97); }
    68%  { opacity: 1; transform: translate(-9px, -11px)  scale(-1.01, 1.01); }
    78%  { opacity: 1; transform: translate(-4px, -6px)   scale(-0.99, 0.99); }
    90%  { opacity: 0; transform: translate(0,    -2px)   scale(-0.95, 0.95); }
    100% { opacity: 0; transform: translate(0,     0)     scale(-0.95, 0.95); }
  }

  @media (prefers-reduced-motion: reduce) {
    .story-theme-grid__bee {
      display: none;
    }
  }

  .story-theme-grid__header {
    text-align: center;
  }

  .story-theme-grid__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A2B3C;
    text-align: center;
    margin-bottom: 10px;
  }

  .story-theme-grid__subtitle {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #4D4D4D;
    text-align: center;
    max-width: 654px;
    margin: 0 auto 48px;
    padding-bottom: 50px;
  }

  .story-theme-grid__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .story-theme-grid__card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .story-theme-grid__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 30% 50%, rgba(232, 115, 90, 0.14) 0%, transparent 65%),
      linear-gradient(to right, rgba(232, 115, 90, 0.15) 0%, rgba(232, 115, 90, 0.05) 100%);
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .story-theme-grid__card:nth-child(2)::before {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(90, 150, 210, 0.16) 0%, transparent 65%),
      linear-gradient(to right, rgba(90, 150, 210, 0.18) 0%, rgba(90, 150, 210, 0.05) 100%);
  }

  .story-theme-grid__card:nth-child(3)::before {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(155, 126, 200, 0.16) 0%, transparent 65%),
      linear-gradient(to right, rgba(155, 126, 200, 0.18) 0%, rgba(155, 126, 200, 0.05) 100%);
  }

  .story-theme-grid__card:nth-child(4)::before {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(240, 175, 80, 0.15) 0%, transparent 65%),
      linear-gradient(to right, rgba(240, 175, 80, 0.17) 0%, rgba(240, 175, 80, 0.05) 100%);
  }

  .story-theme-grid__card:nth-child(5)::before {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(255, 128, 128, 0.15) 0%, transparent 65%),
      linear-gradient(to right, rgba(255, 128, 128, 0.17) 0%, rgba(255, 128, 128, 0.05) 100%);
  }

  .story-theme-grid__card:nth-child(6)::before {
    background:
      radial-gradient(ellipse at 30% 50%, rgba(69, 184, 124, 0.15) 0%, transparent 65%),
      linear-gradient(to right, rgba(69, 184, 124, 0.17) 0%, rgba(69, 184, 124, 0.05) 100%);
  }

  .story-theme-grid__image-wrap,
  .story-theme-grid__body {
    position: relative;
    z-index: 1;
  }

  .story-theme-grid__card.is-active {
    transform: scale(1.02);
  }

  .story-theme-grid__card:hover {
    transform: scale(1.04);
  }

  .story-theme-grid__card:hover::before {
    transform: translateX(0);
  }

  @media (max-width: 768px) {
    .story-theme-grid__card {
      transition: none;
    }
    .story-theme-grid__card::before {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .story-theme-grid__card {
      transition: none;
    }
    .story-theme-grid__card::before {
      display: none;
    }
    .story-theme-grid__button {
      transition: none;
    }
    .story-theme-grid__button::after {
      transition: none;
    }
    .story-theme-grid__button:hover,
    .story-theme-grid__button:active {
      transform: none;
    }
  }

  .story-theme-grid__image-wrap {
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
  }

  .story-theme-grid__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .story-theme-grid__body {
    padding: 16px;
  }

  .story-theme-grid__card-title {
    font-family: 'Kanit', sans-serif;
    font-size: 28px;
    font-weight: 400;
    color: #1A2B3C;
    margin-bottom: 10px;
  }

  .story-theme-grid__card-title span {
    display: block;
  }

  .story-theme-grid__card-title--compact {
    letter-spacing: -0.04em;
  }

  .story-theme-grid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .story-theme-grid__tag {
    font-family: 'Kanit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #4D4D4D;
    background: #EBEBEB;
    padding: 4px 12px;
    border-radius: 16px;
    line-height: 1;
    transition: background-color 0.2s ease-out;
  }

  .story-theme-grid__card:hover .story-theme-grid__tag {
    background-color: #ffffff;
  }

  .story-theme-grid__cta {
    text-align: center;
    margin-top: 48px;
    margin-bottom: 60px;
  }

  .story-theme-grid__button {
    display: inline-block;
    background: #E8735A;
    color: #FFFFFF;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -0.08px;
    text-align: center;
    padding: 14px 40px;
    border-radius: 999px;
    text-decoration: none;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .story-theme-grid__button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .story-theme-grid__button:hover {
    background: #D4614A;
    transform: scale(1.04);
  }

  .story-theme-grid__button:hover::after {
    opacity: 1;
  }

  .story-theme-grid__button:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  @media (max-width: 1024px) and (min-width: 769px) {
    .story-theme-grid__title {
      font-size: 32px;
    }

    .story-theme-grid__subtitle {
      font-size: 16px;
    }

    .story-theme-grid__card-title {
      font-size: 24px;
    }

    .story-theme-grid__image-wrap {
      aspect-ratio: 4 / 3;
    }

    .story-theme-grid__body {
      padding: 12px;
    }

    .story-theme-grid__bee--right {
      top: 81%;
    }

    .story-theme-grid__bee {
      width: 65px;
      height: 65px;
    }
  }

  @media (max-width: 768px) {
    .story-theme-grid__title {
      font-size: 28px;
    }

    .story-theme-grid__subtitle {
      font-size: 16px;
      padding-bottom: 32px;
    }
  }

  @media (max-width: 768px) and (min-width: 551px) {
    .story-theme-grid__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .story-theme-grid__card {
      display: block;
    }

    .story-theme-grid__image-wrap {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 11;
      border-radius: 12px;
    }

    .story-theme-grid__body {
      padding: 12px;
    }

    .story-theme-grid__card-title {
      font-size: 22px;
    }
  }

  @media (max-width: 550px) {
    .story-theme-grid__grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .story-theme-grid__card {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .story-theme-grid__image-wrap {
      aspect-ratio: unset;
      width: 150px;
      height: 120px;
      flex-shrink: 0;
      border-radius: 12px 0 0 12px;
      overflow: hidden;
    }

    .story-theme-grid__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-theme-grid__body {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .story-theme-grid__card-title {
      font-size: 20px;
    }
  }

  @media (max-width: 768px) {
    .story-theme-grid__bee--left {
      display: none;
    }

    .story-theme-grid__bee--right {
      width: 45px;
      height: 45px;
      top: 83%;
    }

    .story-theme-grid__card {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .story-theme-grid__card::before {
      display: block;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease-out;
    }

    .story-theme-grid__card.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .story-theme-grid__card.is-visible::before {
      transform: translateX(0);
    }

    .story-theme-grid__card.is-visible.is-done::before {
      opacity: 0;
    }

    .story-theme-grid__card:active {
      transform: scale(0.98);
    }

    .story-theme-grid__card.is-touched {
      transform: scale(1.02);
    }

    .story-theme-grid__card.is-touched::before {
      transform: translateX(0);
      opacity: 1;
    }
  }
/* END_SECTION:story-theme-grid */

/* START_SECTION:storybook-transformation (INDEX:31) */
.storybook {
    background: #FEF9F5;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
    padding-top: 80px;
    padding-bottom: 120px;
  }

  .storybook__header {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .storybook__title {
    font-family: 'KoPub Batang'
    , serif;
    font-size: 38px;
    margin-bottom: 16px;
  }

  .storybook__subtitle {
    font-size: 18px;
    font-weight: 300;
    color: #4D4D4D;
    max-width: 658px;
    margin: 0 auto;
    line-height: 1.4;
  }

  .storybook__label {
    display: inline-block;
    width: fit-content;
    padding: 8px;
    border-radius: 999px;
    background: #FBF0EC;
    color: #4D4D4D;
    font-size: 14px;
    letter-spacing: -0.01em;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
  }

  .storybook__comparison {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr auto 2fr;
    align-items: center;
    column-gap: 24px;
    margin-top: 32px;
    margin-bottom: 48px;
  }

  .storybook__group--left {
    position: relative;
    grid-column: 1;
  }

  .storybook__decor-blob {
    position: absolute;
    top: 10%;
    left: -16%;
    width: 53%;
    display: block;
    z-index: 0;
    pointer-events: none;
  }

  .storybook__group--left .storybook__card {
    position: relative;
    z-index: 1;
  }

  .storybook__arrow {
    grid-column: 2;
    justify-self: center;
    width: 97px;
    margin-right: 30px;
  }

  .storybook__arrow img {
    width: 100%;
    height: auto;
    display: block;
  }

  .storybook__group--right {
    grid-column: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .storybook__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .storybook__col--original {
    position: relative;
    z-index: 1;
  }

  .storybook__card-wrapper {
    position: relative;
    width: 100%;
  }

  .storybook__card {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 4px 4px 15.8px rgba(135, 135, 135, 0.25);
    overflow: visible;
  }

  .storybook__image {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  .storybook__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .storybook__col--original .storybook__image img {
    object-position: center top;
  }

  .storybook__col--illustrated .storybook__overlays {
    position: absolute;
    top: 56%;
    left: -60px;
    transform: translateY(-50%);
    width: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
  }

  .storybook__col--realistic .storybook__overlays {
    position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    width: 93px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
  }

  .storybook__overlay {
    width: 100%;
    flex-shrink: 0;
  }

  .storybook__overlay:nth-child(2) {
    transform: scale(1.05);
  }

  .storybook__overlay img,
  .storybook__overlay picture {
    width: 100%;
    height: auto;
    display: block;
  }

  .storybook__overlay img {
    border-radius: 12px;
  }

  .storybook__mobile-arrows {
    display: none;
  }

  .storybook__labels {
    display: none;
  }

  .storybook__step-cloud {
    display: none;
  }

  .storybook__steps {
    margin-top: 60px;
  }

  .storybook__steps-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
    padding-top: 60px;
  }

  .storybook__connector {
    display: none;
  }

  .storybook__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(-20px);
  }

  .storybook__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 48px;
    right: -30px;
    width: 60px;
    height: 1px;
    background-image: repeating-linear-gradient(to right, #9bb3c9 0, #9bb3c9 6px, transparent 6px, transparent 12px);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .storybook__step.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease
    , transform 0.5s ease;
  }

  .storybook__step.is-visible::after {
    opacity: 1;
    transform: scaleX(1);
    transition: opacity 0.4s ease
    , transform 0.4s ease;
  }

  .storybook__step:nth-child(1) {
    transition-delay: 0s;
  }
  .storybook__step:nth-child(1).is-visible::after {
    transition-delay: 0.25s;
  }
  .storybook__step:nth-child(3) {
    transition-delay: 0.3s;
  }
  .storybook__step:nth-child(3).is-visible::after {
    transition-delay: 0.55s;
  }
  .storybook__step:nth-child(5) {
    transition-delay: 0.6s;
  }
  .storybook__step:nth-child(5).is-visible::after {
    transition-delay: 0.85s;
  }
  .storybook__step:nth-child(7) {
    transition-delay: 0.9s;
  }

  .storybook__step-icon {
    display: flex;
    justify-content: center;
  }

  .storybook__step-icon img {
    display: block;
  }

  .storybook__step-text {
    font-family: Kanit
    , sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    max-width: 160px;
    margin: 0 auto;
    padding-top: 12px;
  }

  .storybook__cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-bottom: 50px;
  }

  .storybook__button {
    display: inline-block;
    background: #E2765C;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 14px 28px;
    cursor: pointer;
    font-family: 'Kanit'
    , sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -0.08px;
    text-align: center;
    text-decoration: none;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .storybook__button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05));
    opacity: 0;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
    border-radius: inherit;
  }

  .storybook__button:hover {
    background: #cf6449;
    transform: scale(1.04);
  }

  .storybook__button:hover::after {
    opacity: 1;
  }

  .storybook__button:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) inset;
  }

  @media (max-width: 1199px) and (min-width: 1024px) {
    .storybook .section-container {
      padding-left: 100px;
      padding-right: 100px;
    }
  }

  @media (max-width: 1023px) and (min-width: 768px) {
    .storybook .section-container {
      padding-left: 40px;
      padding-right: 40px;
    }

    .storybook {
      padding-top: 60px;
      padding-bottom: 60px;
    }

    .storybook__title {
      font-size: 32px;
    }

    .storybook__subtitle {
      font-size: 18px;
      max-width: 557px;
    }
  }

  @media (max-width: 1199px) and (min-width: 768px) {
    .storybook__card {
      padding: 12px;
    }

    .storybook__comparison {
      grid-template-columns: 1fr 1.8fr;
      column-gap: 60px;
    }

    .storybook__arrow {
      grid-row: 1;
      grid-column: 1 / -1;
      justify-self: start;
      margin-left: 120px;
      margin-bottom: 16px;
      width: 123px;
    }

    .storybook__group--left {
      grid-row: 2;
      grid-column: 1;
    }

    .storybook__group--right {
      grid-row: 2;
      grid-column: 2;
    }

    .storybook__decor-blob {
      transform: rotate(-54.3deg) translateY(-31%);
      transform-origin: center;
      top: 9%;
      left: 0;
    }
  }

  @media (max-width: 768px) and (min-width: 581px) {
    .storybook__steps-list {
      max-width: 100%;
      column-gap: 0;
      padding-top: 32px;
    }

    .storybook__step-icon {
      display: none;
    }

    .storybook__step-cloud {
      display: flex;
      justify-content: center;
    }

    .storybook__step-cloud img {
      width: 75%;
      height: auto;
      display: block;
    }

    .storybook__step:not(:last-child)::after {
      width: 36px;
      right: -18px;
      top: 38px;
    }

    .storybook__step-text {
      font-size: 13px;
      max-width: 120px;
      padding-top: 8px;
    }
  }

  @media (max-width: 768px) {
    .storybook {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .storybook__title {
      font-size: 28px;
    }

    .storybook__comparison {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }

    .storybook__group--left {
      position: relative;
      width: 100%;
      max-width: 320px;
      padding-bottom: 60px;
    }

    .storybook__group--left .storybook__card {
      width: 100%;
      aspect-ratio: 3 / 4;
    }

    .storybook__arrow {
      display: none;
    }

    .storybook__decor-blob {
      display: none;
    }

    .storybook__overlay {
      display: none;
    }

    .storybook__mobile-arrows {
      display: block;
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
    }

    .storybook__mobile-arrow {
      position: absolute;
      width: 110px;
      bottom: -70px;
    }

    .storybook__mobile-arrow--left {
      left: -75px;
      transform: scaleX(-1) rotate(-266deg) translateX(-28%);
    }

    .storybook__mobile-arrow--right {
      right: -78px;
      transform: rotate(-267deg) translateX(-28%);
    }

    .storybook__labels {
      display: flex;
      justify-content: center;
      gap: 100px;
      padding-top: 12px;
    }

    .storybook__group--right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .storybook__group--right .storybook__col {
      display: contents;
    }

    .storybook__group--right .storybook__col > .storybook__label,
    .storybook__group--right .storybook__col > .storybook__overlays {
      display: none;
    }

    .storybook__group--right .storybook__card {
      width: 100%;
      aspect-ratio: 3 / 4;
      padding: 11px;
    }

    .storybook__step-text {
      max-width: none;
      margin: 0;
      padding-top: 0;
    }

    .storybook__cta {
      width: 100%;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 60px;
    }

    .storybook__button {
      width: 100%;
    }
  }

  @media (max-width: 580px) {
    .storybook__group--left {
      display: flex;
      justify-content: center;
      max-width: 100%;
    }

    .storybook__card-wrapper {
      max-width: 230px;
      margin: 0 auto;
    }

    .storybook__mobile-arrow {
      width: 105px;
    }

    .storybook__mobile-arrow--left {
      bottom: -12px;
      left: -80px;
      transform: scaleX(-1) rotate(-266deg) translateX(35%);
    }

    .storybook__mobile-arrow--right {
      bottom: -12px;
      right: -80px;
      transform: rotate(-267deg) translateX(35%);
    }

    .storybook__steps-list {
      display: flex;
      flex-direction: column;
      gap: 32px;
      width: 100%;
      padding: 0 16px;
      box-sizing: border-box;
    }

    .storybook__group--right {
      gap: 8px;
    }

    .storybook__labels {
      gap: 45px;
      text-align: center;
    }

    .storybook__connector {
      display: none;
    }

    .storybook__step {
      position: relative;
      width: 100%;
    }

    .storybook__step:not(:last-child)::after {
      display: none;
    }

    .storybook__step-icon {
      display: none;
    }

    .storybook__step-cloud {
      display: flex;
      justify-content: center;
      position: absolute;
      top: 50%;
      width: 135px;
      height: 120px;
      z-index: 2;
    }

    .storybook__step.is-left .storybook__step-cloud {
      left: -19px;
      transform: translateY(-53%);
    }

    .storybook__step.is-right .storybook__step-cloud {
      right: -25px;
      transform: translateY(-50%);
    }

    .storybook__step-cloud img {
      width: 100%;
      height: auto;
      display: block;
    }

    .storybook__step-content {
      background: #fff;
      border: 1px solid #d6e3f0;
      border-radius: 16px;
      padding: 9px 0;
      width: 100%;
      box-sizing: border-box;
    }

    .storybook__step-text {
      display: block;
      width: 100%;
      font-size: 18px;
      line-height: 1.4;
    }

    .storybook__step.is-left .storybook__step-text {
      padding-left: 125px;
      padding-right: 16px;
      text-align: left;
    }

    .storybook__step.is-right .storybook__step-text {
      padding-right: 125px;
      padding-left: 16px;
      text-align: left;
    }
  }

  .storybook__group--left,
  .storybook__arrow,
  .storybook__col--illustrated,
  .storybook__col--realistic {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }

  .storybook__comparison.is-visible .storybook__group--left {
    opacity: 1;
    transform: translateY(0);
  }

  .storybook__comparison.is-visible .storybook__arrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 180ms;
  }

  .storybook__comparison.is-visible .storybook__col--illustrated {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 360ms;
  }

  .storybook__comparison.is-visible .storybook__col--realistic {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 700ms;
  }

  @media (max-width: 768px) {
    .storybook__col--illustrated,
    .storybook__col--realistic {
      opacity: 1;
      transform: none;
      transition: none;
      will-change: auto;
    }

    .storybook__group--right,
    .storybook__labels {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
    }

    .storybook__mobile-arrow--left {
      opacity: 0;
      transform: scaleX(-1) rotate(-266deg) translateX(-28%) scale(0.95);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }

    .storybook__mobile-arrow--right {
      opacity: 0;
      transform: rotate(-267deg) translateX(-28%) scale(0.95);
      transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform;
    }

    .storybook__comparison.is-visible .storybook__mobile-arrow--left {
      opacity: 1;
      transform: scaleX(-1) rotate(-266deg) translateX(-28%) scale(1);
      transition-delay: 200ms;
    }

    .storybook__comparison.is-visible .storybook__mobile-arrow--right {
      opacity: 1;
      transform: rotate(-267deg) translateX(-28%) scale(1);
      transition-delay: 420ms;
    }

    .storybook__comparison.is-visible .storybook__group--right,
    .storybook__comparison.is-visible .storybook__labels {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 640ms;
    }
  }

  @media (max-width: 580px) {
    .storybook__mobile-arrow--left {
      transform: scaleX(-1) rotate(-266deg) translateX(35%) scale(0.95);
    }

    .storybook__mobile-arrow--right {
      transform: rotate(-267deg) translateX(35%) scale(0.95);
    }

    .storybook__comparison.is-visible .storybook__mobile-arrow--left {
      transform: scaleX(-1) rotate(-266deg) translateX(35%) scale(1);
    }

    .storybook__comparison.is-visible .storybook__mobile-arrow--right {
      transform: rotate(-267deg) translateX(35%) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .storybook__button {
      transition: none;
    }
    .storybook__button::after {
      transition: none;
    }
    .storybook__button:hover,
    .storybook__button:active {
      transform: none;
    }

    .storybook__group--left,
    .storybook__arrow,
    .storybook__col--illustrated,
    .storybook__col--realistic,
    .storybook__group--right,
    .storybook__labels,
    .storybook__mobile-arrow--left,
    .storybook__mobile-arrow--right {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      will-change: auto !important;
    }
  }
/* END_SECTION:storybook-transformation */

/* START_SECTION:support-page-content (INDEX:32) */
.support-page {
    background-color: #FEF9F5;
    padding: 80px 0;
  }

  .support-page__container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 100px;
  }

  .support-page__title {
    font-family: 'Kanit', sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.2;
    color: #283047;
    margin: 0 0 40px;
    text-align: center;
  }

  .support-page__content {
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #283047;
  }

  .support-page__content h2 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    margin: 32px 0 16px;
    color: #283047;
  }

  .support-page__content h2:first-child {
    margin-top: 0;
  }

  .support-page__content p {
    margin: 0 0 16px;
  }

  .support-page__content p:last-child {
    margin-bottom: 0;
  }

  @media (max-width: 1024px) {
    .support-page {
      padding: 60px 0;
    }

    .support-page__container {
      padding: 0 40px;
    }

    .support-page__title {
      font-size: 36px;
      margin-bottom: 32px;
    }

    .support-page__content {
      font-size: 16px;
    }

    .support-page__content h2 {
      font-size: 24px;
      margin: 24px 0 12px;
    }
  }

  @media (max-width: 768px) {
    .support-page {
      padding: 48px 0;
    }

    .support-page__container {
      padding: 0 24px;
    }

    .support-page__title {
      font-size: 32px;
      margin-bottom: 24px;
    }

    .support-page__content {
      font-size: 16px;
    }

    .support-page__content h2 {
      font-size: 22px;
      margin: 20px 0 12px;
    }
  }
/* END_SECTION:support-page-content */

/* START_SECTION:transformation (INDEX:33) */
.transformation {
    position: relative;
    background: #EFE9F5;
    padding: 80px 0 100px;
    overflow: visible;
  }

  .transformation > * {
    position: relative;
    z-index: 2;
  }

  .transformation__inner {
    margin: 0 auto;
  }

  .transformation__header {
    text-align: center;
    margin-bottom: 44px;
  }

  .transformation__title {
    font-family: 'KoPub Batang', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    color: #283047;
    margin: 0 auto;
    max-width: 300px;
    padding-bottom: 10px;
  }

  .transformation__subtitle {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.5;
    color: #4d4d4d;
    margin: 0;
  }

  .transformation__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
  }

  .transformation__card {
    flex: 1 1 0;
    max-width: 320px;
    min-width: 0;
    aspect-ratio: 320 / 420;
  }

  @media (max-width: 1024px) {
    .transformation__title {
      font-size: 32px;
      max-width: none;
    }

    .transformation__subtitle {
      font-size: 16px;
    }
  }

  @media (max-width: 767px) {
    .transformation__title {
      font-size: 28px;
    }

    .transformation__grid {
      flex-direction: column;
      align-items: center;
    }

    .transformation__card {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 320 / 420;
    }

    .transformation__card:nth-child(1),
    .transformation__card:nth-child(3) {
      display: none;
    }
  }

  @media (min-width: 550px) and (max-width: 767px) {
    .transformation__card {
      max-width: 420px;
    }
  }
/* END_SECTION:transformation */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:34) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:35) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:compare-slider (INDEX:42) */
.compare {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
  }

  .compare__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: right;
    pointer-events: none;
  }

  .compare__overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
    transition: width 0.08s linear;
    will-change: width;
  }

  .compare__overlay-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    pointer-events: none;
  }

  .compare__slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #fff;
    transform: translateX(-50%);
    cursor: ew-resize;
    transition: left 0.08s linear;
  }

  .compare__slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 48px;
    background: #fff;
    border-radius: 20px;
    transform: translate(-50%, -50%);
  }
/* END_SNIPPET:compare-slider */

/* START_SNIPPET:image (INDEX:45) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:product-compare-slider (INDEX:48) */
.compare {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
  }

  .compare__base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: right;
    pointer-events: none;
  }

  .compare__overlay {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
    transition: width 0.08s linear;
    will-change: width;
  }

  .compare__overlay-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
    pointer-events: none;
  }

  .compare__slider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #fff;
    transform: translateX(-50%);
    cursor: ew-resize;
    transition: left 0.08s linear;
  }

  .compare__slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 48px;
    background: #fff;
    border-radius: 20px;
    transform: translate(-50%, -50%);
  }
/* END_SNIPPET:product-compare-slider */