:root{
  --bg:#2a211b;
  --surface:#3a2e26;
  --surface-2:#47372d;
  --card:#4b3a30;
  --bevel:#6e5142;
  --bevel-2:#2c211b;
  --text:#ffe6c9;
  --muted:#d8bfa7;
  --lime:#58d06f;
  --lime-dark:#2c7f3c;
  --accent:#ffd27a;
  --warning:#ff934d;
  --sbw: 240px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--sbw);
  background:linear-gradient(#3b2f27, #31261f);
  border-right:2px solid var(--bevel-2);
  padding:12px 8px; overflow:auto; z-index:170;
}
.sidebar__nav{display:flex; flex-direction:column; gap:4px}
.nav__item{
  display:flex; gap:12px; align-items:center; padding:12px 12px;
  color:var(--text); text-decoration:none; border-radius:10px;
  background:linear-gradient(#3b2f27, #342920);
  border:1px solid #2b211b; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.nav__item .icon{width:22px; text-align:center}
.nav__item:hover{filter:brightness(1.06)}
.nav__item.is-active{outline:2px solid #7a5a47}

.header{
  position:fixed; left:var(--sbw); right:0; top:0; z-index:160;
  background:#3c2f27e0; backdrop-filter:blur(6px); border-bottom:2px solid #2b211b;
}
.header__inner{height:68px; display:flex; align-items:center; gap:14px; padding:0 16px; max-width:1400px; margin:0 auto}
.header__brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text)}
.logo-img{height:24px}
.header__menu{display:flex; gap:14px}
.header__menu a{display:flex; gap:8px; align-items:center; color:var(--text); text-decoration:none; opacity:.95}
.header__menu a:hover{opacity:1}

.header__search{
  display:flex; align-items:center; gap:8px; margin-left:12px; flex:1;
  background:linear-gradient(#3a2e26, #322720); border:1px solid #2b211b; border-radius:12px; padding:8px 12px;
}
.header__search input{background:transparent; border:0; outline:0; color:var(--text); width:100%}
.header__actions{display:flex; gap:8px; margin-left:12px}

a.btn, .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none}
.btn{
  color:#2a201a; font-weight:800; letter-spacing:.02em;
  padding:10px 16px; border-radius:12px; cursor:pointer;
  border:2px solid #2b211b; background:linear-gradient(#f5d5a6, #e0b382);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 6px 0 #2b211b, 0 10px 18px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 #2b211b}
.btn--caveman{background:linear-gradient(#ffd9a6, #f1b46f)}
.btn--stone{background:linear-gradient(#d0b39c, #b9967f)}
.btn--lime{background:linear-gradient(#76e48a, #58d06f); border-color:#1f4d28; color:#132014; box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 6px 0 #1f4d28, 0 10px 18px rgba(0,0,0,.35)}
.btn--ghost{background:transparent; color:var(--text); border-color:#5a463a}

.main{padding-top:68px; padding-left:var(--sbw)}

.hero-slider{position:relative; padding:16px 24px}
.hero-slider .slides{position:relative; overflow:hidden; border-radius:16px; border:2px solid #2b211b; background:#221a15}
.hero-slider .slide{
  min-height:320px; display:grid; align-items:center;
  background:linear-gradient(90deg, #2b201aee 0%, #2b201aa8 40%, transparent), var(--bg) center/cover no-repeat;
  background-image:linear-gradient(90deg, #2b201aee 0%, #2b201aa8 40%, transparent), var(--bg);
  padding:24px; flex:0 0 100%;
}
.slide__content .eyebrow{color:var(--accent); letter-spacing:.12em; text-transform:uppercase; margin:0 0 6px}
.slide__content h1{margin:.1em 0 .4em; font-size:34px; line-height:1.1; text-shadow:0 2px 0 #2b211b}

.hero-slider .slides{display:flex; transform:translateX(0); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  background:linear-gradient(#5b4538, #3f3027); border:2px solid #2b211b; color:#ffe6c9;
  width:40px; height:40px; border-radius:10px; cursor:pointer;
  box-shadow:0 6px 0 #2b211b; display:grid; place-items:center;
}
.hero-nav.prev{left:28px} .hero-nav.next{right:28px}
.hero-slider .dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; justify-content:center}
.hero-slider .dots button{
  width:10px; height:10px; border-radius:50%; border:2px solid #2b211b; background:#6e5142; cursor:pointer; opacity:.7
}
.hero-slider .dots button[aria-current="true"]{background:var(--accent); opacity:1}

.ribbon{display:flex; gap:12px; padding:10px 24px 0 24px; overflow:auto; scrollbar-width:none}
.ribbon::-webkit-scrollbar{display:none}
.ribbon__item{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px;
  color:var(--text); text-decoration:none; white-space:nowrap;
  background:linear-gradient(#3a2e26, #322720); border:1px solid #2b211b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.ribbon__item .icon{width:22px; text-align:center}

.row{max-width:1400px; margin:14px auto; padding:0 24px}
.row__head{display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px}
.row__head h2{margin:0; font-size:22px; text-transform:uppercase; letter-spacing:.05em}
.view-all{color:var(--accent); text-decoration:none; padding:6px 10px; border-radius:8px; background:#4a392f; border:1px solid #2b211b}
.scroll-row{
  display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; padding:6px 2px 10px;
  scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,1) 24px, rgba(0,0,0,1) calc(100% - 24px), transparent);
}
.scroll-row::-webkit-scrollbar{height:0}

.card.stone{
  background:linear-gradient(#4b3a30, #3e3027);
  border:2px solid #2b211b; border-radius:14px; width:200px; min-width:200px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 0 #2b211b;
  overflow:hidden; cursor:pointer; transform:translateZ(0);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.card__art{height:220px; background:#2b211b}
.card__art img{width:100%; height:100%; object-fit:cover; display:block}
.card__title{font-size:15px; font-weight:700; padding:10px 10px 12px; margin:0}
.card.stone:hover{transform:translateY(-4px) rotateZ(-.25deg) scale(1.02)}
.card.stone.is-in{animation:pop-in .4s ease both}
@keyframes pop-in{from{opacity:0; transform:translateY(14px) scale(.98)}}

.collapsible details{background:var(--surface); border:2px solid #2b211b; border-radius:12px; padding:12px 16px}
.collapsible summary{cursor:pointer; font-weight:800}

.footer{margin-left:var(--sbw); border-top:2px solid #2b211b; background:#221a15}
.footer__top{max-width:1400px; margin:0 auto; padding:28px 24px}
.footer__brand{color:var(--text); text-decoration:none; font-weight:800}
.footer__cols{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); margin-top:16px}
.footer .col a{display:block; color:var(--muted); text-decoration:none; padding:4px 0}
.footer .col a:hover{color:var(--text)}
.footer__payments{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:18px}
.footer__payments img{height:28px; opacity:.95}
.footer__bottom{border-top:2px solid #2b211b; padding:16px 24px; color:var(--muted); max-width:1400px; margin:0 auto}

.header__hamburger{display:none; width:40px; height:40px; border-radius:10px; border:2px solid #2b211b; background:#4a392f; color:var(--text); align-items:center; justify-content:center; cursor:pointer; position:relative}
.header__hamburger span,.header__hamburger::before,.header__hamburger::after{content:""; position:absolute; left:50%; width:18px; height:2px; border-radius:2px; background:currentColor; transform:translateX(-50%); transition:transform .25s ease, opacity .2s ease}
.header__hamburger span{top:50%; transform:translate(-50%,-50%)}
.header__hamburger::before{top:calc(50% - 6px)}
.header__hamburger::after{top:calc(50% + 6px)}
body.nav-open .header__hamburger span{opacity:0}
body.nav-open .header__hamburger::before{transform:translateX(-50%) rotate(45deg)}
body.nav-open .header__hamburger::after{transform:translateX(-50%) rotate(-45deg)}
.mobile-scrim{position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); display:none; z-index:150}

@media (max-width: 900px){
  .header{left:0}
  .main{padding-left:0}
  .footer{margin-left:0}
  .header__hamburger{display:inline-flex}
  .header__menu{display:none}
  .header__actions .btn--ghost{display:none}
  .sidebar{width:min(86vw, 320px); transform:translateX(-100%); transition:transform .28s ease; padding-top:76px}
  .sidebar__toggle{display:none}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .mobile-scrim{display:block}
  body.nav-open{overflow:hidden}
  .card.stone{width:180px; min-width:180px}
}

img.emoji{height:1.1em; width:1.1em; vertical-align:-0.15em}

.hero-slider{
  position:relative;
  max-width:1400px;
  margin:0 auto;
  padding:16px 24px;
}

.hero-slider .slides{
  position:relative;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
  border-radius:16px;
  border:2px solid #2b211b;
  background:#221a15;
  height:clamp(260px, 34vw, 460px);
}
.hero-slider .slides::-webkit-scrollbar{ display:none; }

.hero-slider .slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:start;
  height:100%;
  display:flex;
  align-items:center;
  background:#000;
}

.hero-slider .slide::before{
  content:"";
  position:absolute;
  inset:0 40% 0 0;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(90deg, rgba(43,32,26,.95) 0%, rgba(43,32,26,.78) 45%, rgba(43,32,26,0) 100%);
}

.slide__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  pointer-events:none;
  z-index:0;
}

.slide__content{
  position:relative;
  z-index:2;
  padding:24px;
  max-width:620px;
}
.slide__content .eyebrow{
  color:#ffd27a;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.slide__content h1{
  margin:.1em 0 .6em;
  font-size:clamp(22px, 3.2vw, 36px);
  line-height:1.12;
  text-shadow:0 2px 0 rgba(0,0,0,.55);
}

.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:42px; height:42px;
  border-radius:10px;
  cursor:pointer; user-select:none;
  background:linear-gradient(#5b4538, #3f3027);
  color:#ffe6c9;
  border:2px solid #2b211b;
  box-shadow:0 6px 0 #2b211b;
  display:grid; place-items:center;
}
.hero-nav.prev{left:28px}
.hero-nav.next{right:28px}
.hero-nav:active{transform:translateY(calc(-50% + 1px))}

.hero-slider .dots{
  position:absolute; left:0; right:0; bottom:12px;
  z-index:4;
  display:flex; gap:8px; justify-content:center;
  pointer-events:auto;
}
.hero-slider .dots button{
  width:10px; height:10px; border-radius:50%;
  border:2px solid #2b211b;
  background:#6e5142; cursor:pointer; opacity:.85;
}
.hero-slider .dots button[aria-current="true"]{ background:#ffd27a; opacity:1; }


.popular_sec .card__art {
height: 415px;
}

@media (max-width: 900px){
  .hero-slider{padding:12px 16px}
  .hero-nav.prev{left:16px}
  .hero-nav.next{right:16px}
  .slide__content{padding:18px}
}

.hero-slider{ position:relative; perspective:1000px; }
.hero-ambient{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.hero-ambient .speck{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(#ffd27a, rgba(255,210,122,0) 60%);
  opacity:.35; filter: blur(.4px);
  animation: floatY var(--dur,12s) linear infinite;
  transform: translate3d(var(--x,0px), var(--y,0px), 0) scale(var(--s,1));
}
@keyframes floatY{
  0%   { transform: translate3d(var(--x), calc(var(--y) + 40px), 0) scale(var(--s)); opacity:0; }
  10%  { opacity:.35; }
  90%  { opacity:.35; }
  100% { transform: translate3d(var(--x), calc(var(--y) - 140px), 0) scale(var(--s)); opacity:0; }
}

.hero-slider .slide{ will-change: transform; }
.slide__content{ will-change: transform; transition: transform .18s ease; }
.slide__video{ will-change: transform; transition: transform .25s ease; }

.hero-slider .btn--lime{
  box-shadow: 0 0 0 0 rgba(173,255,47,.35), 0 8px 24px rgba(173,255,47,.22);
  animation: btnGlow 2.6s ease-in-out infinite;
}
@keyframes btnGlow{
  0%,100% { box-shadow: 0 0 0 0 rgba(173,255,47,.28), 0 8px 22px rgba(173,255,47,.18); transform: translateZ(0); }
  50%     { box-shadow: 0 0 0 8px rgba(173,255,47,.06), 0 14px 34px rgba(173,255,47,.28); }
}

.ripple{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit;
}
.ripple__wave{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background: currentColor; opacity:.18; transform: translate(-50%,-50%) scale(0);
  animation: rippleOut .7s ease-out forwards;
}
@keyframes rippleOut{
  to { opacity:0; transform: translate(-50%,-50%) scale(16); }
}

.hero-slider .dots button[aria-current="true"]{
  transform: scale(1.1);
  animation: breathe 1.5s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1.05) } 50%{ transform:scale(1.2) } }

img.twemoji, svg.twemoji{
  width: 1.05em; height: 1.05em; vertical-align: -0.15em;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

@media (prefers-reduced-motion: reduce){
  .hero-ambient .speck, .hero-slider .btn--lime, .hero-slider .dots button[aria-current="true"]{
    animation: none !important;
  }
  .slide__content, .slide__video{ transition: none !important; }
}

img.twemoji {
    filter: sepia(1);
}

.main_404 {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    margin-top: 80px;
    background: linear-gradient(135deg, #3a2e26 0%, #3a2e26 100%);
    color: #3a2e26(0, 0, 0);
    text-align: center;
}

.breadcrumbs_404.container_404 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.breadcrumbs_404 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #000000;
    padding: 20px 0;
    border-bottom: 2px solid #333333;
}

.breadcrumbs_404 a {
    text-decoration: none;
    color: #cccccc;
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
}

.breadcrumbs_404 a:hover {
    color: #ffffff;
    background-color: #333333;
    transform: translateY(-1px);
}

.breadcrumbs_404 a:not(:last-child)::after {
    content: "›";
    margin-left: 0.75rem;
    color: #666666;
    font-weight: bold;
}

.breadcrumbs-link_404 {
    color: #999999 !important;
}

.link-ma-b_404 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.container_404.page_content_404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.title_404 {
    font-size: 8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.description_404 {
    font-size: 1.5rem;
    color: #cccccc;
    margin: 0 0 2rem;
    line-height: 1.4;
}

.btn_404 {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn--primary_404 {
    background: linear-gradient(135deg, #00ff88, #00cc66);
    color: #000000;
    padding: 12px 32px;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.3);
    margin-top: 1rem;
}

.btn--primary_404:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 255, 136, 0.4);
    background: linear-gradient(135deg, #00cc66, #00aa55);
    color: #000000;
}

@keyframes fadeInUp_404 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse_404 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.title_404 {
    animation: fadeInUp_404 0.6s ease-out, pulse_404 2s ease-in-out 0.6s infinite;
}

.description_404 {
    animation: fadeInUp_404 0.6s ease-out 0.1s both;
}

.btn--primary_404 {
    animation: fadeInUp_404 0.6s ease-out 0.2s both;
}

.title_404::before {
    content: "🪨";
    display: block;
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounce_404 2s ease-in-out infinite;
}

@keyframes bounce_404 {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .main_404 {
        min-height: calc(100vh - 150px);
        padding: 1rem 0.5rem;
        margin-top: 60px;
    }

    .breadcrumbs_404.container_404 {
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }

    .breadcrumbs_404 {
        font-size: 0.85rem;
        padding: 15px 0;
        gap: 0.5rem;
    }

    .breadcrumbs_404 a {
        padding: 6px 8px;
    }

    .container_404.page_content_404 {
        padding: 1.5rem 0.5rem;
    }

    .title_404 {
        font-size: 5rem;
        margin-bottom: 0.5rem;
    }

    .description_404 {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .btn--primary_404 {
        padding: 10px 24px;
        font-size: 1rem;
    }

    .title_404::before {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .main_404 {
        margin-top: 50px;
        padding: 0.5rem;
    }

    .breadcrumbs_404 {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .container_404.page_content_404 {
        padding: 1rem 0.25rem;
    }

    .title_404 {
        font-size: 4rem;
    }

    .description_404 {
        font-size: 1.1rem;
    }

    .title_404::before {
        font-size: 2.5rem;
    }
}

@media (prefers-color-scheme: light) {
    .main_404 {
        background: linear-gradient(135deg, #3a2e26 0%, #3a2e26 100%);
        color: #333;
    }
    
    .breadcrumbs_404 {
        color: #000000;
        border-bottom-color: #000000;
    }
    
    .breadcrumbs_404 a {
        color: #666;
    }
    
    .breadcrumbs_404 a:hover {
        color: #333;
        background-color: #786b6b;
    }
    
    .link-ma-b_404 {
        color: #000000 !important;
    }
    
    .title_404 {
        color: #000000;
    }
    
    .description_404 {
        color: #000000;
    }
}

@media print {
    .main_404 {
        background: white !important;
        color: black !important;
        min-height: auto;
        margin-top: 0;
    }
    
    .breadcrumbs_404 {
        display: none;
    }
    
    .btn--primary_404 {
        display: none;
    }
}