*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#080706;color:#e4d4b6}
body{font-family:Georgia,serif}
body[data-location$="— Shop"] .ambience-bar{display:none!important}

.shop-room{
  position:relative;
  isolation:isolate;
  width:100%;
  height:calc(100vh - var(--shell-height));
  height:calc(100svh - var(--shell-height));
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:12px 18px 24px;
  background:#080706;
}

.shop-background-plate{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,190,105,.025),rgba(0,0,0,.04)),
    url("../assets/images/cursed-goods-background.png");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  filter:brightness(1.38) contrast(.96) saturate(1.08);
}

.shop-atmosphere,.castle-shop-shell,.shop-fixtures,.oak-beam,.stone-wall,
.apothecary-shelf,.retail-case,.shop-counter,.shop-lamp{display:none!important}

.shop-intro,.brass-directory,.shop-toolbar,.shop-shelves,.shop-service,.shop-back{
  position:relative;
  z-index:5;
}

.shop-intro{
  width:min(850px,62vw);
  margin:0 auto .55rem;
  padding:.1rem .7rem .25rem;
  text-align:center;
  background:rgba(5,3,3,.10);
}
.shop-kicker{display:none}
.shop-intro h1{
  margin:.1rem 0 .25rem;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;

  font:400 clamp(2.15rem,5vw,4.9rem)/.95 "Rye",Georgia,serif;
  letter-spacing:.028em;

  /* Metallic word-art treatment on the LETTERS THEMSELVES. */
  color:#b89457;
  background:
    linear-gradient(
      180deg,
      #f2dfaa 0%,
      #c8a766 18%,
      #7c5e36 42%,
      #d6b473 58%,
      #8b693d 76%,
      #e2c183 100%
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;

  -webkit-text-stroke:.7px rgba(48,31,18,.92);

  /* Raised, cast-metal depth. */
  text-shadow:
    0 1px 0 #f5dfad,
    0 2px 0 #b08a50,
    0 3px 0 #8a683d,
    0 4px 0 #684b2f,
    0 5px 0 #493321,
    0 6px 1px #2c1e15,
    0 9px 12px rgba(0,0,0,.82),
    0 0 10px rgba(176,112,205,.18);
}
.shop-motto{
  margin:.22rem 0 0;
  color:#d7b579;
  font-size:clamp(.92rem,1.18vw,1.12rem);
  font-style:italic;
  text-shadow:0 2px 3px #000;
}

.shop-shelves{width:min(760px,55vw);margin:.45rem auto .6rem}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
}
.shop-empty{
  width:100%;
  padding:1rem 1.5rem;
  text-align:center;
  color:#24170f;
  background:rgba(207,190,154,.93);
  border:2px solid rgba(72,44,25,.92);
  box-shadow:0 7px 22px rgba(0,0,0,.55),inset 0 0 0 2px rgba(234,216,178,.24);
}
.shop-empty-mark{display:none}
.shop-empty h2{margin:0 0 .4rem;color:#421f2b;font:700 clamp(1.15rem,1.6vw,1.5rem)/1.15 Georgia,serif}
.shop-empty p{max-width:660px;margin:.25rem auto;color:#2a1c14;font-size:clamp(.82rem,.92vw,.94rem);line-height:1.38}
.shop-empty-small{margin-top:.45rem!important;color:#4e2857!important;text-transform:uppercase;letter-spacing:.08em}

.brass-directory{
  width:max-content;
  max-width:72vw;
  margin:0 auto -.35rem;
  padding:.42rem .95rem;
  text-align:center;
  color:#d3b477;
  background:linear-gradient(rgba(35,20,11,.97),rgba(12,8,6,.97));
  border:1px solid rgba(202,160,88,.55);
  box-shadow:0 5px 14px rgba(0,0,0,.52);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
}
.shop-toolbar{
  width:min(1000px,70vw);
  margin:0 auto;
  padding:.72rem .82rem;
  background:rgba(9,6,6,.91);
  border:1px solid rgba(182,137,74,.5);
  box-shadow:0 9px 26px rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}
.shop-search-label{display:block;margin-bottom:.28rem;color:#d4b67d;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.shop-search{width:100%;min-height:38px;padding:.55rem .72rem;color:#eadcc5;background:rgba(6,5,5,.92);border:1px solid rgba(194,150,84,.36);font:inherit}
.shop-categories{display:flex;flex-wrap:wrap;gap:.36rem;margin-top:.5rem}
.shop-categories button,.service-actions button,.product-open{
  min-height:34px;
  padding:.46rem .62rem;
  color:#d7be91;
  background:linear-gradient(#2a180f,#120b08);
  border:1px solid rgba(184,140,78,.4);
  font:700 clamp(.61rem,.7vw,.69rem)/1.1 Georgia,serif;
  cursor:pointer;
}
.shop-categories button[aria-pressed="true"]{color:#f0ddf6;background:linear-gradient(#57305f,#241429);border-color:rgba(203,148,228,.72);box-shadow:0 0 11px rgba(158,87,187,.24)}
.shop-categories button:disabled,.shop-search:disabled{opacity:.48;cursor:not-allowed}

.shop-search:focus-visible,.shop-categories button:focus-visible,.service-actions button:focus-visible,
.product-open:focus-visible,.product-buy:focus-visible,.shop-back:focus-visible,.dialog-close:focus-visible{
  outline:2px solid #d6a1eb;outline-offset:3px
}

.product-card{
  overflow:hidden;
  min-width:0;
  color:#1c130d;
  background:linear-gradient(145deg,rgba(231,219,190,.98),rgba(194,170,128,.98));
  border:2px solid rgba(183,123,211,.94);
  box-shadow:0 0 0 2px rgba(33,17,38,.94),0 11px 30px rgba(0,0,0,.6);
}
.product-card img,.product-image-placeholder{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#d1be99}
.product-image-placeholder{display:grid;place-items:center;color:#66543d;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.product-card-body{padding:.82rem}
.product-card h2{margin:.1rem 0;color:#2d1834;font-size:1.04rem}
.product-short{color:#493a2d;font-size:.82rem;line-height:1.36}
.product-price{color:#351d3d;font-weight:700}
.product-status{display:inline-block;margin:0 0 .35rem;padding:.22rem .4rem;color:#5a2f65;border:1px solid rgba(91,47,101,.3);font-size:.63rem;text-transform:uppercase;letter-spacing:.07em}
.product-open{width:100%}

.shop-service{
  width:min(1000px,70vw);
  margin:.6rem auto 0;
  padding:.9rem 1rem;
  display:grid;
  grid-template-columns:minmax(245px,.9fr) minmax(440px,1.5fr);
  gap:.85rem;
  color:#d9c6a6;
  background:rgba(9,6,6,.92);
  border:1px solid rgba(183,139,77,.5);
  box-shadow:0 10px 28px rgba(0,0,0,.48);
  backdrop-filter:blur(2px);
}
.shop-section-kicker{margin:0 0 .14rem;color:#b68a53;font-size:.6rem;font-weight:700;letter-spacing:.14em}
.shop-service h2{margin:.08rem 0 .25rem;color:#e1cca7;font-size:clamp(1.08rem,1.4vw,1.35rem)}
.shop-service p{margin:.15rem 0;color:#b3a087;font-size:.79rem;line-height:1.38}
.service-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.38rem;align-content:start}
.service-actions button{min-height:36px;white-space:normal;font-size:.61rem}
.shop-counter-note{display:none}

.shop-back{
  display:table;
  width:max-content;
  margin:.6rem auto 0;
  padding:.52rem .82rem;
  color:#d4bc90;
  background:rgba(10,7,6,.93);
  border:1px solid rgba(184,140,78,.42);
  text-decoration:none;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.shop-dialog{
  position:fixed;
  z-index:10020;
  width:min(760px,calc(100% - 28px));
  max-height:82vh;
  overflow:auto;
  padding:2rem;
  color:#d8c6aa;
  background:#0e0a09;
  border:1px solid rgba(208,167,101,.46);
  box-shadow:0 26px 90px #000;
}
.shop-dialog::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(3px)}
.shop-dialog h2{margin-top:0;padding-right:2rem;color:#e4cfad;font:400 clamp(1.4rem,3vw,2.15rem)/1.15 "Rye",Georgia,serif}
.shop-dialog p{color:#b7a68e;line-height:1.55}
.dialog-close{position:absolute;right:.65rem;top:.55rem;width:2.3rem;height:2.3rem;color:#e2c7ed;background:#1c101e;border:1px solid rgba(199,149,221,.42);font-size:1.5rem;cursor:pointer}
.product-variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem}
.product-variant-group{padding:.65rem;border:1px solid rgba(190,151,91,.18)}
.product-variant-group h3{margin:0;color:#c89edb;font-size:.82rem}
.product-meta,.product-warning{padding:.55rem;border-left:2px solid rgba(177,109,204,.52)}
.product-buy{display:inline-block;margin-top:.75rem;padding:.72rem .95rem;color:#f1ddf7;background:#472650;border:1px solid rgba(204,158,223,.55);text-decoration:none;font:700 .77rem Georgia,serif}
.product-buy-disabled{opacity:.45}
.shop-no-results{text-align:center;color:#a49379;padding:1.5rem}

@media(max-width:1100px){
  .shop-intro{width:78vw}
  .shop-shelves{width:70vw}
  .shop-toolbar,.shop-service{width:82vw}
  .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop-service{grid-template-columns:1fr}
}
@media(max-width:760px){
  .shop-room{padding:10px 10px 20px}
  .shop-intro,.shop-shelves,.shop-toolbar,.shop-service{width:100%}
  .brass-directory{max-width:100%}
  .shop-intro h1{font-size:clamp(2rem,10vw,3rem)}
  .shop-categories button{flex:1 1 43%}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:430px){
  .shop-grid{grid-template-columns:1fr}
  .service-actions{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ============================================================
   EMPTY PRODUCT DISPLAY CASES
   Structural storefront furniture only — NOT fake products.
   These disappear automatically once real products exist.
   ============================================================ */
.shop-empty-cases{
  position:relative;
  z-index:5;
  width:min(1000px,70vw);
  margin:.62rem auto .72rem;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem;
}
.shop-empty-cases[hidden]{display:none!important}

.empty-case{
  position:relative;
  min-height:210px;
  border:2px solid rgba(183,123,211,.88);
  background:
    linear-gradient(145deg,rgba(20,13,18,.86),rgba(8,6,7,.91));
  box-shadow:
    0 0 0 2px rgba(33,17,38,.94),
    inset 0 0 28px rgba(140,75,161,.10),
    0 10px 28px rgba(0,0,0,.56);
}
.empty-case::before,
.empty-case::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border-color:rgba(207,164,103,.72);
  pointer-events:none;
}
.empty-case::before{
  left:7px;top:7px;
  border-left:1px solid;
  border-top:1px solid;
}
.empty-case::after{
  right:7px;bottom:7px;
  border-right:1px solid;
  border-bottom:1px solid;
}
.empty-case span{
  position:absolute;
  inset:12px;
  border:1px solid rgba(201,162,103,.16);
  background:
    radial-gradient(circle at 50% 42%,rgba(129,71,149,.08),transparent 44%),
    rgba(4,3,4,.38);
}

@media(max-width:1100px){
  .shop-empty-cases{
    width:82vw;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .shop-empty-cases .empty-case:nth-child(4){display:none}
}
@media(max-width:760px){
  .shop-empty-cases{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shop-empty-cases .empty-case:nth-child(4){display:block}
  .empty-case{min-height:180px}
}
@media(max-width:430px){
  .shop-empty-cases{grid-template-columns:1fr}
  .empty-case{min-height:170px}
}


/* ============================================================
   FULL CATALOG + PRODUCT DETAIL EXPERIENCE
   ============================================================ */
.shop-catalog-controls{
  position:relative;
  z-index:5;
  width:min(1000px,70vw);
  margin:.45rem auto .7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
}
.shop-catalog-controls[hidden]{display:none!important}
#shopCatalogToggle{
  min-height:36px;
  padding:.52rem .8rem;
  color:#e6d2ad;
  background:linear-gradient(#3a2015,#160d09);
  border:1px solid rgba(193,149,85,.5);
  font:700 .68rem/1 Georgia,serif;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
}
#shopCatalogToggle:hover,
#shopCatalogToggle:focus-visible{
  border-color:rgba(210,151,236,.7);
  box-shadow:0 0 12px rgba(154,86,185,.24);
}
.shop-catalog-count{
  margin:0;
  color:#bfa987;
  font-size:.7rem;
}

/* Entire real product card is clickable, not only the button. */
.product-card[role="button"]{cursor:pointer}
.product-card[role="button"]:focus-visible{
  outline:2px solid #d6a1eb;
  outline-offset:4px;
}

/* Larger, complete product popup. */
#productDialog{
  width:min(900px,calc(100% - 32px));
  max-height:88vh;
}
.product-dialog-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.55rem;
  margin:.7rem 0 1rem;
}
.product-dialog-gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid rgba(193,150,86,.28);
  background:#080706;
}
.product-dialog-price{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin:.55rem 0;
}
.product-dialog-price strong{
  color:#d3a8e4;
  font-size:1.4rem;
}
.product-compare-price{
  color:#8e806d;
  text-decoration:line-through;
  font-size:.9rem;
}
.product-detail-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem .7rem;
  margin:1rem 0;
}
.product-detail-row{
  padding:.58rem .65rem;
  background:rgba(31,20,16,.72);
  border:1px solid rgba(190,149,89,.18);
}
.product-detail-row dt{
  margin:0 0 .2rem;
  color:#c99dde;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.product-detail-row dd{
  margin:0;
  color:#d4c1a3;
  font-size:.82rem;
  line-height:1.35;
}
.product-dialog-note{
  margin:.65rem 0;
  padding:.65rem .75rem;
  border-left:2px solid rgba(179,111,205,.55);
  background:rgba(22,14,17,.7);
}
.product-dialog-note h3{
  margin:0 0 .25rem;
  color:#cfabdE;
  font-size:.82rem;
}
.product-dialog-note p{
  margin:0;
}
.product-dialog-warning{
  border-left-color:rgba(202,158,88,.68);
}
.product-order-box{
  margin-top:1rem;
  padding:1rem;
  text-align:center;
  border:1px solid rgba(195,149,218,.38);
  background:linear-gradient(rgba(62,31,69,.55),rgba(20,13,22,.75));
}
.product-order-box h3{
  margin:0 0 .55rem;
  color:#e1ccaa;
  font:400 1.05rem/1.2 "Rye",Georgia,serif;
}
.product-order-box .product-buy{
  min-width:180px;
  text-align:center;
}
.product-order-note{
  margin:.45rem 0 0!important;
  color:#9f8e78!important;
  font-size:.72rem!important;
}

@media(max-width:1100px){
  .shop-catalog-controls{width:82vw}
}
@media(max-width:760px){
  .shop-catalog-controls{width:100%;flex-direction:column;gap:.35rem}
  .product-detail-list{grid-template-columns:1fr}
}


/* ============================================================
   RECONCILIATION UX — SHOP READABILITY
   ============================================================ */
.shop-dialog{
  width:min(980px,94vw) !important;
  max-height:88vh !important;
  padding:clamp(1.5rem,3vw,2.7rem) !important;
  scrollbar-width:auto;
  scrollbar-color:#a861cf #100b12;
}
.shop-dialog::-webkit-scrollbar{width:12px}
.shop-dialog::-webkit-scrollbar-track{background:#100b12}
.shop-dialog::-webkit-scrollbar-thumb{
  border:2px solid #100b12;border-radius:8px;
  background:linear-gradient(#bd78e5,#75428f);
}
.shop-dialog h2{font-size:clamp(1.65rem,3.2vw,2.6rem) !important}
.shop-dialog h3{font-size:clamp(1rem,1.3vw,1.2rem)}
.shop-dialog p,.shop-dialog li{
  font-size:clamp(1rem,1.08vw,1.12rem);
  line-height:1.68;
  color:#e4d6c1;
}
.dialog-close{min-width:44px;min-height:44px}




/* ============================================================
   SHOP — "SHELVES ARE BEING STOCKED" VINTAGE BRASS BOX
   ============================================================ */
.shop-empty,
.empty-state,
.stocking-message,
.shop-status,
.shop-placeholder{
  display:inline-block;
  max-width:min(760px,86vw);
  margin:1rem auto;
  padding:1rem 1.35rem;

  color:#ead9b8 !important;
  background:
    linear-gradient(180deg,
      rgba(58,39,22,.94),
      rgba(28,18,12,.97));
  border:3px ridge #9d7747;
  border-radius:6px;

  box-shadow:
    inset 0 0 0 1px rgba(238,205,145,.18),
    inset 0 0 0 4px rgba(32,20,12,.42),
    inset 0 5px 10px rgba(255,228,164,.05),
    inset 0 -7px 12px rgba(0,0,0,.42),
    0 5px 12px rgba(0,0,0,.62),
    0 0 14px rgba(118,78,46,.24);

  text-shadow:0 2px 7px rgba(0,0,0,.85);
}


/* ============================================================
   SHOP — STOCKING MESSAGE READABILITY
   Simple, high-contrast, user-friendly information panel.
   ============================================================ */
.shop-empty{
  width:100%;
  max-width:760px;
  margin:.6rem auto;
  padding:1rem 1.4rem;

  text-align:center;
  background:rgba(235,224,199,.96) !important;
  border:2px solid rgba(103,76,48,.92) !important;
  border-radius:6px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,250,235,.72) !important;

  color:#241a12 !important;
  text-shadow:none !important;
}

.shop-empty h2{
  margin:0 0 .45rem !important;
  color:#3b2418 !important;
  font:700 clamp(1.18rem,1.65vw,1.55rem)/1.15 Georgia,serif !important;
  text-shadow:none !important;
}

.shop-empty p,
.shop-empty-small{
  color:#2d2118 !important;
  font-size:clamp(.86rem,.96vw,.98rem) !important;
  line-height:1.45 !important;
  text-shadow:none !important;
}

.shop-empty a{
  color:#5d2e73 !important;
  font-weight:700;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}



/* ============================================================
   SHOP — COMPACT FIXED BACK BUTTON
   Single authoritative rule: same location, content-sized footprint.
   ============================================================ */
.shop-back{
  position:fixed !important;
  left:clamp(18px,2vw,30px) !important;
  bottom:clamp(20px,2.8vh,32px) !important;
  z-index:80 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;

  margin:0 !important;
  padding:7px 10px !important;

  color:#f0d7a6 !important;
  background:linear-gradient(180deg,rgba(54,36,27,.97),rgba(18,12,14,.98)) !important;
  border:1px solid rgba(216,183,125,.72) !important;
  border-radius:4px !important;

  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;

  font-size:.62rem !important;
  line-height:1 !important;
  letter-spacing:.035em !important;

  cursor:pointer !important;

  box-shadow:
    inset 0 0 0 1px rgba(245,218,169,.07),
    0 4px 12px rgba(0,0,0,.52),
    0 0 9px rgba(166,79,209,.14) !important;
}

.shop-back:hover,
.shop-back:focus-visible{
  color:#fff0c9 !important;
  border-color:rgba(226,185,249,.94) !important;
  box-shadow:
    0 0 8px rgba(221,166,251,.52),
    0 0 16px rgba(156,65,202,.26),
    0 4px 12px rgba(0,0,0,.56) !important;
  outline:none !important;
  transform:translateY(-1px) !important;
}

@media(max-width:700px){
  .shop-back{
    left:12px !important;
    bottom:16px !important;
    padding:6px 9px !important;
    font-size:.58rem !important;
  }
}