@import url("womens-diamond-rings.css");

:root { --color-primary: #D8C078; --color-primary-dark: #9b853e; }

.pendant-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 25px; }
.pendant-info-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pendant-info-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pendant-info-grid .info-card { display: grid; min-height: 0; overflow: hidden; padding: 0 0 18px; }
.pendant-info-grid .info-card > img { width: 100%; height: 145px; object-fit: cover; transition: transform .55s ease; }
.pendant-info-grid .info-card h3, .pendant-info-grid .info-card p { margin-right: 18px; margin-left: 18px; }
.pendant-info-grid .info-card h3 { margin-top: 17px; }
.pendant-info-grid .info-card p { margin-bottom: 0; }
.pendant-info-grid .info-card .card-index { margin: 17px 18px 0; color: var(--color-primary-dark); font-family: Arial, sans-serif; font-size: .73rem; font-weight: 800; letter-spacing: .11em; }
.pendant-info-grid .info-card .card-index + h3 { margin-top: 7px; }
.pendant-info-grid--light .info-card { color: #fff; }
.pendant-info-grid--light .info-card p { color: #eee5d9; }
.pendant-info-grid--light .info-card > img { opacity: .93; }
.inquiry-success-dialog { position: fixed; inset: 50% auto auto 50%; width: min(440px, calc(100% - 32px)); margin: 0; padding: 0; border: 0; border-radius: 20px; color: var(--color-text); background: #fff; box-shadow: 0 22px 60px rgba(46, 35, 16, .25); transform: translate(-50%, -50%); }
.inquiry-success-dialog::backdrop { background: rgba(23, 31, 36, .72); backdrop-filter: blur(4px); }
.inquiry-success-dialog > div { padding: 42px 38px 38px; text-align: center; }
.inquiry-success-dialog h2 { margin-bottom: 12px; font-size: clamp(2rem, 7vw, 2.75rem); }
.inquiry-success-dialog p:last-child { margin-bottom: 0; color: var(--color-muted); }
.inquiry-success-dialog__close { position: absolute; top: 14px; right: 16px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--color-text); background: var(--color-soft); font-family: Arial, sans-serif; font-size: 1.65rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .pendant-info-grid .info-card:hover > img { transform: scale(1.05); } }
@media (max-width: 980px) { .pendant-info-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pendant-info-grid--three, .pendant-info-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pendant-info-grid, .pendant-info-grid--three, .pendant-info-grid--five { grid-template-columns: 1fr; } .inquiry-success-dialog > div { padding: 38px 26px 30px; } }