/* ==========================================================================
   wickd. — be uncommon.
   Monochrome design system: #000 / #fff, square corners, Helvetica stack.
   Loads AFTER css/ectcart.css so every rule here wins by cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset + tokens
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --ink: #000000;          /* primary — customer's chosen color */
  --ink-rgb: 0, 0, 0;      /* --ink as r,g,b for rgba() box-shadows below */
  --paper: #ffffff;        /* secondary — customer's chosen color */
  --surface: #f5f5f5;
  --surface-dark: #111111;
  --border: #e4e4e4;
  --border-dark: #2c2c2c;
  --text: #111111;
  --muted: #757575;
  --muted-dark: #9a9a9a;
  --container: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label-ls: 0.12em;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

body.lightbox-open {
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 300;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding: 56px 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 26px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-more {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;
}

.section-more:hover {
  color: var(--muted);
  border-bottom-color: var(--muted);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-solid {
  background: var(--ink);
  color: var(--paper);
}

.btn-solid:hover {
  background: var(--paper);
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ECT buttons (add to cart, checkout, etc.) — kill the stock #006ABA blue. */
input.ectbutton,
button.ectbutton,
input[type="button"].ectbutton,
input[type="submit"].ectbutton {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--font);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

input.ectbutton:hover,
button.ectbutton:hover,
input[type="button"].ectbutton:hover,
input[type="submit"].ectbutton:hover {
  background: var(--paper);
  color: var(--ink);
}

input[type="button"].ectbutton:disabled,
input[type="submit"].ectbutton:disabled,
button.ectbutton:disabled {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   4. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}

#main-nav {
  position: relative; /* anchor for the absolutely positioned utils/cart */
  display: flex;
  align-items: center;
  justify-content: center; /* centers only .nav-menu-links */
  flex: 1;
  min-height: 64px;
}

.nav-menu-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.nav-menu-links a {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}

.nav-menu-links a:hover,
.nav-menu-links a.active {
  border-bottom-color: var(--ink);
}

/* Utility cluster (search / account / cart) pulled out of the flow so the
   nav links stay visually centered regardless of the cart button's width. */
.nav-utils {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Inline SVG icons (replaced Font Awesome — no render-blocking web font). */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex: none;
}

.util-account {
  color: var(--ink);
  font-size: 1rem;
  text-decoration: none;
  padding: 0.3rem;
}

.util-account:hover {
  color: var(--muted);
}

/* Hamburger + mobile icon bar — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-icons {
  display: none;
  align-items: center;
  gap: 0.4rem;
}

.mobile-icon-style {
  color: var(--ink);
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.45rem;
}

/* --------------------------------------------------------------------------
   5. Header search pill + live suggestions
   -------------------------------------------------------------------------- */
.util-search-wrap {
  position: relative; /* anchors the dropdown below */
}

.util-search {
  display: flex;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  width: 170px;
  transition: width 0.25s, box-shadow 0.2s;
}

.util-search:focus-within {
  width: 230px;
  box-shadow: 0 0 0 3px rgba(var(--ink-rgb), 0.15);
}

.util-search-icon {
  color: var(--ink);
  font-size: 0.8rem;
  margin-right: 0.5rem;
}

.util-search input[type="text"] {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.8rem;
  outline: none;
  width: 100%;
  padding: 0;
}

.util-search input[type="text"]::placeholder {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: var(--label-ls);
}

.util-search button {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  position: absolute;
}

.search-suggest-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.18);
  z-index: 150; /* above the sticky header (100) */
}

.ssr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
}

.ssr-row:hover,
.ssr-row.is-selected {
  background: var(--surface);
}

.ssr-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.ssr-name {
  color: var(--text);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssr-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.ssr-footer a {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.ssr-footer a:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Hover mini-cart (ECT incminidropdowncart.php)
   Neutralize the vendor's stock-template positioning, then theme it.
   -------------------------------------------------------------------------- */
.nav-cart-dropdown {
  position: relative;
  flex-shrink: 0;
}

.nav-cart-dropdown .ectdp_minicartmainwrapper_ct {
  position: relative;
  width: auto;
}

.nav-cart-dropdown .ectdp_minicartmainwrapper {
  position: static;
  right: auto;
}

.nav-cart-dropdown .ectdp_minicartopen {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  float: none;
  clear: none;
  width: auto;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.45rem 1rem;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  transition: background 0.15s;
}

.nav-cart-dropdown .ectdp_minicartopen:hover {
  background: var(--paper);
}

/* Vendor ships a raster arrow icon; the FA glyph below replaces it. */
.nav-cart-dropdown .ectdp_minicartopen > img {
  display: none;
}

.nav-cart-dropdown .ectdp_minicartopen a,
.nav-cart-dropdown .ectdp_minicartopen .ectMCquant {
  color: var(--paper) !important;
  text-decoration: none;
}

.nav-cart-dropdown .ectdp_minicartopen:hover a,
.nav-cart-dropdown .ectdp_minicartopen:hover .ectMCquant {
  color: var(--ink) !important;
}

.nav-cart-dropdown .ectdp_minicartopen a::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45rem;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.2 11a2 2 0 0 0 2 1.6h8a2 2 0 0 0 2-1.6L23 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.2 11a2 2 0 0 0 2 1.6h8a2 2 0 0 0 2-1.6L23 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Panel. Vendor rows are floats at fixed widths: 60 image + 5 margin +
   208 name + 24 delete = 297px. With the border-box reset, width must also
   cover the panel's own padding (2 x 14px) — 336px gives a small buffer. */
.nav-cart-dropdown .ectdp_minicartcontainer {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  margin-top: 0.4rem;
  width: 336px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(var(--ink-rgb), 0.2);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.nav-cart-dropdown .ectdp_pincart {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  color: var(--ink);
  text-align: left;
}

.nav-cart-dropdown .ectdp_minicartitemName {
  color: var(--text);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}

.nav-cart-dropdown .ectMCtot {
  color: var(--muted);
}

.nav-cart-dropdown .ectdp_minicarttotal {
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: none;
  padding: 0.6rem 0 0.2rem;
  margin-top: 0.4rem;
  margin-right: 0;
  text-align: right;
  font-size: 0.95em;
}

.nav-cart-dropdown .ectdp_minicarttotal .ectMCtot {
  color: var(--ink);
}

.nav-cart-dropdown .ectdp_empty {
  color: var(--muted);
  font-size: 0.82rem;
}

.nav-cart-dropdown button.ectbutton {
  padding: 0.45rem 0.9rem;
  font-size: 0.68rem;
}

.nav-cart-dropdown button.dpminicartclose {
  background: var(--paper);
  color: var(--ink);
}

.nav-cart-dropdown button.dpminicartclose:hover {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   7. Homepage
   -------------------------------------------------------------------------- */
.hero {
  border-bottom: 1px solid var(--border);
  padding: 90px 0 70px;
  text-align: center;
}

.hero-kicker {
  margin: 0 0 1.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--muted);
}

.hero h1 {
  margin: 0;
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.hero-sub {
  margin: 1.6rem auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.02rem;
}

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Animated shader hero — black canvas background behind the existing hero
   copy, grayscale-filtered to stay inside the site's monochrome system.
   Falls back to a flat --ink background if JS/WebGL2 never paints it. */
.hero-shader {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  background: var(--ink);
  color: var(--paper);
}

.hero-shader-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) contrast(1.15) brightness(0.85);
}

.hero-shader .hero-inner {
  position: relative;
  z-index: 1;
}

.hero-shader .hero-kicker {
  color: var(--muted-dark);
}

.hero-shader .hero-sub {
  color: #cfcfcf;
}

/* Buttons sit on black — invert the solid button, same pattern as the
   footer (see .site-footer .btn-solid). */
.hero-shader .btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.hero-shader .btn-solid:hover {
  background: var(--ink);
  color: var(--paper);
}

.hero-shader .btn-outline {
  color: var(--paper);
  border-color: var(--paper);
}

.hero-shader .btn-outline:hover {
  background: var(--paper);
  color: var(--ink);
}

.hero-shader .hero-kicker,
.hero-shader h1,
.hero-shader .hero-sub,
.hero-shader .hero-actions {
  opacity: 0;
  animation: hero-fade-up 0.8s ease-out forwards;
}

.hero-shader .hero-kicker {
  animation-name: hero-fade-down;
  animation-delay: 0.1s;
}

.hero-shader h1 {
  animation-delay: 0.25s;
}

.hero-shader .hero-sub {
  animation-delay: 0.45s;
}

.hero-shader .hero-actions {
  animation-delay: 0.65s;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shader .hero-kicker,
  .hero-shader h1,
  .hero-shader .hero-sub,
  .hero-shader .hero-actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.statement-band {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: 54px var(--gutter);
}

.statement-band p {
  margin: 0 auto;
  max-width: var(--container);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Poster grid (homepage preview + gallery page) */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.poster-grid-full {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.poster-tile {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--ink);
}

.poster-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.poster-tile:hover img {
  transform: scale(1.03);
  opacity: 0.92;
}

.gallery-empty,
.home-shop-empty {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Homepage shop strip */
.home-prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.home-prod-card {
  display: block;
  text-decoration: none;
  color: var(--text);
}

.home-prod-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.home-prod-card:hover .home-prod-img {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.15);
}

.home-prod-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.home-prod-card:hover .home-prod-img img {
  transform: scale(1.04);
}

.home-prod-name {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.home-prod-price {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   8. Page head band
   -------------------------------------------------------------------------- */
.page-head {
  border-bottom: 1px solid var(--border);
  padding: 44px 0 30px;
}

.page-head h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page-head-sub {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   9. About page
   -------------------------------------------------------------------------- */
.about-inner {
  max-width: 860px;
}

.about-lede {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 2rem;
}

.about-body p {
  max-width: 62ch;
  margin: 0 0 1.2rem;
  color: var(--text);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 2.6rem 0;
}

.about-value {
  border: 1px solid var(--ink);
  padding: 1.1rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
}

.about-cle {
  background: var(--ink);
  color: var(--paper);
  padding: 2rem 2.2rem;
  margin: 2.6rem 0;
}

.about-cle h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.about-cle p {
  margin: 0;
  color: var(--muted-dark);
  max-width: 58ch;
}

.about-cta {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   10. Gallery lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(var(--ink-rgb), 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: min(92vw, 900px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border: 1px solid var(--border-dark);
  background: var(--ink);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font);
  line-height: 1;
  padding: 0.6rem 1rem;
  transition: opacity 0.15s;
  opacity: 0.75;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
}

.lightbox-close {
  top: 14px;
  right: 14px;
  font-size: 2.2rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.4rem;
}

.lightbox-prev {
  left: 8px;
}

.lightbox-next {
  right: 8px;
}

/* --------------------------------------------------------------------------
   11. ECT regions (products, cart, search, account, …)
   -------------------------------------------------------------------------- */
div.catnavandcheckout {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  color: var(--muted);
  margin: 0 0 1.2rem;
}

div.catnavandcheckout a {
  color: var(--muted);
  text-decoration: none;
}

div.catnavandcheckout a:hover {
  color: var(--ink);
}

.ect-region {
  min-height: 40vh;
}

.ect-region a {
  color: var(--ink);
}

.ect-region img {
  max-width: 100%;
  height: auto;
}

.ect-region input[type="text"],
.ect-region input[type="email"],
.ect-region input[type="password"],
.ect-region input[type="search"],
.ect-region input[type="tel"],
.ect-region input.ecttextinput,
.ect-region select,
.ect-region textarea {
  font-family: var(--font);
  font-size: 0.9rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.5rem 0.7rem;
  max-width: 100%;
}

.ect-region input:focus,
.ect-region select:focus,
.ect-region textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.ect-region table {
  border-collapse: collapse;
  max-width: 100%;
}

.ect-region table td,
.ect-region table th {
  padding: 0.5rem 0.6rem;
}

/* Product/category grid tiles: hover lift + border + image zoom */
div.category,
div.product {
  border: 1px solid var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

div.category:hover,
div.product:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.15);
}

div.category img,
div.prodimage img {
  transition: transform 0.25s ease;
}

div.category:hover img,
div.product:hover div.prodimage img {
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   12. Footer + newsletter
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--muted-dark);
  margin-top: 72px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.6fr;
  gap: 40px;
}

.footer-col h4 {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--label-ls);
  color: var(--paper);
}

.footer-col a {
  display: block;
  color: var(--muted-dark);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 0.55rem;
}

.footer-col a:hover {
  color: var(--paper);
}

.footer-mark {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 0.7rem;
}

.footer-brand p {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 34ch;
}

.footer-social {
  display: flex;
  gap: 0.4rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-dark);
  color: var(--paper);
  font-size: 1rem;
  margin-bottom: 0;
  transition: background 0.15s, color 0.15s;
}

.footer-social a:hover {
  background: var(--paper);
  color: var(--ink);
}

.footer-newsletter p {
  font-size: 0.82rem;
  color: var(--muted-dark);
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.footer-newsletter form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-newsletter-input {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--font);
  font-size: 0.85rem;
  padding: 0.6rem 0.8rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}

.footer-newsletter-input::placeholder {
  color: var(--muted-dark);
}

/* Focus accent uses the customer's secondary (#fff) — the primary #000 is
   invisible against the black footer. */
.footer-newsletter-input:focus {
  border-color: var(--paper);
}

/* Footer buttons sit on black — invert the solid button. */
.site-footer .btn-solid {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  align-self: flex-start;
}

.site-footer .btn-solid:hover {
  background: var(--ink);
  color: var(--paper);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-dark);
  margin-top: 44px;
  padding-top: 22px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-stamp {
  color: var(--paper);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .poster-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-prod-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile header switches below 1200px — under that, the absolute-positioned
   search/cart cluster collides with the centered nav links. */
@media (max-width: 1199px) {
  /* Mobile header: hamburger (left) · logo (center) · icon bar (right) */
  .header-inner {
    gap: 0.5rem;
    min-height: 56px;
    position: relative;
  }

  .nav-toggle {
    display: block;
    order: 1;
  }

  .brand {
    order: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    text-align: center;
  }

  .mobile-icons {
    display: flex;
    order: 3;
    margin-left: auto;
  }

  #main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    padding: 0.6rem 0 1rem;
    min-height: 0;
  }

  #main-nav.nav-open {
    display: block;
  }

  .nav-menu-links {
    flex-direction: column;
    gap: 0;
  }

  .nav-menu-links a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.85rem 0;
    border-bottom: none;
    font-size: 0.85rem;
  }

  /* Desktop-only cart + search: the mobile icon bar replaces them. */
  #main-nav .nav-utils {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 64px 0 52px;
  }

  .hero-shader {
    min-height: 360px;
  }

  .section {
    padding: 40px 0;
  }

  .poster-grid,
  .poster-grid-full {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .home-prod-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .about-values {
    grid-template-columns: 1fr;
  }

  .about-cle {
    padding: 1.5rem 1.4rem;
  }

  .lightbox-prev,
  .lightbox-next {
    font-size: 2.4rem;
    padding: 0.4rem 0.5rem;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .statement-band {
    padding: 40px var(--gutter);
  }

  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   13. Receipt / thank-you page (ECT do_order_success markup)
   thanks.php, clientlogin.php, orderstatus.php, latedownload.php
   -------------------------------------------------------------------------- */
div#printcontent.recptbody { width:100%; box-sizing:border-box; font-size:0.95rem; color:var(--text); line-height:1.5; font-family:var(--font); }

div.receiptaddresses { width:100%; box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:stretch; margin:0 0 1rem; }
div.receiptaddress { flex:0 1 auto; min-width:48%; }
div.receiptaddress, div.receiptextra, div.receiptdownload { box-sizing:border-box; background:var(--paper); border:1px solid var(--border); border-radius:0; margin:0.25rem 0.5%; padding:0 0 0.5rem; overflow:hidden; }
div.receiptextra { margin:0.5rem 0.5%; }

div.receiptsectionhead { box-sizing:border-box; text-align:center; font-family:var(--font); font-weight:700; letter-spacing:var(--label-ls); text-transform:uppercase; color:var(--paper); background:var(--ink); border-bottom:none; padding:0.5rem 0; margin:0 0 0.6rem; }

div.receiptcontainer { overflow:hidden; padding:0 0.6rem; font-size:0.92rem; }
div.receiptleft { float:left; box-sizing:border-box; width:33%; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); font-size:0.72rem; color:var(--muted); text-align:right !important; padding:0.3rem 0.5rem 0.3rem 0; }
div.receiptleft::after { content:" : "; }
div.receiptright { float:left; width:auto; text-align:left; color:var(--text); padding:0.3rem 0; }
div.receiptaddress div.receiptcontainer div.receiptleft { text-align:left; padding-left:0; color:var(--text); }

div.rcontorderid { font-family:var(--font); font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--paper); background:var(--ink); border:1px solid var(--ink); border-radius:0; padding:0.5rem 0.75rem; margin:0 0.5% 0.75rem; }
div.rcontorderid > div.receiptleft { color:var(--muted-dark); }
div.rcontorderid > div.receiptright { color:var(--paper); font-weight:700; }
div.rcontaddinfo { margin:0.5rem 0 0; }

div.receiptlist, div.downloadlist { display:table; box-sizing:border-box; width:99%; margin:0.75rem 0.5% 0; background:var(--paper); border:1px solid var(--border); border-radius:0; overflow:hidden; }
div.receiptlist { text-align:left; }
div.receiptheadrow, div.downloadheadrow { display:table-row; line-height:1.8; font-family:var(--font); font-size:0.72rem; font-weight:700; letter-spacing:var(--label-ls); text-transform:uppercase; color:var(--paper); background:var(--ink); }
div.receiptlistrow, div.downloadlistrow { display:table-row; font-size:0.92rem; }
div.receiptheadrow>div, div.downloadheadrow>div, div.receiptlistrow>div, div.downloadlistrow>div { display:table-cell; vertical-align:top; padding:0.5rem 0.6rem; }
div.thankspageimg { text-align:left; display:inline-block; }
div.thankspageimg img.thankspageimg { max-width:90px; width:auto; max-height:100px; height:auto; border-radius:0; border:1px solid var(--border); }
div.receiptquantity { text-align:center; }
div.receiptunitprice, div.receiptoption.receiptoptunitprice, div.receipttotal, div.receiptoption.receiptopttotal { text-align:right; white-space:nowrap !important; }
div.receiptitemrow>div, div.downloadlistrow>div { border-top:1px solid var(--border); }
div.receiptoptionrow>div { line-height:1.8; }
div.receiptoption { font-size:0.85rem; color:var(--muted); background:var(--surface); }
div.receiptoptgroup { text-align:right; padding-right:0.75rem; color:var(--muted); }
div.receiptoptgroup::after { content:" "; }

div.receipttotalscolumn { overflow:auto; margin-top:0.6rem; }
div.receipttotalstable { display:block; box-sizing:border-box; white-space:nowrap; width:auto; max-width:99%; float:right; line-height:2; margin:0 0.5% 0.75rem; }
div.receipttotalsrow { display:block; text-align:right; }
div.receipttotalsrow>div { display:inline-block; padding:0; }
div.rectotsubtotal div, div.rectotshiphand div, div.rectotstatetax div, div.rectotdiscounts div, div.rectotgrandtotal div { display:inline-block; }
div.receipttotalsrow div.ectright { min-width:95px; text-align:right; color:var(--text); }
div.receipttotalsrow div.ectleft { color:var(--muted); text-transform:uppercase; letter-spacing:var(--label-ls); font-size:0.78rem; }
div.receipttotalsrow div.ectright p { margin:0; }
div.rectotgrandtotal { font-family:var(--font); font-size:1.15rem; font-weight:700; }
div.rectotgrandtotal div.ectleft { color:var(--text); text-transform:uppercase; letter-spacing:var(--label-ls); font-size:0.85rem; }
div.rectotgrandtotal div.ectright { color:var(--ink); }
div.receipttotalsrow.rectotgrandtotal > div.ectright { border-top:1px solid var(--border); border-bottom:3px double var(--ink); }
div.rectotdiscounts div.ectright { color:#DA6A1E; }

div.receiptshippingaddress { float:right; }
div.receiptpackage { display:table; font-size:0.85rem; color:var(--muted); }
div.receiptpackagerow { display:table-row; }
div.receiptpackagerow>div { display:table-cell; padding:2px; }
div.receiptpackagerow div.ectleft::before { content:" > "; }
div.receiptpackagerow div.ectleft::after { content:": "; }
div.receiptrecemail { font-weight:700; font-style:italic; color:var(--text); }

div.receiptbuttons { padding:1rem 0; text-align:center; }
div.receiptcontinueshopping, div.receiptprintversion { padding:0.6rem; width:50%; float:left; box-sizing:border-box; }
div.receiptcontinueshopping { text-align:right; } div.receiptprintversion { text-align:left; }

div.receiptdownloadhead, div.downloadheadrow { color:var(--paper); background:var(--ink); }
div.receiptdownload { margin-bottom:0.75rem; }
div.receiptnodownloadtext { margin:1rem; color:var(--muted); }
div.receiptsectionhead.latedownloadhead { color:var(--ink); background:transparent; border-bottom:none; text-align:left; padding:0 0 0 24%; margin:0; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); }
div.downloadlist.latedownloadlist, div.downloadlistrow.latedownloadlistrow { border:none; background:transparent; }
div.downloadlistrow.latedownloadlistrow > div:first-child { border:none; text-align:right; padding-right:0.3em; width:27%; color:var(--muted); }
div.downloadlistrow.latedownloadlistrow > div:nth-child(2) { border:none; text-align:left; width:73%; }
div.downloadlistrow.latedownloadlistrow > div:nth-child(2) input { width:auto; }
div.latedownloadbuttons { padding:0.6rem 0; }

@media screen and (max-width:640px){
  div#printcontent.recptbody { font-size:0.92rem; }
  div.receiptaddresses { flex-direction:column; }
  div.receiptaddress { min-width:99%; width:auto; }
  div.receiptshippingaddress { float:none; }
  div.receiptprodid, div.receiptoptgroup { display:none !important; }
}
@media print{
  body { font-size:12px; background:#fff; color:#000; }
  div#printcontent.recptbody { color:#000; }
  div.receiptsectionhead, div.rcontorderid, div.receiptheadrow, div.downloadheadrow { background-color:rgba(0,0,0,0.1)!important; color:#000!important; border-color:rgba(0,0,0,0.25)!important; }
  div.receiptaddress, div.receiptextra, div.receiptdownload, div.receiptlist, div.downloadlist { background:#fff!important; border-color:rgba(0,0,0,0.25)!important; }
  div.receiptleft, div.receiptright, div.receipttotalsrow div.ectright, div.rectotgrandtotal div.ectright { color:#000!important; }
  div.receiptoption { background-color:rgba(0,0,0,0.03)!important; color:#000!important; }
  a[href]:after { content:none!important; }
}

/* --------------------------------------------------------------------------
   14. Product reviews (proddetail.php, incproddetail.php showreviews())
   -------------------------------------------------------------------------- */
div.largereviewstars svg.icon, div.smallreviewstars svg.icon { fill:var(--ink); }

div.reviews { margin-top:1rem; }
div.reviewtotals { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 0.6rem; font-family:var(--font); font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--text); background:var(--surface); border:1px solid var(--border); padding:0.75rem 1rem; margin-bottom:1.25rem; }
div.reviewtotals .count, div.reviewtotals .rating.average { color:var(--ink); }
span.showallreview a, a.readreview, a.showallreview { color:var(--ink); text-decoration:none; text-transform:none; letter-spacing:normal; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:1px; }
span.showallreview a:hover, a.readreview:hover, a.showallreview:hover { color:var(--muted); border-bottom-color:var(--muted); }

div.reviewscontainer { display:flex; flex-direction:column; gap:1rem; margin:0.5rem 0 1.25rem; }
div.ecthreview { background:var(--paper); border:1px solid var(--border); padding:1rem 1.15rem; }
div.ecthreview div.reviewstarsheader { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
div.ecthreview span.rating { display:inline-flex; align-items:center; }
div.ecthreview span.reviewheader { font-family:var(--font); font-weight:700; font-size:1rem; color:var(--ink); }
div.ecthreview div.reviewname { font-size:0.78rem; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--muted); margin-bottom:0.6rem; }
div.ecthreview span.reviewer { color:var(--text); font-weight:700; }
div.ecthreview div.reviewcomments { color:var(--text); font-size:0.95rem; line-height:1.7; }
span.extracommentsdots { color:var(--ink); font-weight:700; cursor:pointer; }
div.clickreview { text-align:center; margin:1rem 0; }
div.noreview { color:var(--muted); font-style:italic; text-align:center; }

/* Cart prints "Click to review" above AND below the list; keep only the lower one. */
div.reviews div.reviewtotals + div.clickreview { display:none; }
/* Approved ratings with no comment text still render a card; hide the empty shell. */
div.ecthreview:has(div.reviewcomments:empty) { display:none; }

/* --------------------------------------------------------------------------
   15. Product detail tabs (description / reviews panels)
   -------------------------------------------------------------------------- */
div.TabbedPanelsContentGroup { background:var(--paper); border:1px solid var(--border); border-radius:0; color:var(--text); }
ul.TabbedPanelsTabGroup { display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:0; }
ul.TabbedPanelsTabGroup > li.TabbedPanelsTab { font-family:var(--font); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:var(--label-ls); background:var(--surface); border:1px solid var(--border); border-radius:0; color:var(--text); padding:0.6rem 1.1rem; cursor:pointer; transition:background 0.15s, color 0.15s; }
ul.TabbedPanelsTabGroup > li.TabbedPanelsTab:hover { background:var(--ink); color:var(--paper); }
ul.TabbedPanelsTabGroup > li.TabbedPanelsTabSelected { background:var(--ink); color:var(--paper); border-color:var(--ink); }
div.tabpanelcontent { padding:1.25rem; line-height:1.75; }

/* --------------------------------------------------------------------------
   16. Checkout steps (cart.php accordion headers)
   -------------------------------------------------------------------------- */
div.ectdivhead, div.checkoutsteps { background:var(--surface); border:1px solid var(--border); border-radius:0; color:var(--text); font-family:var(--font); padding:0.6rem 0.75rem; margin-bottom:0.6rem; }
div.checkoutstep { font-family:var(--font); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--muted); }
div.checkoutstep.checkoutstepof3 { color:var(--ink); }
div.cartname, div.loginheader { color:var(--ink); font-family:var(--font); font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); font-size:0.85rem; }
div.softformsend, div.clientloginmessage, div.cartloginsuccess { color:var(--text); }

/* --------------------------------------------------------------------------
   17. Quick-buy / soft-cart popup (products.php inline add-to-cart modal)
   -------------------------------------------------------------------------- */
div.scwrap, div.qbuywrapper, div.iuwrap { background:var(--paper); border:1px solid var(--ink); box-shadow:0 16px 48px rgba(var(--ink-rgb), 0.25); color:var(--text); }
div.scprice, div.sccarttotal { background:var(--surface); border-top:1px solid var(--border); color:var(--ink); font-weight:700; }
div.scprodname, div.qbuywrapper div.prodname { color:var(--ink); font-weight:700; }
div.sccartdscnt { color:var(--muted); }
div.qbopaque, div.iuopaque, div.ectopaque { background:rgba(var(--ink-rgb), 0.6); }
div.opaqueinner { background:var(--paper); border:1px solid var(--border); box-shadow:0 16px 48px rgba(var(--ink-rgb), 0.3); }
div.qbuywrapper div.scclose:hover { opacity:0.6; }

/* --------------------------------------------------------------------------
   18. Categories page — full vendor class set (categories.php)
   Reference: ecommercetemplates.com/help/css-layouts.asp
   -------------------------------------------------------------------------- */
div.categorymessage { color:var(--muted); font-size:0.9rem; margin:0 0 1.2rem; }
div.catnavigation, div.navdesc { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--muted); margin:0 0 1rem; }
div.catnavigation a, div.navdesc a { color:var(--muted); text-decoration:none; }
div.catnavigation a:hover, div.navdesc a:hover { color:var(--ink); }
div.allcatdiscounts, div.catdiscounts { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--ink); margin:0.3rem 0; }
div.category { padding:0.9rem; display:flex; flex-direction:column; }
div.catimage { display:flex; align-items:center; justify-content:center; height:200px; overflow:hidden; }
div.catimage img { max-height:100%; width:auto; object-fit:contain; }
div.catname { font-weight:700; font-size:0.95rem; margin-top:0.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
div.catname a { color:var(--ink); text-decoration:none; }
div.catdesc { color:var(--muted); font-size:0.82rem; line-height:1.5; margin-top:0.3rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* --------------------------------------------------------------------------
   19. Products page — full vendor class set (products.php) + pagination
   -------------------------------------------------------------------------- */
div.catheader { font-family:var(--font); font-weight:700; font-size:1.1rem; margin:0 0 1rem; }
div.prodid, div.prodmanufacturer, div.prodsku { font-size:0.7rem; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--muted); }
/* div.products is display:flex (see ectcart.css); flex stretches items to equal
   height per row by default, but nothing capped the image or clamped the name,
   so cards with longer text grew taller than their row neighbors. */
div.product { padding:0.9rem; display:flex; flex-direction:column; }
/* Verified against live markup: every product's content (image, name,
   description, options, price, button) is wrapped in an unclassed <form>
   that sits directly inside div.product — so div.addtocart's real parent is
   that <form>, not div.product, and margin-top:auto on it did nothing. Make
   the form itself a flex column that fills div.product's full height. */
div.product > form { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
div.prodimage { display:flex; align-items:center; justify-content:center; height:200px; overflow:hidden; }
div.prodimage img { max-height:100%; width:auto; object-fit:contain; }
div.prodname { font-weight:700; margin-top:0.6rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
div.prodname a { color:var(--ink); text-decoration:none; }
div.prodrating { margin:0.3rem 0; }
div.prodinstock { font-size:0.78rem; color:var(--muted); margin:0.3rem 0; }
div.proddescription { color:var(--muted); font-size:0.82rem; line-height:1.5; margin:0.3rem 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Pin the buy-button row to the bottom of the flex column regardless of which
   ECT layout token generated it: standalone "addtocart" (div.addtocart) or the
   combined quantity+button "addtocartquant" (div.prodaddtocartquant). Only
   whichever one actually renders is a direct child of div.product, so the
   other selector here is a harmless no-op. */
div.addtocart, div.prodaddtocart, div.addtocartquant, div.prodaddtocartquant,
div.notifystock, div.configbutton, div.outofstock { margin-top:auto; padding-top:0.6rem; }
div.listprice { color:var(--muted); text-decoration:line-through; font-size:0.85rem; }
div.prodprice { color:var(--ink); font-weight:700; font-size:1.05rem; }
div.prodcurrency { color:var(--muted); font-size:0.78rem; }
div.quantitydiv { margin:0.5rem 0; }

/* Real vendor markup (verified in vsadmin/inc/incfunctions.php writepagebar()):
   <div class="pagenumbers"><a href="..."><span class="pagebarnum">1</span></a>
   <span class="pagebarsep"></span> <span class="pagebarnum currpage">2</span> ...
   div.pagenums (used in the vendor's own CSS-layout docs) does not exist here. */
div.pagenumbers { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.35rem; margin:2rem 0; font-family:var(--font); }
div.pagenumbers a { text-decoration:none; }
span.pagebarnum, span.pagebarprevnext, span.pagebarquo {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; padding:0 0.5rem; box-sizing:border-box;
  border:1px solid var(--border); color:var(--text);
  font-size:0.8rem; font-weight:700; transition:background 0.15s, color 0.15s, border-color 0.15s;
}
div.pagenumbers a:hover span.pagebarnum,
div.pagenumbers a:hover span.pagebarprevnext,
div.pagenumbers a:hover span.pagebarquo { border-color:var(--ink); background:var(--ink); color:var(--paper); }
span.pagebarnum.currpage { border-color:var(--ink); background:var(--ink); color:var(--paper); }
span.pagebarsep { display:none; }

/* --------------------------------------------------------------------------
   20. Product detail page — full vendor class set (proddetail.php)
   -------------------------------------------------------------------------- */
div.proddetail { padding:0.5rem 0 2rem; }
div.detailid, div.detailsku, div.detailmanufacturer { font-size:0.72rem; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--muted); margin:0.3rem 0; }
div.detailname { font-family:var(--font); font-weight:700; margin:0 0 0.6rem; }
span.detaildiscountsapply, div.detaildiscounts { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); color:var(--ink); }
div.detailinstock { font-size:0.85rem; color:var(--muted); margin:0.5rem 0; }
div.detaildescription, div.detailshortdescription { color:var(--text); line-height:1.7; margin:0.75rem 0; }
div.detailcustom1, div.detailcustom2, div.detailcustom3 { color:var(--text); font-size:0.85rem; margin:0.3rem 0; }
div.detaillistprice { color:var(--muted); text-decoration:line-through; font-size:0.95rem; }
div.detailprice { color:var(--ink); font-weight:700; font-size:1.4rem; margin:0.4rem 0; }
div.detailcurrency { color:var(--muted); font-size:0.8rem; }
div.detailquantity { margin:0.5rem 0; }
div.detailquantitytext { color:var(--muted); font-size:0.85rem; }
div.detailaddtocart { margin-top:1rem; }
div.detailnotifystock, div.detailoutofstock { font-size:0.85rem; color:var(--muted); margin:0.75rem 0; }
div.multioptiontable { width:100%; border-collapse:collapse; margin:0.5rem 0; }
div.detailmultioptiontext { color:var(--muted); font-size:0.85rem; }
div.previousnext { margin:2rem 0; text-align:center; font-family:var(--font); font-size:0.8rem; }
div.previousnext a { color:var(--ink); text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:var(--label-ls); border-bottom:1px solid var(--ink); padding-bottom:1px; }
div.previousnext a:hover { color:var(--muted); border-bottom-color:var(--muted); }
div.emailfriend, div.socialmedia { margin:1rem 0; }

/* --------------------------------------------------------------------------
   21. Product option dropdowns (listing + detail page)
   div.option / div.detailoption are the vendor's real wrapper divs around
   each <select> — safe anchors for a CSS-only arrow, no markup changes needed.
   -------------------------------------------------------------------------- */
/* div.option is a plain block div with no set width, while <select> only takes
   its own intrinsic content width — constrain both to the same box so the
   custom arrow (positioned against div.option) lines up with the select. */
div.option, div.detailoption { position:relative; display:inline-block; width:100%; max-width:280px; }
select.prodoption, select.detailprodoption {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:var(--paper); border:1px solid var(--ink); border-radius:0;
  color:var(--text); font-family:var(--font); font-size:0.85rem;
  padding:0.5rem 2rem 0.5rem 0.7rem; cursor:pointer;
  width:100%; box-sizing:border-box;
}
div.option::after, div.detailoption::after {
  content:""; position:absolute; right:0.85rem; top:50%; width:7px; height:7px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
select.prodoption:hover, select.detailprodoption:hover,
select.prodoption:focus, select.detailprodoption:focus {
  outline:none; box-shadow:0 0 0 2px rgba(var(--ink-rgb), 0.12);
}