html,
body {
  max-width: 100%;
  overflow-x: clip
}

img {
  max-width: 100%
}

.site-header {
  width: 100%
}

@media(max-width:1899px) and (min-width:1025px) {
  .site-header {
    height: 100px !important;
    background-size: 190px auto !important;
    background-position: center -5px !important
  }

  .site-header .menu-toggle {
    top: 34px !important;
    left: 5vw !important;
    transform: scale(.8);
    transform-origin: left center
  }

  .site-header .header-actions {
    top: 27px !important;
    right: 5vw !important
  }

  .menu-panel {
    inset: 100px 0 0 !important
  }

  .hero {
    width: 100% !important;
    height: min(760px, 70vw) !important;
    min-height: 620px !important
  }

  .hero-copy {
    left: 7vw !important;
    top: 50% !important
  }

  .hero-title-window {
    height: 125px !important
  }

  .hero-title-track span {
    height: 125px !important;
    font-size: 105px !important
  }

  .hero-copy p {
    font-size: 29px !important
  }

  .occasion {
    width: 100% !important;
    grid-template-columns: minmax(420px, 46%) 1fr !important;
    gap: 6vw !important;
    padding: 90px 5vw !important
  }

  .occasion-visual {
    width: 100% !important;
    height: 650px !important
  }

  .occasion h2 {
    font-size: 55px !important
  }

  .occasion-copy>p:not(.eyebrow) {
    font-size: 19px !important
  }

  .collections {
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .collections .collection-card {
    width: auto !important;
    height: 460px !important;
    min-height: 0 !important
  }

  .collection-card h3 {
    top: 60px !important;
    font-size: 58px !important
  }

  .collection-card p {
    top: 155px !important;
    left: 8% !important;
    width: 84% !important;
    height: auto !important;
    font-size: 21px !important;
    line-height: 1.35 !important
  }

  .collection-card a {
    top: auto !important;
    bottom: 55px !important;
    left: 50% !important;
    width: 180px !important;
    height: 62px !important;
    transform: translateX(-50%) !important;
    font-size: 24px !important
  }

  .products {
    padding: 85px 3vw !important
  }

  .products h2 {
    font-size: 62px !important
  }

  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important
  }

  .product {
    width: auto !important
  }

  .product-image {
    height: 360px !important
  }

  .product h3 {
    font-size: 25px !important
  }

  .gold-dish {
    width: 100% !important;
    height: 760px !important
  }

  .gold-dish .orbit {
    width: 720px !important
  }

  .gold-dish .orbit-text {
    width: 700px !important;
    height: 700px !important
  }

  .gold-dish .wordmark {
    bottom: 90px !important;
    font-size: clamp(125px, 14vw, 205px) !important
  }

  .gold-dish .wordmark span:last-child {
    transform: none !important
  }

  .deal {
    width: 100% !important;
    height: 260px !important;
    margin: 70px 0 !important
  }

  .deal .countdown {
    left: 3vw !important;
    top: 62px !important;
    grid-template-columns: repeat(4, 125px) !important;
    width: 500px !important
  }

  .deal .countdown strong {
    font-size: 58px !important
  }

  .deal .countdown span {
    font-size: 33px !important;
    margin-top: 22px !important
  }

  .deal>img {
    width: 280px !important;
    height: 295px !important
  }

  .deal>div:last-child {
    left: auto !important;
    right: 4vw !important;
    top: 62px !important;
    width: 480px !important
  }

  .deal>div:last-child p {
    font-size: 30px !important
  }

  .deal h2 {
    font-size: 44px !important;
    margin-top: 28px !important
  }

  .cave-scene {
    height: 650px !important
  }

  .nature-panel {
    padding: 75px 5vw !important;
    gap: 6vw !important
  }

  .story-banner {
    height: 650px !important
  }

  .story-banner h2 {
    font-size: 70px !important
  }

  .collection-showcase {
    grid-template-columns: minmax(430px, 46%) 1fr !important;
    gap: 5vw !important;
    padding: 60px 5vw !important;
    min-height: 680px !important
  }

  .collection-showcase-visual {
    height: 560px !important
  }

  .collection-showcase h2 {
    font-size: 52px !important
  }

  .collection-showcase-intro {
    font-size: 18px !important
  }

  .collection-showcase-services {
    margin-top: 40px !important
  }

  .collection-showcase-services span {
    font-size: 16px !important
  }

  footer {
    padding: 65px 5vw 28px !important;
    min-height: 560px !important
  }

  .footer-grid {
    grid-template-columns: 2fr repeat(3, 1fr) !important;
    gap: 4vw !important
  }

  .footer-grid>div:first-child {
    width: auto !important
  }

}

@media(max-width:1024px) {
  .site-header {
    height: 78px !important;
    padding: 0 20px !important;
    background-size: 145px auto !important;
    background-position: center -3px !important;
    position: relative
  }

  .site-header .menu-toggle {
    position: absolute !important;
    top: 25px !important;
    left: 22px !important;
    width: 30px !important;
    height: 27px !important;
    transform: none !important
  }

  .site-header .menu-toggle span {
    width: 30px !important;
    height: 3px !important;
    margin: 0 0 6px !important
  }

  .site-header .menu-toggle span:nth-child(3) {
    width: 18px !important;
    margin-left: 12px !important
  }

  .site-header .header-actions {
    top: 23px !important;
    right: 20px !important;
    height: 32px !important;
    gap: 15px !important
  }

  .site-header .header-search {
    width: 32px !important;
    height: 32px !important;
    background: transparent !important;
    padding: 0 !important
  }

  .site-header .header-search span,
  .site-header .header-account {
    display: none !important
  }

  .site-header .header-bag {
    width: 27px !important;
    height: 27px !important
  }

  .menu-panel {
    inset: 78px 0 0 !important;
    overflow-y: auto
  }

  .menu-panel-inner {
    padding: 45px 28px 70px !important
  }

  .menu-panel nav a {
    font-size: clamp(34px, 7vw, 53px) !important;
    padding: 14px 0 !important
  }

  .hero {
    width: 100% !important;
    height: 72vw !important;
    min-height: 560px !important
  }

  .hero-slide {
    object-position: center !important
  }

  .hero-copy {
    left: 7vw !important;
    top: 50% !important;
    width: 86% !important
  }

  .hero-copy p {
    font-size: 25px !important
  }

  .hero-title-window {
    height: 92px !important
  }

  .hero-title-track span {
    height: 92px !important;
    font-size: 74px !important
  }

  .hero-copy .button {
    width: 175px !important;
    height: 56px !important;
    margin-top: 25px !important;
    font-size: 18px !important
  }

  .section-pad {
    padding: 70px 28px !important
  }

  .occasion {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 50px !important;
    width: 100% !important
  }

  .occasion-visual {
    width: 100% !important;
    height: min(105vw, 720px) !important
  }

  .occasion-copy {
    padding: 0 !important
  }

  .occasion h2,
  .products h2 {
    font-size: clamp(43px, 7vw, 62px) !important
  }

  .occasion-copy>p:not(.eyebrow) {
    font-size: 18px !important
  }

  .collections {
    width: 100% !important;
    height: auto !important;
    grid-template-columns: 1fr 1fr !important
  }

  .collections .collection-card {
    width: auto !important;
    height: 410px !important;
    min-height: 0 !important
  }

  .collection-card h3 {
    top: 55px !important;
    font-size: 48px !important
  }

  .collection-card p {
    top: 140px !important;
    left: 8% !important;
    width: 84% !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1.35 !important
  }

  .collection-card p br {
    display: none
  }

  .collection-card a {
    top: auto !important;
    bottom: 48px !important;
    left: 50% !important;
    width: 160px !important;
    height: 55px !important;
    transform: translateX(-50%) !important;
    font-size: 21px !important
  }

  .products {
    padding: 75px 25px 90px !important
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important
  }

  .product {
    width: auto !important
  }

  .product-image {
    height: 420px !important
  }

  .product>a {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) !important;
    width: 190px !important;
    font-size: 19px !important
  }

  .product-details {
    padding-bottom: 76px !important
  }

  .product:hover .product-details {
    opacity: 1 !important;
    transform: none !important
  }

  .product:hover .product-image {
    height: 420px !important
  }

  .gold-dish {
    width: 100% !important;
    height: 650px !important
  }

  .gold-dish .orbit {
    width: min(680px, 90vw) !important
  }

  .gold-dish .orbit>img {
    width: 85% !important;
    transform: translateX(-3%) scale(.94) !important
  }

  .gold-dish .orbit-text {
    width: 90% !important;
    height: 90% !important
  }

  .gold-dish .wordmark {
    bottom: 75px !important;
    font-size: clamp(95px, 16vw, 160px) !important
  }

  .gold-dish .wordmark span:last-child {
    transform: none !important
  }

  .deal {
    width: 100% !important;
    height: auto !important;
    margin: 50px 0 !important;
    padding: 45px 25px !important;
    display: grid !important;
    grid-template-columns: 1fr 220px 1fr !important;
    align-items: center !important;
    gap: 20px !important
  }

  .deal .countdown {
    position: static !important;
    width: auto !important;
    height: auto !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }

  .deal .countdown div {
    height: auto !important
  }

  .deal .countdown strong {
    font-size: 43px !important
  }

  .deal .countdown span {
    font-size: 23px !important;
    margin-top: 12px !important
  }

  .deal>img {
    position: static !important;
    width: 220px !important;
    height: 220px !important;
    transform: none !important
  }

  .deal>div:last-child {
    position: static !important;
    width: auto !important;
    text-align: center !important
  }

  .deal>div:last-child p {
    text-align: center !important;
    font-size: 26px !important
  }

  .deal h2 {
    font-size: 36px !important;
    white-space: normal !important;
    margin-top: 18px !important
  }

  .cave-scene {
    height: min(65vw, 560px) !important
  }

  .nature-panel {
    grid-template-columns: 1fr !important;
    padding: 60px 28px !important;
    gap: 45px !important
  }

  .video-card {
    max-width: 650px;
    margin: auto
  }

  .nature h2 {
    font-size: 46px !important
  }

  .story-banner {
    height: 560px !important
  }

  .story-banner h2 {
    font-size: 58px !important
  }

  .collection-showcase {
    display: block !important;
    padding: 55px 28px !important
  }

  .collection-showcase-visual {
    height: min(95vw, 650px) !important
  }

  .collection-showcase-copy {
    padding-top: 42px !important
  }

  footer {
    padding: 60px 28px 25px !important;
    min-height: 0 !important
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr !important;
    gap: 45px 30px !important;
    min-height: 0 !important
  }

  .footer-grid>div:first-child {
    grid-column: 1/-1;
    width: auto !important;
    max-width: 600px
  }

  .copyright {
    margin-top: 55px !important;
    text-align: center !important;
  }


  .contact-hero,
  .contact-main {
    width: 100%
  }

  .catalog-card>div {
    height: 360px
  }
}

@media(max-width:600px) {
  .site-header {
    height: 70px !important;
    background-size: 125px auto !important
  }

  .site-header .menu-toggle {
    top: 21px !important
  }

  .site-header .header-actions {
    top: 20px !important
  }

  .menu-panel {
    inset: 70px 0 0 !important
  }

  .menu-panel-inner {
    padding: 35px 20px 60px !important
  }

  .menu-panel nav a {
    font-size: 34px !important;
    gap: 18px !important
  }

  .menu-secondary {
    gap: 18px !important
  }

  .hero {
    height: 620px !important;
    min-height: 0 !important
  }

  .hero-slide {
    object-position: 58% center !important
  }

  .hero-copy {
    left: 24px !important;
    top: auto !important;
    bottom: 65px !important;
    width: calc(100% - 48px) !important;
    transform: none !important
  }

  .hero-copy p {
    font-size: 20px !important
  }

  .hero-title-window {
    height: 70px !important
  }

  .hero-title-track span {
    height: 70px !important;
    font-size: 55px !important
  }

  .hero-copy .button {
    width: 145px !important;
    height: 50px !important;
    font-size: 18px !important
  }

  .section-pad {
    padding: 58px 18px !important
  }

  .occasion {
    gap: 35px !important
  }

  .occasion-visual {
    height: 118vw !important
  }

  .occasion-title {
    left: 18px !important;
    top: 25px !important;
    font-size: 27px !important
  }

  .seal {
    width: 82px !important;
    height: 82px !important;
    font-size: 15px !important
  }

  .occasion h2,
  .products h2 {
    font-size: 39px !important
  }

  .occasion .eyebrow,
  .products .eyebrow {
    font-size: 21px !important
  }

  .collections {
    grid-template-columns: 1fr !important
  }

  .collections .collection-card {
    height: 390px !important
  }

  .collection-card h3 {
    font-size: 45px !important
  }

  .collection-card p {
    font-size: 17px !important
  }

  .collection-card a {
    bottom: 42px !important
  }

  .products {
    padding: 60px 12px 75px !important
  }

  .product-grid {
    gap: 18px 10px !important
  }

  .product-image {
    height: 235px !important
  }

  .product:hover .product-image {
    height: 235px !important
  }

  .product h3 {
    font-size: 20px !important;
    line-height: 1.15 !important
  }

  .product-details p {
    font-size: 16px !important
  }

  .product-details {
    padding: 10px 7px 68px !important
  }

  .product>a {
    width: 84% !important;
    height: 44px !important;
    bottom: 13px !important;
    font-size: 16px !important
  }

  .gold-dish {
    height: 500px !important
  }

  .gold-dish .orbit {
    width: 100vw !important
  }

  .gold-dish .orbit-text {
    top: 39% !important;
    width: 98% !important;
    height: 98% !important
  }

  .gold-dish .orbit-text text {
    font-size: 22px !important;
    letter-spacing: 4px !important
  }

  .gold-dish .wordmark {
    bottom: 55px !important;
    left: 2% !important;
    right: 2% !important;
    font-size: 19vw !important
  }

  .deal {
    grid-template-columns: 1fr !important;
    padding: 35px 15px !important
  }

  .deal .countdown {
    order: 2;
  }

  .deal>img {
    order: 1;
    margin: auto;
    width: 190px !important;
    height: 180px !important
  }

  .deal>div:last-child {
    order: 3
  }

  .deal .countdown strong {
    font-size: 35px !important
  }

  .deal .countdown span {
    font-size: 19px !important
  }

  .deal h2 {
    font-size: 32px !important
  }

  .cave-scene {
    height: 72vw !important
  }

  .nature-panel {
    padding: 50px 18px !important
  }

  .nature h2 {
    font-size: 37px !important
  }

  .story-banner {
    height: 480px !important
  }

  .story-banner h2 {
    font-size: 43px !important
  }

  .story-banner p {
    font-size: 20px !important
  }

  .collection-showcase {
    padding: 48px 18px !important
  }

  .collection-showcase h2 {
    font-size: 42px !important
  }

  .collection-showcase-services {
    grid-template-columns: 1fr 1fr !important
  }

  footer {
    padding: 52px 20px 22px !important
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 42px 24px !important
  }

  .footer-grid>div:first-child {
    grid-column: 1/-1
  }

  .footer-logo {
    max-width: 180px !important
  }

  .copyright {
    display: grid !important;
    gap: 12px !important;
    text-align: center !important;
  }

}

@media(hover:none) {

  .collection-card a,
  .product>a {
    opacity: 1 !important;
    visibility: visible !important
  }

  .product-details {
    opacity: 1 !important;
    transform: none !important
  }

}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }
}

@media(max-width:1899px) {
  .site-header {
    background-image: none !important
  }

  .site-header .brand {
    display: block !important;
    position: absolute !important;
    z-index: 2;
    left: 50% !important;
    top: 5px !important;
    width: 110px !important;
    height: 90px !important;
    transform: translateX(-50%) !important;
    background: none !important;
    overflow: visible !important
  }

  .site-header .brand img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important
  }

  .hero-copy {
    right: auto !important;
    transform: translateY(-50%) !important;
    text-align: left !important
  }

  .hero-copy>p {
    display: block !important
  }

  .hero-title-window,
  .hero-title-track,
  .hero-title-track span {
    width: 100% !important;
    text-align: left !important
  }

  .hero-copy .button {
    display: flex !important
  }

  .occasion {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #fff2df !important;
    background-image: none !important
  }

  .occasion:after {
    display: block !important
  }

  .occasion-copy:after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: auto 0 4px auto !important;
    width: clamp(180px, 16vw, 304px) !important;
    height: clamp(245px, 21vw, 392px) !important;
    border-radius: 50% 50% 0 0 !important;
    background: url('../assets/web/gold-texture-background.webp') center/cover no-repeat !important;
    opacity: 1 !important;
    pointer-events: none !important
  }

  .occasion-visual {
    position: relative !important;
    left: auto !important;
    top: auto !important
  }

  .occasion-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important
  }

  .occasion-copy {
    position: relative !important;
    z-index: 2 !important;
    isolation: isolate !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important
  }

  .occasion-copy .eyebrow,
  .occasion h2,
  .occasion-copy>p:not(.eyebrow),
  .occasion .text-link {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 760px !important;
    white-space: normal !important
  }

  .occasion-copy .eyebrow {
    margin: 0 0 18px !important;
    line-height: 1.2 !important
  }

  .occasion h2 {
    margin: 0 0 28px !important
  }

  .occasion-copy>p:not(.eyebrow) {
    margin: 0 0 32px !important;
    line-height: 1.55 !important;
    max-width: calc(100% - clamp(210px, 18vw, 335px)) !important
  }

  .occasion .text-link {
    display: inline-flex !important;
    width: 185px !important;
    height: 60px !important
  }

  .occasion .seal {
    left: auto !important;
    right: 28px !important;
    top: auto !important;
    bottom: 28px !important
  }
}

@media(max-width:1899px) {
  .site-header .brand {
    background: url('../assets/web/decorative-jewellery-model.webp') center -5px/210px auto no-repeat !important
  }

  .site-header .brand img {
    display: none !important
  }

  .occasion-visual {
    background: #e9dfd4 url('../assets/web/birthstone-occasion-model.webp') center/cover no-repeat !important
  }

  .occasion-visual>img {
    opacity: 0 !important
  }
}

@media(max-width:600px) {
  .site-header .brand {
    top: 3px !important;
    width: 82px !important;
    height: 64px !important
  }

  .site-header .menu-toggle,
  .site-header .header-actions {
    z-index: 3
  }

  .hero-copy {
    transform: none !important
  }

  .occasion {
    min-height: 0 !important;
    height: auto !important
  }

  .occasion-title {
    left: 18px !important;
    right: 18px !important;
    top: 25px !important;
    width: auto !important;
    height: auto !important;
    font-size: 27px !important
  }

  .occasion-copy {
    padding: 0 !important
  }

  .occasion-copy>p:not(.eyebrow) {
    font-size: 16px !important
  }

  .occasion .text-link {
    width: 155px !important;
    height: 52px !important;
    font-size: 18px !important
  }

  .deal>img {
    display: block !important
  }
}

@media(max-width:600px) {
  .site-header .brand {
    background-size: 155px auto !important;
    background-position: center -2px !important
  }
}

.cave-scene {
  position: relative !important;
  overflow: hidden !important;
  contain: paint
}

.cave-toggle {
  display: none
}

@media(max-width:1024px) {
  .site-header .menu-toggle {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important
  }
}

@media(max-width:1024px) {
  .occasion-title {
    position: absolute !important;
    z-index: 4 !important;
    left: 24px !important;
    right: 24px !important;
    top: 26px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    color: #fff !important;
    text-align: center !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35)
  }

  .occasion-copy {
    margin-top: 0 !important
  }

  .collections .collections-background,
  .collections .collections-background-default {
    inset: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important
  }

  .cave-toggle {
    display: flex;
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    min-width: 150px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: rgba(8, 11, 8, .68);
    backdrop-filter: blur(8px);
    color: #fff;
    font: 500 12px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer
  }

  .cave-scene.is-revealed .cave-toggle {
    background: rgba(255, 255, 255, .9);
    color: #111
  }
}

@media(max-width:600px) {
  .site-header .brand {
    overflow: hidden !important;
    height: 62px !important
  }

  .site-header .menu-toggle {
    width: 32px !important;
    height: 24px !important
  }

  .site-header .menu-toggle span {
    position: absolute !important;
    left: 0 !important;
    width: 32px !important;
    height: 3px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #111 !important
  }

  .site-header .menu-toggle span:nth-child(1) {
    top: 0 !important
  }

  .site-header .menu-toggle span:nth-child(2) {
    top: 10px !important
  }

  .site-header .menu-toggle span:nth-child(3) {
    top: 20px !important;
    left: 12px !important;
    width: 20px !important
  }
}

@media(max-width:600px) {
  .occasion {
    gap: 38px !important;
    padding-top: 42px !important
  }

  .occasion-visual {
    height: 125vw !important;
    max-height: 540px !important
  }

  .occasion-title {
    top: 22px !important;
    left: 16px !important;
    right: 16px !important;
    font-size: 25px !important
  }

  .occasion .seal {
    right: 18px !important;
    bottom: 18px !important
  }

  .occasion-copy .eyebrow {
    margin-bottom: 14px !important;
    font-size: 20px !important;
    letter-spacing: .08em !important
  }

  .occasion h2 {
    font-size: 40px !important;
    line-height: 1.08 !important;
    margin-bottom: 24px !important
  }

  .collections .collections-background {
    object-position: 52% center !important
  }

  .cave-scene {
    height: 92vw !important;
    min-height: 350px !important;
    max-height: 470px !important
  }

  .cave-scene .cave-reveal {
    object-position: center top !important
  }

  .cave-toggle {
    bottom: 14px;
    min-width: 142px;
    height: 43px;
    font-size: 11px
  }
}

@media(min-width:1025px) and (max-width:1899px) {

  body,
  main,
  main>section,
  .site-header,
  footer {
    width: 100% !important;
    max-width: 100% !important
  }

  main>section,
  .site-header,
  footer,
  .products,
  .cave-scene {
    overflow-x: clip !important
  }

  .occasion {
    display: grid !important;
    grid-template-columns: minmax(380px, 40%) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 6vw !important;
    height: auto !important;
    min-height: 830px !important;
    margin: 0 !important;
    padding: 90px 5vw !important
  }

  .occasion-visual,
  .occasion-copy {
    min-width: 0 !important;
    max-width: 100% !important
  }

  .occasion-copy {
    padding: 0 !important
  }

  .occasion:after {
    right: -20px !important;
    top: 70px !important;
    width: clamp(150px, 12vw, 225px) !important;
    height: clamp(450px, 42vw, 710px) !important;
    opacity: .1 !important
  }

  .occasion-title {
    max-width: calc(100% - 48px) !important
  }

  .occasion h2 {
    font-size: clamp(48px, 3.8vw, 55px) !important
  }

  .collections {
    grid-template-rows: repeat(2, 460px) !important;
    margin: 0 !important
  }

  .collections .collections-background,
  .collections .collections-background-default {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important
  }

  .product-grid,
  .product,
  .nature-panel>*,
  .collection-showcase>*,
  .footer-grid>* {
    min-width: 0 !important
  }

  .nature-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important
  }

  .cave-scene:not(.is-revealed) .tree-left,
  .cave-scene:not(.is-revealed) .tree-right {
    transform: scale(1) !important
  }

  .products:before {
    right: 0 !important
  }

  .collection-showcase:after,
  footer:after {
    right: 0 !important
  }

  .pdp-related {
    overflow: hidden !important
  }
}

@media(max-width:600px) {
  .home-page .hero-copy {
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 36px) !important;
    transform: translateX(-50%) !important;
    align-items: center !important;
    text-align: center !important
  }

  .home-page .hero-copy>p,
  .home-page .hero-title-window,
  .home-page .hero-title-track,
  .home-page .hero-title-track span {
    width: 100% !important;
    text-align: center !important
  }

  .home-page .hero-title-track span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important
  }

  .home-page .hero-copy .button {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important
  }

  .site-header .menu-toggle span {
    transform: none !important;
    transition: top .25s ease, left .25s ease, width .25s ease, transform .25s ease, opacity .2s ease !important
  }

  .site-header .menu-toggle.is-open span:nth-child(1) {
    top: 10px !important;
    left: 0 !important;
    width: 32px !important;
    transform: rotate(45deg) !important
  }

  .site-header .menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important
  }

  .site-header .menu-toggle.is-open span:nth-child(3) {
    top: 10px !important;
    left: 0 !important;
    width: 32px !important;
    transform: rotate(-45deg) !important
  }
}

@media(min-width:1025px) and (max-width:1399px) {
  .site-header .brand {
    width: 145px !important;
    height: 88px !important;
    background-size: 132px auto !important;
    background-position: center center !important
  }

  .products {
    height: auto !important;
    min-height: 790px !important;
    padding: 72px 3vw 70px !important
  }

  .products h2 {
    font-size: clamp(48px, 5vw, 60px) !important;
    line-height: 1.08 !important
  }

  .product-grid {
    margin-top: 34px !important;
    gap: 20px !important
  }

  .product {
    height: 500px !important
  }

  .product-image {
    height: 340px !important
  }

  .gold-dish {
    height: 700px !important;
    margin-top: 58px !important
  }

  .gold-dish .orbit {
    width: 660px !important
  }

  .gold-dish .orbit-text {
    width: 640px !important;
    height: 640px !important
  }

  .gold-dish .wordmark {
    bottom: 70px !important;
    font-size: clamp(118px, 14vw, 176px) !important
  }

  .nature-panel {
    height: auto !important;
    min-height: 680px !important;
    margin-top: 45px !important;
    padding: 55px 5vw !important;
    gap: 5vw !important
  }

  .video-card,
  .video-card img {
    height: 570px !important
  }

  .video-card img {
    object-fit: cover !important
  }

  .nature-panel>div:last-child {
    min-width: 0 !important;
    padding-top: 0 !important
  }

  .nature h2 {
    font-size: clamp(38px, 4vw, 50px) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere
  }

  .story-banner {
    height: 590px !important;
    margin-top: 55px !important;
    margin-bottom: 55px !important
  }

  .story-banner h2 {
    font-size: clamp(54px, 6vw, 68px) !important;
    line-height: 1.05 !important
  }
}

@media(min-width:1025px) and (max-width:1240px) {
  .deal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    margin: 50px 0 !important;
    padding: 22px 3vw !important;
    overflow: hidden !important
  }

  .deal .countdown {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: auto !important;
    height: auto !important
  }

  .deal .countdown div {
    position: relative !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 0 5px !important
  }

  .deal .countdown div:not(:last-child):after {
    top: 8px !important;
    height: 72px !important
  }

  .deal .countdown strong {
    font-size: 38px !important
  }

  .deal .countdown span {
    margin-top: 10px !important;
    font-size: 21px !important
  }

  .deal>img {
    position: static !important;
    width: 190px !important;
    height: 225px !important;
    max-width: 100% !important;
    transform: none !important
  }

  .deal>div:last-child {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: center !important
  }

  .deal>div:last-child p {
    font-size: 24px !important;
    text-align: center !important
  }

  .deal h2 {
    margin-top: 18px !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    white-space: normal !important
  }
}

@media(max-width:600px) {
  .site-header .brand {
    width: 106px !important;
    height: 62px !important;
    background-size: 93px auto !important;
    background-position: center center !important
  }
}

@media(max-width:1024px) {
  .home-page .nature-description {
    max-width: none;
    margin: 22px 0 15px;
    font-size: 17px;
    line-height: 1.55;
    text-align: left
  }

  .home-page footer.original-home-footer {
    height: auto !important;
    min-height: 0 !important;
    padding: 55px 28px 25px !important;
    background-color: #a9824d !important;
    background-image: linear-gradient(rgba(169, 130, 77, .88), rgba(169, 130, 77, .88)), url('../assets/web/gold-texture-background.webp') !important
  }

  .home-page .original-home-footer .footer-grid {
    grid-template-columns: 1.25fr repeat(3, 1fr) !important;
    gap: 35px !important
  }

  .home-page .original-home-footer .footer-grid>div:first-child {
    grid-column: auto !important;
    padding: 0 !important;
    border: 0 !important
  }

  .home-page .original-home-footer .footer-logo {
    width: 210px !important;
    height: 145px !important
  }

  .home-page .original-home-footer h3 {
    margin: 0 0 15px !important;
    font-size: 20px !important
  }

  .home-page .original-home-footer a:not(.footer-cta) {
    margin: 7px 0 !important;
    font-size: 17px !important
  }

  .home-page .original-home-footer .copyright {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 18px !important;
    margin-top: 45px !important;
    font-size: 13px !important
  }

  .home-page .original-home-footer .copyright img {
    width: 250px !important;
    height: 25px !important
  }
}

@media(max-width:600px) {
  .home-page .newsletter {
    padding: 50px 18px !important;
    gap: 30px !important
  }

  .home-page .newsletter>img {
    order: 0 !important;
    height: auto !important
  }

  .home-page .newsletter h2 {
    font-size: 38px !important;
    text-align: left !important
  }

  .home-page .original-home-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 34px 20px !important
  }

  .home-page .original-home-footer .footer-grid>div:first-child {
    grid-column: 1/-1 !important
  }

  .home-page .original-home-footer .copyright {
    display: flex !important;
    align-items: center !important;
    text-align: center !important
  }

  .home-page .original-home-footer .copyright span:last-child {
    text-align: center !important
  }
}

@media(max-width:1024px) {
  .site-header .menu-toggle {
    display: block !important;
    width: 32px !important;
    height: 24px !important
  }

  .site-header .menu-toggle span {
    position: absolute !important;
    left: 0 !important;
    width: 32px !important;
    height: 3px !important;
    margin: 0 !important
  }

  .site-header .menu-toggle span:nth-child(1) {
    top: 0 !important
  }

  .site-header .menu-toggle span:nth-child(2) {
    top: 10px !important
  }

  .site-header .menu-toggle span:nth-child(3) {
    top: 20px !important;
    left: 12px !important;
    width: 20px !important
  }

  .site-header .brand {
    top: 4px !important;
    width: 112px !important;
    height: 70px !important;
    overflow: hidden !important;
    background-size: 100px auto !important;
    background-position: center center !important
  }

  .storefront-page main,
  .product-page main,
  .storefront-page main>section,
  .product-page main>section,
  .catalog-grid>*,
  .contact-hero>*,
  .contact-main>*,
  .pdp-hero>*,
  .pdp-gallery>* {
    min-width: 0
  }

  .storefront-page .catalog-grid,
  .product-page .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .storefront-page .catalog-heading,
  .storefront-page .filter-drawer,
  .product-page .pdp-utilities {
    flex-wrap: wrap
  }

  .storefront-page .category-tabs {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-width: none
  }

  .storefront-page .category-tabs::-webkit-scrollbar {
    display: none
  }

  .storefront-page .search-intro form,
  .storefront-page .search-intro input,
  .storefront-page .contact-form input,
  .storefront-page .contact-form select,
  .storefront-page .contact-form textarea {
    min-width: 0;
    max-width: 100%
  }
}

@media(max-width:600px) {
  .site-header .brand {
    top: 3px !important;
    width: 106px !important;
    height: 62px !important;
    background-size: 93px auto !important
  }

  .home-page .occasion-copy {
    padding-bottom: 75px !important;
  }

  .home-page .occasion-copy>p:not(.eyebrow) {
    width: 100% !important;
    max-width: none !important
  }

  .home-page .occasion-copy:after {
    right: 0 !important;
    bottom: 0 !important;
    width: 145px !important;
    height: 195px !important
  }

  .home-page .occasion .text-link {
    position: relative !important;
    z-index: 1 !important
  }

  .storefront-page .search-intro form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 65px;
    width: 100%
  }

  .storefront-page .catalog-card,
  .product-page .related-grid article {
    min-width: 0
  }

  .storefront-page .catalog-card h2,
  .product-page .related-grid h3,
  .storefront-page .contact-details dd,
  footer a {
    overflow-wrap: anywhere
  }

  .product-page .pdp-main-image,
  .product-page .product-crop,
  .product-page .services-image img,
  .product-page .pdp-categories img {
    max-width: 100%
  }
}

@media(max-width:380px) {

  .storefront-page .catalog-wrap,
  .storefront-page .search-results {
    padding-inline: 10px
  }

  .product-page .pdp-buy-row {
    grid-template-columns: 105px minmax(0, 1fr) !important;
    gap: 8px !important
  }

  .product-page .pdp-utilities {
    gap: 14px !important
  }

  footer .footer-grid {
    gap: 36px 16px !important
  }
}

@media(max-width:600px) {
  .home-page .collection-card>div {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    text-align: center !important
  }

  .home-page .collection-card h3,
  .home-page .collection-card p,
  .home-page .collection-card a {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important
  }

  .home-page .collection-card h3 {
    width: 100% !important;
    line-height: 1 !important;
    text-align: center !important
  }

  .home-page .collection-card p {
    width: min(100%, 340px) !important;
    line-height: 1.3 !important;
    text-align: center !important
  }

  .home-page .collection-card p br {
    display: block !important
  }

  .home-page .collection-card a {
    display: flex !important;
    width: min(235px, 82%) !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: center !important
  }

  .home-page .deal .countdown {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    gap: 0 !important
  }

  .home-page .deal .countdown div {
    display: flex !important;
    min-width: 0 !important;
    height: 76px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-right: 1px solid rgba(255, 255, 255, .65) !important
  }

  .home-page .deal .countdown div:last-child {
    border-right: 0 !important
  }

  .home-page .deal .countdown strong {
    display: block !important;
    font-size: 34px !important;
    line-height: .9 !important;
    text-align: center !important
  }

  .home-page .deal .countdown span {
    display: block !important;
    margin-top: 9px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important
  }

  .home-page footer .copyright {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important
  }

  .home-page footer .copyright span {
    display: block !important;
    width: 100% !important;
    text-align: center !important
  }
}

@media(max-width:1024px) {
  .site-header .menu-toggle {
    left: 18px !important
  }

  .site-header .header-actions {
    position: absolute !important;
    top: 23px !important;
    right: 18px !important;
    left: auto !important;
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important
  }

  .site-header .header-search {
    display: inline-flex !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important
  }

  .site-header .header-search img {
    display: block !important;
    width: 23px !important;
    height: 23px !important;
    object-fit: contain !important
  }

  .site-header .header-search span {
    display: none !important
  }
}

@media(max-width:600px) {
  .site-header {
    height: 70px !important;
    padding: 0 18px !important
  }

  .site-header .menu-toggle {
    top: 23px !important;
    left: 18px !important
  }

  .site-header .brand {
    top: 4px !important;
    width: 96px !important;
    height: 62px !important;
    background-size: 88px auto !important;
    background-position: center center !important
  }

  .site-header .header-actions {
    top: 19px !important;
    right: 18px !important
  }
}

@media(min-width:1025px) and (max-width:1899px) {

  .storefront-page .site-header .brand,
  .product-page .site-header .brand {
    top: 8px !important;
    width: 80px !important;
    height: 76px !important;
    overflow: hidden !important;
    background-image: url('../assets/web/decorative-jewellery-model.webp') !important;
    background-repeat: no-repeat !important;
    background-size: 200px auto !important;
    background-position: center -6px !important
  }

  .storefront-page .site-header .brand img,
  .product-page .site-header .brand img {
    display: none !important
  }
}

@media(min-width:901px) {
  .cave-scene {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 0 !important;
    max-height: none !important
  }

  .cave-stage {
    left: 50%;
    width: auto;
    min-width: 100%;
    height: 100%;
    transform: translate(-50%, -50%)
  }
}

@media(max-width:1024px) {
  .cave-toggle {
    left: 50% !important;
    right: auto !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important
  }
}

@media(max-width:900px) {
  .cave-stage {
    left: 50% !important;
    width: auto !important;
    min-width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) !important
  }
}

@media(min-width:1025px) and (max-width:1899px) {
  .site-header .brand {
    top: 10px !important;
    width: 81px !important;
    height: 72px !important;
    overflow: hidden !important;
    background-image: url('../assets/web/decorative-jewellery-model.webp') !important;
    background-repeat: no-repeat !important;
    background-size: 202px auto !important;
    background-position: center -6px !important
  }

  .site-header .brand img {
    display: none !important
  }
}

@media(min-width:901px) and (max-width:1024px) {
  .site-header .brand {
    top: 13px !important;
    width: 108px !important;
    height: 96px !important;
    overflow: hidden !important;
    background-size: 270px auto !important;
    background-position: center -8px !important
  }
}

@media(max-width:600px) {
  .site-header .menu-toggle {
    position: absolute !important;
    top: 23px !important;
    left: 18px !important;
    display: block !important;
    width: 30px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important
  }

  .site-header .menu-toggle span,
  .site-header .menu-toggle span:nth-child(1),
  .site-header .menu-toggle span:nth-child(2),
  .site-header .menu-toggle span:nth-child(3) {
    position: absolute !important;
    left: 0 !important;
    display: block !important;
    width: 30px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: #111 !important;
    transform-origin: 50% 50% !important;
    transition: top .25s ease, transform .25s ease, opacity .18s ease !important
  }

  .site-header .menu-toggle span:nth-child(1) {
    top: 1px !important
  }

  .site-header .menu-toggle span:nth-child(2) {
    top: 11px !important
  }

  .site-header .menu-toggle span:nth-child(3) {
    top: 21px !important
  }

  .site-header .menu-toggle.is-open span:nth-child(1) {
    top: 11px !important;
    transform: rotate(45deg) !important
  }

  .site-header .menu-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important
  }

  .site-header .menu-toggle.is-open span:nth-child(3) {
    top: 11px !important;
    transform: rotate(-45deg) !important
  }

  .home-page .collection-showcase-services {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    margin-top: 42px !important;
    border-top: 1px solid rgba(79, 68, 55, .24) !important
  }

  .home-page .collection-showcase-services div,
  .home-page .collection-showcase-services div:first-child,
  .home-page .collection-showcase-services div:last-child,
  .home-page .collection-showcase-services div:nth-child(2),
  .home-page .collection-showcase-services div:nth-child(n+3) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 116px !important;
    padding: 25px 14px 20px !important;
    border: 0 !important
  }

  .home-page .collection-showcase-services div:nth-child(odd) {
    padding-left: 0 !important;
    padding-right: 18px !important;
    border-right: 1px solid rgba(79, 68, 55, .22) !important
  }

  .home-page .collection-showcase-services div:nth-child(even) {
    padding-left: 18px !important;
    padding-right: 0 !important
  }

  .home-page .collection-showcase-services div:nth-child(n+3) {
    border-top: 1px solid rgba(79, 68, 55, .22) !important
  }

  .home-page .collection-showcase-services strong {
    display: block !important;
    color: var(--gold) !important;
    font: 400 15px/1 var(--sans) !important
  }

  .home-page .collection-showcase-services span {
    display: block !important;
    margin-top: 14px !important;
    overflow-wrap: normal !important;
    font: 400 clamp(19px, 5.3vw, 24px)/1.18 var(--serif) !important
  }
}

.site-header .brand.brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: none !important
}

.site-header .brand.brand img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important
}

body>footer .footer-logo {
  object-fit: contain !important;
  object-position: left center !important;
  filter: none !important
}