/* Self-hosted fonts — latin + latin-ext subsets (covers all 6 supported languages).
   Replaces the blocking Google Fonts @import; eliminates the GDPR-problematic
   request that sent user IP/UA to Google on every page load. */

/* Lato 400 normal */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-latin-ext.633f8feda218.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-400-latin.e1b3b5908c9c.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;
}

/* Lato 700 italic */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700italic-latin-ext.b716274bfcfd.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700italic-latin.865e46af8163.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;
}

/* Open Sans 400 normal */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-400-latin-ext.e1a2aef42b3c.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/open-sans-400-latin.289ab8c3689e.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;
}

/* Dark "tactical" design tokens. Bootstrap 5.3's own [data-bs-theme="dark"]
   block (in bootstrap.min.css, loaded before this file) already flips most
   components — dropdowns, form controls, tables, .text-muted — to sensible
   dark defaults. We only override the handful of --bs-* variables needed to
   swap in the site's brass/gold brand accent and a true dark background,
   plus a small set of --ps-* tokens for the custom classes below. */
:root, [data-bs-theme="dark"] {
  --ps-bg: #14171a;
  --ps-surface: #1c2024;
  --ps-surface-alt: #23282d;
  --ps-border: #2c3238;
  --ps-text: #e7e4de;
  /* Lightened from #9aa0a6 — that shade cleared WCAG AA (~6:1) but sat
     under AAA (7:1) against --ps-surface, which read as tiring/low-contrast
     for extended reading. This clears AAA against both --ps-bg and
     --ps-surface. */
  --ps-text-muted: #adb3b9;
  --ps-accent: #c9a97e;
  --ps-accent-hover: #b3906a;
  --ps-danger: #e05d4c;

  --bs-body-bg: var(--ps-bg);
  --bs-body-color: var(--ps-text);
  --bs-border-color: var(--ps-border);
  --bs-primary: var(--ps-accent);
  --bs-primary-rgb: 201, 169, 126;
  --bs-link-color: var(--ps-accent);
  --bs-link-hover-color: var(--ps-accent-hover);
}

body {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  background-color: var(--ps-bg);
}

.nav-pills .nav-link {
  color: var(--ps-text);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: var(--ps-accent);
  color: #14171a;
}

.navbar {
  background-color: var(--ps-surface);
  border-bottom: 1px solid var(--ps-border);
}

.site-footer {
  background-color: var(--ps-surface);
  border-color: var(--ps-border) !important;
}

/* Staff panel: incoming customer replies in the message thread
   (staff/contact_customer_form.html) — Bootstrap's bg-light is a light-mode
   utility that doesn't repaint text color, so it left grey text nearly
   invisible against a white background on this site's dark theme. */
.customer-message-inbound {
  background-color: var(--ps-surface-alt);
  color: var(--ps-text);
}

/* Sets Pilchu Shop text size in navigation bar. */
#nav-title {
  font-size: 1.6rem;
}

/* Custom styling for navbar title and jumbotron title instances. */
.site-title {
  font-family: 'Gunplay', sans-serif;
  color: var(--ps-accent);
  letter-spacing: 0.03rem;
}

/* Customises product card appearance. */
.product-card {
  height: 17rem;
  border: 1px solid var(--ps-border);
  border-radius: 0.5rem;
  background-color: var(--ps-surface);
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  display: flex;
  /* justify-content-start (see productcard.html) keeps the thumbnail
     pinned to the card's left edge regardless of title length; this
     padding + the information div's margin-left below give it breathing
     room and a consistent gap to the text instead. */
  padding-left: 0.75rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.product-card:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--ps-accent);
}

.product-card-image-container {
  height: 15rem;
  width: 19.5rem;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background-image: url("../img/product-card-bg.824a2973aec7.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 0.5rem;
}

.product-card-image {
  height: 9rem;
  width: 13rem;
  /* contain, not cover — matches .product-card-image-photo below so a
     plain product photo (no context layer) frames the same way a
     context+photo pair does; mixing cover/contain made some cards read as
     left-pinned and others as centered depending on which mode a given
     product used. */
  object-fit: contain;
  transition: transform 0.5s ease;
  overflow: hidden;
}

/* Increases product image size on card hover. */
.product-card:hover .product-card-image {
  transform: scale(1.5, 1.5);
}

/* A semi-transparent context overlay (e.g. a full pistol photo, so a
   close-up part reads as "attaches to this") under a transparent-cutout
   product photo, both centered over the static background painted on
   .product-card-image-container above. Both layers are independently
   centered within the container via inset:0 + margin:auto, so they don't
   need a shared wrapper. DOM order is paint order (context first =
   bottom, photo second = top). */
.product-card-image-layer {
  position: absolute;
  inset: 0;
  margin: auto;
  object-fit: contain;
}

/* Pre-sized to the photo's hover-zoomed footprint (9rem x 13rem * 1.5) so
   it reads as the "final" size the photo zooms into — it never scales
   itself, it only fades out on hover. */
.product-card-image-context {
  height: 13.5rem;
  width: 19.5rem;
  opacity: 0.92;
  transition: opacity 0.5s ease;
}

.product-card:hover .product-card-image-context {
  opacity: 0;
}

.product-card-image-photo {
  height: 9rem;
  width: 13rem;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card-image-photo {
  transform: scale(1.5, 1.5);
}

.product-card-information {
  height: 9rem;
  width: 100%;
  min-width: 0;
  margin-left: 1.5rem;
}

.product-card-information > div {
  font-family: "Lato", sans-serif;
}

.product-card-title {
  font-size: 1.2rem;
  text-transform: capitalize;
}

/* Contrasting colour for price. */
.product-card-price {
  color: var(--ps-accent);
}

/* Search bar on the product list: input + button on one line via flex
   instead of grid columns (which overflowed 12 cols and wrapped the
   button below on narrow screens). Button collapses to icon-only on
   mobile to save width — see .product-search-btn-label below. */
.product-search-form {
  width: 100%;
}

@media (min-width: 768px) {
  .product-search-form {
    width: auto;
    max-width: 22rem;
  }
}

.product-search-input {
  flex: 1 1 auto;
  min-width: 0;
}

.product-search-btn {
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .product-search-btn-label {
    display: none;
  }
}

/* Product grid is single-column below 1024px (see productslist.html
   .product-grid-col) and two-column at/above it — a custom breakpoint,
   not a Bootstrap one, so it's handled here rather than via col-sm-6/etc. */
@media (min-width: 1024px) {
  .product-grid-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Product cards are single-column below 1024px, leaving little width
   beside the title. Scale every thumbnail dimension down together
   (~0.5x) so the image stays a fixed, consistent size across cards
   instead of getting squeezed differently per card depending on title
   length. */
@media (max-width: 1023px) {
  .product-card {
    height: 8.5rem;
    padding-left: 0.5rem;
  }

  .product-card-image-container {
    height: 7.5rem;
    width: 9.75rem;
  }

  .product-card-image {
    height: 4.5rem;
    width: 6.5rem;
  }

  .product-card-image-context {
    height: 6.75rem;
    width: 9.75rem;
  }

  .product-card-image-photo {
    height: 4.5rem;
    width: 6.5rem;
  }

  .product-card-information {
    height: 4.5rem;
    margin-left: 1.1rem;
  }

  .product-card-title {
    font-size: 1rem;
  }
}

/* Short intro/tagline shown above the printing/model tabs on the
   product list, explaining what that category is for. */
.products-list-intro {
  max-width: 42rem;
  margin: 0.5rem auto 0;
  padding: 1rem 1.5rem;
  border: 2px solid var(--ps-accent);
  border-radius: 0.5rem;
  font-size: 1.15rem;
  color: var(--ps-text-muted);
}

/* Styling of pagination buttons for contrast. */
.pagination-btn {
  background-color: var(--ps-surface-alt);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--ps-border);
  border-radius: 0.5rem;
  color: var(--ps-text);
}

.pagination-btn > i {
  color: var(--ps-text);
}

.pagination-btn:hover {
  background-color: var(--ps-accent);
  color: #14171a;
}
.pagination-btn:hover > i {
  color: #14171a;
}

/* Custom button styling to suit site theme. */
.btn-custom {
  background-color: var(--ps-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border-color: var(--ps-accent);
  color: #14171a;
  border-radius: 0.5rem;
  letter-spacing: 0.05rem;
}

.btn-custom:focus {
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 126, 0.4);
  border-color: var(--ps-accent);
}

.btn-custom:hover {
  background-color: var(--ps-accent-hover);
  border-color: var(--ps-accent-hover);
  color: #14171a;
}

/* Responsive feedback on navigation icon hover. */
.nav-item:hover > .nav-link {
  background-color: var(--ps-surface-alt);
  border-radius: 0.4rem;
}

.nav-item {
  border-radius: 0.5rem;
}

.navbar .nav-item {
  border: 1px solid var(--ps-border);
}

.nav-link {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  color: var(--ps-text) !important;
}

.fas {
  color: var(--ps-accent);
}

.fa-shopping-basket {
  font-size: 1.5rem;
}

/* Remove-from-cart action, in its own column at the right of the row. */
.cart-remove-btn {
  padding: 0.25rem 0.5rem;
}

/* Edit-configuration action for cfg_order cart items, stacked above remove. */
.cart-edit-btn {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  margin-bottom: 0.4rem;
  border-radius: 0.4rem;
  background-color: var(--ps-accent);
  color: #14171a;
  font-size: 0.8rem;
  text-decoration: none;
}

.cart-edit-btn:hover {
  background-color: var(--ps-accent-hover);
  color: #14171a;
  text-decoration: none;
}

.fa-times-circle {
  color: var(--ps-danger);
  font-size: 1.8rem;
}

.border-container {
  background: var(--ps-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--ps-border);
}

.green-border-container {
  background: var(--ps-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--ps-border);
}

/* Custom layout and overriding for table. */
th {
  padding: 1.3rem 0.2rem !important;
  font-size: 0.9rem;
}

#new-profile-credentials {
  background-color: var(--ps-surface);
  border-radius: 0.5rem;
}

/* Replacement of Bootstrap standard form input glow with the brand accent. */
.form-control:focus {
  border-color: var(--ps-accent);
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 126, 0.35);
}

/* Colours for status/tech/category badges — Bootstrap 5 dropped the
   .badge-* colour variants in favour of .text-bg-*, but templates across
   the accounts/products/cart apps still use the .badge-* names, so the
   classes are kept here mapped onto the dark palette rather than touching
   every template. */
.badge-info {
  background-color: #3b6f8f;
  color: #fff;
}
.badge-warning {
  background-color: #b8863f;
  color: #14171a;
}
.badge-primary {
  background-color: var(--ps-accent);
  color: #14171a;
}
.badge-secondary {
  background-color: var(--ps-surface-alt);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
}
.badge-success {
  background-color: #3f8f5c;
  color: #fff;
}
.badge-danger {
  background-color: var(--ps-danger);
  color: #fff;
}
.badge-light {
  background-color: var(--ps-surface-alt);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
}

#product-detail-container {
  background: var(--ps-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--ps-border);
}

#product-detail-image {
  height: 18rem;
  width: 18rem;
  object-fit: cover;
}

/* Casts shadow of container to evoke content depth. */
.depth-shadow {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Prevent layout shift when a scrollbar appears/disappears */
html {
  scrollbar-gutter: stable;
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover .product-card-image {
    transform: none;
  }
  .product-card:hover .product-card-image-photo {
    transform: none;
  }
}

.legal-card {
  background-color: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
  /* Breathing room from the navbar above — without it the card sat right
     up against the nav on every standalone form page. */
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.cart-item-thumb-wrap {
  width: 144px;
  height: 144px;
  position: relative;
}

.cart-item-thumb {
  width: 144px;
  height: 144px;
  object-fit: contain;
  background-color: #fff;
  transition: transform 0.25s ease;
  position: relative;
}

.cart-item-thumb-wrap:hover .cart-item-thumb {
  transform: scale(2);
  z-index: 10;
}

.cart-color-swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Below md, cart-contents.html stacks each item's fields into a single
   column (col-12) instead of the desktop 5-column row, since pairing
   fixed-width columns two-per-line across a wrapping flex row is fragile —
   a sub-pixel overflow on one "line" is enough to break the pairing and
   misalign/overlap the next line on some mobile browsers. A bottom border
   replaces the lost row-boundary now that columns no longer align edge-to-edge. */
@media (max-width: 767.98px) {
  .cart-item-row {
    border-bottom: 1px solid var(--ps-border);
    padding-bottom: 1rem;
  }
}

.category-bg {
  background-color: var(--ps-surface-alt);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

/* SweetAlert2's default z-index (1060) sits below the cookie-consent banner
   (z-index: 9998), so its buttons become unclickable — the banner intercepts
   the click — whenever both are visible at once (e.g. a first-time visitor
   confirming "Remove" on a cart item before dismissing the cookie banner).
   SweetAlert2 injects its own <style> tag at runtime, after this stylesheet,
   so an equal-specificity override loses the cascade tie — body-prefixed to
   win regardless of injection order. */
body .swal2-container {
  z-index: 10000;
}

/* SweetAlert2 ships its own light-mode palette; re-themed here so its
   confirm/error dialogs match the rest of the dark site instead of popping
   up as a bright white modal. */
body .swal2-popup {
  background: var(--ps-surface);
  color: var(--ps-text);
}
body .swal2-title,
body .swal2-html-container {
  color: var(--ps-text);
}
body .swal2-styled.swal2-confirm {
  background-color: var(--ps-accent) !important;
  color: #14171a !important;
}
body .swal2-styled.swal2-cancel {
  background-color: var(--ps-surface-alt) !important;
  color: var(--ps-text) !important;
}