/* Extracted from gift-cards.html. */
/* Gift Card Page - Dark Theme - Denomination Dropdown */
.gcg-container,
.gcg-container * {
  box-sizing: border-box;
}
.gcg-container {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
html,
body {
  background: #000 !important;
}
:root {
  --gcg-bg: #000000;
  --gcg-bar-bg: #222222;
  --gcg-bg-hover: #2a2a2a;
  --gcg-border: rgba(255, 255, 255, 0.08);
  --gcg-border-light: rgba(255, 255, 255, 0.12);
  --gcg-text: #ffffff;
  --gcg-text-muted: #888888;
  --gcg-text-subtle: #666666;
  --gcg-green: #59CC80;
}
.gcg-container {
  box-sizing: border-box;
  background: var(--gcg-bg);
  padding: 0 0 60px 0;
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
}
.gcg-container *,
.gcg-container *::before,
.gcg-container *::after {
  box-sizing: border-box;
}
/* ========== HEADER ========== */
.gcg-header {
  text-align: center;
  padding: 0px 30px 48px;
  max-width: 900px;
  margin: 5px auto 0 auto;
}
.gcg-header-title {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
}
.gcg-header-title .white {
  color: #ffffff;
}
.gcg-header-title .green {
  color: var(--gcg-green);
  text-shadow: 0 4px 100px rgba(89, 204, 128, 1);
  animation: gcgGlowPulse 3.5s ease-in-out infinite;
}
@keyframes gcgGlowPulse {
  0%, 100% {
    text-shadow: 0 4px 90px rgba(89, 204, 128, 0.85);
  }
  50% {
    text-shadow: 0 4px 110px rgba(89, 204, 128, 1);
  }
}
.gcg-header-subtitle {
  font-size: 18px;
  font-weight: 400;
  color: var(--gcg-text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .gcg-header {
    padding: 40px 20px 40px;
    margin-top: -10px;
  }
  .gcg-header-title {
    font-size: 42px;
  }
  .gcg-header-subtitle {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .gcg-header {
    padding: 50px 15px 30px;
    margin-top: 0px;
  }
  .gcg-header-title {
    font-size: 32px;
  }
  .gcg-header-subtitle {
    font-size: 15px;
  }
}
/* ========== CONTROLS ========== */
.gcg-controls-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px 20px 30px;
  position: relative;
  z-index: 10;
}
.gcg-search-section {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.gcg-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #222222 !important;
  border-radius: 999px;
  padding: 10px 30px;
  border: 1px solid var(--gcg-border);
  flex: 1;
  min-width: 0;
  height: 54px;
  transition: border-color 0.2s ease;
}
.gcg-bar:focus-within {
  border-color: var(--gcg-border-light);
}
.gcg-search-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.5;
}
.gcg-search-input,
.gcg-bar input,
.gcg-bar input[type="text"],
input.gcg-search-input {
  flex: 1;
  min-width: 0;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 14px;
  color: var(--gcg-text) !important;
  padding: 0 0 0 8px !important;
  margin: 0 !important;
  line-height: 1.4;
  height: auto;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcg-search-input::placeholder,
.gcg-bar input::placeholder {
  color: var(--gcg-text-subtle) !important;
  opacity: 1 !important;
}
.gcg-search-input:focus,
.gcg-bar input:focus {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
/* ========== DENOMINATION DROPDOWN ========== */
.gcg-denom-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 20;
}
.gcg-denom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #222222 !important;
  border-radius: 999px;
  padding: 0 32px;
  border: 1px solid var(--gcg-border);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--gcg-text);
  transition: all 0.2s ease;
  white-space: nowrap;
  height: 54px;
  min-width: 200px;
}
.gcg-denom-btn:hover {
  border-color: var(--gcg-border-light);
}
.gcg-denom-btn.active {
  border-color: var(--gcg-border-light);
}
.gcg-denom-btn svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.gcg-denom-btn.active svg {
  transform: rotate(180deg);
}
/* Dropdown panel */
.gcg-denom-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #1a1a1a;
  border-radius: 20px;
  padding: 20px;
  min-width: 280px;
  border: 1px solid var(--gcg-border-light);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 1000;
}
.gcg-denom-dropdown.active {
  display: block;
}
.gcg-denom-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gcg-text);
  text-align: center;
  margin: 0 0 16px 0;
}
.gcg-denom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.gcg-denom-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 4px;
  border-radius: 999px;
  border: 1px solid var(--gcg-border);
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
  outline: none;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gcg-denom-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.gcg-denom-pill.active {
  background: var(--gcg-green) !important;
  color: #000000 !important;
  border-color: var(--gcg-green) !important;
}
/* ========== CATEGORY BAR ========== */
.gcg-category-section {
  width: 100%;
  margin-bottom: 0;
  display: flex;
}
.gcg-category-bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: #1a1a1a;
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gcg-category-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
}
.gcg-category-btn:hover,
.gcg-category-btn:focus,
.gcg-category-btn:focus-visible,
.gcg-category-btn:active {
  background: transparent;
  color: #ffffff;
  outline: none;
  box-shadow: none;
}
.gcg-category-btn.active {
  background: var(--gcg-green) !important;
  color: #000000 !important;
  box-shadow: 0 0 15px rgba(89, 204, 128, 0.35);
}
.gcg-category-btn.active:hover,
.gcg-category-btn.active:focus,
.gcg-category-btn.active:focus-visible,
.gcg-category-btn.active:active {
  background: var(--gcg-green) !important;
  color: #000000 !important;
  outline: none;
  box-shadow: 0 0 15px rgba(89, 204, 128, 0.35);
}
.gcg-category-btn.active svg {
  stroke: #000000;
}
.gcg-category-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}
/* ========== GRID ========== */
.gcg-grid-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}
.gcg-grid {
  display: grid;
  /* minmax(0, 1fr) - NOT just 1fr. Plain 1fr respects min-content,
       so a card with a wide intrinsic image (1250px native) can force
       its column wider than its siblings. minmax(0, 1fr) clamps the
       minimum to 0, forcing every column to be exactly equal share
       of the row, regardless of any child's natural size. This is
       the difference between cards being uniform and cards drifting
       wider/narrower than each other. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  /* align-items: stretch is fine because every child is locked to
       5:3 by aspect-ratio - but explicit start removes any stretch
       behaviour as belt-and-suspenders. */
  align-items: start;
  transition: opacity 0.3s ease;
}
.gcg-grid > * {
  min-width: 0;
  min-height: 0;
}
/* lets minmax(0,1fr) actually clamp */
@media (max-width: 1100px) {
  .gcg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .gcg-controls-wrapper {
    padding: 0 20px 16px 20px;
  }
  .gcg-grid-wrapper {
    padding: 0 20px;
  }
  .gcg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .gcg-search-section {
    margin-bottom: 10px;
    gap: 10px;
  }
  .gcg-bar {
    height: 48px;
    padding: 8px 24px;
  }
  .gcg-denom-btn {
    height: 48px;
    padding: 0 24px;
    font-size: 13px;
    min-width: 170px;
  }
  /* Mobile category bar: single row of icon-only buttons.
       Hides every span (text label) so each button is just its SVG.
       Shows all 7 categories - Other is no longer hidden on mobile. */
  .gcg-category-bar {
    display: flex;
    gap: 2px;
    border-radius: 999px;
    padding: 4px;
  }
  .gcg-category-btn {
    flex: 1;
    padding: 10px 0;
    min-width: 0;
    gap: 0;
    justify-content: center;
  }
  .gcg-category-btn span {
    display: none;
  }
  .gcg-category-btn svg {
    width: 18px;
    height: 18px;
  }
  .gcg-cat-other {
    display: flex;
  }
}
@media (max-width: 500px) {
  .gcg-container {
    padding: 0 0 40px 0;
  }
  .gcg-controls-wrapper {
    padding: 0 15px 12px 15px;
  }
  .gcg-grid-wrapper {
    padding: 0 15px;
  }
  .gcg-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .gcg-search-section {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .gcg-bar {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 8px 18px;
    gap: 10px;
  }
  .gcg-search-input, .gcg-bar input {
    font-size: 13px;
  }
  .gcg-denom-btn {
    height: 46px;
    padding: 0 16px;
    font-size: 12px;
    gap: 6px;
    min-width: 140px;
  }
  .gcg-denom-dropdown {
    min-width: 260px;
    padding: 16px;
    right: -10px;
  }
  .gcg-denom-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .gcg-denom-pill {
    font-size: 12px;
    height: 34px;
  }
  /* Icon-only treatment carries over from the 800px breakpoint -
       just trim padding + icon size for tighter phone widths. */
  .gcg-category-bar {
    padding: 3px;
  }
  .gcg-category-btn {
    padding: 9px 0;
  }
  .gcg-category-btn svg {
    width: 17px;
    height: 17px;
  }
  /* -------------------------------------------------------------
       MOBILE CARD SIZE LOCK - pure CSS, no JS dependency.
       Viewport width minus the 30px wrapper padding = card width.
       Card height = 60% of that for a perfect 5:3.
       Both bounds locked via min/max so nothing can stretch them.
       This is BELT in case the JS-based size enforcer ever fails. */
  a.gcg-card, div.gcg-card {
    width: calc(100vw - 30px) !important;
    min-width: calc(100vw - 30px) !important;
    max-width: calc(100vw - 30px) !important;
    height: calc((100vw - 30px) * 0.6) !important;
    min-height: calc((100vw - 30px) * 0.6) !important;
    max-height: calc((100vw - 30px) * 0.6) !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
}
/* 2-col mobile / tablet: half-width minus gap */
@media (min-width: 501px) and (max-width: 800px) {
  a.gcg-card, div.gcg-card {
    width: calc((100vw - 40px - 16px) / 2) !important;
    min-width: calc((100vw - 40px - 16px) / 2) !important;
    max-width: calc((100vw - 40px - 16px) / 2) !important;
    height: calc(((100vw - 40px - 16px) / 2) * 0.6) !important;
    min-height: calc(((100vw - 40px - 16px) / 2) * 0.6) !important;
    max-height: calc(((100vw - 40px - 16px) / 2) * 0.6) !important;
    padding: 0 !important;
  }
}
/* ========== CARDS ========== */
/* The padding-bottom aspect-ratio hack - battle-tested since 2013.
   This is the ONLY sizing rule. No aspect-ratio, no contain, no
   @supports - every fancy modern thing we tried added a layer
   that some browser interpreted differently. Keep it dead simple:

     - .gcg-card has padding-bottom: 60% (= 3/5 of width)
     - height: 0 means the box's intrinsic height is purely the padding
     - Direct children are absolute-positioned to fill the box

   NO IMAGE can change the card's height because the image is
   absolutely positioned and the parent has height: 0. The only
   thing that determines the box's height is the padding-bottom
   percentage, which the spec computes against the parent's WIDTH.
   100% width - 60% padding-bottom - 5:3 box. Always. */
.gcg-card {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  /* 3 / 5 = 60% - locks every card to 5:3 */
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  /* Apple-style entrance: fade-in only. Removed the scale transform
       because on iOS Safari, transform on a percentage-padding box
       sometimes triggers a re-layout that briefly shows the natural
       image dimensions (the bug everyone's been chasing). */
  opacity: 0;
  transition: opacity .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gcg-card.gcg-card-shown {
  opacity: 1;
}
/* Force EVERY direct child of .gcg-card to fill the padded box.
   Catches the skeleton, the img, and any future child without
   needing class-by-class rules. */
.gcg-card > * {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Hover lift gated to real pointer devices. On iOS Safari, applying
   :hover on tap moves the card up 6px - the user's second tap then
   lands on empty space below the now-shifted card and the click
   handler never fires. (hover:hover) keeps desktop UX intact while
   making mobile cards reliably tappable. */
@media (hover: hover) {
  /* Hover lift via translateY only (no scale). scale on a
     percentage-padding box can re-trigger layout on Safari. */
  .gcg-card.gcg-card-shown:hover {
    transform: translateY(-6px);
  }
}
/* -- Per-card skeleton + image cross-fade ----------------------
   The skeleton layer pulses softly while the image bytes arrive.
   When the image finishes decoding, .gcg-card-loaded fires and the
   two layers cross-fade over 500ms with the same Apple ease curve.
   Each card transitions independently - no choppy mass-paint, no
   flash of broken image. */
.gcg-card-skel {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: #161616;
  overflow: hidden;
  opacity: 1;
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* Soft inner pulse - fades the surface gently rather than the harsh
   diagonal shimmer-stripe most "skeleton loaders" use. Closer to how
   Apple Music / App Store render placeholders. */
.gcg-card-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 60%);
  animation: gcgSkelPulse 2.2s ease-in-out infinite;
}
.gcg-card img {
  /* The IMAGE IS THE BUG. WooCommerce / WordPress global stylesheets
       and Safari's pre-CSS layout pass both treat <img> as having
       intrinsic dimensions equal to the source pixels (e.g. PayPal's
       1024-1024 square). With those baked into the box, the parent
       grows or shrinks to fit. Locking the img to its parent's
       coordinate box absolutely - same shape, same coordinates -
       prevents the image's natural ratio from EVER influencing
       layout, no matter what theme CSS arrives later. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0;
  min-height: 0;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gcg-card.gcg-card-loaded .gcg-card-skel {
  opacity: 0;
}
.gcg-card.gcg-card-loaded img {
  opacity: 1;
}
.gcg-card-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a 0%, #161616 100%);
  color: var(--gcg-text);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.gcg-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--gcg-text-muted);
  font-size: 16px;
}
@keyframes gcgSkelPulse {
  0%, 100% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
}