.ring-size-wrap{
  --vezo-blue:42,175,191;
  --vezo-green:60,219,192;
  --box-radius:10px;
}

.ring-order-summary{
  background:#f7f7f9;
  border:1px solid #e6e6ee;
  border-radius:8px;
  padding:12px 14px;
  margin:8px 0 14px 0;
  font-size:14px;
  line-height:1.5;
  color:#333;
}

.ring-order-summary .summary-label{
  display:inline-block;
  margin-right:4px;
  font-family:var(--x-headings-font-family, var(--x-font-family-headings, inherit));
  font-size:12px;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.ring-order-summary .row{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.ring-order-summary .row > div{
  min-width:220px;
}

.ring-order-summary-note{
  margin-top:6px;
  color:#0a3a42;
  font-size:12px;
}

.ring-notice{
  background:rgba(var(--vezo-blue),0.08);
  border:1px solid rgba(var(--vezo-blue),0.35);
  border-radius:var(--box-radius);
  padding:10px 12px;
  margin:10px 0;
  font-family:var(--x-body-font-family, var(--x-font-family-body, inherit));
  font-size:13px;
  color:#0a3a42;
}

.ring-notice.ring-notice-plain{
  background:transparent;
  border:none;
  padding:0;
  color:#10273a;
}

.ring-size-table-wrap{
  margin:16px 0;
  border:1px solid #cfd3da;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}

.ring-size-table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  margin:0;
  background:#fff;
}

.ring-size-table col.col-idx{ width:72px; }
.ring-size-table col.col-img{ width:108px; }
.ring-size-table col.col-prod{ width:auto; }
.ring-size-table col.col-size{ width:280px; }

.ring-size-table thead th{
  padding:12px 18px;
  text-align:left;
  border:none;
  border-bottom:1px solid #cfd3da;
  background:#f7f7f9;
  color:#242424;
  font-family:var(--x-headings-font-family, var(--x-font-family-headings, inherit));
  font-size:14px;
  font-weight:400;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.ring-size-table tbody td{
  padding:18px;
  border:none;
  border-bottom:1px solid #cfd3da;
  text-align:left;
  vertical-align:middle;
  word-break:break-word;
  background:#fff;
}

.ring-size-table tbody tr:last-child td{ border-bottom:none; }

.ring-size-table td:first-child,
.ring-size-table th:first-child{
  text-align:center;
}

.ring-size-table td[data-label="Ring"],
.ring-size-table td[data-label="Choose Size"]{
  text-align:center;
}

.ring-cell-value{
  display:flex;
  min-height:100%;
  align-items:center;
}

.ring-cell-value.is-number,
.ring-cell-value.is-ring,
.ring-cell-value.is-size{
  justify-content:center;
}

.ring-cell-value.is-size{
  flex-direction:column;
  gap:10px;
}

.ring-thumbnail{
  width:56px;
  height:56px;
  object-fit:contain;
  border:none;
  background:transparent;
  padding:0;
  box-shadow:none;
}

.ring-item-title{
  display:block;
  margin:0 0 2px;
  color:#3a3a3a;
  font-family:var(--x-headings-font-family, var(--x-font-family-headings, inherit));
  font-size:18px;
  font-weight:400;
  line-height:1.25;
}

.ring-meta{
  font-family:var(--x-body-font-family, var(--x-font-family-body, inherit));
  font-size:12px;
  color:#777;
  margin-top:0;
  line-height:1.35;
}

.ring-size-table select{
  width:132px;
  min-height:38px;
  padding:0 38px 0 18px;
  border:none;
  border-radius:999px;
  background-color:#37c6ae;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 1.25l5 5 5-5'/%3E%3C/svg%3E");
  background-position:right 16px center;
  background-repeat:no-repeat;
  color:#fff;
  font-family:var(--x-body-font-family, var(--x-font-family-body, inherit));
  font-size:12px;
  font-weight:700;
  text-align:center;
  text-align-last:center;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}

.ring-size-table select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(55, 198, 174, 0.2);
}

.ring-inline-availability{
  display:none;
  max-width:220px;
  font-family:var(--x-body-font-family, var(--x-font-family-body, inherit));
  font-size:12px;
  line-height:1.35;
  text-align:center;
  color:#6b7280;
}

.ring-inline-availability.is-visible{
  display:block;
}

.ring-inline-availability.is-instock{
  color:#14806f;
}

.ring-inline-availability.is-low,
.ring-inline-availability.is-backorder{
  color:#0a6d7d;
}

.ring-submit-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 28px;
  border:none;
  border-radius:999px;
  background:#37c6ae;
  color:#fff;
  font-family:var(--x-headings-font-family, var(--x-font-family-headings, inherit));
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:none;
}

.ring-submit-button:hover,
.ring-submit-button:focus{
  background:#31b59f;
  color:#fff;
}

.ring-submit-button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(55, 198, 174, 0.2);
}

.ring-sizing-link-request{
  max-width:680px;
}

.ring-link-progress{
  display:flex;
  gap:10px;
  margin:0 0 18px;
}

.ring-link-progress span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid #cfd3da;
  border-radius:50%;
  color:#52606d;
  font-size:13px;
  font-weight:700;
}

.ring-link-progress span.is-current,
.ring-link-progress span.is-complete{
  border-color:#37c6ae;
  background:#37c6ae;
  color:#fff;
}

.ring-link-step{
  display:block;
  border:1px solid #e0e4ea;
  border-radius:8px;
  padding:18px;
  margin:0 0 14px;
  background:#fff;
}

.ring-sizing-link-request[data-vezo-ring-link-wizard] .ring-link-step{
  display:none;
}

.ring-sizing-link-request[data-vezo-ring-link-wizard] .ring-link-step.is-active{
  display:block;
}

.ring-link-step-marker{
  color:#0a6d7d;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:4px;
  text-transform:uppercase;
}

.ring-link-step-title{
  margin:0 0 8px;
  color:#10273a;
  font-size:22px;
  line-height:1.2;
}

.ring-link-step-copy{
  margin:0 0 14px;
  color:#4b5563;
}

.ring-link-step input[type="text"]{
  width:100%;
  max-width:420px;
  min-height:44px;
  box-sizing:border-box;
  margin-top:6px;
}

.ring-field-error{
  display:none;
  max-width:420px;
  margin-top:8px;
  color:#9f1239;
  font-size:13px;
  line-height:1.4;
}

.ring-field-error.is-visible{
  display:block;
}

.ring-link-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:16px 0 0;
}

.ring-link-back{
  color:#52606d;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
}

.ring-link-secondary-actions{
  margin:14px 0 0;
}

.ring-sizing-link-request form.is-complete{
  display:none;
}

@media (max-width: 640px){
  .ring-size-table-wrap{
    border:none;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }

  .ring-size-table thead{ display:none; }

  .ring-size-table,
  .ring-size-table tbody,
  .ring-size-table tr,
  .ring-size-table td{
    display:block;
    width:100%;
  }

  .ring-size-table tr{
    margin:0 0 14px;
    border:1px solid #cfd3da;
    border-radius:6px;
    overflow:hidden;
    background:#fff;
  }

  .ring-size-table tr:last-child{ margin-bottom:0; }

  .ring-size-table tbody td{
    border:none;
    border-bottom:1px solid #cfd3da;
    padding:0;
    position:relative;
    background:#fff !important;
    margin:0;
  }

  .ring-size-table tbody tr td:last-child{ border-bottom:none; }

  .ring-size-table tbody td[data-label]{
    display:grid;
    grid-template-columns:42% 58%;
    gap:0;
    align-items:stretch;
  }

  .ring-size-table tbody td[data-label]::before{
    content:attr(data-label);
    display:flex;
    align-items:center;
    margin-bottom:0;
    padding:16px 14px;
    color:#242424;
    background:#f7f7f9;
    border-right:1px solid #cfd3da;
    font-family:var(--x-headings-font-family, var(--x-font-family-headings, inherit));
    font-size:14px;
    font-weight:400;
    letter-spacing:0.02em;
    text-transform:uppercase;
  }

  .ring-size-table tbody td .ring-cell-value{
    min-height:74px;
    padding:16px 14px;
    align-items:center;
    justify-content:flex-start;
  }

  .ring-size-table tbody td[data-label="Number"] .ring-cell-value,
  .ring-size-table tbody td[data-label="Ring"] .ring-cell-value,
  .ring-size-table tbody td[data-label="Choose Size"] .ring-cell-value{
    justify-content:center;
  }

  .ring-thumbnail{
    width:52px;
    height:52px;
  }

  .ring-item-title{ font-size:16px; }
  .ring-meta{ font-size:12px; }
  .ring-size-table select{
    width:128px;
    max-width:100%;
  }

  .ring-inline-availability{ max-width:150px; }
}