/* ===== Modal root ===== */
.sample-modal{
  position:fixed; inset:0; z-index:9999; display:none;
}
.sample-modal.is-open{ display:block; }

/* Backdrop should be BEHIND the drawer */
.sample-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
  z-index:0;                 /* <-- behind */
}

/* Right-side drawer */
.sample-modal__dialog{
  position:absolute; right:0; top:0;
  height:100vh; width:100%; max-width:480px;
  background:#fff; box-shadow:-24px 0 60px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .35s ease;
  z-index:2;                  /* <-- above backdrop */
}
.sample-modal.is-open .sample-modal__dialog{ transform:translateX(0); }

/* Header + visible close */
#sample-modal-title{ font-size:22px; margin:18px 24px 10px; }
.sample-modal__close{
  position:absolute; top:10px; right:12px;   /* put at top-right */
  background:none; border:none; padding:6px;
  font-size:24px; line-height:1; cursor:pointer;
  color:#333; z-index:3;                      /* ensure visible */
}

/* Controls & spacing */
.continue-row{
  display:flex; align-items:center; gap:8px;
  margin:0 24px 14px;                         /* <-- extra space requested */
}

/* Scrollable list (mouse wheel/touch) */
.sample-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  padding:0 24px 24px;
  overflow:auto; max-height:calc(100vh - 200px);
  -webkit-overflow-scrolling: touch;
}

/* Cards */
.sample-card{
  display:flex; flex-direction:column; gap:8px;
  border:1px solid #eee; border-radius:12px; padding:12px; cursor:pointer;
}
.sample-thumb img{ width:100%; height:auto; display:block; }
.sample-title{ font-size:14px; line-height:1.3; min-height:2.4em; }

/* Footer */
.sample-footer{
  margin-top:auto; padding:12px 24px 20px; border-top:1px solid #eee;
  background:#fff; position:sticky; bottom:0; display:grid; gap:10px;
}
.sample-counter{ font-size:13px; opacity:.75; }

/* Validate button (uses your theme vars) */
.sample-validate{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:var(--btn-height, 48px);
  padding:var(--btn-padding, 14px 18px);
  cursor:pointer; border:var(--btn-accented-border, 0);
  border-radius: var(--btn-accented-brd-radius);
  color: var(--btn-accented-color, #fff);
  box-shadow: var(--btn-accented-box-shadow, none);
  background-color: var(--btn-accented-bgcolor, var(--wd-primary-color, #c7a26e));
  text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
  font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
  font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
  font-style: var(--btn-accented-font-style, var(--btn-font-style, normal));
  letter-spacing: var(--btn-letter-spacing, .02em);
  transition: all .2s ease;
}
.sample-validate:hover:not([disabled]){
  background-color: var(--btn-accented-bgcolor-hover, var(--wd-primary-color-2, #b6915f));
}
.sample-validate[disabled]{ opacity:.5; cursor:not-allowed; }
/* actually lock the page underneath */
body.samples-open{ overflow:hidden; }
/* Put close button to the right of the title line */
#sample-modal-title{
  margin:18px 24px 10px;
  padding-right:48px;           /* room for the × */
}

/* Close button: align with title, no hover background */
.sample-modal__close{
  position:absolute;
  top:16px;
  right:24px;                   /* to the right of the title */
  left:auto;
  background:none !important;   /* no bg ever */
  border:none;
  padding:6px;
  font-size:22px;
  line-height:1;
  color:inherit;
  box-shadow:none;
  z-index:3;
}

.sample-modal__close:hover,
.sample-modal__close:focus,
.sample-modal__close:active{
  background:none !important;   /* keep static on hover/focus/active */
  color:inherit;                 /* no color flash */
  box-shadow:none;
  transform:none;
}

/* Ensure the drawer is the positioning context */
.sample-modal__dialog{ position:relative !important; }

/* Title spacing */
#sample-modal-title{
  margin:20px 24px 6px !important;   /* a bit tighter to the top */
  padding-right:56px;                 /* room for the × on the right */
}

/* Put the × on the RIGHT of the title, not centered; keep it static on hover */
.sample-modal__close{
  position:absolute !important;
  top:16px !important;
  right:24px !important;
  left:auto !important;
  transform:none !important;
  background:none !important;
  border:0 !important;
  padding:6px !important;
  font-size:22px !important;
  line-height:1 !important;
  color:inherit !important;
  box-shadow:none !important;
  z-index:3 !important;
}
.sample-modal__close:hover,
.sample-modal__close:focus,
.sample-modal__close:active{
  background:none !important;
  color:inherit !important;
  box-shadow:none !important;
  transform:none !important;
}

/* More space between "Continue without sample" and the product selector */
.continue-row{
  margin:0 24px 22px !important;      /* ← increase bottom gap */
}

/* Keep the grid snug under the spacer above */
.sample-grid{
  padding-top:0 !important;
}
/* ---- FORCE DRAWER ON THE RIGHT ---- */
.sample-modal{ position:fixed !important; inset:0 !important; z-index:9999; }
.sample-modal__backdrop{ z-index:0 !important; }

.sample-modal__dialog{
  position:absolute !important;
  top:0 !important;
  right:0 !important;        /* anchor to right edge */
  left:auto !important;      /* kill any left centering */
  margin:0 !important;       /* prevent theme centering */
  height:100vh !important;
  width:100% !important;
  max-width:480px !important;
  background:#fff;
  box-shadow:-24px 0 60px rgba(0,0,0,.15);
  display:flex; flex-direction:column; overflow:hidden;

  /* slide-in from the right */
  transform:translateX(100%) !important;
  transition:transform .35s ease !important;
  z-index:2 !important;
}
.sample-modal.is-open .sample-modal__dialog{
  transform:translateX(0) !important;
}

/* If your site runs RTL and something flips sides, keep drawer on the right anyway */
html[dir="rtl"] .sample-modal__dialog{
  right:0 !important;
  left:auto !important;
  transform:translateX(100%) !important;
}
html[dir="rtl"] .sample-modal.is-open .sample-modal__dialog{
  transform:translateX(0) !important;
}