/*
Theme Name:   LogoMarket — Astra Child
Theme URI:    https://logomarket.example
Description:  Exclusive premade-logo marketplace. Each logo is sold ONCE, then permanently removed from the catalog. Built as an Astra child theme with WooCommerce + PayPal. Independent theme — not related to any other child theme in this workspace.
Author:       LogoMarket
Author URI:   https://logomarket.example
Template:     astra
Version:      0.1.0
Text Domain:  logomarket
*/

/* =================================================================
   DESIGN TOKENS  (source of truth — mirror of the Next.js prototype)
   Prefix: --lm-*   |   PHP prefix: lm_   |   text-domain: logomarket
   ================================================================= */
:root {
  /* Brand — Indigo (primary / trust) */
  --lm-primary-50:  #eeeefc;
  --lm-primary-100: #dedefa;
  --lm-primary-200: #b8b8f3;
  --lm-primary-300: #8f8fea;
  --lm-primary-400: #5c5cdc;
  --lm-primary-500: #3434d0;
  --lm-primary-600: #2c2cae;
  --lm-primary-700: #22228a;
  --lm-primary-800: #191966;
  --lm-primary-900: #0f0f3d;

  /* Accent — Orange (THE conversion CTA colour) */
  --lm-secondary-50:  #fff3ec;
  --lm-secondary-100: #ffe4d4;
  --lm-secondary-300: #ffb088;
  --lm-secondary-400: #ff925f;
  --lm-secondary-500: #ff7a45;
  --lm-secondary-600: #e8632e;
  --lm-secondary-700: #c24f20;

  /* Ink (text / dark surfaces) */
  --lm-ink:      #0b0b18;
  --lm-ink-400:  #6b6b83;
  --lm-ink-500:  #4a4a63;
  --lm-ink-600:  #2a2a42;
  --lm-ink-700:  #1a1a2e;

  /* Success (checklist / secure) */
  --lm-success-50:  #ecfdf3;
  --lm-success-500: #16a34a;
  --lm-success-600: #15803d;

  /* Surfaces */
  --lm-bg:       #fcfcff;
  --lm-surface:  #ffffff;
  --lm-border:   rgba(11, 11, 24, 0.08);

  /* Type */
  --lm-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --lm-font-body:    "Inter", system-ui, sans-serif;

  /* Radius / shadow / motion */
  --lm-radius:    16px;
  --lm-radius-lg: 24px;
  --lm-shadow:    0 8px 24px -16px rgba(11, 11, 24, 0.14);
  --lm-shadow-sm: 0 2px 10px -8px rgba(11, 11, 24, 0.10);
  --lm-ease:      cubic-bezier(0.4, 0, 0.2, 1);

  --lm-container: 1160px;
}

/* =================================================================
   FULL-WIDTH OVERRIDE — neutralise Astra's content container on every
   LogoMarket screen (body.logomarket) so our own .lm-container owns the
   width. Belt-and-braces with the PHP layout filters in functions.php.
   ================================================================= */
body.logomarket .ast-container,
body.logomarket #content .ast-container,
body.logomarket .ast-woocommerce-container { max-width: 100%; padding-left: 0; padding-right: 0; }
body.logomarket #primary { max-width: 100%; width: 100%; margin: 0; padding: 0; float: none; }
body.logomarket #secondary { display: none; }
body.logomarket .site-content .content-area { width: 100%; }
body.logomarket .entry-content > * { margin-block: 0; }
body.logomarket main.lm { width: 100%; max-width: 100%; }

/* =================================================================
   BASE  (light only — NO dark UI anywhere per brand spec)
   ================================================================= */
html { scroll-behavior: smooth; }

body.logomarket,
.lm {
  background: var(--lm-bg);
  color: var(--lm-ink-700);
  font-family: var(--lm-font-body);
  -webkit-font-smoothing: antialiased;
}

.lm h1, .lm h2, .lm h3, .lm h4,
.lm .lm-display { font-family: var(--lm-font-display); letter-spacing: -0.02em; }

.lm-container { max-width: var(--lm-container); margin-inline: auto; padding-inline: 24px; }

/* Primary conversion button — reused everywhere the user should click "Buy" */
.lm-btn-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--lm-secondary-500); color: #fff; font-weight: 700;
  padding: 16px 28px; border-radius: var(--lm-radius); border: 0; cursor: pointer;
  box-shadow: 0 12px 24px -8px rgba(255, 122, 69, 0.5);
  transition: background .2s var(--lm-ease), transform .2s var(--lm-ease);
  overflow: hidden;
}
.lm-btn-cta:hover { background: var(--lm-secondary-600); }
.lm-btn-cta:active { transform: translateY(1px); }

.lm-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--lm-ink-600); font-weight: 600;
  padding: 14px 22px; border-radius: var(--lm-radius);
  border: 1px solid var(--lm-border); cursor: pointer;
  transition: border-color .2s var(--lm-ease), color .2s var(--lm-ease);
}
.lm-btn-ghost:hover { border-color: var(--lm-ink-400); color: var(--lm-ink); }

/* Shine sweep for the CTA (respects reduced motion) */
@keyframes lm-shine { 0% { transform: translateX(-120%);} 60%,100% { transform: translateX(220%);} }
.lm-shine::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%); animation: lm-shine 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .lm-shine::after { animation: none; } }

/* "SOLD" state used on archive cards */
.lm-sold { position: relative; filter: grayscale(1); opacity: .55; pointer-events: none; }
.lm-sold::after {
  content: "SOLD"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--lm-font-display); font-weight: 800; letter-spacing: .25em;
  color: var(--lm-ink); transform: rotate(-8deg);
}

/* =================================================================
   CATALOG CARD  (woocommerce/content-product.php — §5.1, §14.2)
   Reusable across shop, homepage, related products and the sold wall,
   so it lives here with the other shared components.
   ================================================================= */
.lm ul.products {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1020px) { .lm ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .lm ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .lm ul.products { grid-template-columns: 1fr; } }
.lm ul.products::before, .lm ul.products::after { content: none; } /* kill Woo clearfix */

.lm-pcard {
  margin: 0; width: auto; float: none;                      /* undo Woo/Astra loop styles */
  background: var(--lm-surface); border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-lg); overflow: hidden;
  transition: transform .25s var(--lm-ease), box-shadow .25s var(--lm-ease);
}
.lm-pcard:hover { transform: translateY(-6px); box-shadow: var(--lm-shadow); }
@media (prefers-reduced-motion: reduce) { .lm-pcard, .lm-pcard:hover { transform: none; transition: none; } }

.lm-pcard__link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.lm-pcard__link:focus-visible { outline: 3px solid var(--lm-primary-300); outline-offset: 2px; border-radius: var(--lm-radius-lg); }

.lm-pcard__media {
  display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 12%;
  background: linear-gradient(135deg, var(--lm-primary-50), #fff 70%);
}
.lm-pcard__img, .lm-pcard__media img { max-width: 100%; height: auto; border-radius: var(--lm-radius); }

.lm-pcard__body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.lm-pcard__title { font-family: var(--lm-font-display); font-weight: 600; font-size: 15px; color: var(--lm-ink); }
.lm-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-pcard__price { font-family: var(--lm-font-display); font-weight: 800; font-size: 16px; color: var(--lm-ink); }
.lm-pcard__price del { color: var(--lm-ink-400); font-weight: 500; margin-right: 6px; }
.lm-pcard__pill {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  color: var(--lm-secondary-600); background: var(--lm-secondary-50);
  padding: 4px 10px; border-radius: 999px;
}
.lm-pcard__pill.is-sold { color: var(--lm-ink-500); background: rgba(11, 11, 24, .06); }

/* =================================================================
   FOOTER BAND  (template-parts/footer-band.php) — reusable site
   footer section: brand + links + trust. Light, corporate.
   ================================================================= */
.lm-footerband { margin-top: 64px; border-top: 1px solid var(--lm-border); background: var(--lm-surface); }
.lm-footerband__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(24px, 4vw, 56px); padding-top: 56px; padding-bottom: 40px; }
@media (max-width: 860px) { .lm-footerband__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lm-footerband__grid { grid-template-columns: 1fr; } }

.lm-footerband__logo { font-family: var(--lm-font-display); font-weight: 800; font-size: 20px; color: var(--lm-ink); }
.lm-footerband__brand p { color: var(--lm-ink-500); font-size: 14px; line-height: 1.6; margin: 10px 0 16px; max-width: 34ch; }
.lm-footerband__trust { display: flex; flex-wrap: wrap; gap: 14px; }
.lm-footerband__trust span { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--lm-ink-600); }
.lm-footerband__trust svg { width: 15px; height: 15px; color: var(--lm-primary-500); }

.lm-footerband__col h4 { font-size: 13px; font-weight: 800; color: var(--lm-ink);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.lm-footerband__col a { display: block; padding: 5px 0; font-size: 14px; color: var(--lm-ink-500);
  text-decoration: none; transition: color .2s var(--lm-ease); }
.lm-footerband__col a:hover { color: var(--lm-primary-600); }
.lm-footerband__promise { font-size: 13px; color: var(--lm-ink-500); line-height: 1.65; margin: 0; }

.lm-footerband__bottom { padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--lm-border);
  font-size: 12px; color: var(--lm-ink-400); }