/* ==========================================================================
   Ananta Designs - components

   Buttons, cards, badges, form controls, rules and the placeholder plate.
   Every one is a port of the approved prototype's equivalent, with the
   Tailwind classes resolved into a single named class so a PHP template can
   emit it without a utility-class soup.
   ========================================================================== */

/* ---- buttons -------------------------------------------------------------
   One base, four tones, three sizes. 44px minimum height everywhere: the
   prototype held that line on every control and so does this. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease-soft),
    border-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

.btn--gold {
  background: var(--gold);
  color: #100c04;
}

.btn--gold:hover:not(:disabled) {
  background: var(--gold-soft);
}

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

.btn--solid:hover:not(:disabled) {
  background: var(--gold-soft);
}

.btn--outline {
  border-color: var(--line-strong);
  color: var(--fg);
}

.btn--outline:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.btn--ghost {
  color: var(--fg-dim);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--gold);
}

.btn--sm {
  padding: 0.625rem 1rem;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.btn--lg {
  min-height: 48px;
  padding: 1.125rem 2rem;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.btn--full {
  width: 100%;
}

/* ---- the pill rail chip --------------------------------------------------
   Used by the category rail under the header and the filter sheet.

   36px on a pointer, 44px on touch. The prototype's 36px is right for a
   mouse and too small for a thumb in a horizontally scrolling rail, where a
   mis-tap scrolls instead of navigating. `pointer: coarse` raises it only
   for the devices that need it, so the desktop rail keeps its proportions. */

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    border-color 0.3s var(--ease-soft),
    background-color 0.3s var(--ease-soft),
    color 0.3s var(--ease-soft);
}

.pill:hover {
  border-color: var(--line-strong);
  color: var(--fg);
}

/* The two departments and "All pieces" sit in gold at the head of the rail. */
.pill--accent {
  border-color: rgba(195, 161, 106, 0.5);
  color: var(--gold);
}

.pill--accent:hover {
  background: var(--gold);
  color: var(--ink);
}

@media (pointer: coarse) {
  .pill {
    min-height: 44px;
  }
}

.pill[aria-pressed="true"],
.pill.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* ---- cards ---------------------------------------------------------------
   The surface a product, a category tile or a panel sits on. Square, hairline
   bordered, lifted off the ink by exactly one step of the surface ramp. */

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s var(--ease-soft);
}

.card:hover {
  border-color: var(--line-strong);
}

.card--accent:hover {
  border-color: rgba(195, 161, 106, 0.5);
}

.panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .panel {
    padding: 2.5rem;
  }
}

/* ---- badges --------------------------------------------------------------
   Production ships two badges, both DERIVED rather than typed: "New" from
   the publish date and "Made to measure" from the fit attribute. The
   prototype's "bestseller" and "limited" are deliberately absent - they are
   claims, and no one has made them. */

.badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge--gold {
  border-color: rgba(195, 161, 106, 0.45);
  color: var(--gold);
}

/* Sits over artwork in a card corner, so it needs its own ground. */
.badge--overlay {
  border-color: rgba(195, 161, 106, 0.4);
  background: rgba(8, 8, 10, 0.85);
  color: var(--gold);
  backdrop-filter: blur(4px);
  padding: 4px 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

/* ---- rules ---------------------------------------------------------------
   The gold hairline that opens a section. Fades out to the right so it reads
   as a flourish rather than a border. */

.gold-rule {
  display: block;
  width: 100%;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(
    to right,
    rgba(195, 161, 106, 0.7),
    rgba(195, 161, 106, 0.25),
    transparent
  );
}

/* A quoted or qualified note - used wherever the site tells the visitor that
   what they are looking at is presentation content. */
.note-rule {
  border-left: 2px solid rgba(195, 161, 106, 0.5);
  padding-left: 1rem;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-dim);
}

/* ---- form controls ------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field__label {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--muted);
}

.input,
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  transition: border-color 0.3s var(--ease-soft);
}

.input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(133, 129, 122, 0.7);
}

.input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
}

.field__hint {
  font-size: 12px;
  color: var(--muted);
}

/* ---- search field --------------------------------------------------------
   Shared by the header and the mobile sheet. The icon sits inside the field.

   Note that this does NOT inherit the .input styles above: the element is
   neither `.input` nor inside a `.field`, so every property it needs is
   declared here. It previously set only `border-color`, which left the
   browser's own 2px inset bevel in place and merely recoloured it - that
   ridged frame, plus the 2px of right padding a UA supplies by default, is
   what made the field read as a stray form control dropped into the header
   rather than part of it.

   It is deliberately quiet: a transparent ground and the faintest hairline,
   so at rest it is barely a box at all. Focus is what brings it forward - the ground fills and the hairline turns gold. */

.search {
  position: relative;
}

.search input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 40px;
  /* Left clears the icon; right is real padding rather than the 2px the
     browser supplies, which let the text run into the border. */
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  transition:
    border-color 0.3s var(--ease-soft),
    background-color 0.3s var(--ease-soft);
}

.search input::placeholder {
  color: var(--muted);
  opacity: 1; /* Firefox dims placeholders on top of the colour. */
}

.search input:hover {
  border-color: var(--line-strong);
}

/* Focus is taken off the form, not off the input.

   The field and its icon must always agree, and they only do if one
   condition drives both - `:focus` on the input and `:focus-within` on the
   form can disagree (they do in Chrome when the window itself is not
   focused, which leaves a gold icon in a grey field). The form has exactly
   one focusable child, so this is equivalent and cannot come apart.

   The outline is removed because the gold hairline and the filled ground
   replace it, for pointer and keyboard alike - not suppressed and left
   without a focus indicator. */
.search:focus-within input {
  outline: none;
  border-color: var(--gold);
  background: var(--surface);
}

/* WebKit decorates type="search" with its own clear button and result
   widgets. None of them belong to this design. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration,
.search input::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}

.search svg {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  transition: color 0.3s var(--ease-soft);
}

/* Same trigger as the field above, so the two always move together. */
.search:focus-within svg {
  color: var(--gold);
}

/* The sheet is a touch surface: a bigger target and text that does not make
   iOS zoom the page on focus. This used to be an inline style on the input. */
.sheet .search input {
  min-height: 48px;
  font-size: 16px;
}

/* ---- quantity stepper ---------------------------------------------------- */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.qty button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease-soft);
}

.qty button:hover:not(:disabled) {
  color: var(--gold);
}

.qty button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.qty output,
.qty .qty__value {
  display: grid;
  place-items: center;
  min-width: 36px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---- the placeholder plate -----------------------------------------------
   Shown where a photograph will go but has not arrived.

   Deliberately NOT stock imagery: a borrowed photograph of somebody else's
   studio is worse than an honest empty plate, because it can be mistaken for
   Ananta's own. This says what it is. Same reasoning as the prototype's
   PhotoPending component, which this is a direct port of. */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--plate-dark);
}

.plate-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line-strong);
}

.plate-pending span {
  padding-inline: 1.5rem;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- aspect ratios -------------------------------------------------------
   Named so a template asks for a shape rather than a number, and so the
   studio's landscape/portrait switch is one class. */

.ratio-square { aspect-ratio: 1 / 1; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

/* ---- section heading ----------------------------------------------------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.section-head__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head__link svg {
  transition: transform 0.3s var(--ease-soft);
}

.section-head__link:hover svg {
  transform: translateX(4px);
}

/* ---- section rhythm ------------------------------------------------------
   Sections stay short and close together - the commerce cadence from
   Direction 04 - while each one is titled in the display serif. */

.section {
  padding-block: 2rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 3rem;
  }
}

.section--tight {
  padding-block: 1.5rem;
}

.section--roomy {
  padding-block: 3rem;
}

@media (min-width: 768px) {
  .section--roomy {
    padding-block: 4rem;
  }
}

/* The first section on a page has to clear the fixed header. */
.section--first {
  padding-top: calc(var(--head-h) + 1.5rem);
}

.section--divided {
  border-top: 1px solid var(--line);
}