/*
Theme Name: Magic Goods
Theme URI: https://magicgoods.store/
Author: Magic Goods
Description: Storefront theme for Magic Goods. Materials-led, specification-forward.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: magicgoods
*/

/* ============================================================ tokens
   Palette comes from oxidation, not from clay: this catalogue is brass left to
   patina, re-tinnable copper, marble, walnut, wool. Cool ground, patina accent.
   ------------------------------------------------------------------------- */
:root {
  --iron:      #22252a;
  --iron-soft: #3a3e45;
  --plaster:   #e7e5de;
  --plaster-d: #dcd9d0;
  --paper:     #f2f1ec;
  --verdigris: #4f7a66;
  --verdigris-d: #3d6151;
  --brass:     #a98b4f;
  --ash:       #63676c;
  --rule:      #cdc9be;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;

  /* perfect fourth from a 17px serif body */
  --t-xs: 0.78rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;
  --t-md: 1.41rem;
  --t-lg: 1.89rem;
  --t-xl: 2.51rem;
  --t-2xl: 3.35rem;
  --t-3xl: 4.47rem;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --shell: 78rem;
  --band: clamp(4.5rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--iron);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-variant-numeric: oldstyle-num;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band); }

/* Display type is a grotesque with a real condensed axis — what mercantile and
   hardware catalogues actually set their headings in. Body is the serif. */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 620;
  font-stretch: 94%;
  letter-spacing: -0.021em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, var(--t-3xl)); }
h2 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); }
h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; max-width: 62ch; }

.lede { font-size: var(--t-md); line-height: 1.5; color: var(--iron-soft); max-width: 46ch; }

/* The spec line. Structure carrying information, not decoration: for homewares
   the material and where it was made IS the content. */
.spec {
  font-family: var(--display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ash);
  font-variant-numeric: lining-num tabular-nums;
}

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

/* ============================================================ header */
.mast {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(9px);
  border-bottom: 1px solid var(--rule);
}
.mast__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--shell); margin-inline: auto;
  padding: 0.85rem var(--gut);
}
.mark {
  font-family: var(--display); font-weight: 700; font-stretch: 88%;
  font-size: 1.16rem; letter-spacing: -0.028em; text-decoration: none;
  white-space: nowrap;
}
.mark { display: inline-flex; align-items: center; gap: .5rem; }
.mark__glyph { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; color: var(--verdigris); }
.mark:hover .mark__glyph { color: var(--verdigris-d); }
.nav { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--display); font-size: var(--t-sm); font-weight: 500;
  text-decoration: none; color: var(--iron-soft);
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: 0.35rem; border-bottom: 1.5px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--iron); border-bottom-color: var(--verdigris); }
.nav__cart { font-variant-numeric: lining-num; }

/* ============================================================ hero
   One object in raking light with the type living in its negative space —
   not a headline stacked over a wash. */
.hero { position: relative; background: var(--plaster); border-bottom: 1px solid var(--rule); }
.hero__img { width: 100%; height: clamp(24rem, 66vh, 42rem); object-fit: cover; object-position: 22% 58%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(231,229,222,.55) 58%, rgba(231,229,222,.9) 78%);
}
.hero__type {
  position: absolute; inset: 0; z-index: 2;
  max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  text-align: right; pointer-events: none;
}
.hero__type > * { pointer-events: auto; }
.hero h1 { font-size: clamp(1.9rem, 3.35vw, 3rem); max-width: 19ch; line-height: 1.1; }
.hero .lede { margin-top: 1.05rem; max-width: 30ch; font-size: var(--t-base); color: var(--iron-soft); }
.hero__link {
  margin-top: 1.6rem; font-family: var(--display); font-size: var(--t-sm); font-weight: 600;
  text-decoration: none; border-bottom: 1.5px solid var(--verdigris); padding-bottom: 2px;
}
.hero__link:hover { color: var(--verdigris-d); }
@media (max-width: 46rem) {
  .hero::after { display: none; }
  .hero__img { height: 19rem; object-position: 40% 58%; }
  .hero__type { position: static; text-align: left; align-items: flex-start; padding-block: 2.4rem; background: var(--plaster); }
}

/* ============================================================ shelf
   An asymmetric arrangement, not a row of identical cards with identical
   radii and identical shadows. */
.shelf { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: repeat(6, 1fr); }
.shelf > *:nth-child(1) { grid-column: span 3; }
.shelf > *:nth-child(2) { grid-column: span 3; }
.shelf > *:nth-child(n+3) { grid-column: span 2; }
@media (max-width: 60rem) { .shelf { grid-template-columns: repeat(2, 1fr); }
  .shelf > * { grid-column: span 1 !important; } }

.item { display: block; text-decoration: none; }
.item__media { display: block; background: var(--plaster); overflow: hidden; }
.item__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.item:hover .item__media img { transform: scale(1.028); }
.item__name { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-base); margin-top: 0.85rem; letter-spacing: -0.012em; line-height: 1.25; }
.item__spec { display: block; margin-top: 0.28rem; line-height: 1.4; }
.item__price { display: block; margin-top: 0.5rem; font-family: var(--display); font-weight: 500; font-variant-numeric: lining-num tabular-nums; }
.item__price small { color: var(--ash); font-weight: 400; }

/* ============================================================ materials band
   The list of what the shop is actually made of. Content, not ornament. */
.materials { background: var(--iron); color: var(--plaster); }
.materials h2 { color: var(--plaster); max-width: 20ch; }
.materials__grid { display: grid; gap: 0 clamp(2rem, 5vw, 4.5rem); grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); margin-top: 2.4rem; }
.materials__row { padding-block: 1.05rem; border-top: 1px solid #3a3e45; display: flex; gap: 1rem; align-items: baseline; }
.materials__row dt { font-family: var(--display); font-weight: 600; font-size: var(--t-sm); flex: 0 0 7.5rem; }
.materials__row dd { margin: 0; color: #a9aab0; font-size: var(--t-sm); line-height: 1.45; }

/* ============================================================ sections */
.sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.sechead p { margin: 0; }
.more { font-family: var(--display); font-size: var(--t-sm); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--verdigris); padding-bottom: 2px; white-space: nowrap; }

.cats { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.cat { position: relative; display: block; text-decoration: none; background: var(--plaster); overflow: hidden; }
.cat img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.cat:hover img { transform: scale(1.03); }
.cat__label { position: absolute; left: 0; bottom: 0; right: 0; padding: 2.6rem 1rem 0.95rem; background: linear-gradient(transparent, rgba(34,37,42,.55)); color: #fff; font-family: var(--display); font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.008em; }

.notes { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.notes h3 { margin-bottom: 0.5rem; }
.notes p { color: var(--iron-soft); font-size: var(--t-sm); line-height: 1.6; }

/* ============================================================ shop + product */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }

.pd { display: grid; gap: clamp(1.8rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; }
@media (max-width: 56rem) { .pd { grid-template-columns: 1fr; } }
.pd__media { background: var(--plaster); }
.pd__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pd h1 { font-size: clamp(1.9rem, 3.4vw, var(--t-xl)); }
.pd__price { font-family: var(--display); font-weight: 600; font-size: var(--t-md); font-variant-numeric: lining-num tabular-nums; margin-top: 0.6rem; }
.pd__desc { margin-top: 1.4rem; }
.pd__table { width: 100%; border-collapse: collapse; margin-top: 1.8rem; }
.pd__table th, .pd__table td { text-align: left; padding: 0.72rem 0; border-top: 1px solid var(--rule); font-size: var(--t-sm); vertical-align: top; }
.pd__table th { font-family: var(--display); font-weight: 600; width: 9rem; color: var(--iron-soft); }

.btn {
  display: inline-block; font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  background: var(--iron); color: var(--paper); border: 1px solid var(--iron);
  padding: 0.82rem 1.5rem; text-decoration: none; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.btn:hover { background: var(--verdigris-d); border-color: var(--verdigris-d); }
.btn--quiet { background: transparent; color: var(--iron); }
.btn--quiet:hover { background: var(--iron); color: var(--paper); }

/* WooCommerce leaves its own furniture around; keep it in the same system. */
.woocommerce-variation-add-to-cart, .variations { margin-block: 1.2rem; }
.variations td, .variations th { padding-block: 0.4rem; }
select, input[type="text"], input[type="email"], input[type="number"], textarea {
  font-family: var(--body); font-size: var(--t-base); color: var(--iron);
  background: var(--paper); border: 1px solid var(--rule); padding: 0.6rem 0.7rem; max-width: 100%;
}
.quantity input { width: 5rem; }

/* ============================================================ prose pages */
.prose h2 { font-size: var(--t-md); margin-top: 2.4rem; margin-bottom: 0.6rem; }
.prose p { max-width: 60ch; }
.prose > :first-child { margin-top: 0; }

/* ============================================================ footer */
.foot { background: var(--iron); color: #a9aab0; margin-top: var(--band); }
.foot a { color: var(--plaster); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__in { display: grid; gap: 2.4rem; grid-template-columns: 1.4fr repeat(3, 1fr); padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 56rem) { .foot__in { grid-template-columns: 1fr 1fr; } }
.foot__label { font-family: var(--display); font-size: var(--t-sm); font-weight: 600; color: var(--plaster); margin: 0 0 0.9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--t-sm); }
.foot__mark { font-family: var(--display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.028em; color: var(--plaster); }
.foot__mark { display: inline-flex; align-items: center; gap: .5rem; }
.foot__mark .mark__glyph { color: var(--verdigris); }
.foot__blurb { font-size: var(--t-sm); max-width: 34ch; margin-top: 0.9rem; }
.foot__base { border-top: 1px solid #3a3e45; padding-block: 1.3rem; font-size: var(--t-xs); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ============================================================ woo furniture
   WooCommerce ships the variation form, quantity box and submit button as raw
   browser defaults. Left alone they are the one place the page stops looking
   designed, so they are brought into the same system rather than reset away. */
.variations { width: 100%; border-collapse: collapse; margin: 1.6rem 0 0; }
.variations th, .variations td { display: block; text-align: left; padding: 0; border: 0; }
.variations th {
  font-family: var(--display); font-weight: 600; font-size: var(--t-xs);
  color: var(--ash); margin-bottom: .45rem;
}
.variations td { margin-bottom: 1.1rem; }
.variations select {
  width: 100%; max-width: 22rem; appearance: none;
  font-family: var(--display); font-size: var(--t-sm); font-weight: 500;
  padding: .78rem 2.4rem .78rem .85rem;
  background-color: var(--paper);
  background-image: linear-gradient(45deg, transparent 50%, var(--iron-soft) 50%), linear-gradient(135deg, var(--iron-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  border: 1px solid var(--rule); border-radius: 0; cursor: pointer;
}
.variations select:hover { border-color: var(--ash); }
.reset_variations {
  display: inline-block; margin-top: .55rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 500;
  color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.reset_variations:hover { color: var(--iron); border-bottom-color: var(--ash); }

.woocommerce-variation-price { margin: 0 0 1.1rem; }
.woocommerce-variation-price .price,
.woocommerce-variation-price .amount {
  font-family: var(--display); font-weight: 600; font-size: var(--t-md);
  font-variant-numeric: lining-num tabular-nums; color: var(--iron);
}
.woocommerce-variation-availability p { margin: 0 0 .8rem; font-size: var(--t-sm); color: var(--ash); }

form.cart, .woocommerce-variation-add-to-cart { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; }
.quantity { display: inline-flex; }
.quantity input[type="number"] {
  width: 4.6rem; text-align: center; border: 1px solid var(--rule); border-radius: 0;
  font-family: var(--display); font-weight: 500; padding: .78rem .5rem; background: var(--paper);
}
.single_add_to_cart_button, button[name="add-to-cart"], .woocommerce-Button, .wc-block-components-button {
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  background: var(--iron); color: var(--paper); border: 1px solid var(--iron);
  border-radius: 0; padding: .82rem 1.7rem; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.single_add_to_cart_button:hover, button[name="add-to-cart"]:hover, .woocommerce-Button:hover {
  background: var(--verdigris-d); border-color: var(--verdigris-d);
}
.single_add_to_cart_button:disabled, .single_add_to_cart_button.disabled {
  background: var(--rule); border-color: var(--rule); color: var(--ash); cursor: not-allowed;
}

/* Notices — WooCommerce's default green/blue bars do not belong in this palette. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; margin: 0 0 1.6rem; padding: .95rem 1.15rem;
  background: var(--plaster); border-left: 2px solid var(--verdigris);
  font-size: var(--t-sm);
}
.woocommerce-error { border-left-color: #9a4b3d; }
.woocommerce-message a, .woocommerce-info a { font-family: var(--display); font-weight: 600; }

/* Touch comfort: 44px minimum on coarse pointers, where the 36px text-height
   targets are hardest to hit. Kept off fine pointers so the header stays tight. */
@media (pointer: coarse) {
  .mark { min-height: 44px; }
  .foot ul a, .more, .hero__link { display: inline-flex; align-items: center; min-height: 44px; }
  .item { padding-block: 2px; }
}