/* ==========================================================================
   GENERIC.CSS — Default theme skin
   Loaded after shared.css when no custom store.css is set. Holds the
   store's signature decorative flourishes (HUD corner brackets, hazard
   stripe, notched CTA, atmosphere) layered on top of the design-token
   system already defined in shared.css. Keep this file light — the
   structural work lives in shared.css.
   ========================================================================== */

:root {
  --bg-image: url("https://webstore-template-assets.tebex.io/images/page-bg.jpg");
}

/* ---------- Atmospheric backdrop ---------- */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(800px 800px at 90% 20%, rgb(from var(--color-primary) r g b / 5%), transparent 70%),
    radial-gradient(900px 900px at 10% 40%, rgb(from var(--color-primary) r g b / 10%), transparent 60%),
    radial-gradient(1000px 600px at 50% 90%, rgb(from var(--color-primary) r g b / 7%), transparent 65%);
  animation: ambient-breathe 5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ambient-breathe {
  from { opacity: 0.0; }
  to { opacity: 0; }
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 720px;
  z-index: 0;
  background: var(--bg-image) center top/cover no-repeat;
  filter: grayscale(40%) brightness(0.45) contrast(1.08);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 100%) 24%, transparent 90%);
  pointer-events: none;
}
.site { position: relative; z-index: 1; }

/* ---------- Notched primary CTA (signature cut-corner armour plate) ---------- */
.btn-primary {
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px
  );
  border-radius: 0;
}

/* ---------- Logo ---------- */
.storeLogo,
.site-header-inner .site-title img {
  transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out;
}

/* ---------- HUD corner brackets on the hero single-product card ---------- */
.store-product-full {
  position: relative;
}
.store-product-full::before,
.store-product-full::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0.9;
}
.store-product-full::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-top-left-radius: var(--radius-lg);
}
.store-product-full::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-lg);
}

/* ---------- Same HUD brackets, softer, on hover for grid product cards ---------- */
.store-products-images .store-product {
  position: relative;
}
.store-products-images .store-product::before,
.store-products-images .store-product::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.store-products-images .store-product::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-top-left-radius: var(--radius-lg);
}
.store-products-images .store-product::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-lg);
}
.store-products-images .store-product:hover::before,
.store-products-images .store-product:hover::after {
  opacity: 1;
}

/* ---------- Accent bar + hover lift for list-row products (no brackets — row is too short/wide for them) ---------- */
.store-products-list .store-product {
  position: relative;
  transition: 0.2s ease-in-out;
}
.store-products-list .store-product::before,
.store-products-list .store-product::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
}
.store-products-list .store-product::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-top-left-radius: var(--radius-lg);
}
.store-products-list .store-product::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-lg);
}

.store-products-list .store-product:hover::before,
.store-products-list .store-product:hover::after{
  opacity: 1;
}

.store-products-list .store-product:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}


/* ---------- HUD corner brackets on the basket drawer header ---------- */
.basket .basket-header {
  position: relative;
}
.basket .basket-header::after {
  content: "";
  position: absolute;
  left: var(--content-padding);
  right: var(--content-padding);
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--color-primary), transparent 60%);
  opacity: 0.6;
}

/* ---------- Hazard-stripe accent on the sale banner ---------- */
.site-sale-banner {
  position: relative;
  overflow: hidden;
}
.site-sale-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgb(0 0 0 / 10%) 0 10px,
    transparent 10px 20px
  );
  pointer-events: none;
}
.site-sale-banner > * {
  position: relative;
  z-index: 1;
}

/* ---------- Home category tiles removed: this duplicated the exact same
   links as the sidebar nav list one section down. See .site-brief below —
   that's the new section filling this space. Twig side: in index.html,
   swap out the include/block that renders the .site-home-categories grid
   for the .site-brief markup (snippet provided separately). ---------- */
.site-home-categories {
  display: none;
}

/* ---------- HUD corner brackets on sidebar widgets (TOP CUSTOMER, RECENT PAYMENTS, etc) ---------- */
.widget {
  position: relative;
}
.widget::before,
.widget::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 1;
}
.widget::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-top-left-radius: var(--radius-md);
}
.widget::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-md);
}

/* ---------- Section heading accent bar (moduleTitle) ---------- */
.moduleTitle {
  position: relative;
  padding: 10px 16px;
  color: var(--color-primary);
  background: linear-gradient(to right, rgb(from var(--color-primary) r g b/0.24) 0%, rgb(from var(--color-primary) r g b/0.1) 50%, rgb(from var(--color-primary) r g b/0.24) 100%);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-primary);
  text-transform: uppercase;
  text-align: center;
}
.moduleTitle::before,
.moduleTitle::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.moduleTitle::before {
  top: 4px;
  left: 4px;
  border-top: 3px solid var(--color-primary);
  border-left: 3px solid var(--color-primary);
  border-top-left-radius: var(--radius-md);
}
.moduleTitle::after {
  bottom: 4px;
  right: 4px;
  border-bottom: 3px solid var(--color-primary);
  border-right: 3px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-md);
}

/* ---------- Empty-state widget copy reads less like a placeholder ---------- */
.widget-recent .empty,
.widget-top-donator .empty {
  padding: 8px 0;
  font-size: 13px;
  font-style: italic;
  opacity: 0.8;
}

/* ---------- Countdown / discount tags read like stencilled ammo-crate labels ---------- */
.store-product .price strong,
.store-product-full .price strong,
.store-product-tiered .price strong,
.basket .basket-item .price strong,
.basket .basket-checkout .total strong {
  font-variant-numeric: tabular-nums;
}

/* ---------- Server status badge dot colours ---------- */
.widget-server-status .badge-success { color: var(--color-success); }
.widget-server-status .badge-danger { color: var(--color-danger); }


/* ---------- Scrollbar accent inside popups ---------- */
.popup-content::-webkit-scrollbar,
.site-navigation .menu::-webkit-scrollbar {
  width: 6px;
}
.popup-content::-webkit-scrollbar-thumb,
.site-navigation .menu::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

/* ---------- Briefing strip: replaces the old home-category tiles ---------- */
.site-brief {
  position: relative;
  margin: 0 auto;
  padding: 0 var(--content-padding);
  margin-top: 80px !important;
  width: 100%;
  z-index: 1;
}
@media (width > 960px) {
  .site-brief { max-width: var(--content-width); }
}
.site-brief-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.site-brief-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--color-primary);
}
.site-brief-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--widget-padding);
}
.site-brief-item {
  position: relative;
  padding: var(--widget-padding);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  flex: 1 1 280px;
  transition: border-color 0.2s ease-in-out, translate 0.2s ease-in-out;
}
.site-brief-item:hover {
  border-color: var(--color-border-strong);
  translate: 0 -2px;
}
.site-brief-item::before,
.site-brief-item::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
}
.site-brief-item::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-top-left-radius: var(--radius-md);
}
.site-brief-item::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom-right-radius: var(--radius-md);
}
.site-brief-item:hover::before,
.site-brief-item:hover::after {
  opacity: 1;
}
.site-brief-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  background: radial-gradient(circle at center, rgb(from var(--color-primary) r g b/0.14), transparent 72%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}
.site-brief-icon svg { width: 20px; height: 20px; }
.site-brief-item h3 {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-darker);
}
.site-brief-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ---------- Mobile refinements ---------- */
@media (width <= 960px) {
  .site-content-widgets {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
  }
  .store-product-full::before,
  .store-product-full::after {
    width: 16px;
    height: 16px;
  }
}

@media (width <= 600px){
    body::after { height: 600px !important; }
}
.hideElement{
    display: none !important;
}

.popup.drawer .store-product-full.popup-content::after {
    top: auto !important; 
    left: auto !important;
    
    width: 16px !important;
    height: 16px !important;
    
    bottom: -1px !important;
    right: -1px !important;
    margin-inline: 0 !important;
    
    background: transparent !important;
    border-bottom: 2px solid var(--color-primary) !important;
    border-right: 2px solid var(--color-primary) !important;
    border-radius: 0 !important;
    border-bottom-right-radius: var(--radius-lg) !important;
}