/* The "Select age" dropdown (components/age-dropdown.js), shared by the homepage box picker and the
   gift page: the same field + panel as checkout's custom dropdowns (.box-select-trigger and
   .box-picker-dropdown in styles/pages/checkout.css), copied here since neither page loads
   checkout.css. Colors are literal so it looks the same on both pages' tokens. */
.age-dd-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.age-dd-label { font-size: 15px; font-weight: 600; color: #1E1810; white-space: nowrap; }
.age-dd-field { position: relative; flex: 0 0 200px; }
.age-dd-trigger {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: #1E1810;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8998F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1.5px solid #EAE0D8;
  border-radius: 10px;
  padding: 9px 36px 9px 14px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s;
}
.age-dd-trigger:focus, .age-dd-trigger[aria-expanded="true"] { border-color: #B0906A; }
.age-dd-trigger:focus-visible { outline: 2px solid #B0906A; outline-offset: 2px; }
.age-dd-trigger.is-placeholder { color: #A8998F; }
/* Plus Jakarta Sans has a narrow space and a "1" that hugs the next letter ("1year"), and draws
   the hyphen in "0-12" as a long dash; a little more word spacing and no contextual alternates
   fix both (box.css does the same for the dash). */
.age-dd-trigger, .age-dd-option { word-spacing: 0.12em; font-feature-settings: "calt" 0; }
.age-dd-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #EAE0D8;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(26, 18, 8, 0.14);
  z-index: 20;
  overflow: hidden;
}
.age-dd-panel[hidden] { display: none; }
.age-dd-option {
  display: block;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1E1810;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.age-dd-option + .age-dd-option { border-top: 1px solid #f0ebe5; }
.age-dd-option:hover, .age-dd-option:focus-visible { background: #faf7f4; outline: none; }
.age-dd-option[aria-selected="true"] { background: #FDF8F5; font-weight: 700; }

@media (max-width: 560px) {
  .age-dd-row { margin-bottom: 12px; }
  .age-dd-trigger { padding-top: 8px; padding-bottom: 8px; }
}