/* V3 (Adi) — final override layer, loaded last */

/* Honold logo as a recolourable mark */
.honold-mark{
  display:block;
  background:currentColor;
  -webkit-mask:url(assets/logos/gottlieber-black.png) center/contain no-repeat;
  mask:url(assets/logos/gottlieber-black.png) center/contain no-repeat;
  aspect-ratio:360/213;
}

/* Warum gerade jetzt: sketches centred in their panel */
@media(min-width:701px){
  .why .why-image-shell,
  .why .brand-shell,.why .digital-shell,.why .content-shell,.why .retail-shell{
    left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;
  }
}

/* Communication: small, elegant logo sign-off bottom right (the cover-image rule was stretching it) */
.communication-main > img.communication-signoff{
  position:absolute!important;inset:auto clamp(26px,3vw,44px) clamp(22px,2.6vw,36px) auto!important;
  width:clamp(64px,5.4vw,84px)!important;height:auto!important;object-fit:contain!important;
  filter:brightness(0) invert(1)!important;opacity:.9!important;z-index:5!important;transform:none!important;
  pointer-events:none;
}

/* Javan Studios: top mark and footer button link to javanstudios.ch */
.studio-mark{display:inline-flex;align-items:center;gap:6px}
.studio-mark .mark-arrow{font-size:.8em;opacity:0;translate:-4px 2px;transition:opacity .35s,translate .45s cubic-bezier(.16,1,.3,1)}
.studio-mark:hover .mark-arrow{opacity:.8;translate:0 0}
.studio-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px 12px 20px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#f4efe9;text-decoration:none;
  font-size:13px;letter-spacing:.01em;
  transition:background .35s,color .35s,border-color .35s,translate .5s cubic-bezier(.16,1,.3,1);
}
.studio-cta i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);font-size:11px;transition:transform .5s cubic-bezier(.16,1,.3,1),background .35s,color .35s}
.studio-cta:hover{background:#f4efe9;color:#0b0b0b;border-color:#f4efe9}
.studio-cta:hover i{background:#0b0b0b;color:#f4efe9;transform:rotate(45deg)}
.cta footer{align-items:center}

/* Website mock: logo instead of the "direction sketch" pill */
#webVisualCaption{display:none!important}
.web-visual-panel{position:relative}
.web-visual-panel .web-signoff{
  position:absolute;right:clamp(22px,2.6vw,36px);bottom:clamp(20px,2.4vw,32px);
  width:clamp(60px,5vw,78px);z-index:4;color:#4a2412;opacity:.88;pointer-events:none;
}

/* Brand cues: logo sign-off bottom right */
.brand-cues-visual .cue-signoff{
  position:absolute;
  right:clamp(20px,3vw,40px);
  bottom:clamp(18px,2.6vw,34px);
  width:clamp(70px,7vw,96px);
  z-index:4;
  color:#4a2412;
  opacity:.92;
  pointer-events:none;
}
#conceptCanvas[data-concept="editorial"] .brand-cues-visual .cue-signoff{color:#f4ece2}


/* Brand palette: colour codes on hover */
#brandPalette span{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1);cursor:default}
#brandPalette span:hover{transform:translateY(-4px) scale(1.12)}
#brandPalette span::after{
  content:attr(data-hex);
  position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);
  font-size:10px;letter-spacing:.08em;white-space:nowrap;color:var(--c-fg);
  opacity:0;transition:opacity .3s;
}
#brandPalette span:hover::after{opacity:.7}

/* Social: festive tiles in red, fir green and gold */
.concept-social-grid .tile.concept-copy,
.concept-social-grid .tile.concept-color{position:relative;color:#f7efe2!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-end!important;gap:6px}
.concept-social-grid .tile:nth-child(4){background:linear-gradient(150deg,#9e1d29 0%,#5e0d17 100%)!important}
.concept-social-grid .tile:nth-child(8){background:linear-gradient(150deg,#21503a 0%,#0f2b1e 100%)!important}
.concept-social-grid .tile.monogram-tile{
  background:linear-gradient(150deg,#d4b06a 0%,#a3803f 100%)!important;
  align-items:flex-end!important;justify-content:flex-end!important;
  padding:12px!important;
}
.concept-social-grid .tile-star{font-style:normal;font-size:11px;line-height:1;color:#e2c47f;letter-spacing:0}
.concept-social-grid .tile:nth-child(4)::before,
.concept-social-grid .tile:nth-child(8)::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(226,196,127,.28);pointer-events:none;
}
.concept-social-grid .tile-mark{width:62%;color:#5e0d17}
.concept-social-grid .tile{overflow:hidden}
.concept-social-grid .tile.image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)!important}

.social-avatar{overflow:hidden;background:#fff!important;color:#582e10}
.social-avatar .avatar-mark{width:78%}

/* Website mock: nav, bag, switchable stories */
.web-nav{display:flex;gap:clamp(14px,2vw,28px);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.web-nav a{opacity:.55;cursor:pointer;position:relative;padding:4px 0;transition:opacity .25s}
.web-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.web-nav a:hover,.web-nav a.on{opacity:1}
.web-nav a:hover::after,.web-nav a.on::after{transform:scaleX(1)}
.web-actions-v3{opacity:1!important;gap:20px!important}
.web-actions-v3 .web-stores{opacity:.55}
.web-bag{
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;
  background:transparent;border:1px solid color-mix(in srgb,var(--c-fg) 22%,transparent);
  border-radius:999px;padding:8px 14px;display:inline-flex;gap:8px;align-items:center;
}
.web-bag b{
  min-width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;
  background:var(--c-fg);color:var(--c-bg);font-size:10px;font-weight:600;letter-spacing:0;
}
.web-bag.bump{animation:bagBump .5s cubic-bezier(.2,.7,.2,1)}
@keyframes bagBump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

#conceptImage{transition:opacity .35s ease,transform .7s cubic-bezier(.2,.7,.2,1)!important}
#conceptHeadline{transition:opacity .3s ease}
.web-visual-panel{overflow:hidden}


.web-editorial-strip article{cursor:pointer;position:relative;transition:background .3s}
.web-editorial-strip article::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--c-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.web-editorial-strip article:hover{background:color-mix(in srgb,var(--c-fg) 4%,transparent)}
.web-editorial-strip article.active::after{transform:scaleX(1)}
.web-editorial-strip article.active b{opacity:1}
.web-editorial-strip article:not(.active) b{opacity:.6}
.web-editorial-strip article:focus-visible{outline:1px solid var(--c-accent);outline-offset:-1px}

/* Shop row */
.web-shop{border-top:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent);padding:clamp(22px,3vw,40px) clamp(24px,3vw,48px) clamp(26px,3.2vw,44px)}
.web-shop-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.web-shop-head span{opacity:.6}
.web-shop-head i{flex:1;height:1px;background:color-mix(in srgb,var(--c-fg) 12%,transparent)}
.web-shop-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.web-product{display:grid;gap:10px;justify-items:start}
.web-product-pic{width:100%;aspect-ratio:5/4;border-radius:6px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c-bg) 88%,#fff 12%) 0%,color-mix(in srgb,var(--c-bg) 94%,var(--c-fg) 6%) 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-fg) 8%,transparent)}
#conceptCanvas[data-concept="heritage"] .web-product-pic{background:radial-gradient(circle at 50% 40%,#4b3228 0%,#34231c 58%,#2c1d17 100%)}
#conceptCanvas[data-concept="product"] .web-product-pic{background:radial-gradient(circle at 50% 40%,#fdfbf7 0%,#efe9df 75%)}
#conceptCanvas[data-concept="editorial"] .web-product-pic{background:radial-gradient(circle at 50% 40%,#f7f2eb 0%,#e3d9cc 78%)}
.web-product-pic img{filter:drop-shadow(0 14px 16px rgba(0,0,0,.22))}
#conceptCanvas[data-concept="heritage"] .web-product-pic img{filter:drop-shadow(0 16px 18px rgba(0,0,0,.45))}
.web-product-pic img{width:84%;height:84%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}

.web-product b{font-size:14px;font-weight:500;letter-spacing:-.02em}
.web-add{
  font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  color:var(--c-fg);background:transparent;border:0;padding:0;opacity:.6;
  border-bottom:1px solid color-mix(in srgb,var(--c-fg) 30%,transparent);transition:opacity .25s;
}
.web-add:hover{opacity:1}
.web-add.done{opacity:1;color:var(--c-accent);border-color:transparent;cursor:default}
.web-add.done::before{content:"✓ "}

@media(max-width:760px){
  .web-nav{display:none}
  .web-actions-v3 .web-stores{display:none}
  .web-shop-row{grid-template-columns:repeat(2,1fr)}
}

/* Explorer head: text left, options right at the same height, showcase directly below */
.explorer-head.eh-v3{grid-template-columns:minmax(0,1fr) minmax(280px,380px)!important;align-items:end!important;padding-bottom:clamp(26px,2.6vw,40px)!important}
.eh-v3 .explorer-head-note{margin:22px 0 0!important;max-width:560px}
.eh-v3 .concept-tabs{margin-top:0!important;max-width:none!important}
@media(max-width:1050px){.explorer-head.eh-v3{grid-template-columns:1fr!important}.eh-v3 .concept-tabs{margin-top:10px!important}}
/* No logo sign-off on the Brand Cues and Digital images (Communication keeps it) */
.brand-cues-visual .cue-signoff,.web-visual-panel .web-signoff{display:none!important}
/* No stars on the social word tiles */
.concept-social-grid .tile-star{display:none!important}

/* Options inside the showcase header (right side), favourite button underneath */
.explorer-head.eh-solo{grid-template-columns:1fr!important}
.concept-meta{align-items:flex-end!important;gap:40px}
.concept-meta .meta-right{display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.concept-meta .concept-tabs{flex-direction:row!important;flex-wrap:wrap;justify-content:flex-end;max-width:none!important;margin:0!important;gap:26px!important}
.concept-meta .concept-tab{width:auto!important;display:inline-flex!important;align-items:center;gap:10px!important;padding:8px 0!important;font-size:15px!important;
  color:var(--c-fg)!important;opacity:.5;background:transparent!important;border:0!important;border-bottom:1px solid transparent!important;transition:opacity .3s,border-color .3s!important}
.concept-meta .concept-tab:before{color:var(--c-fg)!important;opacity:.6;font-size:10px}
.concept-meta .concept-tab:after{display:none!important}
.concept-meta .concept-tab:hover{opacity:.85}
.concept-meta .concept-tab.active{opacity:1;color:var(--c-fg)!important;border-bottom-color:var(--c-fg)!important}
@media(max-width:900px){.concept-meta{flex-direction:column;align-items:flex-start!important}.concept-meta .meta-right{align-items:flex-start}.concept-meta .concept-tabs{justify-content:flex-start}}

/* Guide to the other territories */
.concept-meta .tab-hint{margin:0;display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;color:var(--c-fg);opacity:.62;cursor:pointer;transition:opacity .5s ease,transform .5s ease}
.concept-meta .tab-hint:hover{opacity:.95}
.concept-meta .th-arrow{display:inline-block;animation:thNudge 1.8s cubic-bezier(.16,1,.3,1) infinite}
@keyframes thNudge{0%,100%{transform:translateX(0)}45%{transform:translateX(6px)}}
.concept-meta .meta-right:not(.explored) .concept-tab:not(.active){animation:thGlow 4.2s ease-in-out infinite}
.concept-meta .meta-right:not(.explored) .concept-tab:not(.active) ~ .concept-tab:not(.active){animation-delay:.7s}
@keyframes thGlow{0%,70%,100%{opacity:.5}20%{opacity:1}}
.concept-meta .meta-right.explored .tab-hint{opacity:0;transform:translateY(-4px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.concept-meta .th-arrow,.concept-meta .concept-tab{animation:none!important}}

.concept-meta p.tab-hint{font-size:12px!important;line-height:1.2!important;margin:0!important;opacity:.6;max-width:none!important;text-transform:uppercase;letter-spacing:.14em}
.concept-meta p.tab-hint .th-arrow{font-size:13px}