/*
Theme Name:        Justyuppy Print House
Theme URI:         https://justyuppy.com
Author:            Justyuppy Dev Team
Author URI:        https://justyuppy.com
Description:       Justyuppy v5 — The Print House Edition. Editorial luxury meets web agency. Light cream paper palette, Cormorant Garamond italic serif headlines, forest green laser accent, Space Mono labels, newspaper hairline grid. Built with UI/UX Skill v2. Fully WordPress & WooCommerce compatible.
Version:           5.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
License:           GPL v2 or later
Text Domain:       justyuppy
Tags:              agency, light, editorial, luxury, serif, print, woocommerce
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — The Print House
═══════════════════════════════════════════════════════════ */
:root {
  /* Palette — cream paper, black ink, forest green accent */
  --paper:     #FAF9F6;        /* page background */
  --paper-2:   #F3F2EE;        /* raised surface */
  --paper-3:   #EAE9E4;        /* deeper surface / cards */
  --ink:       #111111;        /* primary text */
  --ink-2:     #3A3A3A;        /* secondary text */
  --ink-3:     #7A7A74;        /* muted text */
  --ink-4:     #ABABAA;        /* disabled / placeholders */
  --green:     #1B5E3B;        /* forest green accent */
  --green-2:   #2D7A52;        /* green hover */
  --green-3:   #4A9E70;        /* green light */
  --green-pale:#EBF5EF;        /* green tint background */
  --rule:      rgba(17,17,17,.10);  /* hairline border */
  --rule-2:    rgba(17,17,17,.18);  /* medium border */
  --rule-3:    rgba(17,17,17,.06);  /* barely-there rule */

  /* Typography — the heart of this theme */
  --f-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --f-sans:    'Barlow', 'Helvetica Neue', Helvetica, sans-serif;
  --f-cond:    'Barlow Condensed', 'Helvetica Neue', Helvetica, sans-serif;
  --f-mono:    'Space Mono', 'Fira Code', 'Courier New', monospace;

  /* Type scale */
  --t-xs:   .6875rem;  /* 11px */
  --t-sm:   .8125rem;  /* 13px */
  --t-base: 1rem;      /* 16px */
  --t-md:   1.125rem;  /* 18px */
  --t-lg:   1.25rem;   /* 20px */
  --t-xl:   1.5rem;    /* 24px */
  --t-2xl:  2rem;      /* 32px */
  --t-3xl:  2.75rem;   /* 44px */
  --t-hero: clamp(3.5rem, 9vw, 8rem);
  --t-display: clamp(2.5rem, 6vw, 5.5rem);

  /* Spacing */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --s-12:48px;--s-16:64px;--s-20:80px;--s-24:96px;--s-32:128px;

  /* No border radius — the Print House uses sharp edges */
  --r: 0px;

  /* Shadows — subtle, print-like */
  --sh-card: 0 2px 24px rgba(17,17,17,.07);
  --sh-lift: 0 8px 40px rgba(17,17,17,.10);
  --sh-ink:  2px 2px 0 rgba(17,17,17,.15);

  /* Motion */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    550ms;

  /* Layout */
  --max-w:  1380px;
  --hdr-h:  68px;
}

/* ═══════════════════════════════════════════════════════════
   RESET — WordPress-hardened
═══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }

html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--f-sans) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
/* Admin bar fix */
body.admin-bar .jy-header { top: 32px !important; }
@media screen and (max-width:782px) {
  body.admin-bar .jy-header { top: 46px !important; }
}

img,video,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
ul,ol { list-style:none; }
.screen-reader-text {
  clip:rect(1px,1px,1px,1px); height:1px; overflow:hidden;
  position:absolute; width:1px; word-wrap:normal !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.jy-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width:768px)  { .jy-wrap { padding-inline: var(--s-10); } }
@media (min-width:1280px) { .jy-wrap { padding-inline: var(--s-20); } }

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
/* The hero / display serif — the soul of the theme */
.jy-serif {
  font-family: var(--f-serif);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
}
.jy-serif--upright { font-style: normal; }
.jy-serif--hero    { font-size: var(--t-hero); }
.jy-serif--display { font-size: var(--t-display); }
.jy-serif--section { font-size: clamp(2rem,4vw,3.25rem); }
.jy-serif--card    { font-size: var(--t-xl); }

.jy-label {
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.jy-label--green { color: var(--green); }
.jy-label--ink   { color: var(--ink); }

.jy-mono {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: -.02em;
}

.jy-body    { font-size: var(--t-base); color: var(--ink-2); line-height: 1.8; }
.jy-body-sm { font-size: var(--t-sm);  color: var(--ink-3); line-height: 1.75; }

/* Green ink highlight */
.jy-green { color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   HEADER — newspaper masthead style
═══════════════════════════════════════════════════════════ */
.jy-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  height: var(--hdr-h);
  background: rgba(250,249,246,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur-base);
}
.jy-header.scrolled { border-color: var(--rule-2); }

.jy-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-6);
  justify-content: space-between;
}

/* Logo — masthead style */
.jy-logo {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  text-decoration: none;
  flex-shrink: 0;
}
.jy-logo__mark {
  font-family: var(--f-serif);
  font-weight: 700;
  font-style: italic;
  font-size: 1.75rem;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
}
.jy-logo__mark span { color: var(--green); }
.jy-logo__divider {
  width: 1px;
  height: 20px;
  background: var(--rule-2);
  margin-inline: var(--s-2);
  align-self: center;
}
.jy-logo__sub {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* Nav links */
.jy-nav__links {
  display: none;
  align-items: center;
  flex: 1;
  justify-content: center;
}
@media (min-width:1024px) { .jy-nav__links { display: flex; } }

.jy-nav__links a {
  padding: 8px 14px;
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  position: relative;
  transition: color var(--dur-fast);
}
.jy-nav__links a::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 14px; right: 14px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.jy-nav__links a:hover { color: var(--ink); }
.jy-nav__links a:hover::after { transform: scaleX(1); }

.jy-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Availability tag */
.jy-avail {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--green);
  padding: 5px 10px;
  border: 1px solid rgba(27,94,59,.25);
  background: var(--green-pale);
}
@media (min-width:1100px) { .jy-avail { display: flex; } }
.jy-avail__dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Buttons */
.jy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px 24px;
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.jy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-102%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}
.jy-btn:hover::before { transform: none; }
.jy-btn > * { position: relative; z-index: 1; }
.jy-btn > span { position: relative; z-index: 1; }

.jy-btn--green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.jy-btn--green::before { background: var(--green-2); }
.jy-btn--green:hover   { box-shadow: var(--sh-ink); }

.jy-btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.jy-btn--outline::before { background: var(--paper-3); }
.jy-btn--outline:hover   { border-color: var(--ink); }

.jy-btn--ghost {
  background: transparent;
  color: var(--ink-3);
  border: none;
  padding-inline: 0;
  gap: var(--s-3);
}
.jy-btn--ghost::before { display: none; }
.jy-btn--ghost:hover   { color: var(--green); gap: var(--s-4); }

.jy-btn--lg { padding: 15px 36px; font-size: var(--t-sm); }
.jy-btn--sm { padding: 8px 18px; }

/* Hamburger */
.jy-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--rule-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast);
}
.jy-burger:hover { border-color: var(--green); }
.jy-burger span { display:block; width:18px; height:1px; background:var(--ink-2); transition:all var(--dur-base); }
.jy-burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.jy-burger.open span:nth-child(2) { opacity:0; }
.jy-burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (min-width:1024px) { .jy-burger { display:none; } }

/* Mobile nav */
.jy-mobile-nav {
  position: fixed;
  inset: var(--hdr-h) 0 0;
  z-index: 490;
  background: var(--paper);
  padding: var(--s-8) var(--s-6);
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.jy-mobile-nav.open { display: flex; }
.jy-mobile-nav__item {
  display: block;
  padding: var(--s-5) 0;
  font-family: var(--f-serif);
  font-size: var(--t-2xl);
  font-style: italic;
  font-weight: 600;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-3);
  transition: color var(--dur-fast);
}
.jy-mobile-nav__item:hover { color: var(--green); }

/* ═══════════════════════════════════════════════════════════
   HERO — pure typography, no images
═══════════════════════════════════════════════════════════ */
.jy-hero {
  padding-top: var(--hdr-h);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
/* Faint grid lines — like ruled paper */
.jy-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-3) 1px, transparent 1px);
  background-size: 100% 80px;
  pointer-events: none;
}

.jy-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width:960px) {
  .jy-hero__inner { grid-template-columns: 1fr 320px; }
}

/* Left: typography block */
.jy-hero__copy {
  padding: var(--s-16) 0 var(--s-20);
  border-right: 1px solid var(--rule);
  position: relative;
}
@media (min-width:960px) {
  .jy-hero__copy { padding: var(--s-20) var(--s-10) var(--s-24) 0; }
}

/* Giant issue number — rotated, bleeds left */
.jy-hero__issue {
  position: absolute;
  top: var(--s-16);
  left: -40px;
  font-family: var(--f-mono);
  font-size: 200px;
  color: var(--rule-3);
  line-height: 1;
  letter-spacing: -.06em;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  pointer-events: none;
  user-select: none;
}
@media (max-width:767px) { .jy-hero__issue { display: none; } }

.jy-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.jy-hero__kicker-rule {
  flex: 1;
  height: 1px;
  background: var(--rule-2);
}
.jy-hero__kicker-rule--short { max-width: 40px; flex: none; }

/* THE headline */
.jy-hero__headline {
  font-family: var(--f-serif);
  font-size: var(--t-hero);
  font-weight: 600;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: var(--s-8);
}
.jy-hero__headline .green { color: var(--green); font-style: normal; }
.jy-hero__headline .upright { font-style: normal; }

/* Subtitle with hanging indent */
.jy-hero__sub {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 52ch;
  margin-bottom: var(--s-10);
  padding-left: var(--s-6);
  border-left: 2px solid var(--green);
}

.jy-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-12);
}

/* Stats — inline, separated by thin rules */
.jy-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.jy-stat {
  padding: var(--s-5) var(--s-6);
  border-right: 1px solid var(--rule);
}
.jy-stat:last-child { border-right: none; }
.jy-stat__num {
  font-family: var(--f-serif);
  font-size: var(--t-3xl);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.jy-stat__num.green { color: var(--green); }
.jy-stat__label {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: var(--s-1);
}

/* Right sidebar — newspaper sidebar column */
.jy-hero__sidebar {
  padding: var(--s-8) 0 var(--s-8) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (max-width:959px) { .jy-hero__sidebar { display: none; } }

.jy-sidebar-block {
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.jy-sidebar-block:last-child { border-bottom: none; }
.jy-sidebar-block__label {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.jy-sidebar-price {
  font-family: var(--f-serif);
  font-size: var(--t-3xl);
  font-weight: 600;
  font-style: italic;
  color: var(--green);
  line-height: 1;
  letter-spacing: -.03em;
}
.jy-sidebar-price-sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s-1); }
.jy-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.jy-sidebar-list-item {
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  line-height: 1.5;
}
.jy-sidebar-list-item::before {
  content: '→';
  color: var(--green);
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════════════════ */
.jy-section {
  padding: var(--s-24) 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.jy-section--paper-2  { background: var(--paper-2); }
.jy-section--paper-3  { background: var(--paper-3); }
.jy-section--ink      { background: var(--ink); }
.jy-section--green    { background: var(--green); }
.jy-section--sm       { padding: var(--s-16) 0; }

/* Section header */
.jy-sec-hdr {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: start;
  margin-bottom: var(--s-16);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--rule);
}
.jy-sec-hdr--full { grid-template-columns: 1fr; }
.jy-sec-hdr__num {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .08em;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  padding-bottom: var(--s-2);
}
.jy-sec-hdr__inner { }
.jy-sec-hdr__eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}

/* ═══════════════════════════════════════════════════════════
   SERVICES — newspaper column layout
═══════════════════════════════════════════════════════════ */
.jy-services-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width:640px)  { .jy-services-cols { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .jy-services-cols { grid-template-columns: repeat(3,1fr); } }

.jy-svc {
  padding: var(--s-8);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-base);
}
.jy-svc:hover { background: var(--paper-2); }
.jy-svc--featured { background: var(--ink); }
.jy-svc--featured:hover { background: #1a1a1a; }
.jy-svc:nth-child(3n) { border-right: none; }

.jy-svc__num {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .08em;
  margin-bottom: var(--s-2);
}
.jy-svc--featured .jy-svc__num { color: rgba(255,255,255,.3); }

.jy-svc__title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.jy-svc--featured .jy-svc__title { color: #fff; }
.jy-svc--featured .jy-svc__title span { color: #9fd9b4; }

.jy-svc__desc {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.75;
  flex: 1;
}
.jy-svc--featured .jy-svc__desc { color: rgba(255,255,255,.6); }

.jy-svc__rule { height: 1px; background: var(--rule); }
.jy-svc--featured .jy-svc__rule { background: rgba(255,255,255,.12); }

.jy-svc__feats {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.jy-svc__feat {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.jy-svc--featured .jy-svc__feat { color: rgba(255,255,255,.5); }
.jy-svc__feat::before { content: '—'; color: var(--green); font-weight: 400; }
.jy-svc--featured .jy-svc__feat::before { color: #9fd9b4; }

.jy-svc__link {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  transition: gap var(--dur-fast);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.jy-svc--featured .jy-svc__link { color: #9fd9b4; }
.jy-svc:hover .jy-svc__link { gap: var(--s-4); }

/* ═══════════════════════════════════════════════════════════
   QUOTE CONFIGURATOR — receipt / print style
═══════════════════════════════════════════════════════════ */
.jy-config {
  border: 1px solid var(--rule-2);
  background: #fff;
  box-shadow: var(--sh-card);
}
.jy-config__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--s-4) var(--s-6);
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
}
.jy-config__top-title {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.02em;
}
.jy-config__top-date {
  font-family: var(--f-mono);
  font-size: 9px;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em;
}

.jy-config__body {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width:800px) { .jy-config__body { grid-template-columns: 1fr 300px; } }

.jy-config__items { }
.jy-config-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--rule-3);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.jy-config-item:hover { background: var(--paper); }
.jy-config-item.checked { background: var(--green-pale); }

.jy-config-item__box {
  width: 14px; height: 14px;
  border: 1px solid var(--rule-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-fast);
}
.jy-config-item.checked .jy-config-item__box {
  background: var(--green);
  border-color: var(--green);
}
.jy-config-item__tick {
  width: 8px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2 2 4-4' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.jy-config-item.checked .jy-config-item__tick { opacity: 1; }

.jy-config-item__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.jy-config-item__sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .04em;
  margin-top: 2px;
}
.jy-config-item__price {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
  letter-spacing: -.02em;
}
.jy-config-item.checked .jy-config-item__price { color: var(--green); font-weight: 700; }

.jy-config__receipt {
  border-left: 1px solid var(--rule);
  padding: var(--s-6);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.jy-config__receipt-label {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.jy-config__total {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem,5vw,3.5rem);
  font-weight: 600;
  font-style: italic;
  color: var(--green);
  letter-spacing: -.04em;
  line-height: 1;
}
.jy-config__total-sub {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .06em;
  margin-top: var(--s-1);
}
.jy-config__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.jy-config__line {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
}
.jy-config__line-price { color: var(--green); font-weight: 600; font-family: var(--f-mono); }
.jy-config__empty {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .06em;
  padding: var(--s-4) 0;
}

/* ═══════════════════════════════════════════════════════════
   PROCESS — timeline with print-style numbering
═══════════════════════════════════════════════════════════ */
.jy-process { display: flex; flex-direction: column; gap: 0; }

.jy-proc-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s-8) 0;
  transition: background var(--dur-base);
  cursor: default;
}
.jy-proc-step:hover { background: var(--paper-2); }
.jy-proc-step:hover .jy-proc-num { color: var(--green); }
.jy-proc-step:last-child { border-bottom: none; }

.jy-proc-num {
  font-family: var(--f-serif);
  font-size: var(--t-3xl);
  font-weight: 600;
  font-style: italic;
  color: var(--paper-3);
  letter-spacing: -.04em;
  line-height: 1;
  transition: color var(--dur-base);
  padding-top: var(--s-1);
}
.jy-proc-content { padding-left: var(--s-6); border-left: 1px solid var(--rule); }
.jy-proc-title {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: var(--s-2);
}
.jy-proc-desc { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.75; max-width: 58ch; }
.jy-proc-time {
  display: inline-block;
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--green);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════
   PRICING — refined magazine-style cards
═══════════════════════════════════════════════════════════ */
.jy-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--rule-2);
}
@media (min-width:768px)  { .jy-price-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1100px) { .jy-price-grid { grid-template-columns: repeat(3,1fr); } }

.jy-price-card {
  padding: var(--s-8);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  background: #fff;
  transition: background var(--dur-base);
}
.jy-price-card:hover { background: var(--paper); }
.jy-price-card:last-child { border-right: none; }
.jy-price-card--featured {
  background: var(--green);
}
.jy-price-card--featured:hover { background: var(--green-2); }

.jy-price-card__top-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.15);
  padding: 3px 10px;
  display: inline-block;
  width: fit-content;
}
.jy-price-card__tier {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-4);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.jy-price-card--featured .jy-price-card__tier { color: rgba(255,255,255,.6); }

.jy-price-card__name {
  font-family: var(--f-serif);
  font-size: var(--t-xl);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.jy-price-card--featured .jy-price-card__name { color: #fff; }

.jy-price-card__desc {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.7;
}
.jy-price-card--featured .jy-price-card__desc { color: rgba(255,255,255,.7); }

.jy-price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.jy-price-card--featured .jy-price-card__amount {
  border-color: rgba(255,255,255,.2);
}
.jy-price-card__cur { font-size: var(--t-lg); color: var(--ink-3); }
.jy-price-card--featured .jy-price-card__cur { color: rgba(255,255,255,.7); }
.jy-price-card__num {
  font-family: var(--f-serif);
  font-size: clamp(2.5rem,5vw,4rem);
  font-weight: 600;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: 1;
}
.jy-price-card--featured .jy-price-card__num { color: #fff; }
.jy-price-card__period { font-size: var(--t-sm); color: var(--ink-3); }
.jy-price-card--featured .jy-price-card__period { color: rgba(255,255,255,.6); }

.jy-price-feats { display:flex; flex-direction:column; gap:var(--s-3); flex:1; }
.jy-price-feat {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.4;
}
.jy-price-feat--no { opacity: .35; text-decoration: line-through; }
.jy-price-feat-mark {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--green);
  margin-top: 2px;
}
.jy-price-card--featured .jy-price-feat { color: rgba(255,255,255,.8); }
.jy-price-card--featured .jy-price-feat-mark { color: rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — large pull-quote style
═══════════════════════════════════════════════════════════ */
.jy-testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width:640px)  { .jy-testi-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .jy-testi-grid { grid-template-columns: repeat(3,1fr); } }

.jy-testi {
  padding: var(--s-8);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.jy-testi:nth-child(3n) { border-right: none; }

/* Opening quote mark */
.jy-testi__quote-mark {
  font-family: var(--f-serif);
  font-size: 4rem;
  line-height: .8;
  color: var(--green);
  font-style: italic;
}
.jy-testi__text {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -.01em;
  flex: 1;
}
.jy-testi__divider { height: 1px; background: var(--rule); }
.jy-testi__author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.jy-testi__avatar {
  width: 32px; height: 32px;
  background: var(--green-pale);
  border: 1px solid rgba(27,94,59,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--green);
  flex-shrink: 0;
}
.jy-testi__name { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.jy-testi__role { font-family: var(--f-mono); font-size: 9px; color: var(--ink-3); letter-spacing: .06em; }
.jy-testi__stars { font-size: 10px; color: var(--green); letter-spacing: .06em; }

/* ═══════════════════════════════════════════════════════════
   CTA BAND — ink on white
═══════════════════════════════════════════════════════════ */
.jy-cta-band {
  background: var(--ink);
  color: #fff;
  padding: var(--s-24) 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}
.jy-cta-band::before {
  content: 'JY';
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  font-family: var(--f-serif);
  font-size: 28rem;
  font-style: italic;
  font-weight: 700;
  color: rgba(255,255,255,.025);
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
  user-select: none;
}
.jy-cta-band .jy-serif--display { color: #fff; line-height: .95; }
.jy-cta-band__sub {
  font-size: var(--t-md);
  color: rgba(255,255,255,.6);
  max-width: 50ch;
  line-height: 1.75;
  margin: var(--s-6) 0 var(--s-10);
}
.jy-cta-band .jy-btn--green { background: var(--green-pale); color: var(--green); border-color: var(--green-pale); }
.jy-cta-band .jy-btn--green:hover { background: var(--green-3); color: #fff; }
.jy-cta-band .jy-btn--outline { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.jy-cta-band .jy-btn--outline:hover { border-color: #fff; color: #fff; }

/* NL form */
.jy-nl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 440px;
  margin-top: var(--s-8);
}
.jy-nl-input {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: var(--t-sm);
  outline: none;
  transition: border-color var(--dur-fast);
}
.jy-nl-input::placeholder { color: rgba(255,255,255,.35); }
.jy-nl-input:focus { border-color: rgba(255,255,255,.4); }
.jy-nl-btn {
  padding: 12px 20px;
  background: var(--green);
  color: #fff;
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--green);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.jy-nl-btn:hover { background: var(--green-2); }

/* ═══════════════════════════════════════════════════════════
   FOOTER — newspaper footer
═══════════════════════════════════════════════════════════ */
.jy-footer { background: var(--paper); border-top: 2px solid var(--ink); }
.jy-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width:640px)  { .jy-footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px) { .jy-footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }

.jy-footer-col {
  padding: var(--s-10) var(--s-6);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.jy-footer-col:last-child { border-right: none; }

.jy-footer-col__head {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.jy-footer-links { display:flex; flex-direction:column; gap:var(--s-3); }
.jy-footer-links a {
  font-size: var(--t-sm);
  color: var(--ink-3);
  transition: color var(--dur-fast);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.jy-footer-links a::before { content: '—'; color: var(--paper-3); transition: color var(--dur-fast); font-size: 10px; }
.jy-footer-links a:hover { color: var(--green); }
.jy-footer-links a:hover::before { color: var(--green); }

.jy-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  padding: var(--s-5) var(--s-6);
}
.jy-footer-copy { font-family: var(--f-mono); font-size: 9px; color: var(--ink-3); letter-spacing: .06em; }

/* Uptime */
.jy-uptime { display:flex; align-items:center; gap:var(--s-3); }
.jy-uptime-bars { display:flex; gap:1px; }
.jy-uptime-bar { width:3px; height:12px; background:var(--green); opacity:.5; }
.jy-uptime-pct { font-family:var(--f-mono); font-size:9px; color:var(--green); font-weight:700; }

/* Chat trigger */
.jy-chat-btn {
  position: fixed;
  bottom: var(--s-6); right: var(--s-6);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  font-family: var(--f-cond);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  box-shadow: var(--sh-lift);
  transition: all var(--dur-base);
}
.jy-chat-btn:hover { background: var(--green); }
.jy-chat-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
.jy-chat-btn:hover .jy-chat-dot { background:#fff; }
@media (max-width:639px) { .jy-chat-btn .jy-chat-lbl { display:none; } }

/* Scroll reveal */
.jy-reveal { opacity:0; transform:translateY(20px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.jy-reveal.visible { opacity:1; transform:translateY(0); }
.jy-delay-1{transition-delay:80ms} .jy-delay-2{transition-delay:160ms}
.jy-delay-3{transition-delay:240ms} .jy-delay-4{transition-delay:320ms}
.jy-delay-5{transition-delay:400ms} .jy-delay-6{transition-delay:480ms}

/* Toast */
.jy-toast-wrap { position:fixed; bottom:80px; right:24px; z-index:600; }
.jy-toast {
  background:#fff;
  border:1px solid var(--rule-2);
  border-left:3px solid var(--green);
  padding:12px 16px;
  font-size:var(--t-sm);
  color:var(--ink-2);
  box-shadow:var(--sh-lift);
  min-width:240px;
  opacity:0;
  transform:translateX(20px);
  transition:all var(--dur-base) var(--ease-out);
}
.jy-toast.show { opacity:1; transform:translateX(0); }

/* Entry content */
.jy-entry-content p { color:var(--ink-2); line-height:1.85; margin-bottom:1.5rem; }
.jy-entry-content h2,.jy-entry-content h3 { font-family:var(--f-serif); font-style:italic; font-weight:600; color:var(--ink); letter-spacing:-.02em; margin:2.5rem 0 1rem; }
.jy-entry-content a { color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.jy-entry-content blockquote { border-left:2px solid var(--green); padding:var(--s-4) var(--s-6); font-family:var(--f-serif); font-style:italic; font-size:var(--t-xl); color:var(--ink); margin:var(--s-8) 0; background:var(--paper-2); }
.jy-entry-content code { font-family:var(--f-mono); background:var(--paper-3); padding:2px 6px; font-size:.875em; color:var(--green); }

/* Blog */
.jy-blog-grid { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--rule); }
@media (min-width:640px)  { .jy-blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .jy-blog-grid { grid-template-columns:repeat(3,1fr); } }
.jy-blog-card { display:flex; flex-direction:column; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); transition:background var(--dur-base); }
.jy-blog-card:hover { background:var(--paper-2); }
.jy-blog-card__img { aspect-ratio:16/9; background:var(--paper-3); overflow:hidden; }
.jy-blog-card__img img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow); }
.jy-blog-card:hover .jy-blog-card__img img { transform:scale(1.03); }
.jy-blog-card__body { padding:var(--s-6); flex:1; display:flex; flex-direction:column; gap:var(--s-3); }
.jy-blog-card__cat { font-family:var(--f-mono); font-size:9px; color:var(--green); letter-spacing:.12em; text-transform:uppercase; }
.jy-blog-card__title { font-family:var(--f-serif); font-size:var(--t-xl); font-style:italic; font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1.25; }
.jy-blog-card__excerpt { font-size:var(--t-sm); color:var(--ink-3); line-height:1.75; flex:1; }
.jy-blog-card__meta { font-family:var(--f-mono); font-size:9px; color:var(--ink-4); letter-spacing:.06em; padding-top:var(--s-3); border-top:1px solid var(--rule); display:flex; gap:var(--s-3); margin-top:auto; }

/* Page hero */
.jy-page-hero { padding-top:calc(var(--hdr-h)+var(--s-12)); padding-bottom:var(--s-12); background:var(--paper-2); border-bottom:1px solid var(--rule); }
.jy-page-hero h1 { font-family:var(--f-serif); font-size:clamp(2.5rem,6vw,5rem); font-style:italic; font-weight:600; color:var(--ink); letter-spacing:-.03em; line-height:.95; margin-top:var(--s-3); }

/* Pagination */
.page-numbers { display:flex; gap:1px; flex-wrap:wrap; margin-top:var(--s-10); }
.page-numbers a,.page-numbers span { width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; background:#fff; border:1px solid var(--rule); color:var(--ink-3); transition:all var(--dur-fast); }
.page-numbers .current { background:var(--green); color:#fff; border-color:var(--green); }
.page-numbers a:hover { border-color:var(--green); color:var(--green); }

/* WooCommerce */
.jy-woo-content { padding:var(--s-10) 0; }
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button {
  background:var(--green)!important; color:#fff!important; border-radius:0!important;
  font-family:var(--f-cond)!important; font-weight:600!important; letter-spacing:.18em!important;
  text-transform:uppercase!important; border:none!important; transition:all var(--dur-base)!important;
}
.woocommerce a.button:hover,.woocommerce button.button:hover { background:var(--green-2)!important; }

/* Utilities */
::selection { background:rgba(27,94,59,.15); color:var(--ink); }
::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:var(--paper); }
::-webkit-scrollbar-thumb { background:var(--paper-3); } ::-webkit-scrollbar-thumb:hover { background:var(--green); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
