/* ==========================================================================
   Hiwa Saeed Yasin — COMPONENTS
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */

/* A LIGHT BAR, on purpose.

   The logo is deep red and black, drawn for white paper. On the espresso bar
   it used to sit on, half of it disappeared and it needed a white plate behind
   it to survive — a patch, and it looked like one. Making the bar itself light
   removes the problem rather than covering it: the logo now sits on the page
   exactly as it does on paper, with nothing behind it.

   The espresso has not gone anywhere. It moved to where it earns its keep —
   the page headers and the footer — so the dark is now a deliberate feature
   rather than the colour of the furniture. */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg-lift);
  border-block-end: 1px solid var(--rule);
  transition: box-shadow var(--t-med) var(--ease);
}

/* Once the page has moved under it the header needs to say it is floating
   rather than sitting in the flow. Warm-tinted and soft: a neutral black
   shadow under a cream bar reads as a grey smear, not as depth. */
.header.is-scrolled { box-shadow: 0 6px 20px rgba(42, 33, 28, 0.13); }

/* Reading progress. Sits on the header's own top edge rather than floating
   above the page, so it never covers anything. scaleX from the left, because
   animating width would relayout on every scroll frame. */
.progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 72px;
  padding-block: var(--s-2);
}


/* ---- Wordmark -------------------------------------------------------------
   "Hiwa" carries the recognition; the full legal name sits underneath at a
   size that is legible but does not compete. Both are inside the one link, so
   a screen reader announces the business once, not twice.
   -------------------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex-shrink: 0;
}

/* The shop's logo, exactly as drawn — deep red disc, black crescent, black
   script — used as an <img> so the browser fetches it once and caches it for
   every page.

   In the HEADER it gets no plate and no border: the header bar is light, so
   the logo sits straight on it in its own colours, exactly as drawn.
   In the FOOTER, which is espresso, it gets a white plate — see .footer
   .brand__mark further down. Half this logo is black and needs a light ground
   one way or the other.

   SIZE: this is a VERTICAL lockup — the roundel stacked above the script
   wordmark — and a vertical logo needs real height or its bottom half turns to
   mush. At 46px the word "Hiwa" inside it was an illegible smudge. 68px is the
   point where it reads.

   height with width auto, so the logo keeps its own proportions whatever is
   done to the header later. */
.brand__mark {
  height: 68px;
  width: auto;
  flex-shrink: 0;
}

/* On a phone the header is stuck to the top of a short screen, so the logo
   steps down rather than taking a fifth of the view. */
@media (max-width: 639px) {
  .brand__mark { height: 50px; }
}

.brand__text { display: block; }

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.brand__full {
  display: block;
  margin-block-start: 3px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-soft);
}


/* ---- Navigation ----------------------------------------------------------- */

.nav {
  display: none;
  align-items: center;
  gap: var(--s-5);
}

@media (min-width: 900px) { .nav { display: flex; } }

.nav__link {
  position: relative;
  padding-block: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--fg-soft);
  white-space: nowrap;
}

.nav__link:hover { color: var(--fg); }

/* The current page is marked by a brass rule, not by colour alone — colour on
   its own is not a distinction anyone can rely on.

   Every link carries the rule; the current one is simply already at full
   width. That way hovering draws the same mark that marks the current page,
   growing from the middle out, and the two states are visibly the same
   language rather than two unrelated effects. */
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--t-med) var(--ease-out);
}

.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--fg); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }


/* ---- Burger --------------------------------------------------------------- */

.burger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

@media (min-width: 900px) { .burger { display: none; } }

.burger svg { width: 16px; height: 16px; }


/* ---- Drawer --------------------------------------------------------------- */

html.is-drawer-open { overflow: hidden; }

/* The background has to be stated here. It used to come from .on-dark, and
   the drawer covers the whole screen — a transparent one shows the page
   scrolling underneath it and is unreadable. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  overflow-y: auto;
  background: var(--bg-lift);
  color: var(--fg);
}

.drawer[hidden] { display: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-5);
  border-block-end: 1px solid var(--rule);
}

.drawer__close {
  padding: var(--s-2) var(--s-4);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-6);
}

.drawer__link {
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
}

.drawer__link[aria-current="page"] { color: var(--accent-text); }

.drawer__foot { margin-block-start: auto; padding-block-start: var(--s-6); }


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Primary is brass on espresso text — the accent is the ground here, so the
   3.1:1 limit on brass-as-text never applies. */
.btn--primary {
  background: var(--brass);
  color: var(--espresso);
  border-color: var(--brass);
}

.btn--primary:hover {
  background: var(--brass-glow);
  border-color: var(--brass-glow);
}

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}

.btn--ghost:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---- The sweep -------------------------------------------------------------
   A brass fill that wipes in from the leading edge on hover, with the arrow
   stepping forward as it lands. The fill is a pseudo-element scaled on the X
   axis rather than an animated background-position or width, because those
   two both relayout or repaint the whole button on every frame and this only
   composites a transform.

   transform-origin uses the logical left, so the fill enters from the side
   the reader starts on.

   Stacks on top of any other .btn variant. Currently unused — it was built
   for the button under the Why choose Hiwa cards, which has since been
   removed. Kept because it is a finished, reusable variant: add btn--sweep
   to any button, and a btn__arrow svg inside it if you want the arrow.
   -------------------------------------------------------------------------- */

.btn--sweep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn--sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease-out);
}

.btn--sweep:hover::before,
.btn--sweep:focus-visible::before { transform: scaleX(1); }

/* Espresso on brass, the same pairing .btn--primary already uses, rather than
   cream on brass — which is only 3.1:1 and fails on a button this size. */
.btn--sweep:hover,
.btn--sweep:focus-visible {
  color: var(--espresso);
  border-color: var(--accent);
  background: transparent;
}

.btn__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 460ms var(--ease-out);
}

.btn--sweep:hover .btn__arrow,
.btn--sweep:focus-visible .btn__arrow { transform: translateX(4px); }

.btn--solid {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}

.btn--solid:hover { background: var(--espresso-lift); border-color: var(--espresso-lift); }

.btn--lg {
  padding: var(--s-4) var(--s-6);
  min-height: 54px;
  font-size: var(--fs-body);
}

/* Fully rounded. Used in the hero only, where the whole composition is soft —
   rounded frame, rounded floating cards. Everywhere else the 3px button is
   what keeps the site from looking like a phone app. */
.btn--pill { border-radius: var(--r-pill); padding-inline: var(--s-6); }

.btn--block { display: flex; width: 100%; }


/* ==========================================================================
   Filter chips
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  color: var(--fg-soft);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.chip:hover { border-color: var(--accent); color: var(--fg); }

.chip[aria-pressed="true"] {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--cream);
}


/* ==========================================================================
   Form fields
   ========================================================================== */

.field { display: block; }

.field__label {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 46px;
  background: var(--bg-lift);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--fs-body);
}

.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-body);
}

.input::placeholder,
.textarea::placeholder { color: var(--fg-soft); opacity: 0.75; }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { border-color: var(--accent); }

.select {
  appearance: none;
  padding-inline-end: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237E5B22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px;
}


/* ==========================================================================
   Product card
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
}

.card .media {
  margin-block-end: var(--s-3);
  transition: box-shadow var(--t-fast) var(--ease);
}

/* No zoom on hover. Scaling a product photograph up inside a frame with
   overflow hidden crops it — the one thing these frames are not allowed to do.

   Instead a brass bar rises over the foot of the picture. It moves, it says
   what a click does, and it does not touch the photograph. */
.card:hover .media { box-shadow: inset 0 0 0 1px var(--rule-strong); }

.card__peek {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--s-3);
  background: var(--brass);
  color: var(--espresso);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-align: center;
  transform: translateY(101%);
  transition: transform var(--t-med) var(--ease-out);
}

.card:hover .card__peek,
.card:focus-visible .card__peek { transform: translateY(0); }

.card:hover .card__name { text-decoration: underline; text-underline-offset: 0.15em; }

/* Only an image that is already cropped to fill may zoom on hover — scaling
   one that fits its frame exactly would crop it, which is the thing these
   frames are not allowed to do. Tiles that fit exactly get a brass edge
   instead. */
.tile:hover .media--cover > img { transform: scale(1.04); }

.tile { transition: box-shadow var(--t-fast) var(--ease); }
.tile:hover { box-shadow: 0 0 0 2px var(--brass); }

.card__body { display: block; }

.card__cat {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The card's name, reference code, meta row and availability badge used to
   live here, and the five-thread warmth scale after them. All of it displayed
   invented product data — names, codes, "In stock", a warmth rating nobody
   had set — so the markup and these styles went together. A card is now a
   photograph and the category under it; .card__cat above is all that is left.
   ========================================================================== */



/* ==========================================================================
   Category tile
   ========================================================================== */

.tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--cream);
  background: var(--espresso);
}

.tile .media {
  aspect-ratio: var(--ratio-wide);
  border-radius: 0;
  margin: 0;
}

/* A category tile already has a caption across its bottom edge. The
   "photograph coming soon" note lands in the same place and the two print on
   top of each other, so the tile keeps its own caption and loses the note. */
.tile .media__pending { display: none; }

/* The caption sits over the photograph, so it needs its own ground. A scrim
   from fully transparent to near-solid keeps the type readable over a light
   blanket and a dark one alike. */
.tile__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--s-6) var(--s-4) var(--s-4);
  background: linear-gradient(to top,
    rgba(30, 23, 19, 0.88) 0%,
    rgba(30, 23, 19, 0.55) 55%,
    rgba(30, 23, 19, 0) 100%);
}

/* The caption lifts a little on hover, and the scrim deepens with it so the
   type stays just as readable while it moves. */
.tile__cap { transition: padding-block-end var(--t-med) var(--ease-out); }
.tile:hover .tile__cap { padding-block-end: var(--s-5); }

.tile__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
}

.tile__note {
  display: block;
  margin-block-start: var(--s-1);
  font-size: var(--fs-small);
  color: var(--cream-soft);
}


/* ==========================================================================
   Specification table
   ========================================================================== */

.specs {
  border-block-start: 1px solid var(--rule);
  margin: 0;
}

.specs__row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 34%) 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
}

.specs__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
  align-self: center;
}

.specs__value {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--fg);
  align-self: center;
}


/* ==========================================================================
   Thumbnails
   ========================================================================== */

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}

.thumb {
  width: 68px;
  /* The ratio belongs on the button, not only on the image inside it. When a
     photograph is missing the <img> is hidden, and a button sized by its
     contents then collapsed to a 2px brass line — the thumbnail strip came out
     as three thin bars. With the ratio here the button holds its square and
     shows the watermark, exactly like the main image above it. */
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background-color: var(--cream-sink);
  background-image: url("../img/brand/placeholder.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  overflow: hidden;
}

.thumb[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; }

.thumb img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   Notice
   ========================================================================== */

.notice {
  padding: var(--s-5);
  background: var(--bg-lift);
  border: 1px solid var(--rule-strong);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md);
}

.notice__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-block-end: var(--s-2);
}

.notice p { color: var(--fg-soft); }


/* ==========================================================================
   Footer
   ========================================================================== */

/* Espresso, with the woven texture — the same dark band as the hero, closing
   the page the way it opened. The classes are on the element: .on-dark for the
   colour, .weave for the threads.

   The logo down here is the same full-colour file as the header, given a white
   plate to sit on. Half the logo is black — the crescent and the script — and
   on this dark ground that half would vanish without one. In the header no
   plate is needed, because the header bar is itself light. */
.footer {
  padding-block: var(--s-8) var(--s-5);
  border-block-start: 1px solid var(--rule);
}

.footer .brand__mark {
  padding: 6px 9px;
  background: var(--cream-lift);
  border-radius: var(--r-md);
}

.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-block-end: var(--s-4);
}

.footer__blurb {
  margin-block-start: var(--s-4);
  max-width: 34ch;
  font-size: var(--fs-small);
  color: var(--fg-soft);
}

.footer__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }

.footer__list a,
.footer__list span {
  font-size: var(--fs-small);
  color: var(--fg-soft);
  text-decoration: none;
}

.footer__list a:hover { color: var(--fg); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-micro);
  color: var(--fg-soft);
}