body { 
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.logo {
     height: 100px;
     text-align: center;
 }

.logo img {
    height: 100px;
}

.header {
    margin: 30px 0;
}

/* =============================================================================
   Header / nav / ticker — copied from the local preview (styles.css + theme.css,
   including the 12:08 AM logo 104px and bigger-nav overrides).
   Scoped so the rest of the CraftingStore page is unchanged.
   ============================================================================= */

@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/pressstart2p/v16/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.banner,
.site-header,
.site-header button,
.site-header input,
.brand-text,
.brand-text .store,
.brand-text .server,
.nav,
.login-open,
.site-ticker {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  letter-spacing: 0.4px;
}

/* styles.css .wrap + .banner, then theme.css .banner override */
.wrap {
  width: min(1080px, calc(100% - 3rem));
  margin: 0 auto;
}
.banner {
  margin: 0;
  text-align: center;
  font-weight: 650;
  text-transform: uppercase;
  background: #000;
  color: #F4F0E6;
  border-bottom: 2px solid #E6B422;
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: 0.8px;
  padding: 0.7rem 1rem;
}


/* styles.css .hub / .hub-shade / .hub-inner — exact overlay values.
   Shade is sized to the preview hero (min(72vh, 680px)) so this header
   band shows the same top-of-hero darkness; the hub itself is only as
   tall as the header + ticker and does not cover the shop. */
.hub {
  position: relative;
  isolation: auto;
  overflow: visible;
  color: #F4F0E6;
}
.hub-shade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(72vh, 680px);
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,10,14,.93) 0%, rgba(8,10,14,.72) 30%, rgba(8,10,14,.40) 56%, rgba(8,10,14,.28) 100%),
    linear-gradient(180deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,.22) 28%, rgba(8,10,14,.42) 70%, rgba(8,10,14,.88) 100%);
}
.hub-inner {
  position: relative;
  z-index: 2;
  width: min(1080px, calc(100% - 3rem));
  margin: 0 auto;
}

/* styles.css .site-header / .brand / .brand-text, then theme.css size overrides */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 0 1.5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: #F4F0E6;
}
.brand:hover,
.brand:focus {
  color: #F4F0E6;
  text-decoration: none;
}
.brand-mark {
  width: 104px;
  height: 104px;
  object-fit: contain;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  outline: 0;
  background: transparent;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.brand-text .store {
  font-weight: 800;
  text-transform: uppercase;
  color: #F4F0E6;
  font-size: 9px;
  letter-spacing: 0.4px;
}
.brand-text .server {
  color: #C9C3B4;
  font-size: 6px;
  letter-spacing: 0.6px;
}
@media (max-width: 440px) {
  .brand-mark { width: 76px; height: 76px; }
}

/* styles.css .header-tools */
.header-tools {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* theme.css .nav + 12:08 AM bigger-nav override */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
}
.nav a,
.nav-drop > a,
.nav-drop > button.nav-drop-btn,
.nav .dropdown-toggle {
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.7px;
  font-weight: 400;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 0.45rem 0.2rem;
  border-bottom: 3px solid transparent;
  color: #F4F0E6 !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav a[aria-current="page"],
.nav-drop[aria-current="true"] > .nav-drop-btn,
.nav-drop[aria-current="true"] > .dropdown-toggle,
.nav .dropdown-toggle[aria-current="page"] {
  border-bottom-color: #E6B422;
  color: #E6B422 !important;
}
.nav a:hover,
.nav a:focus,
.nav .dropdown-toggle:hover,
.nav .dropdown-toggle:focus {
  color: #E6B422 !important;
  background: none !important;
}

/* Pixel icons — preview assets, nearest-neighbor, 24px (20px under 600px) */
.nav-ico {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex: none;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.nav-ico-games { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACO0lEQVR42u2VvW4TQRDH/7t7txfnzo5jYwpiuYlEgguQhUTkAok3oOAFaCgIFThCvAER4gF4gFSkoqAKErEiCiNFFlDEjuTGciLZJvbJX5f72qWwQEL4jB1oEPfrVjuzM/Pf2VkgJCQk5H+HzGO8qFGicUI0lVKNE/LdWQKwHSltVwjbkXJkC/lXE0jFFWpEqGpEqLpsKNzRyNndnLHx7OVqCQC2t2obb8qDErdlsjvwnIEl3IEl3LbpiT9KgCuEJKIKW8vw1P5B7nQete7cLl+p1p12p+/5jicDFaHTDokbjK1ntKV5gwPA/kHudD2jLcUNxi6kgL5AyeqKFv9UvtmZaBB98fO6/3Si2Y3cYaJ2YpvD88l9oQQloCgEcYPxoP3Ph28BAHvvKgCAwmagilxRgm+aTpGG0Ckdcv1qER/2jlD50kBhsxkcgIzPCiw0aENISM+XsrTTRKPt4t7j9C82Dx+1AKgT/bceVJGMKfB8KYXE/E3ouhLNrjcCgHRKRWmnOXMDPi/UkIyNa2t2vZHryos9w0SM0cxlHnn1JD0AgN2iiXxWRzqlYrdoAgDyWR0AcNywcdbzkM/qOG7YAIDX702j3nKsTs8Xc18BAIwdHev+dt24dU1fScVZdRYFKnV77ePR8KRlelODzzwJjQglXKU0tkipHqHsUowtRyOMUkY4AAhfOn3LF197fndoCb83EsJxhRhYvx/JZN4Bs8AJ0TiFysiPz0BKwPWltB2Bc0dKhISEhPxLfAOzqOOch4SjbAAAAABJRU5ErkJggg=="); }
.nav-ico-clan { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACS0lEQVR42u2WTWsTQRjH/7Ozu9lNm02apo00IQi+gSKIFjz0IHgTpDfBqxev4smjH8CbH0G/gNhaPPkC2lLwBWwvvVRpo5Q0Mckmm2R3Z+bxoJW2aLspSUshf5jLM8PDb57nPy/AQMdNps5YL/PxqAuHbY1lUrqRSfKYoTMISSTVIe16yNLYqQkzTvSEiF7S7eupMyMJrvUitx5lUWqY88lz8fHZp29QmEih2aaWbWqoQvYfwDY1lna4ff/W2NerV5YAAJdOW9niZlDxQwoaLUmBIDooAIvS+/OFmPP4Xr4GALmMgXwuBuRiuDa9NLa+Gbqup8RBQSL1kW0z/vdyCORiAIC3zy9uri5c9i+cjKVzY4Yx6uhat6ekayPZBQtflj0szlX+xnaDpJ3oBj2wk/cCOZu3RtKOzvsKsBfI9JRTzqa4ZZn7t0Pv1V1hFywszlXw6nNzy7w61xgA6m8F/puYMUSxo4YjVvcApeD3ODKAP2qvddBe6xzOW/AvvVv20PDU5A3gg21pwLi5Y14RIcq92DXAiwUXiTifev2puV52RWVptZN/eCdb3N2WZlsJqag/FfhRDtsr6/5GrSmlH1B7K/7sfR1OnGN23s2UarLTCfavwb4eUAoI5M5EoSDVaElyPUnFUli/+6iYBoBMUsfMfP3Et42gWnGF7IkHhCTUmtLfHvu40qoEglQgiMqukEJR/eaDVUPjjLueFNVG9L9SpJcrEedsNMmN5BAf9gPll2qy8zPiDnsCsPUZ1TmDIkKU3g400EDHRr8AOG8MnGJAFYEAAAAASUVORK5CYII="); }
.nav-ico-staff { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADsElEQVR42u1VS29bRRg9882d+4ivbWzHKY0NCBT14ahYLMDqBoooQiwqIRWEhFix6KJCQmoRu7Ioi2wQEvwAFAnookWhm3QTWqGC1QSpqRKVoNRUbJw21HUerh1f+z6GheNbu5XtOMAKn819zNw5Z75z5rvAAAMM8H8H/ycfa4wxg4jrRMwD4P0XAgwiZhJxQUTEGBwp/bGIoqhHgsGxIOfGuuuWa7Jl8N+AYIztFcKQ8rx8Mxze95ym6SHOuWCM6URsv6YFF348JT//9JhMCqHthoN6CMCwohiLl2fx2kcvL9+27lRThjE6RMQEY2yIyK9ggHPSiZhOxGKKIkYURQ1xTr0EKL08biVZzJ7DAU2L5ev1VQIwqqrDuewU7i5XEOU8cp/oHgG4Z5+rA8Az2vuhmud1taarAJ1IjOt6Mpedwuk3Ilis/okQ51pSiHCAiJ2ZGMll0iZu5Ws49l5o5fvvNsO2lM7i5VnMXM0hoihq0XFQ6xINpQs5CxOpJz6LzmfSJgAgl53Clz8kZpFo2D13qYi5hTIAoFhycH3p+c23X1g+kMtOATgEk4gbRKzieR0VsG7pf1ZVg19/8dRm810mbWJictUnPJwKYPpaCekxA6++9S5mruZw+oMCsFLz10kcuTlUcBzL7mBDxwp4UqIupQsA+YKNZFz4u21FNMyRjAv/ee5SEQBw5UZjbphzse66lt3Bho4CGGMggCWGBTJps428WHKwtukiX7D9K7bDmOeBRxsNY7s5BUEiFlUUdeW+jeRLIaBFwOgvKkYBpP4wkIKB188EAQDHj0aAhIb8ryUcPxrBxOQqQpxzk4i2PM/dcR8wifiTQsQ+jMeL+YLtl7WJU+dHcMgwHpZ9oYy5hbKfj29m1jExuYpiycHJeLy4R4io2XKce4ZwjxDaiVjM2q/rAICxT0TbeCZtonkSsFLz7Wn63sTTM405Fzc28HOlov9l27UdWeBJ6QHAsmU1BKBdwMdf5XE4FUAyLnDlRhnFkoN3XnnisXUubmw8tuaOLLCkdL5dWzNvWtZBAJg++wDTZx+0zckXbP/eD+I25i9UMX+hCgBwgYPXt7ZMS0qn7z5gEvEo58a4YSTHdX2pOVbfPlIvnjRwbakC5afGPm7XHlbYA1K/Vav5Ndetlj3PrXZoRqzXz2KIiAU6CGlmpK3ULcQVz3O3unTBHQnoJeT37Zz0S9y3gEeFRDg39un6XgC4ZVl31/sk3rWA1owojBEAOFJ61T6JBxigib8BF02TQXwUFikAAAAASUVORK5CYII="); }

@media (max-width: 600px) {
  .nav { gap: 0.8rem; }
  .nav a,
  .nav-drop > a,
  .nav-drop > button.nav-drop-btn,
  .nav .dropdown-toggle {
    font-size: 8px;
  }
  .nav-ico { width: 20px; height: 20px; }
}

/* Community / Store dropdown — theme.css .nav-drop, Bootstrap-compatible */
.nav-drop,
.nav .dropdown {
  position: relative;
}
.nav-drop-menu,
.nav .dropdown-menu.nav-drop-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 1050;
  min-width: 240px;
  padding: 6px;
  background: #1A140E;
  border: 3px solid #C98A1B;
  border-radius: 0;
  box-shadow: 0 0 0 3px #3A2006, 0 8px 0 0 #0E0905;
  float: none;
  margin: 0;
}
.nav-drop.open .nav-drop-menu,
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav .dropdown.open > .nav-drop-menu,
.nav .dropdown:hover > .nav-drop-menu,
.nav .dropdown:focus-within > .nav-drop-menu {
  display: grid;
  gap: 4px;
}
.nav-drop-menu a,
.nav .dropdown-menu.nav-drop-menu > li > a {
  display: block;
  padding: 8px 10px;
  border-bottom: 0 !important;
  color: #F4F0E6 !important;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: none;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0;
  white-space: normal;
}
.nav-drop-menu a:hover,
.nav-drop-menu a:focus,
.nav-drop-menu a:focus-visible,
.nav .dropdown-menu.nav-drop-menu > li > a:hover,
.nav .dropdown-menu.nav-drop-menu > li > a:focus {
  background: #2A1D13 !important;
  color: #E6B422 !important;
}
.nav-drop-menu .nav-drop-label,
.nav .dropdown-menu.nav-drop-menu > li.nav-drop-label {
  display: block;
  padding: 8px 10px 2px;
  color: #C9C3B4;
  font-size: 7px;
  letter-spacing: 0.6px;
  text-transform: none;
  list-style: none;
}
.nav .dropdown-menu.nav-drop-menu > li {
  list-style: none;
  float: none;
  margin: 0;
}
.nav .dropdown-toggle .caret {
  display: none;
}
@media (max-width: 420px) {
  .nav-drop-menu,
  .nav .dropdown-menu.nav-drop-menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 4px;
    box-shadow: 0 0 0 3px #3A2006;
  }
}

/* theme.css .login-open — gold .mc-btn (the LOGIN look), used for the basket link */
a.login-open {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 7px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  color: #2A1500 !important;
  background: #E6B422 !important;
  background-image: none !important;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-block;
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 5px 0 3px #120C07;
  transition: transform .08s, filter .08s, box-shadow .08s;
}
a.login-open:hover,
a.login-open:focus {
  color: #2A1500 !important;
  background: #E6B422 !important;
  filter: brightness(1.07);
  text-decoration: none !important;
}
a.login-open:focus-visible {
  outline: 3px solid #5BD16A;
  outline-offset: 4px;
}
a.login-open:active {
  transform: translateY(3px);
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 2px 0 3px #120C07;
}

/* theme.css .site-ticker — static copy, CSS scroll only (no countdown JS) */
.site-ticker {
  overflow: hidden;
  max-width: 100%;
  background: #0B0D10;
  border-top: 2px solid #3A2006;
  border-bottom: 2px solid #C98A1B;
  color: #FFE07A;
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: 0.6px;
}
.site-ticker-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  padding: 0.55rem 1rem;
  animation: ticker-move 36s linear infinite;
}
.site-ticker span {
  white-space: nowrap;
}
@keyframes ticker-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .site-ticker-track { animation: none; }
  a.login-open:active { transform: none; }
}

/* Hide leftover Bootstrap navbar chrome if a cached page still has it; our v2 markup does not use it. */

/* Owner request 12:51 AM: looping full-page background video */
.dw-bg-video{position:fixed; inset:0; width:100vw; height:100vh; object-fit:cover; z-index:-1; pointer-events:none; background:#0B0D10;}
html{background:#0B0D10;}
body{background-color:transparent !important; background-image:none !important; position:relative; z-index:0;}
@media (prefers-reduced-motion: reduce){ .dw-bg-video{display:none;} body{background-image:url("https://files.catbox.moe/ea18wn.jpg") !important; background-size:cover !important; background-attachment:fixed !important;} }

/* Owner request 1:09 AM: real pixel buttons for Store / Games / Top Players / Community (preview .mc-btn styling) */
.nav{display:flex !important; align-items:center; gap:14px !important;}
.nav > a,
.nav .nav-drop > a,
.nav .dropdown-toggle{
  font-family:"Press Start 2P", ui-monospace, monospace !important;
  font-size:8px !important; letter-spacing:.5px; line-height:1.4 !important;
  display:inline-flex !important; align-items:center; gap:6px;
  padding:11px 14px !important; margin:0 !important;
  background:#5A5348 !important; color:#F4F0E6 !important; border:0 !important;
  text-decoration:none !important; text-transform:uppercase; cursor:pointer;
  box-shadow:inset -3px -3px 0 #2A241C, inset 3px 3px 0 #8A8274, 0 0 0 3px #1A140E, 0 5px 0 3px #0C0906 !important;
  transition:transform .08s, filter .08s, box-shadow .08s;
}
.nav > a:hover, .nav > a:focus,
.nav .dropdown-toggle:hover, .nav .dropdown-toggle:focus{filter:brightness(1.12); color:#F4F0E6 !important; outline:none;}
.nav > a:active, .nav .dropdown-toggle:active{transform:translateY(3px); box-shadow:inset -3px -3px 0 #2A241C, inset 3px 3px 0 #8A8274, 0 0 0 3px #1A140E, 0 2px 0 3px #0C0906 !important;}
.nav .dropdown-toggle[aria-current="page"],
.nav > a[aria-current="page"]{
  background:#E6B422 !important; color:#2A1500 !important;
  box-shadow:inset -3px -3px 0 #9A5A12, inset 3px 3px 0 #FFE07A, 0 0 0 3px #3A2006, 0 5px 0 3px #120C07 !important;
}
.nav > a::after, .nav .dropdown-toggle::after, .nav > a::before{display:none !important;}


/* =============================================================================
   Checkout / store pages pixel skin
   Appended to the live header/nav CSS so basket, package, category, login,
   legal, and other CraftingStore pages that render through base.twig match
   the preview's pixel Minecraft look (Press Start 2P, gold #E6B422 buttons,
   stone #5A5348 secondaries, dark panels #1A140E / #2A1D13, gold pixel
   outlines, emerald #5BD16A accents, cream #F4F0E6 text).

   Scope: .container (shop content + footer) and .modal / .modal-backdrop.
   Header, nav, ticker, and the looping background video are left as they
   are above. Nothing here hides forms or buttons or disables pointer-events.
   ============================================================================= */

/* --- Content typography (preview body size) --- */
.container,
.container button,
.container input,
.container select,
.container textarea,
.container label,
.container td,
.container th,
.container p,
.container li,
.container a,
.modal,
.modal button,
.modal input,
.modal select,
.modal label {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  letter-spacing: 0.4px;
}
.container,
.modal-content {
  font-size: 8px;
  line-height: 1.75;
  color: #F4F0E6;
}
.container h1, .modal h1 { font-size: 16px; line-height: 1.5; letter-spacing: 0.6px; font-weight: 400; color: #F4F0E6; }
.container h2, .modal h2 { font-size: 10px; line-height: 1.55; letter-spacing: 0.6px; font-weight: 400; color: #E6B422; }
.container h3, .container h4, .modal h3, .modal h4,
.modal-title {
  font-size: 9px; line-height: 1.5; font-weight: 400; color: #E6B422;
}
.container .text-muted, .modal .text-muted { color: #C9C3B4 !important; }
.container b, .container strong, .modal b, .modal strong { color: #F4F0E6; font-weight: 400; }

/* Links in the shop content — gold, emerald focus (not a chrome outline) */
.container a,
.modal a {
  color: #E6B422;
  text-decoration: none;
}
.container a:hover, .container a:focus,
.modal a:hover, .modal a:focus {
  color: #FFE07A;
  text-decoration: underline;
}
.container a:focus-visible,
.modal a:focus-visible {
  outline: 3px solid #5BD16A;
  outline-offset: 3px;
}

/* --- Page content panel: semi-transparent so the looping video shows around it --- */
.container {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px) !important;
  max-width: 1140px !important;
  margin: 24px auto 32px !important;
  padding: 22px 22px 16px !important;
  background: rgba(26, 20, 14, 0.88);
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #3A2006, 0 8px 0 0 #0E0905;
  color: #F4F0E6;
}
@media (max-width: 480px) {
  .container {
    width: calc(100% - 16px) !important;
    margin: 12px auto 20px !important;
    padding: 14px 10px 12px !important;
  }
}

/* --- Panels (basket card, package, category items, sidebar widgets) --- */
.container .panel,
.modal .panel {
  background: rgba(42, 29, 19, 0.92);
  background-color: rgba(42, 29, 19, 0.92);
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #3A2006, 0 6px 0 0 #0E0905;
  color: #F4F0E6;
  margin-bottom: 18px;
}
.container .panel-default,
.container .panel-primary,
.container .panel-info,
.container .panel-success,
.container .panel-warning,
.container .panel-danger {
  border-color: #C98A1B;
}
.container .panel-heading,
.container .panel-default > .panel-heading,
.container .panel-primary > .panel-heading,
.container .panel-info > .panel-heading,
.container .panel-success > .panel-heading,
.container .panel-warning > .panel-heading,
.container .panel-danger > .panel-heading {
  background: #1A140E !important;
  background-image: none !important;
  color: #E6B422 !important;
  border: 0 !important;
  border-bottom: 3px solid #C98A1B !important;
  border-radius: 0 !important;
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 10px 12px;
}
.container .panel-body {
  background: transparent;
  color: #F4F0E6;
  padding: 14px 12px;
}
.container .panel-footer,
.container .item-footer {
  background: rgba(14, 9, 5, 0.55);
  border-top: 2px solid #3A2006;
  color: #F4F0E6;
  border-radius: 0 !important;
  padding: 10px 8px;
}
.container .item-wrapper {
  height: 100%;
}
.container .item-wrapper .img-responsive {
  margin: 0 auto 8px;
  image-rendering: auto;
  border: 2px solid #3A2006;
  background: #0E0905;
}

/* The outer wrapping panel sits on the already-outlined container — drop the
   double frame so the page doesn't grow a box-in-a-box, but keep nested
   widgets and product cards clearly framed. */
.container > .row > [class*="col-"] > .panel.panel-default {
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}

/* --- Wells --- */
.container .well,
.container .well-lg,
.container .well-sm {
  background: #1A140E;
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  box-shadow: inset 3px 3px 0 #0E0905, 0 0 0 3px #3A2006;
  color: #F4F0E6;
}

/* --- Tables (basket line items) --- */
.container .table,
.container table.table {
  color: #F4F0E6;
  background: transparent;
  border-color: #3A2006;
  font-size: 7px;
  line-height: 1.6;
  width: 100%;
  margin-bottom: 12px;
}
.container .table-responsive,
.container .table.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.container .table > thead > tr > th,
.container .table > tbody > tr > th,
.container .table > tfoot > tr > th,
.container .table > thead > tr > td,
.container .table > tbody > tr > td,
.container .table > tfoot > tr > td {
  border-color: #3A2006 !important;
  color: #F4F0E6;
  padding: 10px 8px;
  vertical-align: middle;
  background: transparent;
}
.container .table > thead > tr > th {
  color: #E6B422;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 3px solid #C98A1B !important;
  background: #1A140E;
}
.container .table-striped > tbody > tr:nth-of-type(odd) > td,
.container .table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: rgba(26, 20, 14, 0.72) !important;
}
.container .table-striped > tbody > tr:nth-of-type(even) > td,
.container .table-hover > tbody > tr:hover > td {
  background-color: rgba(42, 29, 19, 0.55) !important;
}
.container .table-hover > tbody > tr:hover > td {
  background-color: rgba(230, 180, 34, 0.12) !important;
}
.container .table .text-right,
.container p.text-right,
.container p.text-right b {
  color: #E6B422;
}
.container td.quantity,
.container .quantity {
  white-space: nowrap;
}
.container .quantity input {
  width: 42px;
  padding: 6px 4px;
  text-align: center;
  background: #0E0905;
  color: #F4F0E6;
  border: 2px solid #C98A1B;
  border-radius: 0;
}

/* --- Forms, inputs, selects --- */
.container .form-group,
.modal .form-group {
  margin-bottom: 12px;
}
.container .form-group > label,
.container label,
.modal label {
  color: #C9C3B4;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.container .form-control,
.modal .form-control,
.container input[type="text"],
.container input[type="email"],
.container input[type="number"],
.container input[type="password"],
.container input[type="search"],
.container select,
.container textarea {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 8px !important;
  line-height: 1.6;
  color: #F4F0E6 !important;
  background: #0E0905 !important;
  background-image: none !important;
  border: 3px solid #C98A1B !important;
  border-radius: 0 !important;
  box-shadow: inset 3px 3px 0 #00000080, 0 0 0 3px #3A2006 !important;
  height: auto;
  min-height: 40px;
  padding: 10px 12px !important;
  margin-bottom: 8px;
}
.container .form-control::placeholder,
.container input::placeholder,
.modal .form-control::placeholder {
  color: #8A8274 !important;
  opacity: 1;
}
.container .form-control:focus,
.modal .form-control:focus,
.container input[type="text"]:focus,
.container input[type="email"]:focus,
.container select:focus,
.container textarea:focus {
  border-color: #E6B422 !important;
  outline: 3px solid #5BD16A !important;
  outline-offset: 3px;
  box-shadow: inset 3px 3px 0 #00000080, 0 0 0 3px #3A2006 !important;
  color: #F4F0E6 !important;
}
.container .form-control[disabled],
.container .form-control[readonly],
.container input[disabled] {
  background: #2A241C !important;
  color: #C9C3B4 !important;
  opacity: 1;
  cursor: not-allowed;
}
.container select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #E6B422 50%), linear-gradient(135deg, #E6B422 50%, transparent 50%) !important;
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  padding-right: 28px !important;
}
.container .has-error .form-control,
.container .has-error .form-control:focus {
  border-color: #C45A4A !important;
}
.container .has-success .form-control,
.container .has-success .form-control:focus {
  border-color: #5BD16A !important;
}
.container .help-block,
.container .has-error .help-block {
  color: #C9C3B4;
  font-size: 7px;
}
.container .has-error .help-block,
.container .has-error .control-label { color: #E09080; }
.container .has-success .help-block,
.container .has-success .control-label { color: #5BD16A; }

.container .input-group {
  display: table;
  width: 100%;
  margin-bottom: 8px;
}
.container .input-group .form-control {
  margin-bottom: 0;
}
.container .input-group-btn .btn,
.container .input-group-addon {
  border-radius: 0 !important;
}
.container .input-group-addon {
  background: #2A1D13;
  color: #E6B422;
  border: 3px solid #C98A1B;
}

/* Checkboxes and radios stay visible and clickable */
.container input[type="checkbox"],
.container input[type="radio"],
.modal input[type="checkbox"],
.modal input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  accent-color: #E6B422;
  cursor: pointer;
  flex: none;
}
.container input[type="checkbox"] + a,
.container input[type="checkbox"] + label { vertical-align: middle; }

/* Horizontal rules */
.container hr {
  border: 0;
  border-top: 2px solid #3A2006;
  border-bottom: 1px solid #C98A1B;
  margin: 16px 0;
}

/* --- Buttons: gold primary, stone secondary, danger, info/gateways --- */
.container .btn,
.modal .btn {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin-bottom: 8px;
  cursor: pointer;
  background-image: none !important;
  transition: transform .08s, filter .08s, box-shadow .08s;
  display: inline-block;
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
}
/* Primary / default success-style actions — gold .mc-btn */
.container .btn-primary,
.container .btn-success,
.modal .btn-primary,
.modal .btn-success {
  color: #2A1500 !important;
  background: #E6B422 !important;
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 5px 0 3px #120C07 !important;
}
.container .btn-primary:hover, .container .btn-primary:focus,
.container .btn-success:hover, .container .btn-success:focus,
.modal .btn-primary:hover, .modal .btn-primary:focus,
.modal .btn-success:hover, .modal .btn-success:focus {
  color: #2A1500 !important;
  background: #E6B422 !important;
  filter: brightness(1.07);
  text-decoration: none !important;
}
.container .btn-primary:active, .container .btn-success:active,
.modal .btn-primary:active, .modal .btn-success:active,
.container .btn-primary:active:focus, .container .btn-success:active:focus {
  transform: translateY(3px);
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 2px 0 3px #120C07 !important;
  background: #E6B422 !important;
  color: #2A1500 !important;
}

/* Stone secondaries (modal Close, default, quantity) */
.container .btn-default,
.container .btn-secondary,
.container .btn-quantity,
.modal .btn-default,
.modal .btn-secondary {
  color: #F4F0E6 !important;
  background: #5A5348 !important;
  box-shadow:
    inset -3px -3px 0 #2A241C,
    inset 3px 3px 0 #8A8274,
    0 0 0 3px #1A140E,
    0 5px 0 3px #0C0906 !important;
}
.container .btn-default:hover, .container .btn-secondary:hover,
.container .btn-quantity:hover,
.modal .btn-default:hover, .modal .btn-secondary:hover,
.container .btn-default:focus, .container .btn-secondary:focus {
  color: #F4F0E6 !important;
  background: #5A5348 !important;
  filter: brightness(1.12);
}

/* Remove / destructive */
.container .btn-danger,
.modal .btn-danger {
  color: #F4F0E6 !important;
  background: #A33B2B !important;
  box-shadow:
    inset -3px -3px 0 #5C1C14,
    inset 3px 3px 0 #E09080,
    0 0 0 3px #3A140E,
    0 5px 0 3px #120805 !important;
}
.container .btn-danger:hover, .container .btn-danger:focus,
.modal .btn-danger:hover, .modal .btn-danger:focus {
  color: #F4F0E6 !important;
  background: #A33B2B !important;
  filter: brightness(1.08);
}
.container .btn-danger:active,
.modal .btn-danger:active {
  transform: translateY(3px);
  box-shadow:
    inset -3px -3px 0 #5C1C14,
    inset 3px 3px 0 #E09080,
    0 0 0 3px #3A140E,
    0 2px 0 3px #120805 !important;
}

/* Gateway chips (.btn-info, e.g. PayPal) — stone until selected, then gold */
.container .btn-info,
.container .gateways .btn,
.container .gateways .btn-info,
.container .gateways .btn-block {
  color: #F4F0E6 !important;
  background: #5A5348 !important;
  box-shadow:
    inset -3px -3px 0 #2A241C,
    inset 3px 3px 0 #8A8274,
    0 0 0 3px #1A140E,
    0 5px 0 3px #0C0906 !important;
}
.container .gateways input[type="radio"]:checked + .btn,
.container .gateways input[type="radio"]:checked + .btn-info,
.container .gateways input[type="radio"]:checked + span.btn {
  color: #2A1500 !important;
  background: #E6B422 !important;
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 5px 0 3px #120C07 !important;
}
.container .gateways .radio,
.container .gateways .radio label {
  display: block;
  padding: 0;
  margin: 0 0 14px;
  color: #F4F0E6;
  font-weight: 400;
  cursor: pointer;
}
.container .gateways .radio label .btn {
  margin-top: 6px;
  margin-bottom: 0;
}
.container .js-wallet-tos {
  color: #C9C3B4;
  margin: 8px 0 16px;
}

/* Warning (used rarely) */
.container .btn-warning,
.modal .btn-warning {
  color: #2A1500 !important;
  background: #E6B422 !important;
  box-shadow:
    inset -3px -3px 0 #9A5A12,
    inset 3px 3px 0 #FFE07A,
    0 0 0 3px #3A2006,
    0 5px 0 3px #120C07 !important;
}

.container .btn:focus-visible,
.modal .btn:focus-visible {
  outline: 3px solid #5BD16A;
  outline-offset: 4px;
}
.container .btn[disabled],
.container .btn.disabled,
.modal .btn[disabled] {
  filter: saturate(.4) brightness(.8);
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

/* Size variants — keep chunky pixel shadows, just tighten padding */
.container .btn-xs,
.modal .btn-xs {
  font-size: 7px !important;
  padding: 8px 10px !important;
  box-shadow:
    inset -2px -2px 0 #9A5A12,
    inset 2px 2px 0 #FFE07A,
    0 0 0 2px #3A2006,
    0 3px 0 2px #120C07 !important;
}
.container .btn-xs.btn-danger {
  box-shadow:
    inset -2px -2px 0 #5C1C14,
    inset 2px 2px 0 #E09080,
    0 0 0 2px #3A140E,
    0 3px 0 2px #120805 !important;
}
.container .btn-xs.btn-default,
.container .btn-xs.btn-secondary {
  box-shadow:
    inset -2px -2px 0 #2A241C,
    inset 2px 2px 0 #8A8274,
    0 0 0 2px #1A140E,
    0 3px 0 2px #0C0906 !important;
}
.container .btn-sm,
.modal .btn-sm {
  font-size: 7px !important;
  padding: 10px 12px !important;
}
.container .btn-lg,
.modal .btn-lg {
  font-size: 9px !important;
  padding: 14px 20px !important;
}
.container .btn-block,
.modal .btn-block {
  display: block;
  width: 100%;
}

/* --- Alerts (coupon errors, gift-card check, flash messages) --- */
.container .alert,
.modal .alert,
.container .js-card-alert .alert {
  background: #1A140E;
  color: #F4F0E6;
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  border-left-width: 8px;
  box-shadow: 0 0 0 3px #3A2006;
  padding: 12px 14px;
  font-size: 8px;
  line-height: 1.7;
}
.container .alert-success,
.container .js-card-alert .alert-success {
  border-color: #C98A1B;
  border-left-color: #5BD16A;
  color: #F4F0E6;
  background: #1A140E;
}
.container .alert-danger,
.container .alert-error,
.container .js-card-alert .alert-danger {
  border-color: #C98A1B;
  border-left-color: #A33B2B;
  color: #F4F0E6;
  background: #1A140E;
}
.container .alert-info,
.container .alert-warning {
  border-color: #C98A1B;
  border-left-color: #E6B422;
  color: #F4F0E6;
  background: #1A140E;
}
.container .alert a { color: #E6B422; }

/* --- Labels / badges (server status Online/Offline, etc.) --- */
.container .label,
.container .badge {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 7px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 4px 6px;
  box-shadow: 0 0 0 2px #3A2006;
}
.container .label-default, .container .badge { background: #5A5348; color: #F4F0E6; }
.container .label-primary, .container .label-warning { background: #E6B422; color: #2A1500; }
.container .label-success { background: #3DDC7A; color: #073015; }
.container .label-danger { background: #A33B2B; color: #F4F0E6; }
.container .label-info { background: #3A342C; color: #F4F0E6; }

/* --- List groups, pagination, breadcrumbs --- */
.container .list-group-item {
  background: #1A140E;
  color: #F4F0E6;
  border: 2px solid #3A2006;
  border-radius: 0 !important;
}
.container .list-group-item.active,
.container .list-group-item.active:hover,
.container .list-group-item.active:focus {
  background: #2A1D13;
  color: #E6B422;
  border-color: #C98A1B;
}
.container .list-group-item:hover { background: #2A1D13; color: #E6B422; }

.container .pagination { margin: 12px 0; }
.container .pagination > li > a,
.container .pagination > li > span {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 7px;
  color: #F4F0E6;
  background: #5A5348;
  border: 0;
  border-radius: 0 !important;
  margin: 0 6px 8px 0;
  padding: 8px 10px;
  box-shadow: inset -2px -2px 0 #2A241C, inset 2px 2px 0 #8A8274, 0 0 0 2px #1A140E, 0 3px 0 2px #0C0906;
}
.container .pagination > li.active > a,
.container .pagination > li.active > span,
.container .pagination > li.active > a:hover {
  color: #2A1500;
  background: #E6B422;
  box-shadow: inset -2px -2px 0 #9A5A12, inset 2px 2px 0 #FFE07A, 0 0 0 2px #3A2006, 0 3px 0 2px #120C07;
}
.container .pagination > li.disabled > a,
.container .pagination > li.disabled > span {
  filter: saturate(.4) brightness(.8);
  color: #C9C3B4;
}

.container .breadcrumb {
  background: #1A140E;
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #3A2006;
  padding: 8px 12px;
  font-size: 7px;
  color: #C9C3B4;
}
.container .breadcrumb > li + li:before { color: #E6B422; content: "> "; }
.container .breadcrumb > .active { color: #E6B422; }

/* --- Modals (package "More info", username if shown as a modal) --- */
.modal-backdrop,
.modal-backdrop.in {
  background: #0B0D10;
  opacity: 0.78 !important;
}
.modal-content {
  background: #1A140E !important;
  color: #F4F0E6;
  border: 3px solid #C98A1B !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #3A2006, 0 8px 0 0 #0E0905 !important;
}
.modal-header {
  border-bottom: 3px solid #C98A1B !important;
  padding: 12px 16px;
}
.modal-body {
  color: #F4F0E6;
  padding: 14px 16px;
}
.modal-footer {
  border-top: 3px solid #3A2006 !important;
  background: rgba(14, 9, 5, 0.45);
  padding: 12px 16px;
  border-radius: 0 !important;
}
.modal-header .close,
.modal .close,
.container .alert .close {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: 16px;
  font-weight: 400;
  color: #F4F0E6;
  opacity: 1;
  text-shadow: none;
  background: #5A5348;
  border: 0;
  border-radius: 0;
  width: 32px;
  height: 32px;
  line-height: 28px;
  padding: 0;
  box-shadow: inset -2px -2px 0 #2A241C, inset 2px 2px 0 #8A8274, 0 0 0 2px #1A140E;
  margin-top: 0;
}
.modal-header .close:hover,
.modal .close:hover {
  color: #E6B422;
  opacity: 1;
  filter: brightness(1.1);
}

/* --- Sidebar widgets (Recent purchases, Support, Gift card balance) --- */
.container .img-circle {
  border-radius: 0 !important;
  border: 3px solid #C98A1B;
  box-shadow: 0 0 0 3px #3A2006;
  background: #0E0905;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.container .js-card-button { margin-top: 8px; }

/* --- Footer (sits inside .container) --- */
.container .footer,
.container footer.footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid #3A2006;
  color: #C9C3B4;
  font-size: 7px;
  letter-spacing: 0.5px;
}
.container .footer a,
.container footer.footer a { color: #E6B422; }
.container .footer a:hover,
.container footer.footer a:hover { color: #FFE07A; }

/* Misc bootstrap leftovers that show up on store pages */
.container .page-header {
  border-bottom: 3px solid #C98A1B;
  color: #E6B422;
  margin: 10px 0 16px;
}
.container .thumbnail {
  background: #1A140E;
  border: 3px solid #C98A1B;
  border-radius: 0 !important;
  box-shadow: 0 0 0 3px #3A2006;
}
.container .nav-tabs {
  border-bottom: 3px solid #C98A1B;
}
.container .nav-tabs > li > a {
  color: #F4F0E6;
  background: #5A5348;
  border: 0 !important;
  border-radius: 0 !important;
  margin-right: 6px;
}
.container .nav-tabs > li.active > a,
.container .nav-tabs > li.active > a:hover,
.container .nav-tabs > li.active > a:focus {
  color: #2A1500 !important;
  background: #E6B422 !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .container .btn:active,
  .modal .btn:active { transform: none; }
}

/* Narrow coupon row: stack the field and Redeem button so the placeholder
   and Redeem control are both fully visible on phones. */
@media (max-width: 520px) {
  .container .input-group,
  .container .input-group-btn {
    display: block !important;
    width: 100% !important;
  }
  .container .input-group .form-control {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px;
  }
  .container .input-group-btn .btn {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
  }
}


/* ===== v9 owner overrides (CraftingStore pages: header, buttons) ===== */
/* One continuous page on the looping video: no header picture/shade/shadow/band; header is black fading to clear */
.hub, .hub--compact{background:linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 45%, rgba(0,0,0,0) 100%) !important; background-image:linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 45%, rgba(0,0,0,0) 100%) !important; box-shadow:none !important; border:0 !important; min-height:0 !important; padding-bottom:28px;}
.hub::before, .hub::after{content:none !important; display:none !important;}
.hub-shade, .hub-photo, .hub-edge{display:none !important;}
.site-header{background:transparent !important; box-shadow:none !important; border:0 !important;}
.site-ticker{background:transparent !important; border:0 !important; box-shadow:none !important;}
.site-header .nav, .site-header .brand, .site-ticker span{text-shadow:0 2px 0 rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.7);}
.brand-text{display:none !important;} /* wordmark removed; logo stays */

/* Site-wide button radius = Login button radius (3px), incl. checkout skin buttons */
.mc-btn, .action, .filter, .login-open, .login-submit, .session-logout,
.nav > a, .nav .dropdown-toggle, .nav > .nav-drop > button.nav-drop-btn,
.btn, .container .btn, .modal .btn, .container .input-group-btn .btn, .btn-group > .btn,
button, input[type="submit"], input[type="button"]{border-radius:3px !important;}
/* No icons inside buttons */
.nav > a .nav-ico, .nav > a img, .nav .dropdown-toggle img, .btn img, .mc-btn img, .login-open img{display:none !important;}
/* Filter bars: no stray line */
.filters{border-bottom:0 !important; box-shadow:none !important;}

/* 02:50 Dilly: top nav text color follows the button background; no text-shadow on the four top buttons */
.site-header .nav > a, .site-header .nav > .nav-drop > .nav-drop-btn, .site-header .nav > .nav-drop > .dropdown-toggle, .site-header .login-open,
.nav > a, .nav > .nav-drop > .nav-drop-btn, .nav > .nav-drop > .dropdown-toggle, a.login-open, button.login-open{text-shadow:none !important;}
.nav > a:not([aria-current="page"]),
.nav > .nav-drop:not([aria-current="true"]) > .nav-drop-btn:not([aria-current="page"]),
.nav > .nav-drop:not([aria-current="true"]) > .dropdown-toggle:not([aria-current="page"]){color:#FFFFFF !important;}
.nav > a[aria-current="page"],
.nav > .nav-drop[aria-current="true"] > .nav-drop-btn, .nav > .nav-drop > .nav-drop-btn[aria-current="page"],
.nav > .nav-drop[aria-current="true"] > .dropdown-toggle, .nav > .nav-drop > .dropdown-toggle[aria-current="page"],
a.login-open, button.login-open{color:#2A1500 !important;}


/* ===== 09:10 hotfix: unclip header dropdowns, modal stacking, checkout clickability ===== */
.hub, .hub--compact{overflow:visible !important; isolation:auto !important; min-height:0 !important; height:auto !important;}
.hub-inner{overflow:visible !important;}
.hub-shade, .hub-photo, .hub-edge{display:none !important; height:0 !important;}
.site-header, .header-tools, .nav, .nav-drop, .nav-drop.dropdown{overflow:visible !important;}
.nav-drop-menu, .dropdown-menu, .nav .dropdown-menu{
  z-index:4000 !important;
  max-height:min(70vh, 28rem);
  overflow-y:auto;
  overflow-x:hidden;
}
.modal{z-index:10600 !important; pointer-events:auto !important;}
.modal-dialog, .modal-content{z-index:10610 !important; pointer-events:auto !important; position:relative;}
.modal .btn, .modal a, .modal button, .modal input, .modal select, .modal .close{
  pointer-events:auto !important; position:relative; z-index:10620;
}
.modal-backdrop, .modal-backdrop.in, .modal-backdrop.show{z-index:10500 !important; pointer-events:auto;}
#dw-cs, #dw-cs.container, body .container{isolation:auto;}
/* Checkout / basket / payment: controls stay clickable (do not complete a payment). */
body[class] #dw-cs button, body[class] #dw-cs .btn, body[class] #dw-cs select,
body[class] #dw-cs input, body[class] #dw-cs .form-control, body[class] #dw-cs a{pointer-events:auto;}
.item-wrapper img.dw-pkg-art, .modal-body img.dw-pkg-art, .panel img.dw-pkg-art{
  display:block !important; margin:0 auto 10px; max-width:220px; height:auto;
  image-rendering:pixelated;
}

.dw-account-col{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto;}
.dw-basket{font-size:7px !important;padding:8px 10px !important;white-space:nowrap;}