/*
Theme Name: Lui Designs
Theme URI: https://luidesigns.com
Author: Lui Designs
Description: Warm rustic theme for Lui Designs with a scroll-scrubbed hero video. Plain CSS and vanilla JS, no build step and no framework.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: luidesigns
*/

  /* ============================================================
     Palette warmed to match the hero footage: reclaimed wood,
     brick and morning sun. The canvas moves off pure white onto
     warm paper, neutrals go warm-brown instead of blue-grey, and
     the brand violet and coral survive untouched because they are
     already in the footage (the printed sheet on the desk).
     ============================================================ */
  :root{
    --ink:#211a15; --ink-soft:#6a5c50; --paper:#faf7f2; --paper-soft:#f2ebe1;
    --line:#e6dccd; --accent:#4f3ff0; --warm:#ff6b4a; --warm-ink:#c0442a;
    --warm-soft:#fff0ea; --green:#0f7d47; --radius:14px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --sh-tshadow:0 1px 2px rgba(20,12,6,.95),0 3px 12px rgba(20,12,6,.7),0 10px 44px rgba(20,12,6,.75);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{overflow-x:hidden;overflow-x:clip;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
  a{color:inherit;}
  h1,h2,h3,h4{letter-spacing:-0.025em;font-family:var(--font-display);font-weight:400;}
  h1,h2{letter-spacing:-0.03em;}

  /* NAV */
  header{position:sticky;top:0;z-index:60;background:rgba(250,247,242,0.93);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
  nav.wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.14rem;text-decoration:none;flex-shrink:0;}
  .brandlogo{color:var(--ink);}
  .brandlogo svg{height:34px;width:auto;display:block;}
  footer .brandlogo svg{height:30px;}
  .navlinks{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
  .navlinks a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-soft);transition:color .15s;}
  .navlinks a:hover{color:var(--ink);}
  .nav-cta{background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:999px;text-decoration:none;
    font-size:.89rem;font-weight:600;white-space:nowrap;flex-shrink:0;}
  .menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px;}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;}
  .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);padding:12px 18px;}
  .skip:focus{left:0;}

  /* ============================================================
     SCROLL HERO. Every class and id here is prefixed sh- so it
     cannot collide with the site's own .hero, .wrap, .btn or the
     sticky <header>. The static fallback is a <section>, never a
     <header>, or it would inherit the nav's sticky positioning.
     ============================================================ */
  .sh-hero{position:relative;height:520vh;}
  .sh-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink);}
  .sh-poster{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .9s var(--ease);}
  .sh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0);}
  .sh-stage.sh-ready .sh-video{opacity:1;}
  .sh-stage.sh-ready .sh-poster{opacity:0;}
  .sh-stage.sh-failed .sh-video{display:none;}
  .sh-scrim{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 60% 45%,rgba(28,16,8,0) 30%,rgba(28,16,8,.55) 100%);}
  .sh-bands{position:absolute;inset:0;pointer-events:none;}
  .sh-band{position:absolute;inset:0;opacity:0;display:flex;align-items:center;
    color:#fff;text-shadow:var(--sh-tshadow);}
  .sh-band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
    opacity:calc(.25 + .75*var(--k,1));
    background:radial-gradient(ellipse 78% 66% at 28% 50%,rgba(24,14,6,var(--sa,.74)) 0%,rgba(24,14,6,calc(var(--sa,.74)*.62)) 46%,rgba(24,14,6,0) 76%);}
  .sh-inner{position:relative;max-width:1140px;margin:0 auto;padding:0 24px;width:100%;}
  .sh-col{width:min(100%,560px);}
  .sh-band .sh-eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:#ffd9cd;margin-bottom:18px;}
  .sh-band h1,.sh-band h2{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.04;margin:0;color:#fff;}
  .sh-band p{font-size:clamp(1rem,1.5vw,1.16rem);color:#f3e9e1;margin:16px 0 0;max-width:36ch;}
  .sh-band .btn{text-shadow:none;pointer-events:auto;}
  .sh-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px;}
  .sh-band .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
  .sh-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09);}
  .sh-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 30px;
    max-width:430px;margin-top:28px;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.28);}
  .sh-stats b{display:block;font-size:1.3rem;font-family:var(--font-display);}
  .sh-stats span{font-size:.8rem;color:#e8dbd1;}
  /* word split primitives */
  .sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
  .sh-w{display:inline-block;white-space:pre;}
  .sh-rise .sh-w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.7,1);opacity:var(--kc);
    transform:translateY(calc((1 - var(--kc))*22px));}
  .sh-fade{opacity:clamp(0,(var(--k,0) - .55)*3.4,1);
    transform:translateY(calc((1 - clamp(0,(var(--k,0) - .55)*3.4,1))*14px));}
  .sh-late{opacity:clamp(0,(var(--k,0) - .72)*4,1);
    transform:translateY(calc((1 - clamp(0,(var(--k,0) - .72)*4,1))*14px));}
  .sh-ring{position:absolute;right:30px;bottom:30px;width:42px;height:42px;color:#fff;opacity:.8;
    transform:rotate(-90deg);transition:opacity .6s var(--ease);}
  .sh-stage.sh-ready .sh-ring{opacity:0;}
  .sh-ring circle{transition:stroke-dashoffset .18s linear;}
  .sh-chev{position:absolute;right:30px;bottom:30px;width:42px;height:42px;color:#fff;opacity:.7;}
  @media(max-height:560px){.sh-ring,.sh-chev{display:none;}}

  /* static hero: a designed layout, not an apology */
  .sh-static{display:none;position:relative;min-height:88svh;align-items:flex-end;overflow:hidden;background:var(--ink);}
  .sh-static .sh-shot{position:absolute;inset:0;background-size:cover;background-position:62% center;}
  .sh-static .sh-veil{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(28,16,8,.42) 0%,rgba(28,16,8,.24) 34%,rgba(24,14,6,.88) 100%);}
  .sh-static .sh-inner{position:relative;padding:110px 24px 56px;color:#fff;text-shadow:var(--sh-tshadow);}
  .sh-static h1{font-size:clamp(2rem,8vw,2.9rem);line-height:1.05;margin:0 0 14px;color:#fff;}
  .sh-static p{color:#f3e9e1;max-width:34ch;margin:0 0 24px;}

  /* the five gates. these strings are duplicated verbatim in the JS. */
  @media (max-width:720px),
         (orientation:portrait) and (max-width:1024px),
         (orientation:portrait) and (pointer:coarse),
         (orientation:landscape) and (pointer:coarse) and (max-height:560px),
         (prefers-reduced-motion:reduce){
    .sh-hero{display:none;}
    .sh-static{display:flex;}
  }

  section{padding:86px 0;}
  .section-head{max-width:660px;margin:0 auto 52px;text-align:center;}
  .kicker{color:var(--accent);font-weight:700;font-size:.79rem;letter-spacing:.09em;
    text-transform:uppercase;margin-bottom:12px;display:block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
  .section-head h2{font-size:clamp(1.75rem,3.1vw,2.4rem);margin:0 0 14px;}
  .section-head p{color:var(--ink-soft);font-size:1.04rem;margin:0;}

  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 27px;border-radius:999px;
    font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;
    transition:transform .15s,box-shadow .15s,border-color .15s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(33,26,21,.24);}
  .btn-ghost{border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}
  @media(pointer:coarse){.btn{min-height:44px;}}

  /* HOW */
  .how{background:var(--paper-soft);}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .step{background:#fffdfa;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;
    box-shadow:0 1px 2px rgba(120,80,40,.05);}
  .step-num{width:32px;height:32px;border-radius:9px;background:var(--ink);color:var(--paper);display:flex;
    align-items:center;justify-content:center;font-weight:700;font-size:.82rem;margin-bottom:15px;}
  .step h3{font-size:1.05rem;margin:0 0 7px;}
  .step p{font-size:.89rem;color:var(--ink-soft);margin:0;}

  /* SERVICES */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .card{border:1px solid var(--line);border-radius:var(--radius);padding:28px 25px;display:flex;
    flex-direction:column;transition:box-shadow .16s,transform .16s;background:#fffdfa;
    box-shadow:0 1px 2px rgba(120,80,40,.05);}
  .card:hover{box-shadow:0 14px 36px rgba(96,64,32,.12);transform:translateY(-3px);}
  .card-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;
    justify-content:center;font-size:1.3rem;margin-bottom:17px;}
  /* icon tiles: hue variety kept, every one shifted warm so none reads blue */
  .ic1{background:#ede5f6}.ic2{background:#ffe6d8}.ic3{background:#e9f0dd}
  .ic4{background:#fdf1d4}.ic5{background:#e4ede9}.ic6{background:#fbe6e4}
  .card h3{font-size:1.12rem;margin:0 0 8px;}
  .card p.desc{font-size:.91rem;color:var(--ink-soft);margin:0 0 16px;flex-grow:1;}
  .card ul{margin:0 0 18px;padding-left:18px;font-size:.87rem;color:var(--ink-soft);}
  .card ul li{margin-bottom:4px;}
  .price-tag{font-size:.87rem;font-weight:700;padding-top:15px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  .price-tag span{font-weight:500;color:var(--ink-soft);font-size:.79rem;}
  .tag{display:inline-block;margin-top:11px;font-size:.72rem;font-weight:700;padding:4px 10px;
    border-radius:999px;width:fit-content;}
  .tag-warm{color:var(--warm-ink);background:var(--warm-soft);}
  .tag-green{color:var(--green);background:#e6f3e9;}

  /* CARE PLANS */
  .care{background:var(--paper-soft);}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin:0 auto;}
  .plan{background:#fffdfa;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;position:relative;
    box-shadow:0 1px 2px rgba(120,80,40,.05);}
  .plan.featured{border-color:var(--accent);border-width:2px;box-shadow:0 12px 32px rgba(79,63,240,.1);}
  .plan-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);
    color:#fff;font-size:.7rem;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap;}
  .plan h3{font-size:1.1rem;margin:0 0 6px;}
  .plan .amt{font-size:2.1rem;font-weight:600;letter-spacing:-.03em;font-family:var(--font-display);}
  .plan .amt small{font-size:.85rem;font-weight:500;color:var(--ink-soft);letter-spacing:0;font-family:inherit;}
  .plan ul{list-style:none;padding:0;margin:20px 0 0;font-size:.88rem;color:var(--ink-soft);}
  .plan ul li{padding:7px 0 7px 24px;position:relative;}
  .plan ul li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700;}

  /* TRUST */
  .trust{background:var(--ink);color:var(--paper);border-radius:24px;margin:0 24px;padding:62px 48px;}
  .trust-inner{max-width:1000px;margin:0 auto;}
  .trust .kicker{color:#ffb199;}
  .trust h2{font-size:clamp(1.6rem,2.9vw,2.1rem);max-width:640px;margin:0 0 18px;}
  .trust p.lead{color:rgba(250,247,242,.74);max-width:600px;font-size:1rem;margin:0 0 38px;}
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .trust-item{border-top:1px solid rgba(250,247,242,.2);padding-top:17px;}
  .trust-item h4{font-size:1rem;margin:0 0 7px;}
  .trust-item p{font-size:.86rem;color:rgba(250,247,242,.68);margin:0;}

  /* BUNDLE */
  .bundle-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:880px;margin:0 auto;}
  .bundle{border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;background:var(--paper);}
  .bundle.hi{background:linear-gradient(135deg,#f8ecdb,#ffe4d2);border:none;}
  .bundle h3{font-size:1.2rem;margin:0 0 8px;}
  .bundle .b-price{font-size:2rem;font-weight:600;letter-spacing:-.03em;margin:10px 0 4px;font-family:var(--font-display);}
  .bundle .b-price small{font-size:.85rem;font-weight:500;color:var(--ink-soft);font-family:inherit;}
  .bundle p{font-size:.9rem;color:var(--ink-soft);margin:12px 0 0;}

  /* ABOUT */
  .about{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
  .about-copy h2{font-size:clamp(1.6rem,2.9vw,2.1rem);margin:0 0 17px;}
  .about-copy p{color:var(--ink-soft);margin:0 0 15px;}
  .about-card{background:var(--paper-soft);border-radius:var(--radius);padding:34px;border:1px solid var(--line);}
  .about-stat{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);}
  .about-stat:last-child{border-bottom:none;}
  .about-stat b{font-size:1.05rem;white-space:nowrap;font-family:var(--font-display);font-weight:600;}
  .about-stat span{font-size:.84rem;color:var(--ink-soft);text-align:right;}

  /* CTA */
  /* the sunlit gradient from the hero footage. the violet CTA button is the
     only cool note here, which is what makes it read as an accent. */
  .cta{text-align:center;background:linear-gradient(135deg,#f9ecd9,#ffe3cf);border-radius:24px;
    margin:0 24px;padding:70px 24px;position:relative;overflow:hidden;}
  .cta::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 50% at 18% 0%,rgba(255,255,255,.6),transparent 65%);}
  .cta > *{position:relative;}
  .cta h2{font-size:clamp(1.75rem,3.2vw,2.4rem);margin:0 auto 15px;max-width:660px;}
  .cta p{color:var(--ink-soft);max-width:520px;margin:0 auto 30px;font-size:1.01rem;}
  .contact-info{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:34px;
    font-size:.9rem;color:var(--ink-soft);}
  .contact-info a{font-weight:700;color:var(--ink);text-decoration:none;}

  footer{padding:46px 0 30px;border-top:1px solid var(--line);}
  .footer-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
  .footer-links{display:flex;gap:22px;list-style:none;padding:0;margin:0;font-size:.84rem;color:var(--ink-soft);}
  .footer-links a{text-decoration:none;}
  .copyright{font-size:.81rem;color:var(--ink-soft);}

  @media(max-width:960px){
    .navlinks{position:fixed;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;
      padding:20px 24px;gap:18px;border-bottom:1px solid var(--line);display:none;}
    .navlinks.open{display:flex;}
    .menu-btn{display:block;}
    .steps,.services-grid,.plans,.trust-grid,.bundle-wrap{grid-template-columns:1fr;}
    .about{grid-template-columns:1fr;}
    .trust,.cta{margin:0 12px;padding:46px 24px;}
    section{padding:64px 0;}
  }
  @media(min-width:961px) and (max-width:1050px){
    .services-grid{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------------------------------------------------------------
     Narrow phones. The logo and the CTA both have flex-shrink:0, so
     below about 390px they cannot give way and the hamburger gets
     pushed off screen. Measured on a real Samsung: the CTA was cut
     off at the right edge. Scale the pieces instead of letting them
     collide. Samsung's Display Size setting shrinks the effective
     CSS viewport, so plenty of phones land well under 360px.
     --------------------------------------------------------------- */
  @media(max-width:560px){
    .wrap{padding:0 18px;}
    nav.wrap{gap:10px;}
    .brandlogo svg{height:27px;}
    .nav-cta{padding:9px 15px;font-size:.82rem;}
    .menu-btn{padding:7px;}
  }
  @media(max-width:400px){
    .wrap{padding:0 14px;}
    nav.wrap{gap:7px;height:64px;}
    .brandlogo svg{height:23px;}
    .nav-cta{padding:8px 12px;font-size:.76rem;}
    .menu-btn{padding:6px;}
    .menu-btn span{width:20px;}
    .navlinks{top:64px;}
  }
  @media(max-width:330px){
    .brandlogo svg{height:20px;}
    .nav-cta{padding:7px 10px;font-size:.72rem;}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{animation:none!important;transition:none!important;}
  }

/* ===============================================================
   PAGES, POSTS AND WOOCOMMERCE
   Everything below inherits the warm palette so a shop page does
   not arrive looking like a different website.
   =============================================================== */

.page-head{padding:64px 0 0;}
.page-head h1{font-size:clamp(2rem,4vw,3rem);margin:0;max-width:22ch;}
.page-head .kicker{margin-bottom:10px;}
.page-body{padding:32px 0 86px;}
.entry{max-width:70ch;}
.entry > * + *{margin-top:1.1em;}
.entry h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:1.8em;}
.entry h3{font-size:1.25rem;margin-top:1.6em;}
.entry p,.entry li{color:var(--ink-soft);}
.entry a{color:var(--accent);text-underline-offset:3px;}
.entry img,.entry-media img{border-radius:var(--radius);height:auto;}
.entry blockquote{border-left:3px solid var(--warm);padding-left:20px;margin-left:0;
  font-family:var(--font-display);font-size:1.15rem;color:var(--ink);}
.entry code{background:var(--paper-soft);padding:2px 6px;border-radius:5px;font-size:.9em;}

/* cart link in the nav */
.nav-cart{display:inline-flex;align-items:center;gap:6px;position:relative;
  color:var(--ink);text-decoration:none;padding:9px 10px;border-radius:999px;
  border:1px solid var(--line);transition:border-color .15s,background .15s;}
.nav-cart:hover{border-color:var(--ink);background:var(--paper-soft);}
.nav-cart .cart-count{font-size:.76rem;font-weight:700;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--warm);color:#fff;padding:0 5px;}

/* Woo: buttons adopt the site's pill shape and warm ink */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  background:var(--ink);color:var(--paper);border-radius:999px;padding:13px 26px;
  font-weight:600;font-size:.93rem;border:1px solid transparent;line-height:1.2;
  transition:transform .15s,box-shadow .15s;}
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,.woocommerce #respond input#submit:hover{
  background:var(--ink);color:var(--paper);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(33,26,21,.24);}
.woocommerce a.button.wc-backward{background:transparent;color:var(--ink);border-color:var(--line);}

/* Woo: products */
.woocommerce ul.products li.product{background:#fffdfa;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:0 1px 2px rgba(120,80,40,.05);
  transition:box-shadow .16s,transform .16s;}
.woocommerce ul.products li.product:hover{box-shadow:0 14px 36px rgba(96,64,32,.12);transform:translateY(-3px);}
.woocommerce ul.products li.product img{border-radius:9px;margin-bottom:12px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:1.05rem;padding:0;color:var(--ink);}
.woocommerce ul.products li.product .price{color:var(--ink);font-weight:700;}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--ink-soft);}
.woocommerce span.onsale{background:var(--warm);color:#fff;border-radius:999px;
  font-weight:700;min-height:auto;padding:5px 13px;line-height:1.4;}
.woocommerce div.product .product_title{font-family:var(--font-display);}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-weight:700;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--paper);border-bottom-color:var(--paper);}

/* Woo: tables, notices, forms */
.woocommerce table.shop_table{border-radius:var(--radius);border-color:var(--line);background:#fffdfa;}
.woocommerce table.shop_table th{font-family:var(--font-display);font-weight:600;}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-top-color:var(--accent);background:var(--paper-soft);border-radius:9px;color:var(--ink);}
.woocommerce-message::before,.woocommerce-info::before{color:var(--accent);}
.woocommerce-error{border-top-color:var(--warm-ink);}
.woocommerce-error::before{color:var(--warm-ink);}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce-page form .form-row input.input-text{
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:#fffdfa;
  color:var(--ink);font:inherit;}
.woocommerce form .form-row input.input-text:focus{border-color:var(--accent);outline:none;}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review{
  background:#fffdfa;border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.woocommerce nav.woocommerce-pagination ul{border-color:var(--line);border-radius:999px;overflow:hidden;}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--paper-soft);color:var(--ink);}

@media(max-width:960px){
  .nav-cart{margin-left:auto;}
}

/* ---------------------------------------------------------------
   Service cards that link into a category
   --------------------------------------------------------------- */
.card-link{text-decoration:none;color:inherit;position:relative;}
.card-link h3{color:var(--ink);}
.card-link .card-shot{border-radius:9px;overflow:hidden;margin-bottom:16px;background:var(--paper-soft);}
.card-link .card-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1s var(--ease);}
.card-link:hover .card-shot img{transform:scale(1.04);}
.card-link .price-tag{margin-top:auto;}
.card-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.87rem;font-weight:600;color:var(--accent);}
.card-go span{transition:transform .25s var(--ease);}
.card-link:hover .card-go span{transform:translateX(4px);}
.card-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* category archive: lead with the category's own description */
.woo .term-description{max-width:60ch;color:var(--ink-soft);margin:0 0 34px;}
.woocommerce ul.products li.product .button{margin-top:10px;}


/* ==================================================================
 * Quote form styling
 * Append to the end of wp-content/themes/luidesigns/style.css
 *
 * Uses the theme's own custom properties (--ink, --paper, --line,
 * --accent, --radius) so it stays in sync if you retune the palette.
 * ================================================================== */

.quote-form {
  max-width: 720px;
  margin: 0 auto;
}

.quote-form .qf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .quote-form .qf-grid { grid-template-columns: 1fr; }
}

.quote-form .qf-field {
  display: block;
  margin: 0 0 20px;
  border: 0;
  padding: 0;
}

.quote-form .qf-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

.quote-form .qf-label em {
  font-style: normal;
  color: var(--warm-ink);
}

.quote-form .qf-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: -2px 0 10px;
}

/* ---- text inputs, selects, textarea ---- */

.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.quote-form textarea { resize: vertical; min-height: 150px; line-height: 1.55; }

.quote-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236a5c50' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

.quote-form input::placeholder,
.quote-form textarea::placeholder { color: #a89787; }

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 63, 240, .15);
}

/* ---- checkbox group ---- */

.quote-form .qf-choices {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.quote-form .qf-choices legend { padding: 0; }

.quote-form .wpcf7-checkbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

@media (max-width: 640px) {
  .quote-form .wpcf7-checkbox { grid-template-columns: 1fr; }
}

.quote-form .wpcf7-list-item { margin: 0; }

.quote-form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.4;
}

.quote-form input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- submit ---- */

.quote-form .qf-actions { margin-top: 28px; text-align: center; }

.quote-form input[type="submit"] {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 15px 38px;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}

.quote-form input[type="submit"]:hover {
  background: #000;
  transform: translateY(-1px);
}

.quote-form input[type="submit"]:disabled { opacity: .55; cursor: wait; transform: none; }

.quote-form .qf-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* ---- Contact Form 7 validation + response messages ---- */

.quote-form .wpcf7-not-valid { border-color: var(--warm); }

.quote-form .wpcf7-not-valid-tip {
  display: block;
  font-size: 0.85rem;
  color: var(--warm-ink);
  margin-top: 6px;
}

.wpcf7 form .wpcf7-response-output {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  color: var(--ink);
  padding: 14px 18px;
  margin: 22px 0 0;
  font-size: 0.95rem;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--warm);
  background: var(--warm-soft);
  color: var(--warm-ink);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--green);
  background: #eef7f1;
  color: var(--green);
}

.wpcf7-spinner { margin-left: 12px; }

/* legend flows as a block inside the box instead of straddling the border */
.quote-form .qf-choices legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 2px;
}


/* ==================================================================
 * Quote page (page-id-64) — centred column + card panel
 * Scoped to the quote page so no other page layout is affected.
 * ================================================================== */

/* The theme caps .entry at a reading measure (~604px) with no auto
   margins, which left-aligns everything. A form is not prose, so on
   this page it gets a wider, centred column. */
.page-id-64 .entry {
  max-width: 780px;
  margin-inline: auto;
}

.page-id-64 .entry > h2,
.page-id-64 .entry > p {
  text-align: center;
}

.page-id-64 .entry > p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--ink-soft);
}

.page-id-64 .entry > h2 {
  margin-top: 0;
}

/* ---- the form becomes a card ---- */

.page-id-64 .quote-form {
  max-width: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 40px;
  box-shadow:
    0 1px 2px rgba(33, 26, 21, .04),
    0 14px 36px rgba(33, 26, 21, .06);
}

@media (max-width: 640px) {
  .page-id-64 .quote-form {
    padding: 24px 20px;
    border-radius: 18px;
  }
}

/* Inputs sat on white against a white card and disappeared, so inside
   the card they take the warm page tone instead. */
.page-id-64 .quote-form input[type="text"],
.page-id-64 .quote-form input[type="email"],
.page-id-64 .quote-form input[type="tel"],
.page-id-64 .quote-form select,
.page-id-64 .quote-form textarea,
.page-id-64 .quote-form .qf-choices {
  background-color: var(--paper);
}

.page-id-64 .quote-form input[type="text"]:focus,
.page-id-64 .quote-form input[type="email"]:focus,
.page-id-64 .quote-form input[type="tel"]:focus,
.page-id-64 .quote-form select:focus,
.page-id-64 .quote-form textarea:focus {
  background-color: #fff;
}

/* a hairline before the submit so the card has a clear closing beat */
.page-id-64 .quote-form .qf-actions {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 32px;
}

.page-id-64 .quote-form input[type="submit"] {
  width: 100%;
  max-width: 340px;
}

/* the page title lives in section.page-head, not .page-body */
.page-id-64 .page-head .wrap > h1 {
  text-align: center;
  margin-bottom: 4px;
}
.page-id-64 .page-head .wrap {
  text-align: center;
}

/* the h1 carries a ch-based max-width with no auto margins, so the text
   was centred inside a box that itself sat hard left */
.page-id-64 .page-head .wrap > h1 { margin-inline: auto; }


/* ==================================================================
 * Display typeface
 * Every heading/price rule points at --font-display, so switching the
 * site's display face is a one-line change here.
 * ================================================================== */
:root {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Fraunces at weight 400 read as a display serif; a sans at 400 reads
   thin, so headings step up to 600. */
h1, h2, h3, h4 { font-weight: 600; }