/* ============================================================
   shared.css
   Shared component styles used across all Johken Interior pages.
   Includes: CSS variables, nav, logo, cart icon, captcha,
             footer, toast, lightbox, mobile breakpoints.
   ============================================================ */

:root{
  --cream:#F5F0E8;--warm-white:#FDFAF5;--charcoal:#1C1C1A;--deep-brown:#2E2016;
  --gold:#C9A84C;--gold-light:#E8CC80;--sand:#C8B89A;--sand-light:#E5D9C5;
  --muted:#8A7E70;--border:rgba(201,168,76,.25);--sage:#7A8C6E;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Jost',sans-serif;background:var(--warm-white);color:var(--charcoal);overflow-x:hidden;}

/* COOKIE */
#cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--deep-brown);color:var(--cream);padding:24px 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;font-size:13px;font-weight:300;border-top:1px solid var(--gold);transform:translateY(100%);animation:slideUp .5s .8s ease forwards;}
@keyframes slideUp{to{transform:translateY(0);}}
#cookie-banner.hidden{display:none;}
.cookie-main{flex:1;}
.cookie-text{line-height:1.7;margin-bottom:14px;display:block;}
.cookie-text a{color:var(--gold);}
.cookie-options{display:flex;gap:20px;flex-wrap:wrap;}
.cookie-opt{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;flex-wrap:wrap;}
.cookie-opt input[type=checkbox]{accent-color:var(--gold);width:15px;height:15px;cursor:pointer;}
.cookie-opt input[disabled]{opacity:.6;cursor:default;}
.cookie-opt span:first-of-type{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10px;}
.cookie-opt-desc{font-size:10px;color:var(--sand);font-weight:300;width:100%;padding-left:23px;margin-top:-4px;}
.cookie-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.cookie-btns button{padding:8px 18px;border:none;cursor:pointer;font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:.2s;}
.btn-accept{background:var(--gold);color:var(--deep-brown);}
.btn-decline{background:transparent;color:var(--cream);border:1px solid rgba(255,255,255,.3);}
.btn-decline:hover{border-color:var(--gold);color:var(--gold);}
@media(max-width:700px){#cookie-banner{flex-direction:column;align-items:stretch;padding:20px;}.cookie-btns{justify-content:stretch;}.cookie-btns button{flex:1;}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(253,250,245,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .3s;}
nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.08);}

/* LOGO — fully transparent, no box, no clipping, no background */
.logo-area{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;background:transparent;}
.logo-img-wrap{
  height:48px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:transparent;
  border:none;
  outline:none;
  box-shadow:none;
}
.logo-img-wrap img{
  height:48px;width:auto;max-width:160px;
  display:none;                   /* hidden until logo uploaded */
  object-fit:contain;
  background:transparent !important;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:0;
}
/* Fallback letter mark when no logo uploaded */
.logo-fallback{
  width:44px;height:44px;
  border:1.5px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--gold);
  flex-shrink:0;
}
.logo-text{display:flex;flex-direction:column;line-height:1.1;min-width:0;align-items:flex-start;}
.logo-name{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600;letter-spacing:.22em;color:var(--charcoal);white-space:nowrap;text-transform:uppercase;}
.logo-sub{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:none;color:var(--gold);display:inline-block;max-width:100%;white-space:normal;word-wrap:break-word;}

/* NAV LINKS + CART */
.nav-right{display:flex;align-items:center;gap:32px;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;position:relative;padding-bottom:2px;transition:color .2s;}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s;}
.nav-links a:hover,.nav-links a.active{color:var(--gold);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}

/* CART ICON */
.cart-btn{position:relative;display:flex;align-items:center;gap:7px;padding:8px 16px;border:1px solid var(--border);background:transparent;cursor:pointer;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--charcoal);text-decoration:none;transition:all .2s;}
.cart-btn:hover{border-color:var(--gold);color:var(--gold);}
.cart-count{display:none;min-width:18px;height:18px;background:var(--gold);color:var(--deep-brown);border-radius:50%;font-size:10px;font-weight:700;align-items:center;justify-content:center;line-height:1;}
.cart-count.visible{display:flex;}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;}
.hamburger span{width:24px;height:1.5px;background:var(--charcoal);display:block;}

/* CAPTCHA */
.captcha-wrap{margin-top:4px;}
.captcha-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-bottom:8px;display:block;}
.captcha-box{display:flex;align-items:center;gap:14px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.18);padding:14px 18px;}
.captcha-eq{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--cream);background:rgba(0,0,0,.22);padding:5px 14px;border:1px solid rgba(201,168,76,.15);white-space:nowrap;user-select:none;}
.captcha-sep{color:var(--sand);font-size:20px;}
.captcha-input{width:72px;padding:9px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--cream);font-family:'Jost',sans-serif;font-size:17px;text-align:center;outline:none;transition:border .2s;}
.captcha-input:focus{border-color:var(--gold);}
.captcha-input.cap-error{border-color:#e07060;animation:capShake .35s ease;}
.captcha-input.cap-ok{border-color:#5A9A5A;}
.captcha-refresh{background:none;border:none;cursor:pointer;color:var(--gold);font-size:22px;padding:2px 6px;transition:transform .35s;flex-shrink:0;}
.captcha-refresh:hover{transform:rotate(180deg);}
.captcha-hint{font-size:11px;margin-top:8px;min-height:16px;}
.captcha-hint.ok{color:#5A9A5A;}.captcha-hint.error{color:#e07060;}
@keyframes capShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* FOOTER */
footer{background:var(--deep-brown);padding:48px 80px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(201,168,76,.15);}
footer p{font-size:12px;font-weight:300;color:var(--sand);letter-spacing:.08em;}
.social-links{display:flex;gap:16px;}
.social-links a{width:36px;height:36px;border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;color:var(--sand);font-size:14px;text-decoration:none;transition:.2s;}
.social-links a:hover{border-color:var(--gold);color:var(--gold);}

/* TOAST */
.toast{position:fixed;top:96px;right:32px;z-index:9999;background:var(--charcoal);color:var(--cream);padding:14px 24px;font-size:13px;letter-spacing:.06em;border-left:3px solid var(--gold);transform:translateX(130%);transition:transform .35s ease;max-width:320px;}
.toast.show{transform:translateX(0);}

/* LIGHTBOX */
#lightbox{display:none;position:fixed;inset:0;z-index:6000;background:rgba(28,28,26,.96);align-items:center;justify-content:center;flex-direction:column;gap:16px;}
#lightbox.open{display:flex;}
#lightbox img,#lightbox video{max-width:90vw;max-height:80vh;object-fit:contain;}
.lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:20px;cursor:pointer;background:none;display:flex;align-items:center;justify-content:center;transition:.2s;}
.lb-close:hover{border-color:var(--gold);color:var(--gold);}
.lb-caption{text-align:center;color:rgba(253,250,245,.75);font-family:'Jost',sans-serif;font-size:13px;font-weight:300;letter-spacing:.06em;max-width:600px;padding:0 24px;min-height:18px;}
.lb-caption strong{color:var(--gold);font-weight:400;}

/* MOBILE */
@media(max-width:900px){
  nav{padding:0 20px;}
  .nav-right{gap:16px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  section{padding:70px 24px;}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px;}
  .about-img-stack{height:320px;}
  .slide-content{left:28px;bottom:50px;}
  footer{flex-direction:column;gap:20px;text-align:center;}
  .c-prev{left:12px;}.c-next{right:12px;}.c-dots{right:24px;}
  #reviews-section{padding:70px 24px;}
  .shop-cta-grid{grid-template-columns:1fr;gap:40px;}
  .shop-cta-img{height:300px;}
}
@media(max-width:540px){
  .form-row{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:1fr;}
}

/* ── RICH FOOTER ── */
footer{background:var(--deep-brown);border-top:1px solid rgba(201,168,76,.18);}
.footer-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:48px;
  padding:60px 80px 48px;
}
.footer-brand{display:flex;flex-direction:column;gap:18px;}
.footer-logo{display:flex;align-items:center;gap:12px;}
.footer-logo-mark{width:56px;height:56px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--gold);flex-shrink:0;overflow:hidden;background:rgba(255,255,255,.95);}
.footer-logo-mark img{width:100%;height:100%;object-fit:contain;display:none;padding:6px;}
.footer-logo-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--cream);letter-spacing:.22em;}
.footer-logo-sub{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-top:2px;}
.footer-tagline{font-size:13px;font-weight:300;color:var(--sand);line-height:1.75;max-width:280px;}
.social-links{display:flex;gap:10px;}
.social-links a{width:34px;height:34px;border:1px solid rgba(201,168,76,.28);display:flex;align-items:center;justify-content:center;color:var(--sand);font-size:14px;text-decoration:none;transition:.2s;}
.social-links a:hover{border-color:var(--gold);color:var(--gold);}
.footer-nav-col,.footer-contact-col{display:flex;flex-direction:column;gap:0;}
.footer-col-title{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500;}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:13px;font-weight:300;color:var(--sand);text-decoration:none;transition:color .2s;line-height:1;}
.footer-links a:hover{color:var(--gold);}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;}
.fci-icon{font-size:14px;flex-shrink:0;margin-top:1px;opacity:.7;}
.footer-contact-item a,.footer-contact-item span{font-size:13px;font-weight:300;color:var(--sand);text-decoration:none;line-height:1.5;transition:color .2s;}
.footer-contact-item a:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid rgba(201,168,76,.1);padding:20px 80px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-bottom p{font-size:12px;font-weight:300;color:rgba(200,184,154,.5);letter-spacing:.06em;}
.footer-bottom-links{display:flex;gap:20px;}
.footer-bottom-links a{font-size:11px;font-weight:300;color:rgba(200,184,154,.4);text-decoration:none;letter-spacing:.06em;transition:color .2s;}
.footer-bottom-links a:hover{color:var(--gold);}
@media(max-width:1100px){.footer-top{grid-template-columns:1fr 1fr;gap:36px;}}
@media(max-width:700px){.footer-top{grid-template-columns:1fr;padding:40px 24px 32px;gap:28px;}.footer-bottom{flex-direction:column;gap:12px;padding:18px 24px;text-align:center;}}