/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,body { width: 100%; min-height: 100%; overflow-x: hidden; font-family: 'Montserrat', sans-serif; background: #000; color: #bbab9d; scrollbar-gutter: stable; }
body { background-image: url("images/Dream Scene Intro.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
h1,h2,h3,h4,h5,h6 { font-family: 'Cinzel', serif; font-weight: 600; }
button,input,select,textarea { font-family: 'Montserrat', sans-serif; }

/* Utilities */
.brownText { color: #541a15; }
.beigeText { color: #bbab9d; }

/* Intro */
body.intro-active { overflow: hidden; }
.intro-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: center; align-items: flex-end; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); background-image: url("images/Dream Scene Intro.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; background-color: #000; }

/* Main Page */
.home-content { background-color: #111; background-image: url("images/dream scene background.webp"); background-repeat: repeat; background-position: top left; background-size: auto; }
.ds-logo { display: block; max-width: 760px; width: 100%; height: auto; margin: 0 auto; }

/* Buttons */
.ds-btn { position: relative; display: inline-block; padding: 18px 48px; background: linear-gradient(to bottom,#1b1b1b,#0d0d0d); border: 1px solid #7b3429; outline: 1px solid rgba(176,74,57,.7); outline-offset: -5px; color: #ebe5df; font-family: 'Cinzel', serif; font-size: 26px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 18px rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.45); transition: all .35s ease; }
.ds-btn::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.05); pointer-events: none; }
.ds-btn::after { content: ""; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transform: skewX(-25deg); transition: left .7s ease; }
.ds-btn:hover { color: #fff; border-color: #b44c3a; outline-color: #de6b52; background: linear-gradient(to bottom,#242424,#101010); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 25px rgba(255,255,255,.05), 0 0 18px rgba(180,70,55,.45), 0 10px 25px rgba(0,0,0,.55); }
.ds-btn:hover::after { left: 150%; }
.ds-btn:active { transform: scale(.98); }
.ds-small-btn { display: inline-block; width: fit-content; padding: 10px 28px; background: #541a15; border: 1px solid #8a332b; color: #eee3da; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.ds-small-btn:hover { background: #7b2a22; color: #fff; }

/* Menu */
.ds-menu { padding: 16px 0; background: rgba(0,0,0,.45); border-top: 1px solid rgba(187,171,157,.12); border-bottom: 1px solid rgba(187,171,157,.12); }
.ds-menu .nav-link { padding: 8px 22px; color: #bbab9d; font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.ds-menu .nav-link:hover,.ds-menu .nav-link:focus { color: #fff; }
.ds-menu .navbar-nav > .nav-item { margin: 0 28px; }
.ds-dropdown { min-width: 260px; padding: 8px 0; background: rgba(10,10,10,.96); border: 1px solid rgba(187,171,157,.18); border-radius: 0; }
.ds-dropdown .dropdown-item { padding: 10px 24px; color: #bbab9d; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ds-dropdown .dropdown-item:hover,.ds-dropdown .dropdown-item:focus { color: #fff; background: #541a15; }
.ds-cart-link { color: #bbab9d; font-size: 22px; text-decoration: none; }
.ds-cart-link:hover { color: #fff; }
.ds-menu-toggle { border-color: rgba(187,171,157,.35); }
.ds-menu-toggle .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23bbab9d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* Category Strip */
.ds-category-strip { background: rgba(0,0,0,.35); }
.ds-category-row { border: 1px solid rgba(187,171,157,.18); background: rgba(0,0,0,.55); overflow: hidden; }
.ds-category-intro { min-height: 320px; padding: 35px 28px; display: flex; flex-direction: column; justify-content: center; background: rgba(0,0,0,.75); }
.ds-category-intro h2 { margin-bottom: 16px; color: #d8cec3; font-size: clamp(22px,1.65vw,30px); line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; }
.ds-category-intro h2 span { color: #9e2d24; }
.ds-category-intro p { max-width: 360px; margin-bottom: 20px; color: #bbab9d; font-size: 14px; line-height: 1.5; }
.ds-category-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.ds-category-card { position: relative; min-height: 320px; display: flex; align-items: flex-end; justify-content: center; background-position: center center; background-repeat: no-repeat; background-size: cover; border-left: 1px solid rgba(187,171,157,.14); overflow: hidden; }
.ds-category-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.82)); transition: all .35s ease; }
.ds-category-card:hover::before { background: linear-gradient(to bottom,rgba(84,26,21,.08),rgba(0,0,0,.9)); }
.ds-category-card span { position: relative; z-index: 2; width: 100%; padding: 0 10px 22px; color: #e4d8cc; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.ds-category-link:hover,.ds-category-link:hover span { color: #fff; text-decoration: none; }

/* Footer */
.ds-footer { background-color: #111; background-image: linear-gradient(rgba(0,0,0,.60),rgba(0,0,0,.60)),url("images/dream scene background.webp"); background-repeat: repeat; background-position: top left; background-size: auto; border-top: 1px solid #541a15; }
.ds-footer-logo { display: block; max-width: 100%; width: 260px; height: auto; }
.ds-footer h4 { margin-bottom: 15px; color: #d8cec3; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.ds-footer .nav-link { padding: 4px 0; color: #bbab9d; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ds-footer .nav-link:hover,.ds-footer .nav-link:focus { color: #fff; }
.ds-footer small { color: #8d8278; font-size: 13px; }
.ds-footer .border-top { border-color: #541a15 !important; }

/* Breadcrumbs */
.ds-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; }
.ds-breadcrumb a { color:#bbab9d; text-decoration:none; }
.ds-breadcrumb a:hover,.ds-breadcrumb span:last-child { color:#fff; }
.ds-breadcrumb span { color:#fff; }

/* Silicone Comparison */
.ds-compare-table { --bs-table-bg: transparent; --bs-table-color: #bbab9d; --bs-table-border-color: rgba(187,171,157,.18); }
.ds-compare-table th,.ds-compare-table td { padding: 1rem; text-align: left; vertical-align: top; }
.ds-compare-table thead th { color: #e7dfd7; border-bottom: 2px solid #541a15; font-weight: 600; }
.ds-compare-table tbody td:first-child { width: 22%; color: #d8cec4; font-weight: 600; }
.ds-check-icon { flex: 0 0 18px; margin-top: .15rem; color: #bbab9d; }
.ds-dot-icon { flex: 0 0 18px; margin-top: .55rem; color: #8d7768; font-size: .42rem; }

/* Cart */
.ds-cart-table { --bs-table-bg: transparent; --bs-table-color: #bbab9d; --bs-table-border-color: rgba(187,171,157,.18); }
.ds-cart-table th { color: #e7dfd7; border-bottom: 2px solid #541a15; font-weight: 600; }
.ds-cart-table a { color: #bbab9d; text-decoration: none; }
.ds-cart-table a:hover { color: #fff; }
.ds-cart-remove { padding: 0; border: 0; background: none; color: #bbab9d; }
.ds-cart-remove:hover { color: #fff; }

/* Forms */
.form-control,.form-select,.form-check-input { background: rgba(0,0,0,.55); border: 1px solid rgba(187,171,157,.25); color: #d8cec4; }
.form-control::placeholder,.form-select::placeholder { color: #8d7768; }
.form-control:focus,.form-select:focus,.form-check-input:focus { background: rgba(0,0,0,.7); border-color: #541a15; color: #fff; box-shadow: 0 0 0 .2rem rgba(84,26,21,.18); }
.form-control:disabled,.form-select:disabled { background: rgba(255,255,255,.06); color: #8d7768; }
.form-label,.form-check-label { color: #d8cec4; }
.form-control::-webkit-inner-spin-button,.form-control::-webkit-outer-spin-button { opacity: 1; }
.form-check-input:checked { background-color: #bc746c; border-color: #bbab9d; }

/* Cart Quantity */
.ds-qty { display: flex; align-items: stretch; width: 120px; }
.ds-qty-btn { width: 36px; border: 1px solid rgba(187,171,157,.25); background: rgba(0,0,0,.55); color: #bbab9d; }
.ds-qty-btn:hover { background: rgba(84,26,21,.45); color: #fff; }
.ds-qty-input { border-left: 0; border-right: 0; border-radius: 0; text-align: center; }
.ds-qty-input::-webkit-outer-spin-button,.ds-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-qty-input { -moz-appearance: textfield; appearance: textfield; }

/* Checkout */
.ds-checkout-warning { color: #bbab9d; }
.ds-small-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Media Queries */
@media (min-width: 768px) {

}

@media (max-width: 1199px) {
    .ds-category-row { border: 0; background: transparent; overflow: visible; }
    .ds-category-intro,.ds-category-card { min-height: 260px; border: 1px solid rgba(187,171,157,.18); }
    .ds-category-card { border-left: 1px solid rgba(187,171,157,.18); }
}

@media (max-width: 1024px) {
    body { background-image: url("images/Dream Scene Intro Tablet.png"); background-attachment: scroll; }
    .intro-overlay { background-image: url("images/Dream Scene Intro Tablet.png"); background-attachment: scroll; }
    .ds-btn { padding: 15px 36px; font-size: 22px; letter-spacing: .22em; }
}

@media (max-width: 991px) {
    .ds-category-intro { min-height: auto; padding: 30px 22px; align-items: center; text-align: center; }
    .ds-category-intro h2 { font-size: 26px; letter-spacing: .06em; }
    .ds-category-intro p { max-width: 100%; }
    .ds-category-card { min-height: 240px; }
    .ds-category-card a { font-size: 12px; letter-spacing: .10em; }
    .ds-cart-link.d-lg-none { margin-left: auto; font-size: 24px; color: #bbab9d; text-decoration: none; }
    .ds-menu-toggle { margin: 0; }
    .ds-footer { text-align: center; }
}

@media (max-width: 932px) and (orientation: landscape) {
    body { background-image: url("images/Dream Scene Intro.png"); background-position: center center; background-size: cover; background-attachment: scroll; }
    .intro-overlay { background-image: url("images/Dream Scene Intro.png"); background-position: center center; background-size: cover; }
}

@media (max-width: 768px) and (orientation: portrait) {
    body { background-image: url("images/Dream Scene Intro Mobile.png"); background-position: center center; background-size: contain; background-repeat: no-repeat; background-attachment: scroll; background-color: #000; }
    .intro-overlay { background-image: url("images/Dream Scene Intro Mobile.png"); background-position: center center; background-size: contain; }
    .intro-content { min-height: 100svh; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
    .ds-btn { padding: 13px 28px; font-size: 18px; letter-spacing: .18em; }
}

@media (max-width: 575px) {
    .category-card { min-height: 120px; font-size: 19px; letter-spacing: .08em; }
    .ds-category-intro { padding: 28px 18px; }
    .ds-category-intro h2 { font-size: 23px; letter-spacing: .04em; }
    .ds-category-card { min-height: 220px; }
    .ds-footer-logo { margin: 0 auto; }
}