/* Lab-grown discovery: homepage slide (Default.aspx) and Diamonds page section (certified-diamonds/default.aspx). */

/* Homepage slide: same FlexSlider markup and 375px height as the other slides, on an ivory/champagne ground. */
#home-slider .slide-container-inner.gn-lab-slide {
    background: linear-gradient(100deg, #FBF8F2 0%, #F6EFE3 50%, #EDE2CE 100%);
}
/* Existing GoldeNet diamond-shape images, shown unaltered as framed tiles (their backgrounds have a light vignette). */
#home-slider .gn-lab-slide .gn-lab-stones {
    position: absolute; top: 50%; left: 100px; width: 256px; height: 256px; margin-top: -128px;
    display: flex; flex-wrap: wrap; align-content: center; gap: 12px;
}
#home-slider .gn-lab-slide .gn-lab-stones img {
    width: 122px; height: 122px; display: block;
    border: 1px solid #E3D6BD; border-radius: 3px; box-shadow: 0 3px 10px rgba(90, 70, 30, .08);
}
#home-slider .gn-lab-slide .slide-description { z-index: 1; }
/* Selectors match the specificity of banner-slider.less so the dark text wins over the white slide text. */
#home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner { padding-bottom: 26px; }
#home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner .slide-first-line {
    color: #2E2A24; text-shadow: none; padding-bottom: 6px;
}
#home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner .slide-second-line {
    color: #7A5B22; text-shadow: none; font-weight: 400; letter-spacing: .06em; padding-bottom: 12px;
}
#home-slider .gn-lab-slide .gn-lab-copy {
    font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 22px; font-weight: 300; color: #4A443A;
    max-width: 380px; margin: 0 auto; padding-bottom: 18px;
}
#home-slider .gn-lab-slide a.gn-lab-secondary {
    display: inline-block; margin-top: 12px; padding-bottom: 3px;
    font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
    color: #005987; border-bottom: 1px solid #B8985C; text-decoration: none;
}
#home-slider .gn-lab-slide a.gn-lab-secondary:hover,
#home-slider .gn-lab-slide a.gn-lab-secondary:focus { color: #003B5A; border-bottom-color: #005987; }

@media (min-width: 768px) and (max-width: 991px) {
    /* Tablets: 250px beside the text column, so the four stones sit in a 2x2 group. */
    #home-slider .gn-lab-slide .gn-lab-stones { left: 0; width: 232px; height: 232px; margin-top: -98px; flex-wrap: wrap; gap: 10px; }
    #home-slider .gn-lab-slide .gn-lab-stones img { width: 108px; height: 108px; }
    /* At these widths the existing fixed header covers the top ~36px of every slide; keep this taller text block clear of it. */
    #home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner { padding-top: 40px; padding-bottom: 20px; }
}
@media (max-width: 767px) {
    /* Phones: text runs full width as on the other slides, so the stones form a small row above the heading. */
    #home-slider .slide-container-inner.gn-lab-slide { background: linear-gradient(170deg, #FBF8F2 0%, #F6EFE3 55%, #EDE2CE 100%); }
    #home-slider .gn-lab-slide .gn-lab-stones { top: 12px; left: 50%; height: 46px; margin: 0 0 0 -106px; width: 212px; gap: 8px; justify-content: center; }
    #home-slider .gn-lab-slide .gn-lab-stones img { width: 46px; height: 46px; box-shadow: none; }
    #home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner { padding-top: 52px; padding-bottom: 22px; }
    #home-slider .slide-container-inner.gn-lab-slide .slide-description .slide-table-outer .slide-table-inner .slide-first-line { font-size: 32px; padding-bottom: 4px; }
    #home-slider .gn-lab-slide .gn-lab-copy { padding: 0 16px 18px; }
    #home-slider .gn-lab-slide a.btn-banner { min-width: 0; padding: 14px 20px; font-size: 16px; }
}

/* Diamond detail page: the same LAB-GROWN label as the catalogue cards (lab-grown-landing.css .lg-tag, with --accent resolved to #806436).
   This stylesheet is only added to detail pages of category 1038 diamonds. */
.diamond-extra-image-detail { position: relative; }
.diamond-extra-image-detail .lg-tag {
    position: absolute; left: 8px; top: 8px; z-index: 2;
    font: 500 10px/1 Roboto, Arial, sans-serif; letter-spacing: .12em; color: #806436;
    background: rgba(255, 255, 255, .92); padding: 5px 7px;
}

/* Diamond detail page emerald theme. .gn-lab-detail is only added to the page container for category 1038 diamonds,
   and this stylesheet is only loaded on those pages, so natural diamond pages are unaffected. */
.page-diamond-single.gn-lab-detail h1,
.page-diamond-single.gn-lab-detail h2,
.page-diamond-single.gn-lab-detail h3,
.page-diamond-single.gn-lab-detail h4,
.page-diamond-single.gn-lab-detail h5,
.page-diamond-single.gn-lab-detail .item-price .amount,
.page-diamond-single.gn-lab-detail .item-price .curr-abbr,
.page-diamond-single.gn-lab-detail .spec-table .table-value,
.page-diamond-single.gn-lab-detail a:not(.btn) { color: #185B43; }
.page-diamond-single.gn-lab-detail a:not(.btn):hover,
.page-diamond-single.gn-lab-detail a:not(.btn):focus { color: #0F3D2C; }

/* Add to Ring: a slightly lighter emerald. */
.page-diamond-single.gn-lab-detail .btn.btn-light-blue { background: #237A58; color: #fff; }
.page-diamond-single.gn-lab-detail .btn.btn-light-blue:hover,
.page-diamond-single.gn-lab-detail .btn.btn-light-blue:focus,
.page-diamond-single.gn-lab-detail .btn-group.open .btn.btn-light-blue { background: #185B43; color: #fff; }

/* Add to Ring dropdown: emerald menu, white option text, lighter emerald for hover, focus and the active option. */
.page-diamond-single.gn-lab-detail .btn-group .dropdown-menu { background-color: #185B43; }
.page-diamond-single.gn-lab-detail .btn-group .dropdown-menu > li > a { color: #fff; }
.page-diamond-single.gn-lab-detail .btn-group .dropdown-menu > li > a:hover,
.page-diamond-single.gn-lab-detail .btn-group .dropdown-menu > li > a:focus,
.page-diamond-single.gn-lab-detail .btn-group .dropdown-menu > .active > a { background-color: #237A58; color: #fff; }

/* Small diamond outline before the product heading (inline SVG, no extra request). */
.page-diamond-single.gn-lab-detail .item-title::before {
    content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .35em; vertical-align: -.06em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23185B43' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11l4.5 5.5L12 21 2 9z'/%3E%3Cpath d='M2 9h20M7.5 9 12 3.5 16.5 9M7.5 9 12 21 16.5 9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Certificate and Video. */
.page-diamond-single.gn-lab-detail .btn.btn-ring-sizer.btn-ring-sizer-dark { background-color: #185B43; box-shadow: 0 2px 0 0 #0F3D2C; color: #fff; }
.page-diamond-single.gn-lab-detail .btn.btn-ring-sizer.btn-ring-sizer-dark:hover,
.page-diamond-single.gn-lab-detail .btn.btn-ring-sizer.btn-ring-sizer-dark:focus { background-color: #0F3D2C; color: #fff; }

/* Thumbnails: neutral border, emerald border on the selected one. The images themselves are unchanged. */
.page-diamond-single.gn-lab-detail #productPhotos .slide { border: 1px solid #D9D9D6; }
.page-diamond-single.gn-lab-detail #productPhotos .slide:hover { border-color: #8FB3A3; }
.page-diamond-single.gn-lab-detail #productPhotos .slide.current-slide { border-color: #185B43; box-shadow: inset 0 0 0 1px #185B43; }
.page-diamond-single.gn-lab-detail #productPhotos .ios-control span.control.ios-next { background-color: #185B43; }
.page-diamond-single.gn-lab-detail #productPhotos .ios-control span.control.ios-prev:hover,
.page-diamond-single.gn-lab-detail #productPhotos .ios-control span.control.ios-next:hover { background-color: #237A58; }

/* Diamonds page: short lab-grown section below the natural diamond shapes. */
.gn-lab-discover {
    background: #F8F4EC; border-top: 1px solid #E6DCC8; border-bottom: 1px solid #E6DCC8;
    padding: 28px 0; margin-top: 12px;
}
.gn-lab-discover .gn-lab-discover-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gn-lab-discover h2 {
    font-family: 'Arapey', serif; font-weight: normal; font-size: 26px; line-height: 1.2; color: #2E2A24; margin: 0 0 6px;
}
.gn-lab-discover p { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 15px; line-height: 23px; color: #4A443A; margin: 0; max-width: 640px; }
.gn-lab-discover .btn-banner { flex: none; }

@media (max-width: 767px) {
    .gn-lab-discover { padding: 24px 0; text-align: center; }
    .gn-lab-discover .gn-lab-discover-inner { flex-direction: column; gap: 16px; }
    .gn-lab-discover .btn-banner { min-width: 0; padding: 14px 20px; font-size: 16px; }
}