:root {
    --bg-color: #FFFFFF;
    --text-color: #000000;
    --btn-bg: #000000;
    --btn-text: #FFFFFF;
    --btn-hover: #333333;

    --cream: #FFFFFF;
    --warm-white: #FFFFFF;
    --blush: #FF47E0;
    /* Nomination pink accent */
    --rose: #FF47E0;
    --rose-dark: #cc39b3;
    --rose-deep: #FF47E0;
    --gold: #FFD700;
    --gold-light: #FFECB3;
    --gold-dark: #B8860B;
    --taupe: #888888;
    --taupe-light: #CCCCCC;
    --charcoal: #333333;
    --soft-black: #1A1A1A;
    --border: #EEEEEE;
    --border-strong: #DDDDDD;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);

    --slot-bg: #FAFAFA;
    --slot-border: #DDDDDD;
    --modal-bg: #FFFFFF;
    --modal-overlay: rgba(255, 255, 255, 0.9);

    /* One source of truth for the bracelet link, base, and placed charm. */
    --link-w: clamp(74px, 9vw, 92px);
    --slot-ratio: 138 / 140;
    --slot-anchor-y: 50%;

    /* Height reserved for .sticky-footer, used so scrollable content
       (e.g. .main-content) can pad itself enough to never be covered
       by the fixed-position footer. Kept as a variable so the footer
       and the content padding that avoids it can never drift apart. */
    --footer-h: 64px;

    /* Actual rendered height of .top-toolbar, kept as a variable so
       .stage-card's sticky `top` can never drift out of sync with it
       (see .stage-card below). Desktop toolbar is taller due to its
       12px 20px padding + content line-height. */
    --toolbar-h: 56px;
  }


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

  body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: clip;
    /* clip prevents scroll but allows sticky positioning */
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
  }

  /* ─── SPLASH SCREEN ─── */
  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
  }

  .splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
  }

  .splash-content {
    text-align: center;
    animation: splashReveal 1.2s ease-out forwards;
    width: 100%;
    max-width: 100vw;
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .splash-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 4.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    padding-left: 0.3em;
    color: var(--charcoal);
    margin-bottom: 2rem;
    word-break: break-word;
    max-width: 100%;
  }

  .splash-loader {
    width: 40px;
    height: 2px;
    background: var(--border-strong);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }

  .splash-loader::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--blush);
    animation: loaderLine 1.5s infinite ease-in-out;
  }

  @keyframes splashReveal {
    0% {
      opacity: 0;
      transform: translateY(10px);
      filter: blur(4px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  @keyframes loaderLine {
    0% {
      left: -100%;
    }

    50% {
      left: 0%;
    }

    100% {
      left: 100%;
    }
  }

  /* ─── INTRO HERO (Phase 2) ─── */
  .intro-hero {
    text-align: center;
    max-width: 600px;
    padding: 20px;
    transition: opacity 1s ease-in-out, transform 1s ease-out;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .intro-hero.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }

  .hero-eyebrow {
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--taupe);
    text-transform: uppercase;
    margin-bottom: 24px;
  }

  .hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 48px;
    color: var(--charcoal);
  }

  .hero-start-btn {
    padding: 18px 48px;
    background-color: var(--text-color);
    color: var(--bg-color);
    border: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .hero-start-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  /* ─── HEADER ─── */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: transparent;
    z-index: 10;
    overflow: hidden;
    max-height: 160px;
    transition:
      max-height 0.32s cubic-bezier(.4, 0, .2, 1),
      padding-top 0.32s cubic-bezier(.4, 0, .2, 1),
      padding-bottom 0.32s cubic-bezier(.4, 0, .2, 1),
      opacity 0.22s ease;
  }

  .header.header-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
  }

  .logo h1 {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 3px;
    color: var(--text-color);
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    gap: 12px;
  }

  .nav-btn {
    padding: 8px 16px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.2s;
    background: transparent;
    color: var(--taupe);
  }

  .nav-btn:hover {
    color: var(--text-color);
  }

  .nav-btn.active-btn {
    color: var(--text-color);
  }

  /* Theme Toggle */
  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }

  .theme-toggle:hover {
    background: rgba(128, 128, 128, 0.1);
  }

  .icon-sun,
  .icon-moon {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }


  /* ─── CONFIGURATOR LAYOUT ─── */
  .configurator-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background: #fdfdfd;
  }

  .main-content {
    flex: 1;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    padding-bottom: calc(var(--footer-h) + 225px + env(safe-area-inset-bottom));
  }

  /* Right Sidebar (Desktop) */
  .right-sidebar {
    display: none;
  }

  @media (min-width: 1024px) {
    .configurator-wrapper {
      flex-direction: column;
    }

    .main-content {
      padding: 40px;
      padding-bottom: calc(var(--footer-h) + 40px + env(safe-area-inset-bottom));
      margin: 0 auto;
      max-width: 1000px;
    }

    .sticky-footer {
      display: flex !important;
    }
  }




  /* Sidebar Internals */
  .sidebar-header {
    background: #111;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar-header .total-price {
    font-size: 20px;
    font-weight: 400;
  }

  .sidebar-header .order-btn {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    box-shadow: none;
  }

  .sidebar-favorites {
    padding: 40px 20px;
    text-align: center;
    color: #555;
    flex: 1;
  }

  .sidebar-favorites .fav-icon {
    font-size: 24px;
    margin-bottom: 15px;
    color: #999;
  }

  .sidebar-favorites .fav-title {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #111;
  }

  .sidebar-favorites .fav-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
  }

  /* ─── TOP TOOLBAR ─── */
  .top-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    margin: 0;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
  }

  .toolbar-left,
  .toolbar-center,
  .toolbar-right {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .toolbar-btn {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 500;
    transition: all 0.2s;
    background: transparent;
    color: var(--taupe);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .toolbar-btn#undoBtn,
  .toolbar-btn#redoBtn {
    font-size: 16px;
    opacity: 0.3;
  }

  .toolbar-btn:hover {
    color: var(--text-color);
  }

  @keyframes randomPulse {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.6;
      transform: scale(0.95);
    }
  }

  .toolbar-btn.btn-save {
    color: var(--text-color);
    font-weight: 700;
  }

  .toolbar-btn.btn-save:hover {
    color: var(--blush);
  }

  .toolbar-btn.btn-template {
    color: #b08d57;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .toolbar-btn.btn-template:hover {
    color: #8a6a30;
  }

  /* ─── TEMPLATE MODAL GRID ─── */
  .template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
  }

  .template-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
  }

  .template-card:hover {
    border-color: var(--blush);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .template-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
  }

  .template-card-desc {
    font-size: 11px;
    color: var(--taupe);
    line-height: 1.5;
    flex: 1;
  }

  .template-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
  }

  .template-tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--bg-alt, #f5f5f5);
    color: var(--taupe);
    border: 1px solid var(--border);
  }

  .template-apply-btn {
    margin-top: 8px;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s, transform 0.15s;
    width: 100%;
  }

  .template-apply-btn:hover {
    background: var(--blush);
    transform: translateY(-1px);
  }

  /* ─── SIZE SELECTION OVERLAY ─── */
  .size-overlay {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease, background-color 0.3s ease;
  }

  .size-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .size-modal {
    background: var(--modal-bg);
    padding: 2.5rem 3rem;
    border-radius: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-strong);
    text-align: center;
    max-width: 480px;
    width: 90%;
    transform: translateY(0) scale(1);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease;
  }

  .size-overlay.hidden .size-modal {
    transform: translateY(20px) scale(0.96);
  }

  .size-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .size-subtitle {
    color: var(--taupe);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 2rem;
  }

  .size-presets {
    display: flex;
    gap: 12px;
    margin-bottom: 1.5rem;
    justify-content: center;
  }

  .preset-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1rem 0.5rem;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    color: var(--taupe);
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.2s;
  }

  .preset-btn small {
    display: block;
    font-size: 0.75rem;
    color: var(--taupe-light);
    margin-top: 4px;
    font-weight: 400;
  }

  .preset-btn:hover {
    border-color: var(--border-strong);
    background: #FAFAFA;
  }

  .preset-btn.active {
    border-color: var(--blush);
    background: var(--theme-active-bg, #FFF5FB);
    box-shadow: inset 0 0 0 1px var(--blush);
    color: var(--text-color);
  }


  .preset-btn.active small {
    color: var(--taupe);
  }

  .size-counter-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .size-label {
    font-size: 0.95rem;
    color: var(--charcoal);
  }

  .size-counter {
    display: flex;
    align-items: center;
    background: transparent;
    border-radius: 0;
    padding: 4px;
    border: 1px solid var(--border);
  }

  .counter-btn {
    width: 36px;
    height: 36px;
    border-radius: 0;
    border: none;
    background: var(--border);
    color: var(--text-color);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }

  .counter-btn:hover {
    background: var(--border-strong);
  }

  .counter-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    outline: none;
    -moz-appearance: textfield;
  }

  .counter-input::-webkit-outer-spin-button,
  .counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .size-start-btn {
    width: 100%;
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 16px;
    border: none;
    border-radius: 0;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
  }

  .size-start-btn:hover {
    background: var(--btn-hover);
  }

  .size-start-btn:disabled {
    background: var(--taupe-light);
    color: #fff;
    cursor: not-allowed;
  }

  /* ─── SIZE OVERLAY LOADING STATE ─── */
  .size-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 2rem;
  }

  .size-loading .spinner {
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--blush);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .size-loading p {
    font-size: 0.85rem;
    color: var(--taupe);
  }

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

  .size-error {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: #FFF5F5;
    border: 1px solid #FFD3D3;
  }

  .size-error.visible {
    display: flex;
  }

  .size-error p {
    font-size: 0.85rem;
    color: #C0392B;
    line-height: 1.5;
    text-align: center;
  }

  .size-error-retry {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
  }

  .size-error-retry:hover {
    background: var(--btn-hover);
  }

  .size-form.is-loading .size-presets,
  .size-form.is-loading .size-counter-wrap {
    opacity: 0.72;
  }

  .size-form.is-loading .size-start-btn {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ─── PREVIEW STAGE ─── */
  .stage-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
    margin-bottom: 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  /* TOP INFO BAR */
  .stage-info-bar {
    padding: 15px 30px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 8px 8px 0 0;
  }

  .info-left,
  .info-right {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .icon-svg {
    width: 16px;
    height: 16px;
    color: #999;
  }

  .info-label {
    font-size: 10px;
    letter-spacing: 0.8px;
    color: #bbb;
    font-weight: 600;
    text-transform: uppercase;
  }

  .current-value {
    font-size: 11px;
    font-weight: 700;
    color: #444;
    white-space: nowrap;
    min-width: 60px;
  }

  .color-swatch-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #eee;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
  }

  .swatch:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }

  .swatch.active {
    box-shadow: 0 0 0 1.5px var(--blush);
    transform: scale(1.1);
  }

  .swatch.silver {
    background: #E0E0E0;
  }

  .swatch.gold {
    background: #FFD700;
  }

  .swatch.rosegold {
    background: #E6A8A8;
  }

  .swatch.black {
    background: #333333;
  }

  .action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s;
  }

  .action-icon .icon-svg {
    width: 18px;
    height: 18px;
    color: #333;
  }

  .action-icon:focus {
    outline: none;
  }

  .action-icon:hover {
    opacity: 1;
  }

  /* BRACELET STAGE - Larger and more prominent */
  .bracelet-wrap {
    padding: 28px 22px 30px;
    position: relative;
    background:
      radial-gradient(circle at center, rgba(255, 71, 224, 0.035), transparent 58%),
      linear-gradient(180deg, #fff 0%, #fdfdfd 100%);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: inset 0 0 54px rgba(17, 24, 39, 0.035);
    margin-bottom: 2rem;
    overflow: clip;
    transform-origin: center center;
    transition: transform 0.2s ease;
  }

  /* STAGE ICONS */
  .stage-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #bbb;
    font-family: serif;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s;
  }

  .stage-icon:hover {
    color: #333;
    border-color: #ccc;
  }

  .icon-info {
    left: 20px;
    top: 20px;
  }

  .icon-zoom {
    left: 20px;
    bottom: 20px;
  }

  .stage-capture-area {
    display: block;
  }

  .bracelet-outer {
  touch-action: pan-x;
  -ms-touch-action: pan-x;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem;
  }

  .bracelet-outer .bracelet-wrap {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }

  .no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

.bracelet-container {
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  -ms-touch-action: none;
  width: 100%;
  min-height: 0;
  height: auto;
  background: transparent;
  overflow-x: auto;
  overflow-y: clip;   /* เดิม: visible — ถูกเบราว์เซอร์แปลงเป็น auto เงียบๆ จนมี scrollbar */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 40px 0;
}
  /* When empty, still center it */
  .bracelet-container:empty {
    justify-content: center;
  }

  /* The actual rail track */
  #braceletContainer {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    position: relative;
  }

  .drop-hint {
    position: sticky;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: max-content;
    z-index: 10;
  }

  .freeform-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
  }

  .freeform-charm-item {
    position: absolute;
    width: 70px;
    height: 70px;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transform-origin: center;
    transition: outline-color 0.18s ease;
  }

  .freeform-charm-item:active {
    cursor: grabbing;
  }

  .freeform-charm-item.active {
    outline: 2px solid rgba(0, 122, 255, 0.95);
    outline-offset: 4px;
    border-radius: 14px;
  }

  .freeform-size-controls {
    position: absolute;
    top: -10px;
    right: -10px;
    transform: translate(2px, 0px) scale(0.96);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    z-index: 35;
    touch-action: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .freeform-charm-item.active[data-freeform-mode="1"] .freeform-size-controls {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0) scale(1);
  }

  .size-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f4f6fb;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16), inset 0 0 0 1px rgba(17, 24, 39, 0.08);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  .size-btn:hover,
  .size-btn:focus-visible {
    background: #111827;
    color: #fff;
    transform: scale(1.08);
    outline: none;
  }

  .size-btn svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
    pointer-events: none;
  }

  .size-btn-plus {
    background: #007aff;
    color: #fff;
  }

  .size-btn-delete {
    background: #fff1f2;
    color: #e11d48;
  }

  .size-btn-delete:hover,
  .size-btn-delete:focus-visible {
    background: #e11d48;
    color: #fff;
  }

  .freeform-charm-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    display: block;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
  }

  .bracelet-clear-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 8px 14px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .bracelet-clear-btn:hover {
    background: #FFF1F1;
    color: #E63946;
    border-color: #FFC1C1;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.15);
  }

  .bracelet-clear-btn svg {
    transition: transform 0.3s ease;
  }

  .bracelet-clear-btn:hover svg {
    transform: rotate(-10deg) scale(1.1);
  }

.italian-slot {
  flex: 0 0 var(--link-w);
  width: var(--link-w);
  height: auto;
  aspect-ratio: 138 / 140;
  background: transparent;
  border: none;
  position: relative;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
  /* FIX: was a fixed -46px on mobile (see mobile override further down,
     now removed) while desktop used a proportional -0.35 * link-w.
     A single proportional formula here means the overlap ratio between
     charms stays visually identical at EVERY screen size, since
     --link-w itself already scales via clamp()/vw per breakpoint. */
  --slot-margin: calc(var(--link-w) * -0.35);
  margin-inline: var(--slot-margin) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}



  /* Prevent long-press menu specifically on charm images inside slots */
  .italian-slot img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
  }

  .italian-slot {
    touch-action: none;
  }

  .italian-slot:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .italian-slot.span-3,
  .italian-slot.span-5 {
    z-index: 20;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .italian-slot.span-3 {
    width: calc(var(--link-w) * 3 + var(--slot-margin) * 2);
    height: auto;
    aspect-ratio: calc(138 * 3) / 140;
    flex-basis: calc(var(--link-w) * 3 + var(--slot-margin) * 2);
  }

  /* FIX: margin-left/margin-right used to be hardcoded px values
     ("48px" / "54px" — the same on every screen size), which is the
     other main cause of the safety-chain spacing looking inconsistent
     across devices. Since every other dimension here (link width,
     chain-image width/offset) is already proportional to --link-w,
     these two margins are now proportional too — so the ratio between
     "safety chain width" and "gap to its neighboring slots" stays the
     same no matter the viewport width. */
.italian-slot.span-5 {
  width: calc(var(--link-w) * 5 + var(--slot-margin) * 4);
  height: auto;
  aspect-ratio: 1 / 1;
  flex-basis: calc(var(--link-w) * 5 + var(--slot-margin) * 4);
  margin-left: calc(var(--link-w) * 0.48) !important;   /* proportional, scales with --link-w on every screen */
  margin-right: calc(var(--link-w) * 0.55) !important;  /* proportional, scales with --link-w on every screen */
  padding-top: 72%;
  margin-top: -72%;
}

  .bg-pattern-span {
    background-repeat: repeat-x;
    background-position: center;
    background-size: 46px auto;
  }

  .italian-slot.filled {
    background-color: transparent;
  }

  .italian-slot.active-slot::after {
    display: none;
  }

  .italian-slot.active-slot {
    z-index: 90;
  }

  .slot-drag-over {
    z-index: 100;
  }
  
  .slot-drag-over > img {
    transform: translateY(-8px) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .slot-drag-over > img.watch-vertical {
    transform: scale(4.6) rotate(-90deg) translateY(13px) !important;
  }

  @keyframes slotBounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-10px) scale(1.05); }
    70%  { transform: translateY(-6px) scale(1.02); }
    100% { transform: translateY(-8px); }
  }
  .italian-slot.slot-drag-over {
    animation: slotBounce 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .italian-slot.slot-drag-over .charm-base-frame {
    box-shadow: 0 0 0 2px #3b9de8, 0 4px 16px rgba(59,157,232,0.25);
    border-radius: 8px;
    transition: box-shadow 0.15s ease;
  }

  .italian-slot.drag-source-locked,
  .charm-card.drag-source-locked {
    opacity: 0.35;
  }

  @keyframes popIn {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }

    60% {
      transform: scale(1.1);
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes popInRotated {
    0% {
      transform: scale(3) rotate(-90deg) translateY(5px);
      opacity: 0;
    }

    60% {
      transform: scale(4.75) rotate(-90deg) translateY(5px);
      opacity: 1;
    }

    100% {
      transform: scale(4.6) rotate(-90deg) translateY(5px);
      opacity: 1;
    }
  }

  .pop-in svg {
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  /* ─── TABS ─── */
  .mode-tabs {
    display: flex;
    background: transparent;
    border: none;
    padding: 0;
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }

  .tab-pill {
    flex: none;
    padding: 12px 0;
    border: none;
    background: transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--taupe);
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
  }

  .tab-pill.active {
    background: transparent;
    color: var(--text-color);
  }

  .tab-pill.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--charcoal);
  }

  .tab-pill span {
    display: none;
  }

  /* ─── OPTIONS CONTAINER ─── */
  .options-container {
    background: transparent;
    overflow: visible;
  }

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

  .catalog-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
  }

  .catalog-title-row .section-title {
    margin-bottom: 0;
  }

  .section-title {
    font-size: 18px;
    color: var(--text-color);
    margin-bottom: 1rem;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  /* ─── OPTIONS DROPDOWN (colour + size) ─── */
  .options-dropdown-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .options-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border-strong);
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-color);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s, background 0.2s;
  }

  .options-toggle-btn .icon-svg {
    color: var(--taupe);
    flex-shrink: 0;
    width: 15px;
    height: 15px;
  }

  .options-toggle-btn:hover,
  .options-toggle-btn[aria-expanded="true"] {
    border-color: var(--blush);
    background: #FFF5FB;
  }

  .options-toggle-btn:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }

  .options-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--modal-bg);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
    padding: 14px 16px;
    min-width: 220px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  .options-dropdown.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dropdown-section + .dropdown-section {
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }

  .dropdown-label {
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--taupe);
    font-weight: 600;
  }

  .dropdown-label span {
    color: var(--text-color);
  }

  .dropdown-section .color-swatch-group {
    gap: 10px;
  }

  .dropdown-section .swatch {
    width: 20px;
    height: 20px;
  }

  .dropdown-size-btn {
    align-self: flex-start;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
  }

  .dropdown-size-btn:hover {
    background: var(--btn-hover);
  }

  .dropdown-size-btn:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }

  /* ─── FILTERS ─── */
.catalog-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin-bottom: 24px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

  .search-wrap {
    position: relative;
    padding-bottom: 24px;
    flex: 1;
    max-width: 250px;
  }

  #charmSearch {
    width: 100%;
    padding: 8px 36px 8px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.2s;
  }

  #charmSearch:focus {
    border-bottom-color: var(--charcoal);
  }

  .search-icon {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    color: var(--taupe);
    pointer-events: none;
  }

  .filter-scroll {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px;
    gap: 24px;
    justify-content: flex-start;
    scrollbar-width: none;
    touch-action: pan-x pan-y ;
  }

  .filter-scroll::-webkit-scrollbar {
    display: none;
  }

.filter-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 0;
  min-width: 60px;
  touch-action: pan-x;   /* ← เพิ่มบรรทัดนี้ */
}

  .filter-btn:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .filter-btn.active {
    color: #111;
  }

  .filter-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
  }

  .filter-icon-wrap .filter-cat-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
  }

  .filter-btn.active .filter-icon-wrap {
    background: #e91e63;
    color: #fff;
  }

  .filter-btn:hover .filter-icon-wrap {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .filter-btn span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* ─── OPTIONS LAYOUT (Sidebar + Main) ─── */
  .options-layout {
    display: flex;
    gap: 2rem;
    margin-bottom: 6rem;
    align-items: flex-start;
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  /* ─── CHARM GRID ─── */
  .charm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 72px);
    gap: 8px;
    padding: 12px;
    justify-content: center;
  }

  .charm-grid.is-empty {
    display: block;
  }

  .charm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 3rem 1rem;
    text-align: center;
  }

  .charm-empty-state .icon {
    font-size: 28px;
    opacity: 0.5;
  }

  .charm-empty-state p {
    font-size: 13px;
    color: var(--taupe);
  }

  /* Nomination-style compact charm card — just the image, no label */
  .charm-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border-radius: 4px;
    width: 72px;
    height: 72px;
    position: relative;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
  }

  .charm-card:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }

  .charm-card:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    border-color: #ccc;
    z-index: 10;
  }

  .charm-card:active {
    cursor: grabbing;
  }

  .charm-card.touch-armed {
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    transform: scale(1.1);
    z-index: 20;
  }

  .charm-card.just-added {
    animation: cardAdded 0.4s ease;
  }

  @keyframes cardAdded {
    0% { box-shadow: 0 0 0 0 rgba(255, 71, 224, 0.35); }
    100% { box-shadow: 0 0 0 10px rgba(255, 71, 224, 0); }
  }

  /* Icon fills the card */
  .charm-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-bottom: 0;
    overflow: visible;
  }

.charm-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    transform: scale(1.33);       /* ลดจาก scale(2) ลง 1/3 (2 * 2/3) — ลดแค่ขนาดภาพ ไม่แตะกล่อง/grid */
    transform-origin: center;
  }

  .charm-card:hover .charm-icon img:not(.watch-vertical) {
    transform: scale(0.73); /* ลดสัดส่วนเดียวกับ base (เดิม 1.1 * 2/3) */
  }

  .charm-card:hover .charm-icon img.watch-vertical {
    transform: rotate(-90deg) scale(1.1);
  }

  /* ─── ขยายภาพชาร์มแบบ dangle / safety-chain ใน grid ตัวเลือก ───
     กล่อง .charm-card / .charm-icon ขนาดเท่าเดิมทุกอย่าง แค่ตัวภาพ
     (ที่ base ถูกซูม 2 เท่าอยู่แล้วจาก .charm-icon img ด้านบน) ถูกซูม
     เพิ่มอีกเฉพาะ dangle / safety-chain เท่านั้น — scope แค่ .charm-icon
     ซึ่งใช้ใน buildCharms() (กริดตัวเลือก) เท่านั้น ไม่กระทบชาร์มที่วาง
     บนฐานออกแบบ (ใช้ .charm-base-frame คนละ class กัน) */
  .charm-icon img.dangle {
    transform: scale(2.67); /* ลดจาก scale(4) ลง 1/3 (4 * 2/3) */
  }

  .charm-icon img.safety-chain.span-5 {
    /* translateY(33%) ต่อท้าย scale() ทำให้ระยะเลื่อนลง = 1/3 ของขนาดภาพ
       ที่ขยายแล้วจริง (ไม่ใช่ 1/3 ของกล่อง 62px เล็กๆ) — เฉพาะในกริด
       เลือกชาร์มเท่านั้น ไม่กระทบตำแหน่งบนฐานออกแบบซึ่งใช้
       --chain-y-offset คนละกลไกกัน */
    transform: scale(6) translateY(75%);
  }

 .charm-card .charm-icon img.safety-chain {
    transform: scale(1.6) translateY(33%) !important;
}

.charm-card:hover .charm-icon img.safety-chain {
    transform: scale(2.2) translateY(33%) !important;
}

  /* Dangle charms — sized as a % of the container (.charm-icon) instead
     of a fixed 62px, so the same scale() zoom factor above renders
     proportionally identical on every screen size. .charm-icon itself
     is already responsive (100% of its grid cell), so width/height:100%
     here means "fill whatever the current breakpoint's card size is",
     and transform:scale(4) then multiplies that — consistent everywhere. */
  .charm-icon img.dangle {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Watch charms (vertical images) — rotate to horizontal in picker. */
  .charm-icon img.watch-vertical {
    max-width: 140%;
    max-height: 80px;
    width: 140%;
    transform: rotate(-90deg);
  }

  /* Watch charms (vertical images) — rotate + ENLARGE 5x on bracelet. */
  .charm-img-content.watch-vertical {
    transform: scale(4.6) rotate(-90deg) translateY(5px) !important;
    animation: popInRotated 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  }

  /* FIX: was capped at a fixed max-width:140px / max-height:62px on
     EVERY screen size — this is what was actually capping the
     safety-chain artwork tiny on mobile (there is no dedicated
     width/height rule for .safety-chain.span-5, so it fell back to
     this one; only `transform: scale(6)` was overridden by the more
     specific safety-chain selector below, not the size). Switching to
     100%/100% of the (already-responsive) .charm-icon container means
     scale(6) now multiplies a value that itself already scales with
     the breakpoint, matching desktop's proportions on every screen. */
  .charm-icon img.span-5 {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
.charm-card .charm-icon img.watch-charm {
    transform: scale(1.33) translateY(30%) !important;
}

.charm-card:hover .charm-icon img.watch-charm {
    transform: scale(0.73) translateY(30%) !important;
}
  .charm-img-content {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    display: block;
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    mix-blend-mode: multiply;
    flex-shrink: 0;
    overflow: visible;
  }

  /* ═══════════════════════════════════════════════════════════════════
     ANCHOR-BASED LAYER SYSTEM — Span 1 charms only
     ═══════════════════════════════════════════════════════════════════ */

  .charm-slot-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
  }

  .bracelet-customizer .italian-slot .charm-base-frame {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 138 / 140;
    overflow: visible;
    flex: 0 0 100%;
    transform-origin: center;
  }

  .bracelet-customizer .italian-slot.pop-in .charm-base-frame {
    animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    margin: 0;
    transform-origin: center;
    animation: none;
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="bottom"] > .charm-img-content {
    inset: auto auto 0 50%;
    height: auto;
    min-height: 100%;
    transform: translateX(-50%);
    object-fit: contain;
    z-index: 5;
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="left"] > .charm-img-content {
    inset: 50% auto auto 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateY(-50%);
    object-fit: contain;
    z-index: 5;
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="right"] > .charm-img-content {
    inset: 50% 0 auto auto;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translateY(-50%);
    object-fit: contain;
    z-index: 5;
  }

  .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content.dangle,
  .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content.safety-chain {
    max-height: none;
  }

  .charm-img-content.span-5 {
    width: 370%;
    max-width: none;
    height: auto;
    object-fit: contain;
    mix-blend-mode: normal;
    pointer-events: none;
    margin-top: -75%;
  }

  /* Span-5 watch: JS places img DIRECTLY inside .italian-slot (no .charm-base-frame wrapper). */
  .bracelet-customizer .italian-slot.span-5 > .charm-img-content.span-5 {
    width: 400% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    margin-top: -75% !important;
    mix-blend-mode: normal;
    display: block;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════════════════════
     SAFETY CHAIN — RESPONSIVE POSITIONING (percentage-based)
     ═══════════════════════════════════════════════════════════════════
     Position purely with percentage-based margin. Because this element
     is position:absolute, its containing block is the .safety-chain-slot
     box itself (width == var(--link-w)) — so a % margin is always a
     percentage of --link-w, and resolves correctly at ANY --link-w
     automatically (mobile's clamp(132px,36vw,168px) or desktop's
     clamp(74px,9vw,92px)) with no separate media query needed.
     Combined with the now-proportional .italian-slot.span-5 margins
     above (fixed above), the WHOLE safety-chain assembly — base slot
     position, gap to neighbors, and chain artwork itself — scales by
     the same --link-w on every screen size.

     Adjust ONLY --chain-x-offset / --chain-y-offset below (as % values)
     if the artwork needs nudging — one change applies everywhere.
     ═══════════════════════════════════════════════════════════════════ */
 
.bracelet-customizer .italian-slot.safety-chain-slot {
  --chain-scale: 1.05;
  --chain-x-offset: -21%;
  --chain-y-offset: -18%; /* เลื่อนลงจากเดิม -18% ~1/3 (ตัวเลขยิ่งเข้าใกล้ 0 หรือเป็นบวก = เลื่อนลงมากขึ้น) */
}

.bracelet-customizer .italian-slot.safety-chain-tail {
  --chain-scale: 1.05;
}

.bracelet-customizer .italian-slot.safety-chain-slot > .charm-img-content.span-5,
.bracelet-customizer .italian-slot.safety-chain-slot .charm-img-content {
  width: calc((var(--link-w) * 5 + var(--slot-margin) * 4) * var(--chain-scale)) !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
  margin-top: 0 !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin-left: 0 !important;
  transform: translate(var(--chain-x-offset), var(--chain-y-offset)) !important;
  transform-origin: left top !important;
  pointer-events: none !important;
  z-index: 10;
}

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1.5rem;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .charm-img-content.span-3 {
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 11;
  }

  /* Charm labels hidden by default (Nomination style - image only) */
  .charm-price-tag {
    display: none;
  }

  .charm-name {
    display: none;
  }

  /* Show name as tooltip on hover */
  .charm-card:hover::after {
    content: attr(aria-label);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ─── TOAST (lightweight non-blocking feedback) ─── */
  .toast-stack {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 3000;
    pointer-events: none;
    width: min(360px, calc(100vw - 32px));
  }

  .toast {
    background: var(--soft-black);
    color: #fff;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* ─── STICKY FOOTER ─── */
  .sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-color);
    border-top: 1px solid var(--border);
    padding: 0.8rem 1.5rem calc(0.8rem + env(safe-area-inset-bottom)) 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    transition: background-color 0.3s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .summary-info {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .total-label {
    font-size: 14px;
    color: var(--taupe);
  }

  .total-price {
    font-size: 22px;
    color: var(--text-color);
    font-weight: 500;
    margin-left: 8px;
  }

  .count-label {
    font-size: 13px;
    color: var(--taupe);
    margin-left: 2px;
  }

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

  .clear-link {
    background: none;
    border: none;
    text-decoration: underline;
    color: var(--taupe);
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
  }

  .order-btn {
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 10px 24px;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }

  .order-btn:hover {
    background: var(--btn-hover);
  }

  /* ─── ORDER MODAL ─── */
  .modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
  }

  .modal-backdrop.open {
    display: block;
  }

  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.96);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease, background-color 0.3s ease;
    width: min(480px, 92vw);
    max-height: 85vh;
    flex-direction: column;
    background: var(--modal-bg);
    border-radius: 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    z-index: 2001;
    overflow: hidden;
    border: 1px solid var(--border);
  }

  .modal.open {
    display: flex;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.75rem 1.75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .modal-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 4px;
    font-family: 'DM Sans', sans-serif;
  }

  .modal-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: 0.02em;
  }

  .modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--taupe-light);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    margin-top: 2px;
  }

  .modal-close:hover {
    color: var(--text-color);
    background: var(--border);
  }

  .modal-close:focus-visible,
  .modal-cancel:focus-visible,
  .line-btn:focus-visible,
  .toolbar-btn:focus-visible,
  .order-btn:focus-visible,
  .clear-link:focus-visible,
  .size-start-btn:focus-visible,
  .preset-btn:focus-visible,
  .counter-btn:focus-visible,
  .template-apply-btn:focus-visible {
    outline: 2px solid var(--blush);
    outline-offset: 2px;
  }

  .modal-body {
    padding: 1.25rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .modal-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: clip;
  }

  .modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
  }

  .modal-row:last-child {
    border-bottom: none;
  }

  .modal-row .label {
    color: var(--taupe);
  }

  .modal-row .value {
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
  }

  .modal-total {
    padding: 1rem;
    background: var(--slot-bg);
    border-radius: 0;
    border: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
  }

  .modal-total-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
  }

  .modal-total-amount {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
  }

  .modal-total-amount small {
    font-size: 1rem;
    font-weight: 400;
    margin-right: 2px;
  }

  .modal-note {
    font-size: 12px;
    color: var(--taupe);
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.6;
    flex-shrink: 0;
  }

  .modal-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .line-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: #06C755;
    color: #fff;
    border: none;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, transform 0.12s;
    flex: 1;
    justify-content: center;
  }

  .line-btn:hover {
    background: #05a648;
  }

  .line-btn[aria-disabled="true"] {
    background: var(--taupe-light);
    pointer-events: none;
    cursor: not-allowed;
  }

  .modal-cancel {
    padding: 14px 20px;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-strong);
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .modal-cancel:hover {
    background: var(--border);
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 768px) {
    body {
      overflow: hidden;
      height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    .configurator-wrapper {
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .header {
      flex: 0 0 auto;
      padding: 1rem;
      flex-direction: column;
      gap: 1rem;
    }

    .logo h1 {
      font-size: clamp(0.9rem, 3.5vw, 1.2rem);
      letter-spacing: 1px;
    }

    .top-toolbar {
      flex: 0 0 auto;
      overflow-x: auto;
      touch-action: pan-x pan-y;
      padding: 10px 1rem;
      gap: 12px;
      justify-content: flex-start;
      scrollbar-width: none;
      background: var(--bg-color);
      margin: 0;
      border-radius: 0;
    }

    .top-toolbar::-webkit-scrollbar {
      display: none;
    }

    .main-content {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: calc(var(--footer-h) + 46px + env(safe-area-inset-bottom));
      gap: 0;
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
    }

    .options-container {
      padding: 15px 15px 0;
    }

    .stage-info-bar {
      flex-direction: row;
      padding: 10px;
      gap: 10px;
      width: 100%;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
    }

    .info-left {
      flex-direction: row;
      gap: 8px;
      align-items: center;
    }

    .info-right {
      display: flex;
      gap: 12px;
      margin-top: 0;
    }

    .info-item {
      justify-content: center;
      width: 100%;
    }

    .bracelet-wrap {
      padding: 40px 0 20px;
      height: auto;
      min-height: 180px;
      width: 100%;
      box-sizing: border-box;
      overflow-x: clip;
      overflow-y: clip;
    }

    .bracelet-container {
      width: 100%;
      height: auto;
      min-height: 0;
      display: flex;
      align-items: center;
      overflow-x: auto;
      overflow-y: clip;
      scrollbar-width: thin;
      padding: 30px 0 10px;
    }

    #braceletContainer {
      display: inline-flex;
      justify-content: flex-start;
      min-width: 0;
      margin: 0;
      padding: 0 10px;
    }

    .drop-hint {
      position: static;
      margin-bottom: 10px;
      font-size: 11px;
    }

    .bracelet-outer {
      gap: 4px;
    }

    .top-toolbar {
      padding: 12px 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
    }
    .toolbar-left {
      flex: 1;
    }
    .toolbar-right {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px;
    }
    .toolbar-center {
      width: 100%;
      justify-content: center;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .toolbar-btn {
      padding: 6px 10px;
    }

    .toolbar-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .toolbar-btn {
      flex: 1 1 auto;
      min-width: 80px;
      justify-content: center;
      font-size: 11px;
      padding: 10px 8px;
    }

    .toolbar-btn#undoBtn,
    .toolbar-btn#redoBtn {
      grid-column: span 1;
    }

    .catalog-title-row {
      margin-bottom: 0.75rem;
    }

    .options-dropdown {
      right: 0;
      left: auto;
      min-width: 200px;
    }


    .search-wrap {
      max-width: none;
    }

    .filter-scroll {
      min-width: 0;
      gap: 15px;
      padding-bottom: 12px;
      margin-left: -15px;
      margin-right: -15px;
      padding-left: 15px;
      padding-right: 15px;
      touch-action: pan-x pan-y;
    }

    .bg-pattern-span {
      background-size: 28px auto;
    }

.charm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* FIX: เพิ่ม minmax(0, ...) กัน column ริมล้นขอบจอ/ถูกบีบเวลาแน่น เหมือนที่ทำไว้ใน breakpoint จอใหญ่ */
  gap: 8px;
  padding: 6px 14px 20px;                             /* FIX: เพิ่ม padding ซ้าย-ขวาจาก 6px → 14px ให้มีที่เผื่อภาพ dangle/safety-chain ที่ overflow ออกจากกล่อง */
}
    .charm-card {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      /* FIX: was `overflow: hidden`, which clipped the scaled-up
         dangle (scale(4)) / safety-chain (scale(6)) artwork to the
         card's own box — making them render visually smaller on
         mobile than on desktop even though the same scale() values
         were applied. `.charm-icon` and its `img` already carry
         `overflow: visible` (see rules above), so this box must match
         or it becomes the clipping ancestor. Rounded corners are still
         achieved via border-radius on the box itself; since there's no
         *visible* background/border content being clipped (only the
         oversized artwork bleeding out on purpose), switching this to
         visible does not reintroduce any of the squared-corner
         artifacts overflow:hidden was originally added to prevent. */
      overflow: visible;
      border-radius: 8px;
      touch-action: none;
    }

    .charm-icon {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      max-width: none;
    }

    .charm-icon img {
      width: 100%;
      height: 100%;
    }

    .charm-icon img.watch-vertical {
      max-width: none;
      max-height: none;
      width: 140%;
    }

    .charm-name {
      font-size: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-align: center;
      line-height: 1.3;
      word-break: break-word;
      white-space: normal;
    }

    .sticky-footer {
      padding: 10px 15px calc(10px + env(safe-area-inset-bottom)) 15px;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .order-btn {
      width: auto;
      text-align: center;
    }

    .info-item {
      font-size: 10px;
    }

    .current-value {
      font-size: 10px;
      min-width: 50px;
    }

    .summary-info {
      width: 100%;
      justify-content: space-between;
    }

    .action-row {
      width: 100%;
      justify-content: space-between;
    }

    .size-modal {
      padding: 1.5rem 1rem;
    }

    /* ─── DESIGN SECTION STICKY ─── */
    .design-section {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--bg-color);
      padding-top: 10px;
      padding-bottom: 10px;
      align-self: flex-start;
    }

    .design-section {
      padding-top: 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }
  }

  /* 📱 MOBILE: Fit to Screen but PROPORTIONAL */
  @media (max-width: 768px) {
    :root {
      --toolbar-h: 50px;
    }

    .stage-card {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 100;
      border-radius: 0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      margin-bottom: 10px;
      border-left: none;
      border-right: none;
    }

    .bracelet-wrap {
  height: auto;
  min-height: 220px;
  padding: 28px 0 10px;
  margin: 0 auto 0.5rem;
  overflow-y: clip;
}
    .bracelet-container {
      height: auto;
      min-height: 0;
      padding: 0;
      overflow-x: auto;
      overflow-y: clip;
      display: flex;
      align-items: center;
      width: 100%;
      /* FIX: base rule sets this to `none` so JS (initPointerDrag /
         initBoardPan in customizer.js) can fully own both drag axes
         for charm dragging. That also blocks the browser's native
         vertical scroll from ever reaching .bracelet-wrap above,
         because touch-action:none on the touched element cancels ALL
         default panning for that touch, even if an ancestor is
         scrollable. `pan-y` here still blocks native HORIZONTAL
         panning (so the charm rail's own horizontal scroll/drag logic
         in customizer.js is untouched) but now lets a vertical
         swipe/drag pass through as a normal native scroll and reach
         .bracelet-wrap's overflow-y:auto above. JS drag-start still
         fires on pointerdown/pointermove regardless of touch-action,
         so charm dragging itself keeps working exactly as before. */
      touch-action: pan-y;
    }

    #braceletContainer {
      display: inline-flex !important;
      width: max-content !important; /* FIXED: width 100% causes squishing! */
      min-width: 0 !important;
      gap: 0;
      padding: 0 15px;
      justify-content: flex-start;
      align-items: center;
      margin: 0 auto;
    }

    /* NOTE: this block is overridden by the more specific
       `.bracelet-customizer .italian-slot` rules further down (higher
       CSS specificity), which drive actual sizing via --link-w. Kept
       here only as a legacy fallback for markup without that wrapper
       class. */
    .italian-slot {
      flex: 0 0 auto;
      width: 50px;
      height: 50px;
      aspect-ratio: 1 / 1;
      border-radius: 6px;
      touch-action: none;
    }

    .italian-slot.span-3 {
      flex: 0 0 auto;
      height: 152px;
      aspect-ratio: auto;
    }

    .italian-slot.span-5 {
      flex: 0 0 auto;
      height: 210px;
      aspect-ratio: auto;
    
      z-index: 5 !important;
    }

    .italian-slot.span-5 ~ .italian-slot {
      z-index: 25 !important;
    }

    .charm-img-content {
      width: 100%;
      height: auto;
      max-height: 250px;
      object-fit: contain;
      mix-blend-mode: multiply;
    }

    @keyframes popInRotatedMobile {
      0% {
        transform: scale(3) rotate(-90deg) translateY(5px);
        opacity: 0;
      }
      100% {
        transform: scale(5.75) rotate(-90deg) translateY(5px);
        opacity: 1;
      }
    }

    .italian-slot.span-3 .charm-img-content.watch-vertical {
      animation: popInRotatedMobile 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
      height: 100%;
      width: 100%;
      object-fit: contain;
    }

    .italian-slot.span-5 > .charm-img-content.span-5 {
      width: 400% !important;
      max-width: none !important;
      height: auto !important;
      margin-top: -75% !important;
      transform: none !important;
      object-fit: contain !important;
    }

    .charm-img-content.span-5 {
      width: 400%;
      height: auto;
      max-height: none;
      margin-top: -75%;
    }

    .bracelet-customizer .italian-slot .charm-base-frame {
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
      overflow: visible;
    }

    .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      object-fit: contain;
    }

    .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="bottom"] > .charm-img-content {
      inset: auto auto 0 50% !important;
      width: 100% !important;
      height: auto !important;
      min-height: 100% !important;
      transform: translateX(-50%);
    }

    .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="left"] > .charm-img-content {
      inset: 50% auto auto 0 !important;
      width: auto !important;
      min-width: 100% !important;
      height: auto !important;
      min-height: 100% !important;
      transform: translateY(-50%);
    }

    .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="right"] > .charm-img-content {
      inset: 50% 0 auto auto !important;
      width: auto !important;
      min-width: 100% !important;
      height: auto !important;
      min-height: 100% !important;
      transform: translateY(-50%);
    }
  }

  /* ─── REDUCED MOTION ─── */
  .bracelet-customizer .bracelet-wrap {
    min-height: 220px;
    padding: 22px 22px 24px;
  }

  .bracelet-customizer .bracelet-container {
    min-height: 0;
    align-items: center;
    padding: 32px 42px 8px;
  }

  .bracelet-customizer #braceletContainer {
    align-items: center;
    padding: 20px 0 10px;
  }

  .bracelet-customizer .italian-slot {
    flex-basis: var(--link-w);
    width: var(--link-w);
    height: auto;
    aspect-ratio: var(--slot-ratio);
  }

  .bracelet-customizer .italian-slot.span-3 {
    height: auto;
    aspect-ratio: calc(138 * 3) / 140;
  }

  .bracelet-customizer .italian-slot.span-5 {
    height: auto;
    aspect-ratio: calc(138 * 5) / 140;
  }

  .bracelet-customizer .freeform-charm-item {
    width: var(--link-w);
  }

  .bracelet-customizer .bg-pattern-span {
    background-size: var(--link-w) auto;
  }

  .bracelet-customizer .italian-slot .charm-base-frame {
    aspect-ratio: var(--slot-ratio);
  }

  .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content {
    inset: auto;
    left: 50%;
    top: var(--slot-anchor-y);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    transform-origin: 50% var(--slot-anchor-y);
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="bottom"] > .charm-img-content {
    inset: auto auto 0 50%;
    transform: translateX(-50%);
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="left"] > .charm-img-content {
    inset: var(--slot-anchor-y) auto auto 0;
    transform: translateY(-50%);
  }

  .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="right"] > .charm-img-content {
    inset: var(--slot-anchor-y) 0 auto auto;
    transform: translateY(-50%);
  }

  @media (max-width: 768px) {
    :root {
      --link-w: clamp(132px, 36vw, 168px);
    }

    .bracelet-customizer .bracelet-wrap {
      min-height: 260px;
      padding: 16px 0;
    }

    .bracelet-customizer .bracelet-container {
      min-height: 0;
      padding: 24px 0 8px;
    }

    .bracelet-customizer #braceletContainer {
      padding: 0 15px;
    }

    .bracelet-customizer .italian-slot,
    .bracelet-customizer .italian-slot.span-3,
    .bracelet-customizer .italian-slot.span-5 {
      height: auto;
    }

    .bracelet-customizer .italian-slot .charm-base-frame {
      aspect-ratio: var(--slot-ratio);
    }

    .bracelet-customizer .italian-slot .charm-base-frame > .charm-img-content {
      inset: auto !important;
      left: 50% !important;
      top: var(--slot-anchor-y) !important;
      right: auto !important;
      bottom: auto !important;
      transform: translate(-50%, -50%);
    }

    .bracelet-customizer .italian-slot .charm-base-frame[data-anchor="bottom"] > .charm-img-content {
      inset: auto auto 0 50% !important;
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* FIX: previously this mobile-only block redefined --slot-margin to a
     fixed -46px, breaking the proportional overlap the base rule uses
     on desktop. Removed entirely — the base .italian-slot rule
     (calc(var(--link-w) * -0.35)) now applies unchanged on every
     screen size, since --link-w itself already scales responsively via
     clamp()/vw per breakpoint. This is what makes the overlap ratio
     between charms (and therefore the safety-chain gap, which is built
     from the same --slot-margin variable) look identical across every
     screen size instead of drifting on phones. */

  .bracelet-container,
  .filter-scroll,
  #braceletContainer {
    overscroll-behavior: contain;
  }

  @media (max-width: 768px) {
    .top-toolbar {
      flex-wrap: nowrap;
      gap: 8px;
    }

    .toolbar-right {
      flex: none;
      width: 100%;
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    .toolbar-right .toolbar-btn {
      flex: 1 1 0;
      min-width: 0;
      padding: 8px 4px;
      font-size: 10.5px;
      white-space: nowrap;
    }
  }

  .top-toolbar {
    justify-content: flex-end;
  }

  .home-nav-btn {
    font-weight: 600;
  }

  @media (max-width: 768px) {
    .header {
      gap: 0.5rem;
    }

    .nav-links {
      justify-content: center;
      flex-wrap: wrap;
    }

    .top-toolbar {
      justify-content: flex-end;
    }

    .toolbar-right {
      justify-content: flex-end;
    }
    }
  /* Safety Chain: slot 1 and 5 are draggable; slots 2-4 are open */
  .italian-slot.safety-chain-slot {
    position: relative;
    z-index: 20;
    overflow: visible;
  }
  .italian-slot.safety-chain-tail {
    position: relative;
    z-index: 20;
    overflow: visible;
    cursor: grab;
  }
  .italian-slot.safety-chain-tail::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
  }

/* ─── KEYCHAIN HEAD / TAIL ENDPIECES ─── */
/*
 * เป็น .italian-slot เพื่อให้อยู่ใน flex row เดียวกัน แต่ override
 * margin/padding ให้ถูกต้อง
 *
 * FIX (ขนาดฐานออกแบบ): เดิม height: auto ทำให้สูงตามภาพ PNG จริง
 * ทำให้ bracelet-wrap สูงกว่า customizer.html — แก้โดยล็อคความสูง
 * ให้เท่ากับ slot ปกติ (link-w * 140/138 = aspect-ratio ของ slot)
 * แล้วให้รูปอยู่ภายในกล่องนั้นด้วย object-fit: contain
 *
 * FIX (ระยะห่าง head→slot = slot→slot): ใช้ var(--slot-margin) ที่ด้าน
 * ใน เหมือนกับที่ slot ปกติมี margin-inline: var(--slot-margin) ทั้งสองข้าง
 * head ← margin-right: slot-margin, slot ← margin-left: slot-margin → overlap เท่ากัน
 */
.italian-slot.keychain-endpiece {
  /* Width = 5 slots worth of space (same as span-5), no safety-chain padding */
  width:      calc(var(--link-w) * 5 + var(--slot-margin) * 4) !important;
  flex-basis: calc(var(--link-w) * 5 + var(--slot-margin) * 4) !important;
  flex-shrink: 0 !important;

  /* LOCK HEIGHT to exactly one slot's height — prevents the image from expanding the board */
  height: calc(var(--link-w) * 140 / 138) !important;
  overflow: visible; /* allow image to peek up beyond the slot row */

  margin-top:    calc(var(--link-w) * -0.35) !important; /* shift up */
  margin-bottom: 0 !important;
  padding:       0 !important;
  aspect-ratio:  auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

/* Inner (charm-facing) side uses more aggressive overlap so head/tail sit closer to slot[0]/slot[4] */
.italian-slot.keychain-head {
  margin-left:  var(--slot-margin) !important;               /* outer edge */
  margin-right: calc(var(--link-w) * -1.85) !important;     /* inner edge — more overlap than slot→slot */
}

.italian-slot.keychain-tail {
  margin-left:  calc(var(--link-w) * -1.85  ) !important;     /* inner edge — more overlap than slot→slot */
  margin-right: var(--slot-margin) !important;               /* outer edge */
}

/* Image fills the fixed-height box, no clipping */
.italian-slot.keychain-endpiece > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.applewatch-customizer .italian-slot.applewatch-endpiece {
  width: calc(var(--link-w) * 4 + var(--slot-margin) * 2) !important;
  flex-basis: calc(var(--link-w) * 4 + var(--slot-margin) * 2) !important;
  height: calc(var(--link-w) * 1.25) !important;
  margin-top: calc(var(--link-w) * -0.08) !important;
  overflow: hidden !important;
}

.applewatch-customizer .italian-slot.applewatch-endpiece > img {
  width: 133%;
  height: 133%;
  max-width: none;
  max-height: none;
}

.applewatch-customizer .italian-slot.applewatch-head {
  margin-left: var(--slot-margin) !important;
  margin-right: calc(var(--link-w) * -1.73) !important;
}

.applewatch-customizer .italian-slot.applewatch-tail {
  margin-left: calc(var(--link-w) * -1.73) !important;
  margin-right: var(--slot-margin) !important;
}

/* ─── CHARM GRID: จอใหญ่กว่าโทรศัพท์พื้นฐาน (ไอแพด/คอม) 5 คอลัมน์
   + ขยายกล่อง/ภาพ + แสดงชื่อชาร์มใต้กล่องเหมือนบนมือถือ ───
   ใช้แนวทางเดียวกับ mobile (กล่อง/ภาพเป็น % ของ cell) แทนขนาด fix
   72px เดิม เพื่อให้กล่องขยายตามพื้นที่จริงเวลาลดจาก auto-fill
   เหลือ 5 คอลัมน์คงที่.
   FIX: เดิม breakpoint นี้อยู่ที่ min-width:1024px ทำให้ iPad mini
   (กว้าง 768px แนวตั้ง) ไม่เข้าเงื่อนไข เพราะ 768px ยังโดน media query
   ของมือถือ (max-width:768px) จับอยู่ก่อน — ลดเป็น min-width:600px
   (กว้างกว่าจอโทรศัพท์ทั่วไปที่ ~ 390-430px) เพื่อให้ iPad mini และ
   จอที่ใหญ่กว่าโทรศัพท์พื้นฐานทั้งหมดเข้าเงื่อนไข 5 คอลัมน์นี้แทน.
   หมายเหตุ: เพราะบล็อกนี้อยู่ท้ายไฟล์ (source order หลังสุด) และมี
   specificity เท่ากับ .charm-grid ตัวใน @media (max-width:768px)
   ด้านบน จึงชนะทับกันได้ในช่วงคาบเกี่ยว (600–768px) โดยไม่ต้องแก้ไข
   breakpoint มือถือเดิม */
@media (min-width: 600px) {
  .charm-grid {
    /* minmax(0, 1fr) แทน 1fr เฉยๆ — ค่า default ของ grid item คือ
       min-width: auto (ขนาดตาม content) ซึ่งทำให้คอลัมน์ริมซ้าย/ขวา
       "ดัน" ล้นขอบจอได้ในจอที่แคบ (เช่น iPad mini แนวตั้ง) จนดูเหมือน
       กรอบคอลัมน์โดนตัด — minmax(0, 1fr) บังคับให้คอลัมน์หดได้เต็มที่
       และรวมกับ padding ด้านข้างด้านล่าง การันตีว่าไม่มีอะไรล้นขอบจอ */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    /* เผื่อระยะขอบซ้าย/ขวาให้มากกว่าเดิม (16px → 20px) กันคอลัมน์แรก/
       สุดท้ายชิดขอบจอเกินไปจนดูเหมือนโดนตัด */
    padding: 16px 20px 24px;
  }

  .charm-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: visible; /* กันไม่ให้ dangle/safety-chain ที่ scale ใหญ่ถูกตัดขอบ
                           และให้ชื่อชาร์มด้านล่าง (ที่ล้นออกจากกรอบสี่เหลี่ยม
                           จัตุรัสของกล่อง) แสดงผลได้ เหมือนพฤติกรรมบนมือถือ */
    border-radius: 8px;
    touch-action: none;
  }

  .charm-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none;
  }

  .charm-icon img {
    width: 100%;
    height: 100%;
  }

  .charm-icon img.watch-vertical {
    max-width: none;
    max-height: none;
    width: 140%;
  }

  /* แสดงชื่อชาร์มใต้กล่อง เหมือนที่ .charm-name ถูกเปิดไว้ใน
     @media (max-width:768px) ด้านบน — ค่าเริ่มต้นของ .charm-name คือ
     display:none (สไตล์ Nomination ไม่โชว์ชื่อ) ดังนั้นต้อง override
     display ตรงนี้ด้วย ไม่ใช่แค่ปรับ font-size */
  .charm-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    white-space: normal;
    color: var(--taupe);
    margin-top: 4px;
  }
}

/* ─── ช่วงจอแคบสุดของ 5-คอลัมน์ (เช่น iPad mini แนวตั้ง ~768px และ
   จอที่แคบกว่านั้นเล็กน้อย) — ลด gap ระหว่างคอลัมน์แทนที่จะปล่อยให้
   กล่อง/ตัวอักษรชื่อชาร์มถูกบีบจนล้น/โดนตัดที่ขอบจอ ───
   ที่ 768px: 5 คอลัมน์ + gap 16px + padding 20px ทั้งสองข้าง เหลือพื้นที่
   ต่อกล่อง ~119px ซึ่งยังโอเค แต่ในจอแคบกว่านั้น (เช่น 600-680px) พื้นที่
   ต่อกล่องจะเหลือ ~90px หรือน้อยกว่า ทำให้ดูอึดอัดและชื่อชาร์มตัดคำถี่ —
   ลด gap ลงก่อน (ไม่ลด padding ขอบ เพื่อกันคอลัมน์ริมโดนตัดตามที่แจ้ง) */
@media (min-width: 600px) and (max-width: 767px) {
  .charm-grid {
    gap: 10px;
    padding: 14px 16px 20px;
  }
}