/* ===========================================================================
   Ornament Shop — site stylesheet ("Quiet Frost")
   Plain CSS translation of the bound design system tokens/components.
   One file, linked by every page via includes/header.php.
   =========================================================================== */

:root{
  --green-950:#06210F; --green-900:#0A2E15; --green-800:#0F3F1D; --green-700:#155A2A;
  --green-600:#1A7D3B; --green-500:#219449; --green-400:#35AE60; --green-300:#6FC98D;
  --green-200:#ACE0BE; --green-100:#DBF2E2; --green-050:#EDF9F1;
  --berry-900:#2C0A10; --berry-800:#431019; --berry-700:#5C1721; --berry-600:#7A1F2B;
  --berry-500:#99303F; --berry-400:#B85667; --berry-300:#D48A97; --berry-200:#E8BEC6; --berry-100:#F6E4E7;
  --pewter-800:#48525C; --pewter-700:#5A6570; --pewter-600:#707C87; --pewter-500:#8A96A1;
  --pewter-400:#A7B1BA; --pewter-300:#C4CCD2; --pewter-200:#DEE3E6; --pewter-100:#EFF2F4;
  --frostblue-700:#2C5B78; --frostblue-600:#3A7597; --frostblue-500:#4F92B4;
  --frostblue-300:#A3C7D8; --frostblue-100:#E7F1F5;
  --snow:#F7F9F8; --paper:#FFFFFF; --frost-100:#EDF2EF; --frost-200:#E3EAE5;
  --sand-300:#E4E9E5; --sand-400:#D2DAD3;
  --ink-900:#22201C; --ink-700:#3B372F; --ink-600:#5A544B; --ink-500:#7A7266; --ink-400:#9A9182; --ink-300:#C2B9A8;

  --color-primary:var(--green-600); --color-primary-hover:var(--green-700);
  --color-accent:var(--berry-600); --color-accent-hover:var(--berry-700);
  --color-pewter:var(--pewter-500);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-600); --text-subtle:var(--ink-400);
  --surface-page:var(--snow); --surface-card:var(--paper); --surface-sunken:var(--frost-100); --surface-inverse:var(--green-900);
  --border-subtle:var(--sand-300); --border-default:var(--sand-400);

  --font-display:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --font-ui:"Trebuchet MS","Segoe UI",Tahoma,Helvetica,Arial,sans-serif;
  --font-mono:"Courier New",Courier,monospace;

  --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(34,32,28,.08),0 1px 2px rgba(34,32,28,.05);
  --shadow-md:0 4px 10px rgba(34,32,28,.08),0 2px 4px rgba(34,32,28,.06);
  --shadow-lg:0 12px 28px rgba(34,32,28,.12),0 4px 8px rgba(34,32,28,.06);
  --container-max:1200px; --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.55;color:var(--text-body);background:var(--surface-page)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-accent);text-decoration:underline}
img{max-width:100%;display:block}
.os-section{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.os-eyebrow{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-pewter)}

/* ---- Header / nav ------------------------------------------------------ */
.os-announce{background:var(--green-950);color:#fff;text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em;padding:10px 16px}
.os-nav{background:var(--surface-page);border-bottom:1px solid var(--border-subtle)}
.os-nav__inner{max-width:var(--container-max);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.os-wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--green-700)}
.os-wordmark em{font-style:normal;color:var(--color-accent)}
.os-nav__links{display:flex;gap:24px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.os-nav__links a{color:var(--text-body);font-size:15px;font-weight:600}
.os-nav__links a.active{color:var(--color-primary);border-bottom:2px solid var(--color-primary)}

/* ---- Buttons ------------------------------------------------------------ */
.os-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--radius-md);font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;text-decoration:none}
.os-btn:hover{text-decoration:none}
.os-btn--primary{background:var(--color-primary);color:#fff}
.os-btn--primary:hover{background:var(--color-primary-hover);color:#fff}
.os-btn--secondary{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.os-btn--secondary:hover{background:var(--green-050)}

/* ---- Cards / chips ------------------------------------------------------ */
.os-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.os-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);text-decoration:none}
.os-chip{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--radius-pill);background:var(--surface-card);border:1px solid var(--sand-300);color:var(--text-body);font-size:14px}
.os-chip:hover{background:var(--green-050);border-color:var(--green-200);color:var(--green-700);text-decoration:none}

/* ---- Breadcrumb ---------------------------------------------------------- */
.os-crumb{font-size:13px;color:var(--text-muted)}
.os-crumb a{color:var(--text-muted)}
.os-crumb .sep{margin:0 6px;color:var(--sand-400)}

/* ---- Footer -------------------------------------------------------------- */
.os-footer{background:var(--surface-inverse);color:var(--green-200)}
.os-footer__top{max-width:var(--container-max);margin:0 auto;padding:56px var(--gutter) 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.os-footer h4{color:#fff;font-size:17px;margin-bottom:14px}
.os-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.os-footer a{color:var(--green-200);font-size:14px}
.os-footer a:hover{color:var(--pewter-300)}
.os-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px var(--gutter);text-align:center;font-size:12px;color:var(--green-300)}

/* ---- Article page -------------------------------------------------------- */
.os-article{max-width:780px;margin:0 auto;padding:32px var(--gutter) 84px}
.os-article h1{font-size:38px}
.os-article h2{font-size:23px;margin-top:1.4em}
.os-article p{font-size:17px;line-height:1.7;color:var(--text-body)}
.os-article__hero{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);margin:20px 0 28px}
.os-article__hero img{width:100%;height:340px;object-fit:cover}
.os-article__meta{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-pewter)}
.os-article__back{display:inline-block;margin-top:32px;font-weight:700;color:var(--color-primary)}
.os-article__back:hover{color:var(--color-accent)}
.os-article__promo{margin-top:48px;background:var(--surface-card);border:1px solid var(--sand-300);border-radius:16px;padding:26px 30px}
.os-article__promo h3{font-size:19px;margin:0 0 6px;}
.os-article__promo p{font-size:14.5px;color:var(--ink-600);margin:0 0 14px;}

/* Zazzle store-builder grid (zstore.php has no CSS of its own).
   Overridden to a robust CSS grid — the legacy float+fixed-px layout from
   zstore.php misaligned when product images varied in aspect ratio. */
.allGrids{width:100%;}
.centerGrids{max-width:100% !important; width:100% !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important; gap:18px !important;}
.os-article__promo .centerGrids{grid-template-columns:repeat(4,1fr) !important;}
@media (max-width:640px){.os-article__promo .centerGrids{grid-template-columns:repeat(2,1fr) !important;}}
.clearfix::after,.clearMe{display:none !important;}
.gridCell{float:none !important; width:auto !important; height:auto !important; margin:0 !important; box-sizing:border-box; text-align:center; font-family:var(--font-ui); font-size:13px;}
.realviewLink{display:block; width:100% !important; height:auto !important; aspect-ratio:1; overflow:hidden; border-radius:10px; background:#fff;}
.realviewImage{width:100% !important; height:100% !important; object-fit:contain; display:block; margin:0;}
.gridCellInfo{padding-top:6px;}
.productTitle{display:block; width:auto !important; color:var(--text-strong);font-weight:600;text-decoration:none;font-size:13px;line-height:1.3;}
.productTitle:hover{color:var(--color-accent);}
.productDescription{display:block;color:var(--text-muted);font-size:12px;text-decoration:none;margin-top:2px;}
.productPrice a{color:var(--color-primary);font-weight:700;text-decoration:none;font-size:13.5px;}
.count{clear:both;padding:10px 0;font-size:13px;color:var(--text-muted);}
.paginationArrows,.count a{color:var(--color-primary);text-decoration:none;margin:0 2px;}
.count .current strong{color:var(--color-accent);}

/* ---- Directory (article/recipe index) pages ------------------------------ */
.os-dir{max-width:var(--container-max);margin:0 auto;padding:48px var(--gutter) 84px}
.os-dir h1{font-size:34px}
.os-dir__group{margin:36px 0}
.os-dir__group h2{font-size:20px;border-bottom:2px solid var(--color-primary);padding-bottom:10px;margin-bottom:16px}
.os-dir__list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 24px;list-style:none;margin:0;padding:0}
.os-dir__list li{font-size:15px}
.os-dir__list a{color:var(--text-body)}
.os-dir__list a:hover{color:var(--color-accent)}

/* directory hero band + iconed group headings */
.os-dir__hero{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);margin:24px 0 8px;height:220px}
.os-dir__hero img{width:100%;height:100%;object-fit:cover}
.os-dir__ghead{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--accent,var(--color-primary));padding-bottom:10px;margin-bottom:16px}
.os-dir__ghead h2{border:0;padding:0;margin:0;font-size:20px}
.os-dir__icon{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft,var(--green-050));color:var(--accent,var(--color-primary))}
.os-dir__icon svg{width:18px;height:18px}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width:760px){
  .os-footer__top{grid-template-columns:1fr 1fr;}
  .os-dir__list{grid-template-columns:1fr 1fr;}
  .os-article h1{font-size:28px}
  .os-cat-grid{grid-template-columns:1fr !important;}
  .os-nav__inner{flex-direction:column; align-items:flex-start; gap:12px;}
  .os-nav__links{gap:14px; row-gap:8px;}
}