/* ==========================================================================
   Brand theme overrides
   --------------------------------------------------------------------------
   Bootstrap 5.3 exposes almost all of its design system as CSS custom
   properties on :root. Redefining them here re-themes every Bootstrap
   component (buttons, cards, list groups, alerts, spinners...) without
   touching a single Bootstrap class. This is the one file to edit when you
   have real Asprey brand values (hex codes, typeface) to drop in — the
   placeholder palette/fonts below are inspired by how luxury digital
   product-passport pages (Aura Blockchain Consortium, Arianee) typically
   present: muted neutrals, a single restrained accent, a serif headline
   paired with a plain sans body, lots of whitespace, no loud UI chrome.
   ========================================================================== */

:root {
  /* ---- Brand palette — replace with actual Asprey values ---- */
   --brand-ink: #440055;          /* near-black, used for header + headings */
  --brand-accent: #FF0080;       /* muted gold/brass accent */
  --brand-accent-hover: #FF0080;
  --brand-surface: #Ffffff;      /* card background */
  --brand-canvas: #ffffff;       /* page background */
  --brand-border: #F7F9F9;
  --brand-muted: #6f6a5e;

  /* ---- Typography ---- */
  --brand-heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --brand-body-font: "Gill Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Map onto Bootstrap's own variables ---- */
  --bs-body-font-family: var(--brand-body-font);
  --bs-body-color: var(--brand-ink);
  --bs-body-bg: var(--brand-canvas);
  --bs-border-color: var(--brand-border);
  --bs-secondary-color: var(--brand-muted);

  --bs-primary: var(--brand-accent);
  --bs-primary-text-emphasis: var(--brand-ink);
  --bs-primary-rgb: 156, 122, 60;
  --bs-link-color: var(--brand-accent);
  --bs-link-color-rgb: 156, 122, 60;
  --bs-link-hover-color: var(--brand-accent-hover);
  --bs-link-hover-color-rgb: 126, 98, 48;

  --bs-border-radius: 0.25rem;
  --bs-border-radius-lg: 0.375rem;
  --bs-card-border-radius: 0.375rem;

  /* ---- Accordion (Product Specifications / Provenance Record) ---- */
  --bs-accordion-bg: var(--brand-surface);
  --bs-accordion-active-bg: #FFFFFF;
  --bs-accordion-active-color: var(--brand-surface);
  --bs-accordion-border-color: var(--brand-surface);
  --bs-accordion-btn-focus-border-color: var(--brand-accent);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
  /* Flush mode still keeps horizontal padding by default — zero it so
     accordion content lines up flush with the card's own edges instead of
     looking double-indented. */
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-body-padding-x: 0;
}

/* Headings use the serif brand font; body text stays on the sans family
   Bootstrap already picked up from --bs-body-font-family above. */
h1, h2, h3, h4, h5, h6,
.brand-wordmark {
  font-family: var(--brand-heading-font);
}

body {
  min-height: 100vh;
  font-weight: 300;
}

/* ---- Header ---- */
.brand-header {
  background-color: var(--brand-ink);
}

.brand-wordmark {
  color: #fff;
  font-size: 1.375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* ---- Card ---- */
.purchase-card {
  background-color: var(--brand-surface);
  border: 1px solid var(--brand-border);
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--brand-muted);
}

/* ---- Accordion (Product Specifications / Provenance Record) ---- */

.accordion {
--bs-accordion-color: var(--bs-body-color);
--bs-accordion-body-padding-x: 0;
--bs-accordion-body-padding-y: 1rem;
}

.accordion-button {
  font-family: var(--brand-heading-font);
  font-size: 1.4rem;
  font-weight: 600;
  padding: 1rem 0;
  color: #440055;
}

/* Bootstrap's default expanded-state shadow reads as a heavy underline on
   a flush accordion sitting inside a bordered card — drop it for a
   quieter look; the border-bottom + chevron rotation already communicate
   the open/closed state clearly enough. */
.accordion-button:not(.collapsed) {
  box-shadow: none;
  background-color: #FFFFFF;
}

/* ---- Verified badge ---- */
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* ---- Field rows ---- */
.field-row {
  background-color: transparent;
  border-color: var(--brand-border) !important;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.field-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.field-value {
  font-weight: 300;
}

/* ---- Product media (Shopify gallery) ----
   Desktop/tablet-landscape (>= lg): vertical stack of every image, shown
   full-width in the left column. Below lg: a single Bootstrap carousel
   instead — index.html renders both from the same data and swaps which one
   is visible with d-none/d-lg-* utility classes, so there's no JS branching
   on viewport here, just CSS. */
.media-stack-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid var(--brand-border);
}

.media-carousel {
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--brand-border);
}

.media-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Default Bootstrap control icons are white-on-transparent — nearly
   invisible against a light product photo. Give them a small dark
   backdrop so they read on any image. */
.media-carousel .carousel-control-prev,
.media-carousel .carousel-control-next {
  width: 3rem;
}

.media-carousel .carousel-control-prev-icon,
.media-carousel .carousel-control-next-icon {
  background-color: rgba(26, 26, 24, 0.55);
  border-radius: 50%;
  padding: 1.1rem;
  background-size: 45%;
}

.media-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--brand-accent);
  opacity: 0.4;
  border: none;
}

.media-carousel .carousel-indicators .active {
  opacity: 1;
}

/* On desktop, keep the info card pinned near the top of the viewport while
   the (potentially much taller) media stack scrolls past it — the classic
   "sticky sidebar" pattern. Only applies at the lg breakpoint and up, since
   below that the two columns collapse into a single stacked flow where a
   sticky column wouldn't make sense. Requires the row to use
   align-items-start (set in index.html) rather than the flex default of
   stretch, otherwise both columns are forced to equal height and there's no
   scroll distance left for the sticky column to travel. */
@media (min-width: 992px) {
  #infoColumn {
    position: sticky;
    top: 2rem;
  }
}

/* ---- Product Specifications (Shopify variant metafields) ---- */
.spec-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--brand-border);
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.spec-multiline {
  white-space: pre-line;
}

/* Rendered HTML inside a spec/field/description value (e.g. a Features
   list entered as raw markup) — keep it visually consistent with the rest
   of the card rather than looking like unstyled dumped content. */
.field-value ul,
.field-value ol {
  margin: 0;
  padding-left: 1.1rem;
}

.field-value li {
  margin-bottom: 0.25rem;
}

.field-value li:last-child {
  margin-bottom: 0;
}

.field-value p {
  margin: 0 0 0.5rem;
}

.field-value p:last-child {
  margin-bottom: 0;
}

.list-group-item {
  padding: 1rem 0;
}

/* ---- Email verification code input ---- */
.otp-input {
  text-align: center;
  letter-spacing: 0.6em;
  padding-left: 0.6em; /* visually re-centers the code given the trailing letter-spacing */
  font-size: 1.5rem;
  font-weight: 600;
}

/* ---- "Find my purchases" results table ---- */
.purchase-row:hover {
  background-color: var(--brand-canvas);
}