/*
Theme Name: Ziona's Crochet Corner
Author: Ziona's Crochet Corner
Description: Handmade crochet shop theme. WooCommerce ready, bundled fonts and images, one-click content install under Appearance > Ziona setup.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ziona-crochet
Tags: e-commerce, custom-colors, custom-menu
*/

@font-face { font-family: 'Fredoka'; src: url("assets/fonts/fredoka-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url("assets/fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url("assets/fonts/fredoka-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url("assets/fonts/quicksand-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url("assets/fonts/quicksand-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url("assets/fonts/quicksand-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --blush: #f27db0;
  --blush-soft: #fbd3e0;
  --sage: #8a9a5b;
  --sage-soft: #e3e8d2;
  --choc: #4a3429;
  --cream: #f7efe6;
  --card: #ffffff;
  --display: 'Fredoka', 'Quicksand', sans-serif;
  --body: 'Quicksand', sans-serif;
  --shadow: 6px 6px 0 var(--choc);
  --shadow-sm: 3px 3px 0 var(--choc);
  --radius: 18px;
  --seam: 3px dashed var(--blush);
  --wrap: 1140px;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--choc);
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.65;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; max-width: 38em; }
a { color: var(--choc); text-decoration-color: var(--blush); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blush); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blush-soft); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.seam { border: 0; border-top: var(--seam); margin: 0; }

.btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce button.button.alt,
.wc-block-components-button, .wp-element-button {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cream);
  background: var(--choc);
  border: 3px solid var(--choc);
  border-radius: 999px;
  padding: .62em 1.5em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce button.button.alt:hover,
.wp-element-button:hover {
  background: var(--blush);
  border-color: var(--choc);
  color: var(--choc);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--choc);
}
.btn.btn-soft { background: var(--blush-soft); color: var(--choc); }
.btn.btn-soft:hover { background: var(--blush); }

.site-head { background: var(--cream); border-bottom: var(--seam); position: relative; z-index: 40; }
.site-head .wrap { display: flex; align-items: center; gap: 28px; padding-top: 18px; padding-bottom: 18px; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.2; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand:hover { color: var(--choc); }
.brand .yarn { width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffc3dd, var(--blush) 58%, #c75a8c);
  box-shadow: 2px 2px 0 var(--choc); flex: none; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  text-decoration: none; padding: .45em 1em; border-radius: 999px; display: inline-block;
}
.site-nav a:hover, .site-nav .current-menu-item > a { background: var(--blush-soft); color: var(--choc); }
.cart-link { position: relative; }
.cart-link .count {
  background: var(--blush); color: var(--choc); font-size: .72rem; font-weight: 700;
  border: 2px solid var(--choc); border-radius: 999px; padding: 0 .45em; margin-left: .4em;
}
.nav-toggle { display: none; margin-left: auto; background: none; border: 3px solid var(--choc);
  border-radius: 12px; padding: .35em .6em; font-family: var(--display); font-weight: 600;
  font-size: 1rem; color: var(--choc); box-shadow: var(--shadow-sm); cursor: pointer; }

.hero { padding: 64px 0 72px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-kicker { font-weight: 600; color: var(--sage); margin-bottom: 14px; }
.hero h1 { margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--blush); }
.hero-sub { font-size: 1.12rem; margin-bottom: 1.6em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.picker { margin-top: 38px; }
.picker-label { font-family: var(--display); font-weight: 600; margin-bottom: 10px; }
.yarn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.yarn-dot {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--choc);
  box-shadow: var(--shadow-sm); cursor: pointer; padding: 0;
  transition: transform .12s ease;
}
.yarn-dot:hover { transform: scale(1.12); }
.yarn-dot[aria-pressed="true"] { outline: 3px solid var(--choc); outline-offset: 2px; }

.blanket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(2deg); }
.granny {
  --rot: 0deg;
  position: relative; aspect-ratio: 1; border-radius: 14px;
  transform: rotate(var(--rot));
  box-shadow: var(--shadow);
}
.blanket .granny:nth-child(even) { --rot: -1.4deg; }
.granny .r {
  position: absolute;
  transition: background-color .4s ease;
  transition-delay: calc(var(--w, 0) * 70ms);
}
.granny .r::after {
  content: ""; position: absolute; inset: 5px;
  border: 2px dashed rgba(255, 255, 255, .5); border-radius: inherit;
}
.granny .r3 { inset: 0; border-radius: 14px; background-color: var(--g2, var(--sage)); }
.granny .r2 { inset: 11%; border-radius: 10px; background-color: var(--g1, var(--blush)); }
.granny .r1 { inset: 24%; border-radius: 7px; background-color: var(--g3, var(--cream)); }
.granny .r1::after { border-color: rgba(74, 52, 41, .16); inset: 4px; }
.granny .r0 { inset: 40%; border-radius: 50%; background-color: var(--g2, var(--sage)); }
.granny .r0::after { display: none; }
.blanket-note { text-align: center; margin-top: 20px; font-size: .95rem; color: var(--choc); opacity: .75; }

.hw { display: inline-block; }
.hw-pink { color: var(--blush); }
.thread { width: min(420px, 86%); height: 26px; display: block; margin: 2px 0 10px; overflow: visible; }
.thread-reveal { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.thread .needle { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .rise, .hw {
    animation: rise-in .6s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(var(--d, 0) * 85ms);
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(.6em) rotate(1.5deg); }
  }
  .thread-reveal { animation: thread-draw .95s cubic-bezier(.45, 0, .2, 1) .75s backwards; }
  @keyframes thread-draw { from { stroke-dashoffset: 1; } }
  .thread .needle {
    offset-path: path("M4 16 Q 40 4, 80 14 T 160 14 T 240 14 T 320 14 Q 360 18, 404 8");
    offset-rotate: 0deg;
    animation: needle-run .95s cubic-bezier(.45, 0, .2, 1) .75s both;
  }
  @keyframes needle-run {
    0% { opacity: 0; offset-distance: 0%; }
    4% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; offset-distance: 100%; }
  }
  .hero .yarn-row .yarn-dot {
    animation: dot-pop .45s cubic-bezier(.34, 1.56, .64, 1) backwards;
    animation-delay: calc(.95s + var(--i, 0) * 65ms);
  }
  @keyframes dot-pop { from { opacity: 0; transform: scale(.3); } }

  .blanket { animation: blanket-settle 1.5s cubic-bezier(.22, 1, .36, 1) backwards; }
  @keyframes blanket-settle { from { transform: rotate(6deg) translateY(14px); } }
  .granny .r {
    animation: round-on .44s cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .granny .r0 { animation-delay: calc(.2s + var(--w, 0) * 110ms); }
  .granny .r1 { animation-delay: calc(.32s + var(--w, 0) * 110ms); }
  .granny .r2 { animation-delay: calc(.44s + var(--w, 0) * 110ms); }
  .granny .r3 { animation-delay: calc(.56s + var(--w, 0) * 110ms); }
  @keyframes round-on { from { clip-path: inset(50% round 40%); } }
  .blanket .granny {
    animation: shadow-drop .3s ease-out backwards;
    animation-delay: calc(.9s + var(--w, 0) * 110ms);
  }
  @keyframes shadow-drop { from { box-shadow: 0 0 0 var(--choc); } }

  .blanket.loaded .granny { animation: none; }
  .blanket.loaded.pulse .granny {
    animation: g-pulse .5s ease;
    animation-delay: calc(var(--w, 0) * 70ms);
  }
  @keyframes g-pulse {
    0% { transform: rotate(var(--rot)) scale(1); }
    45% { transform: rotate(calc(var(--rot) + .8deg)) scale(1.07); }
    100% { transform: rotate(var(--rot)) scale(1); }
  }
}

.section { padding: 68px 0; }
.section-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.section-head p { margin: 0; opacity: .8; }
.band-soft { background: var(--blush-soft); border-top: var(--seam); border-bottom: var(--seam); }
.band-choc { background: var(--choc); color: var(--cream); }
.band-choc h2 { color: var(--cream); }
.band-choc a { color: var(--cream); text-decoration-color: var(--blush); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { background: var(--card); border: 3px solid var(--choc); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 24px 22px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: var(--blush); color: var(--choc); border: 3px dashed var(--choc);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 14px;
}
.steps h3 { margin-bottom: .3em; }
.steps p { margin: 0; font-size: .98rem; }

.flyers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; align-items: start; }
.flyers figure { margin: 0; background: var(--card); border: 3px solid var(--choc);
  border-radius: 14px; box-shadow: var(--shadow); padding: 12px 12px 16px; }
.flyers figure:nth-child(1) { transform: rotate(-2deg); }
.flyers figure:nth-child(2) { transform: rotate(1.5deg) translateY(14px); }
.flyers figure:nth-child(3) { transform: rotate(-1deg); }
.flyers img { border-radius: 8px; }
.flyers figcaption { font-size: .9rem; margin-top: 10px; text-align: center; font-weight: 600; }

.promise .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.promise-photo { border: 3px solid var(--choc); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transform: rotate(-1.2deg); }
.promise ul { list-style: none; margin: 0 0 1.4em; padding: 0; }
.promise li { padding-left: 1.7em; position: relative; margin-bottom: .55em; }
.promise li::before { content: ""; position: absolute; left: 0; top: .42em; width: .85em; height: .85em;
  border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff3, transparent 60%), var(--blush);
  border: 2px solid var(--cream); }

.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  float: none; width: 100% !important; margin: 0 !important; padding: 0;
  background: var(--card); border: 3px solid var(--choc); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--choc); }
.woocommerce ul.products li.product a img { margin: 0; border-bottom: 3px solid var(--choc); aspect-ratio: 1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; padding: 16px 18px 0; color: var(--choc);
}
.woocommerce ul.products li.product .price {
  color: var(--choc) !important; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  padding: 2px 18px 6px; display: block;
}
.woocommerce ul.products li.product .price del { opacity: .5; }
.woocommerce ul.products li.product .button { margin: 6px 18px 18px; }
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background: var(--sage); color: var(--cream); font-family: var(--display); font-weight: 600;
  border: 2px solid var(--choc); border-radius: 999px; min-height: 0; line-height: 1.6; padding: .2em 1em;
  top: 12px; left: 12px; right: auto; margin: 0;
}
.woocommerce .star-rating span::before { color: var(--blush); }

.woocommerce .woocommerce-ordering select,
.woocommerce div.product form.cart .variations select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--choc);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a3429' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 3px solid var(--choc); border-radius: 999px; padding: .45em 2.4em .45em 1.1em;
  box-shadow: var(--shadow-sm); cursor: pointer; min-width: 14em;
}
.woocommerce .woocommerce-result-count { font-weight: 600; opacity: .75; }
.woocommerce div.product form.cart .variations th label { font-family: var(--display); font-weight: 600; }

.woocommerce div.product { color: var(--choc); }
.woocommerce div.product div.images img { border: 3px solid var(--choc); border-radius: var(--radius); box-shadow: var(--shadow); }
.woocommerce div.product .product_title { font-family: var(--display); font-weight: 600; }
.woocommerce div.product p.price { color: var(--choc); font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.woocommerce div.product form.cart { margin: 1.4em 0; }
.woocommerce div.product form.cart div.quantity .qty {
  border: 3px solid var(--choc); border-radius: 12px; padding: .5em; font-family: var(--body); font-weight: 600; width: 4.2em;
}
.ziona-colors-field { margin: 0 0 1.2em; }
.ziona-colors-field label { display: block; font-family: var(--display); font-weight: 600; margin-bottom: .4em; }
.ziona-colors-field input {
  width: 100%; max-width: 26em; border: 3px solid var(--choc); border-radius: 12px;
  padding: .6em .9em; font-family: var(--body); font-weight: 500; font-size: 1rem; background: var(--card);
}
.ziona-colors-field .hint { font-size: .88rem; opacity: .75; margin-top: .35em; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--card); border: 3px solid var(--choc); border-radius: 12px 12px 0 0; margin-right: 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--blush-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--choc); }
.woocommerce div.product .woocommerce-tabs .panel { background: var(--card); border: 3px solid var(--choc);
  border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }

.woocommerce table.shop_table { border: 3px solid var(--choc); border-radius: var(--radius); background: var(--card); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--blush-soft); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 3px solid var(--choc); border-radius: 12px; padding: .6em .9em; background: var(--card);
  font-family: var(--body); font-weight: 500;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border: 3px solid var(--choc); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-sm); color: var(--choc);
}
.woocommerce-message::before { color: var(--sage); }
.woocommerce-info::before { color: var(--blush); }
.ziona-order-colors { background: var(--blush-soft); border-radius: 8px; padding: .15em .6em; display: inline-block; }

.site-notices { padding-top: 22px; }
.site-notices .woocommerce-error, .site-notices .woocommerce-message, .site-notices .woocommerce-info { margin: 0; }

.page-body { padding: 56px 0 76px; }
.page-body .entry { background: var(--card); border: 3px solid var(--choc); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(26px, 5vw, 56px); }
.page-body .entry h1 { margin-top: 0; }
.faq-item { border-bottom: 2px dashed var(--blush); padding: 1em 0; }
.faq-item h3 { margin-bottom: .3em; }
.faq-item p { margin: 0; }

.designer-wrap { max-width: 980px; }
.designer-intro h1 { margin-bottom: .2em; }
.designer { display: grid; grid-template-columns: 1.3fr .9fr; gap: 34px; align-items: start; margin-top: 30px; }
.d-block {
  border: 3px solid var(--choc); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow-sm); padding: 20px 22px 22px; margin: 0 0 22px; grid-column: 1;
}
.d-block legend {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem;
  background: var(--blush-soft); border: 2px dashed var(--choc); border-radius: 999px; padding: .2em 1em;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block; font-family: var(--display); font-weight: 600; font-size: .98rem;
  border: 3px solid var(--choc); border-radius: 999px; padding: .42em 1.1em; background: var(--card);
  box-shadow: var(--shadow-sm); transition: background .12s ease, transform .12s ease;
}
.pill:hover span { transform: translate(-1px, -1px); }
.pill input:checked + span { background: var(--blush); }
.pill input:focus-visible + span { outline: 3px solid var(--blush); outline-offset: 3px; }
.chip-add { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.chip-add input {
  border: 3px solid var(--choc); border-radius: 999px; padding: .45em 1em;
  font-family: var(--body); font-weight: 500; font-size: .95rem; flex: 1; min-width: 180px; background: var(--card);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-family: var(--display); font-weight: 600; font-size: .9rem; cursor: pointer;
  background: var(--sage-soft); color: var(--choc); border: 2px solid var(--choc);
  border-radius: 999px; padding: .3em .95em;
}
.chip::after { content: " ✕"; font-size: .8em; }
.chip:hover { background: var(--blush-soft); }
.designer .hint { font-size: .88rem; opacity: .75; margin: 10px 0 0; }
.qty-input {
  border: 3px solid var(--choc); border-radius: 12px; padding: .5em .8em; width: 5.5em;
  font-family: var(--body); font-weight: 600; font-size: 1rem; background: var(--card);
}
.quote {
  grid-column: 2; grid-row: 1 / span 5; position: sticky; top: 20px;
  background: var(--choc); color: var(--cream); border-radius: var(--radius);
  border: 3px solid var(--choc); box-shadow: 6px 6px 0 var(--blush); padding: 24px 26px 26px;
}
.quote h2 { color: var(--cream); font-size: 1.3rem; }
.quote ul { list-style: none; margin: 0 0 14px; padding: 0; }
.quote li {
  display: flex; justify-content: space-between; gap: 14px; font-size: .95rem;
  padding: .45em 0; border-bottom: 2px dashed rgba(247, 239, 230, .3);
}
.quote-total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 1.25rem; margin: 10px 0 4px; }
.quote-total strong { color: var(--blush-soft); font-size: 1.5rem; }
.quote .hint { opacity: .7; }
.quote .btn { width: 100%; text-align: center; background: var(--blush); color: var(--choc); margin-top: 10px; }
.quote .btn:hover { background: var(--blush-soft); }
.quote-bar { display: none; }

.site-foot { background: var(--choc); color: var(--cream); margin-top: 40px; }
.site-foot .seam-top { border-top: 3px dashed var(--blush); }
.site-foot .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding-top: 52px; padding-bottom: 44px; }
.site-foot h3 { color: var(--cream); font-size: 1.05rem; }
.site-foot p { font-size: .95rem; opacity: .85; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .5em; }
.site-foot a { color: var(--cream); text-decoration-color: var(--blush); }
.site-foot a:hover { color: var(--blush); }
.foot-base { border-top: 1px solid rgba(247, 239, 230, .25); }
.foot-base .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 18px 22px; font-size: .88rem; opacity: .85; }
.foot-beacon a { color: var(--cream); text-decoration-color: var(--blush); font-weight: 600; }
.foot-beacon a:hover { color: var(--blush); }

.showreel-frame { border: 3px solid var(--choc); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; aspect-ratio: 16 / 9; background: var(--choc); }
.showreel-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.ziona-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ziona-contact { max-width: 34em; margin-top: 1.3em; }
.ziona-contact .fld { margin: 0 0 1em; }
.ziona-contact label { display: block; font-family: var(--display); font-weight: 600; margin-bottom: .35em; }
.ziona-contact input, .ziona-contact textarea { width: 100%; border: 3px solid var(--choc); border-radius: 12px; padding: .6em .9em; font-family: var(--body); font-weight: 500; font-size: 1rem; background: var(--card); color: var(--choc); }
.ziona-contact textarea { resize: vertical; }
.ziona-form-note { border: 3px solid var(--choc); border-radius: 14px; padding: .7em 1em; margin: 0 0 1.2em; font-weight: 600; box-shadow: var(--shadow-sm); }
.ziona-form-note.ok { background: var(--sage-soft); }
.ziona-form-note.err { background: var(--blush-soft); }

@media (max-width: 960px) {
  .hero .wrap, .promise .wrap { grid-template-columns: 1fr; gap: 40px; }
  .steps, .flyers { grid-template-columns: 1fr 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr 1fr; }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .designer { grid-template-columns: 1fr; }
  .d-block, .quote { grid-column: 1; }
  .quote { grid-row: auto; position: static; }
  .quote-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; bottom: 12px; z-index: 30; grid-column: 1;
    background: var(--choc); color: var(--cream); border-radius: 999px;
    padding: 10px 10px 10px 22px; box-shadow: 4px 4px 0 var(--blush);
    font-family: var(--display); font-weight: 600;
  }
  .quote-bar strong { color: var(--blush-soft); font-size: 1.2rem; margin-left: .3em; }
  .quote-bar .btn { background: var(--blush); color: var(--choc); padding: .5em 1.2em; box-shadow: none; }
}
@media (max-width: 640px) {
  .brand { font-size: 1.12rem; line-height: 1.2; gap: 10px; }
  .brand .yarn { width: 24px; height: 24px; }
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: var(--seam); padding: 10px 22px 20px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; }
  .steps, .flyers, .woocommerce ul.products { grid-template-columns: 1fr; }
  .flyers figure:nth-child(2) { transform: rotate(1.5deg); }
  .site-foot .wrap { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 56px; }
  .section { padding: 52px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}