/* General */
#columns { padding: 30px 0; }
.add-to-cart { color: #fff; background: #F05F73; padding: 3px 7px 5px; margin: 0 0 0 5px; border: 1px solid #F05F73; }
a.add-to-cart:hover { background: #fff; color: #F05F73; }
.clear { clear: both; display: block; }

/* Header table of results */
#diamonds-counter { position: relative; z-index: 61; background: #f59b9b; color: #fff; }
#diamonds-counter:after { content: ' '; display: block; clear: both; }
#diamonds-counter h3 { font-size: 14pt; float: left; margin: 0; padding: 10px; }
#diamonds-counter h3 span { margin: 0 5px 0 0; font-weight: 600; }
#diamonds-counter > i { font-style: normal; float: right; cursor: pointer; font-weight: 600; font-size: 11pt; padding: 10px 29px 10px 15px; background: #fff; color: #000; border: 1px solid #dfdfdf; border-bottom: 0; text-transform: uppercase; position: relative; }
#diamonds-counter > i:before { content: ' '; display: block; background: #fff; position: absolute; top: 100%; left: 0; right: 0; height: 3px; z-index: 15; }
#diamonds-counter > i:after { content: ' '; display: block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #F05F73; position: absolute; top: 15px; right: 12px; }
#diamonds-counter > i.open:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid #F05F73; border-top: 0; }
#diamonds-header { position: sticky; top: 0; left: 0; right: 0; background: #fff; }

/* Body table of results */
#diamonds-holder { position: relative; }
#diamonds-holder section { height: 400px; overflow: auto; }
#diamonds-header thead { box-shadow: 0 0 10px -3px #000; }
#diamonds-header th { text-transform: uppercase; padding: 10px 0; text-align: center; color: #575757; font: 700 9pt/1.2 'LatoBold', 'Arial', sans-serif; }
#diamonds-list tr { transition: all .4s; }
#diamonds-list tr:nth-of-type( 2n ) { background: #f5f5f5; }
#diamonds-list tr:hover { background: #F05F73; color: #fff; }
#diamonds-list tr .price { transition: all .4s; }
#diamonds-list tr:hover .price { color: #fff; }
#diamonds-list td { padding: 10px 0; font-size: 12px; text-align: center; cursor: pointer; }
.size-5 { width: 5%; }
.size-6 { width: 6%; }
.size-7 { width: 7%; }
.size-8 { width: 8%; }
.size-10 { width: 10%; }
.size-11 { width: 11%; }
.size-12 { width: 12%; }
#diamonds-holder a { transition: all .4s; }
#diamonds-holder a:hover, #diamonds-holder a:focus, #popup .add-to-cart:focus { background: #fff; color: #F05F73; outline: 0; text-decoration: none; }

/* Diamond search */
#diamond-search { display: none; position: absolute; top: calc( 100% - 1px ); left: 0; right: 0; z-index: 10; background: #fff; padding: 32px; border: 1px solid #dfdfdf; }
#diamond-search h4 { color: #000; }
#diamond-type { font-size: 0; }
#diamond-type h4 { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }
#diamond-type li { display: inline-block; vertical-align: middle; padding: 7px 14px; font-size: 10.5pt; transition: all .4s; cursor: pointer; }
#diamond-type .selected, #diamond-shape .selected, #diamond-lab .selected { background: #F05F73; color: #fff; }
#diamond-type li:not( .selected ), #diamond-shape li:not( .selected ) { background: #f9f9f9; color: #575757; }
#diamond-shape { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#diamond-shape h4 { flex: 0 100%; }
#diamond-shape li { cursor: pointer; flex: 0 calc( ( 100% - 45px ) / 10 ); background: #f9f9f9; color: #575757; padding: 10px; text-align: center; aspect-ratio: 1; justify-content: center; display: flex; align-items: center; transition: all .4s; }
#diamond-search section { display: flex; gap: 10px 50px; flex-wrap: wrap; }
#diamond-search section > div { flex: 0 calc( ( 100% - 100px ) / 3 ); }
.slider-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 0; }
.slider-controls input { border: 1px solid #f1eedd; max-width: 78px; font-size: 9pt; color: #999; }
.slider-controls input:active { border-color: #000; }
.slider-controls input:last-of-type { text-align: right; }
.slider-controls label { color: #999; font-size: 9pt; font-weight: 400; }
#diamond-lab { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
#diamond-lab h4 { flex: 0 100%; }
#diamond-lab span { text-align: center; padding: 7px 14px; font-size: 10.5pt; transition: all .4s; cursor: pointer; background: #f9f9f9; color: #575757; flex: calc( ( 100% - 10px ) / 3 );}
#diamond-search [type="submit"] { transition: all .4s; margin: 12px 0 0 auto; display: block; border: 1px solid #F05F73; text-transform: uppercase; color: #FFF; text-align: center; text-decoration: none; font-size: 13px; padding: 9px 23px; font-weight: 700; line-height: 22px; background: #F05F73; }
#diamond-search [type="submit"]:hover { color: #F05F73; background: #FFF; }
#diamond-search [type="submit"]:before { content: '\e800'; display: inline-block; font: normal 11pt / 30px 'thedigitalcube-quick-search'; margin: 0 7px 0 0; }

/* Loading screen */
#overlay-diamonds { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba( 250, 250, 250, .7 ); }
#overlay-diamonds section { height: auto; width: 215px; background: #FFF; padding: 15px; text-align: center; position: absolute; transform: translate( -50%, -50% ); top: 50%; left: 50%; border: 1px solid rgba( 240, 95, 115, .16 ); }
#overlay-diamonds section div { margin-top: 10px; }
#overlay-diamonds section img { width: 32px; height: 32px; }

/* Popups */
#popup { background: rgba( 0, 0, 0, .6 ); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; }
#popup > aside { max-height: 92vh; overflow-y: auto; padding: 20px; background: #FFF; color: #000; position: absolute; top: 50%; left: 50%; z-index: 10001; transform: translate( -50%, -50% ); box-sizing: border-box; width: 800px; max-width: 90%; }
#popup > aside::-webkit-scrollbar { width: 6px; }
#popup > aside::-webkit-scrollbar-thumb { background: #F05F73; cursor: pointer; }
#popup > aside::-webkit-scrollbar-track { background: #f1f1f1; }
#popup > aside > svg { position: absolute; top: 6px; right: 6px; cursor: pointer; transition: all .4s; }
#popup > aside > svg:hover { transform: rotate( 45deg ); }
#popup form { padding: 20px 0; }
#product-information aside { float: left; width: 300px; margin: 0 20px 0 0; }
#popup iframe { display: block; width: 100%; aspect-ratio: 1; }
#popup img { max-width: 100%; }
#product-information nav { display: flex; justify-content: center; gap: 3px; margin: 5px 0; }
#product-information nav button { border: 2px solid transparent; transition: all .4s; width: 26px; aspect-ratio: 1; background: #b8b8b8 url( '../img/bg/video.webp' ) center/cover; }
#product-information nav .current { border-color: #F05F73; }
#popup section { float: left; width: calc( 100% - 320px ); }
#popup h1 { font-size: 23pt; margin: 0; }
#popup small { text-transform: uppercase; color: #908d8d; }
#popup p { margin: 0 0 12px; }
#popup big { margin: 10px 0 0; display: block; font-weight: 600; font-size: 20pt; line-height: 1.2; }
#popup .add-to-cart, .more { padding: 9px 13px; transition: all .4s; font-size: 11.5pt; display: inline-block; vertical-align: top; margin: 20px 0 0; text-transform: uppercase; }
.more { background: 0; border: 1px solid #F05F73; color: #F05F73; padding: 9px 11px; margin: 20px 0 0 14px; }
.more:hover { background: #F05F73; color: #fff; }
#product-details { margin: 18px 0 0; display: none; }
#product-details:after { content: ' '; clear: both; display: block; }
#product-details h2 { margin: 0 0 5px 10px; font-size: 17pt; }
#product-details table { float: left; width: calc( 50% - 10px ); }
#product-details table + table { float: right; }
#product-details tr { border-bottom: 1px dashed #dfdfdf; }
#product-details td { width: 50%; text-align: right; }