/* =========================================================
   ANTIQUE HOME — SIDE MENU
   Self-contained. Loaded after footer.css; nothing before
   it in the cascade is touched from this file.
   ========================================================= */

.sidemenu{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
}

/* ---------- scrim ---------- */

.sidemenu__scrim{
  position:absolute;
  inset:0;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  background: rgba(10,7,4,.72);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity:0;
  transition: opacity .5s var(--ease);
}

/* ---------- panel ---------- */

.sidemenu__panel{
  position:absolute;
  top:0; left:0; bottom:0;
  width: min(87vw, 352px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  /* deep ink, warmed faintly top-to-bottom — a jewelry-box interior,
     not a flat panel */
  background:
    radial-gradient(120% 60% at 50% -6%, rgba(201,180,138,.10), rgba(201,180,138,0) 60%),
    linear-gradient(175deg, #221A12 0%, #18120C 46%, #120D08 100%);
  box-shadow:
    30px 0 70px rgba(0,0,0,.5),
    inset -1px 0 0 rgba(201,180,138,.22);
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
  padding: 24px 22px 32px;
  display:flex;
  flex-direction:column;

  scrollbar-width: thin;
  scrollbar-color: rgba(201,180,138,.4) transparent;
}
.sidemenu__panel::-webkit-scrollbar{ width:5px; }
.sidemenu__panel::-webkit-scrollbar-thumb{
  background: rgba(201,180,138,.38);
  border-radius:999px;
}

/* a hairline of gold foil tracing the panel's outer edge */
.sidemenu__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(201,180,138,.14);
}

.sidemenu.is-open .sidemenu__scrim{ opacity:1; }
.sidemenu.is-open{ pointer-events:auto; }
.sidemenu.is-open .sidemenu__panel{ transform:none; }

/* ---------- header: close + logo ---------- */

.sm__head{
  position:relative;
  display:flex;
  justify-content:center;
  padding-top:6px;
}

/* a soft gold bloom sitting behind the mark, purely decorative */
.sm__head::before{
  content:"";
  position:absolute;
  left:50%; top:-18px;
  width:220px; height:150px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(201,180,138,.22), rgba(201,180,138,0) 72%);
  pointer-events:none;
  z-index:-1;
}

.sm__close{
  position:absolute;
  top:-6px; left:-6px;
  appearance:none;
  border:0;
  outline:none;
  cursor:pointer;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(201,180,138,.1);
  color: var(--champagne);
  line-height:0;
  transition: transform .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__close:focus-visible{
  outline: 1px solid var(--gold-deep);
  outline-offset: 2px;
}
.sm__close svg{
  width:16px; height:16px;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round;
}
@media (hover:hover){
  .sm__close:hover{
    color: var(--gold);
    background: rgba(201,180,138,.2);
    transform: rotate(90deg) scale(1.06);
  }
}
.sm__close:active{ transform: scale(.88); }

/* logo — the artwork is a 531×423 canvas whose ink occupies 87–466 × 104–315,
   the same crop numbers used for the footer mark, so both read identically.
   Recolored to champagne gold so it reads on the dark panel. */
.sm__brand{
  display:block;
  width: 178px;
  aspect-ratio: 379 / 211;
  overflow:hidden;
  position:relative;
  margin: 2px auto 0;
  transition: transform .5s var(--ease);
}
.sm__brand img{
  position:absolute;
  width:140.11%;
  max-width:none;
  height:auto;
  left:-22.96%;
  top:-49.29%;
  filter:
    brightness(0) saturate(100%) invert(84%) sepia(22%)
    saturate(520%) hue-rotate(358deg) brightness(94%) contrast(90%)
    drop-shadow(0 1px 6px rgba(0,0,0,.4));
}
@media (hover:hover){
  .sm__brand:hover{ transform: scale(1.035); }
}

.sm__gem{
  display:block;
  width:6px; height:6px;
  margin: 6px auto 18px;
  border:1px solid rgba(201,180,138,.75);
  background: rgba(201,180,138,.2);
  transform: rotate(45deg);
}

/* ---------- nav ---------- */

.sm__nav{
  list-style:none;
  margin:0 0 8px;
  padding:0;
}

.sm__item + .sm__item{
  border-top: 1px solid rgba(201,180,138,.12);
}

.sm__item a,
.sm__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding: 13px 10px 13px 12px;
  border-left:3px solid transparent;
  border-radius: 3px;
  font-family: var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--champagne);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);

  /* staggered entrance, played once when the panel opens */
  opacity:0;
  transform: translateX(-14px);
}
.sidemenu.is-open .sm__item a,
.sidemenu.is-open .sm__row{
  animation: smIn .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 120ms);
}
@keyframes smIn{ to{ opacity:1; transform:none; } }

.sm__item--active a{
  background: linear-gradient(100deg, rgba(201,180,138,.2), rgba(201,180,138,.06));
  border-left-color: var(--gold);
  color: var(--gold);
}

/* every icon sits in its own soft chip — a small touch of luxury over a
   bare glyph */
.sm__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  background: rgba(201,180,138,.1);
  color: rgba(227,213,188,.85);
  transition: transform .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.sm__ico svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor;
  stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
}
.sm__item--active .sm__ico{
  color: var(--gold);
  background: rgba(201,180,138,.24);
}

.sm__label{ flex:1 1 auto; line-height:1.35; }

.sm__chev{
  flex:none;
  width:8px; height:13px;
  fill:none; stroke: rgba(227,213,188,.4);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .4s var(--ease), stroke .4s var(--ease);
}

@media (hover:hover){
  .sm__item:not(.sm__item--active) a:hover,
  .sm__row:hover{
    background: rgba(201,180,138,.1);
    color: var(--gold);
  }
  .sm__item a:hover .sm__ico,
  .sm__row:hover .sm__ico{
    color: var(--gold);
    background: rgba(201,180,138,.24);
    transform: scale(1.1);
  }
  .sm__item a:hover .sm__chev{ stroke: var(--gold); transform: translateX(3px); }
}
.sm__item a:active{ transform: scale(.985); }

/* ---------- expandable sub-category (Accessories) ---------- */

.sm__item--expand{
  display:block;
}

.sm__row{
  padding-right:8px;
}

.sm__row .sm__link{
  display:flex;
  align-items:center;
  gap:13px;
  flex:1 1 auto;
  min-width:0;
  color:inherit;
}

.sm__plus{
  appearance:none;
  border:0;
  outline:none;
  cursor:pointer;
  flex:none;
  width:26px; height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(201,180,138,.12);
  color: rgba(227,213,188,.85);
  transition: transform .45s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__plus svg{
  width:11px; height:11px;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round;
  transition: transform .45s var(--ease);
}
.sm__plus:focus-visible{ outline:1px solid var(--gold); outline-offset:2px; }

@media (hover:hover){
  .sm__plus:hover{ background: rgba(201,180,138,.26); color: var(--gold); }
}
.sm__plus:active{ transform: scale(.88); }

/* the plus becomes a cross once open — one glyph, just rotated */
.sm__item--expand.is-open .sm__plus{ background: rgba(201,180,138,.26); color: var(--gold); }
.sm__item--expand.is-open .sm__plus svg{ transform: rotate(45deg); }

/* height driven from script.js (measured via scrollHeight) rather than a
   pure-CSS grid-fr trick — simpler to reason about and unaffected by
   whatever else happens to be animating elsewhere on the page */
.sm__sub-wrap{
  max-height:0;
  overflow:hidden;
  transition: max-height .5s var(--ease);
}

.sm__sub{
  list-style:none;
  margin:0;
  padding:0;
}

.sm__sub li + li{ border-top:1px solid rgba(201,180,138,.1); }

.sm__sub a{
  display:flex;
  align-items:center;
  gap:11px;
  margin-left:14px;
  padding: 10.5px 10px 10.5px 24px;
  border-left:1px solid rgba(201,180,138,.3);
  font-family: var(--sans);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color: rgba(227,213,188,.72);
  transition: color .35s var(--ease), padding-left .35s var(--ease), border-color .35s var(--ease);
}
.sm__sub a::before{
  content:"";
  flex:none;
  width:4px; height:4px;
  border-radius:50%;
  background: currentColor;
  opacity:.55;
}
@media (hover:hover){
  .sm__sub a:hover{
    color: var(--gold);
    padding-left:29px;
    border-color: var(--gold);
  }
}
.sm__sub a:active{ opacity:.7; }

/* ---------- dividers: hairline · diamond · hairline ---------- */

.sm__rule{
  position:relative;
  display:flex;
  align-items:center;
  height:1px;
  margin: 18px 2px 18px;
  background: linear-gradient(to right, rgba(201,180,138,0), rgba(201,180,138,.4) 50%, rgba(201,180,138,0));
}
.sm__rule::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  background: #18120C;
  border:1px solid rgba(201,180,138,.6);
  transform: rotate(45deg);
}

/* ---------- language / currency ---------- */

.sm__toggle{
  display:flex;
  align-items:center;
  gap:11px;
  padding: 9px 4px;
}
.sm__toggle + .sm__toggle{ margin-top:2px; }

.sm__toggle-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background: rgba(201,180,138,.1);
  color: rgba(227,213,188,.85);
}
.sm__toggle-ico svg{
  width:14px; height:14px;
  fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}

.sm__toggle-label{
  flex:1 1 auto;
  font-family: var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(227,213,188,.72);
}

.sm__switch{
  flex:none;
  position:relative;
  display:flex;
  padding:3px;
  gap:3px;
  background: rgba(201,180,138,.12);
  border-radius:999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.sm__opt{
  appearance:none;
  border:0;
  cursor:pointer;
  padding: 6.5px 13px;
  border-radius:999px;
  background:transparent;
  font-family: var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  color: rgba(227,213,188,.72);
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__opt.is-active{
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-deep, #A98A5C) 100%);
  color: #1C1611;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}
@media (hover:hover){
  .sm__opt:not(.is-active):hover{ color: var(--gold); }
}
.sm__opt:active{ transform: scale(.93); }

/* ---------- social ---------- */

.sm__social{
  list-style:none;
  margin: 4px 0 0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.sm__social a{
  display:grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  transition: transform .4s var(--ease), filter .4s var(--ease), background-color .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sm__social svg{ width:100%; height:100%; }
@media (hover:hover){
  .sm__social a:hover{
    transform: translateY(-3px) scale(1.16);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
    background: rgba(201,180,138,.12);
  }
}
.sm__social a:active{ transform: scale(.9); }

/* item stagger index */
.sm__item:nth-child(1){ --i:1; }
.sm__item:nth-child(2){ --i:2; }
.sm__item:nth-child(3){ --i:3; }
.sm__item:nth-child(4){ --i:4; }
.sm__item:nth-child(5){ --i:5; }
.sm__item:nth-child(6){ --i:6; }
.sm__item:nth-child(7){ --i:7; }
.sm__item:nth-child(8){ --i:8; }
.sm__item:nth-child(9){ --i:9; }
.sm__item:nth-child(10){ --i:10; }


/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px){
  .sidemenu__panel{ width: min(60vw, 396px); padding: 32px 32px 38px; }
  .sm__brand{ width:200px; }
  .sm__item a,
  .sm__row{ font-size:12.5px; padding: 13.5px 10px 13.5px 16px; }
  .sm__sub a{ font-size:11px; }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .sidemenu__scrim,
  .sidemenu__panel,
  .sm__item a,
  .sm__row,
  .sm__sub-wrap,
  .sm__plus,
  .sm__plus svg{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .sm__item a,
  .sm__row{ opacity:1 !important; transform:none !important; }
}