/* B · Víkend: content sections below the shop front. */
.lepek, .vikend, .cafes { background-color: var(--concrete); background-image: var(--noise); }
.pecivo, .orders, .ig { background: var(--flour); }

/* explainer: enamel sign */
.lepek-g { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.enamel {
  position: relative; padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px); border-radius: 18px; color: var(--white);
  background: radial-gradient(120% 120% at 30% 20%, #4767B5, var(--blue) 55%, #2A447F);
  box-shadow: inset 0 0 0 10px var(--blue), inset 0 0 0 14px var(--white), inset 0 0 0 16px #2A447F, 0 24px 44px -16px rgba(20,24,30,.55);
}
.screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2F3F4, #8d939a); }
.screw::after { content: ''; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #4B5158; rotate: 35deg; }
.s1 { left: 22px; top: 22px; } .s2 { right: 22px; top: 22px; } .s3 { left: 22px; bottom: 22px; } .s4 { right: 22px; bottom: 22px; }
.en-h { font-size: clamp(42px, 6.2vw, 88px); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: .92; margin-bottom: 18px; }
.en-s { margin: 0; font-size: clamp(19px, 2vw, 26px); font-weight: 600; font-stretch: 100%; }
.lepek-t p:last-child { padding-top: 14px; border-top: 2px solid var(--crust); }

/* products: shelf tags on rails */
.rail { position: relative; padding-top: 22px; margin-bottom: 44px; }
.rail::before { content: ''; position: absolute; top: 0; left: -12px; right: -12px; height: 12px; border-radius: 3px;
  background: linear-gradient(#C9CDD1, #8B9198 45%, #5B6168); box-shadow: 0 4px 8px rgba(0,0,0,.18); }
.tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stag {
  position: relative; padding: 26px 20px 22px; background: var(--white); border-top: 6px solid var(--blue); border-radius: 2px 2px 6px 6px;
  box-shadow: 0 10px 22px -12px rgba(30,47,92,.35); transform-origin: 50% -22px; transition: transform .5s var(--ease), opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s);
}
.clip { position: absolute; top: -26px; left: 50%; width: 30px; height: 22px; margin-left: -15px; border-radius: 3px; background: linear-gradient(#D7DADD, #9AA0A6); }
.code { display: block; font-size: 12px; color: var(--crust-dark); letter-spacing: .04em; margin-bottom: 10px; }
.stag h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; font-stretch: 75%; text-transform: uppercase; margin-bottom: 10px; }
.stag p { margin: 0; font-size: 16px; }
.stag-s { border-top-color: var(--crust); }
.stag-k { border-top-color: var(--night); }
@media (hover: hover) { .stag:hover { transform: rotate(-2.2deg); } .stag:nth-child(even):hover { transform: rotate(2.2deg); } }
.price { display: inline-block; margin: 0; padding: 8px 14px; background: var(--night); color: var(--glow); font-size: 14px; border-radius: 3px; }

/* weekend visit */
.week { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wd { position: relative; min-height: 132px; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; border-radius: 4px; color: var(--white);
  background: repeating-linear-gradient(180deg, #5E646B 0 9px, #3F454B 9px 12px), var(--steel-7); }
.wd b { font-size: 30px; font-weight: 800; font-stretch: 112%; }
.wd span { font-size: 13px; }
.wd.we { color: var(--ink); background: radial-gradient(120% 100% at 50% 20%, #FFE2B4, #F4BC74 70%); border-top: 10px solid var(--steel-9); }
.wd.today { outline: 4px solid var(--blue); outline-offset: 3px; }
.today-b { position: absolute; top: 8px; left: 10px; padding: 2px 8px; border-radius: 3px; background: var(--blue); color: var(--white); font: 600 12px/1.4 var(--mono); }
.week-n { font-size: 14px; margin-bottom: 40px; }
.visit { display: grid; grid-template-columns: 1fr 1fr minmax(0, 300px); gap: 20px; align-items: start; }
.v-card { padding: 28px; background: var(--white); border: 2px solid var(--blue); border-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v-card h3 { font-size: 24px; font-stretch: 112%; }
.v-card p { margin: 0; }
address { font-style: normal; font-size: 22px; font-weight: 600; line-height: 1.3; }
.v-tip { border-color: var(--crust); }
.v-photo { margin: 0; }
.v-photo img { width: 100%; max-width: 300px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; border: 6px solid var(--steel-9); }
.v-photo figcaption { margin-top: 8px; }

/* coffee */
.kava { background: var(--blue); color: var(--white); }
.kava .kick { color: #FFD9A8; }
.kava-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.kava-ph { margin: 0; }
.kava-ph img { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
.kava h2 { margin-bottom: 20px; }

/* orders */
.mail-big { display: inline-block; margin-top: 8px; font-size: clamp(24px, 5.6vw, 64px); font-weight: 800; color: var(--blue); text-decoration-thickness: 4px; text-underline-offset: 8px; overflow-wrap: anywhere; min-height: 44px; }
@media (hover: hover) { .mail-big:hover { color: var(--crust-dark); } }
.seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.season { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--white); border-radius: 6px; overflow: hidden; box-shadow: 0 16px 30px -20px rgba(30,47,92,.45); }
.season > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.season-t { padding: 26px; display: flex; flex-direction: column; align-items: flex-start; }
.season-t h3 { font-size: 34px; font-stretch: 112%; margin-bottom: 12px; }
.season-t p:not(.code) { font-size: 16px; }
.season-t .btn { margin-top: auto; font-size: 13px; padding: 12px 16px; }
.semla { position: relative; min-height: 300px; background: radial-gradient(circle at 50% 40%, #FFF3DE, var(--crumb)); }
.semla span { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1.4; translate: -50% -40%; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; background: radial-gradient(circle at 50% 80%, #D58D47, #9B5524); }
.semla span::before { content: ''; position: absolute; left: 4%; right: 4%; top: -12%; height: 34%; border-radius: 40% 40% 30% 30%; background: #FFFDF6; box-shadow: 0 -2px 0 #F2E6CF inset; }
.semla span::after { content: ''; position: absolute; left: 8%; right: 8%; top: -52%; height: 52%; border-radius: 50% 50% 20% 20%; background: radial-gradient(120% 90% at 50% 15%, #FFFDF8 0 22%, #EBCFA6 40%, #C78343 70%, #9B5524); }

/* for cafés */
.cafes-g { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.cafes-shutter { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; padding: 34px 28px 54px; border-radius: 4px; overflow: hidden; border-top: 22px solid var(--steel-9);
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.07) 38%, rgba(0,0,0,.24)), repeating-linear-gradient(180deg, #858B92 0 2px, #646A71 2px 8px, #50565D 8px 16px, #2E3237 16px 19px, #454B52 19px 22px); }
.cafes-shutter::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(#9AA0A6, #2E3237); }
.cafes-shutter .stencil { font-size: clamp(38px, 5.6vw, 76px); max-width: 12ch; }
.cafes-t h2 { margin-bottom: 20px; }
.cafes-t .btn { margin-top: 8px; }

/* reviews on the shutter */
.reviews { background: repeating-linear-gradient(180deg, #2A2E33 0 19px, #1F2226 19px 22px); color: var(--white); }
.reviews .kick { color: var(--glow); }
.reviews .sec-lead { color: #D5D7DA; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.rnote { position: relative; padding: 30px 22px 20px; background: var(--flour); color: var(--ink); border-radius: 2px; rotate: -1.5deg; transition: rotate .4s var(--ease), opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s); }
.rnote:nth-child(even) { rotate: 1.8deg; }
.rnote::before { content: ''; position: absolute; top: -10px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(231,201,160,.85); rotate: -3deg; }
.rnote blockquote { margin: 0 0 14px; font-size: 18px; line-height: 1.45; }
.rnote p { margin: 0; font-size: 13px; color: var(--crust-dark); }
@media (hover: hover) { .rnote:hover { rotate: 0deg; } }

/* instagram */
.ig-g { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ig-h { font-size: clamp(30px, 3.4vw, 56px); font-weight: 900; font-stretch: 100%; color: var(--blue); margin-bottom: 16px; overflow-wrap: anywhere; }
.ig-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-radius: 6px; }
.ig-tiles img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; transition: translate .4s var(--ease); }
@media (hover: hover) { .ig-tiles:hover img:nth-child(2) { translate: 0 -8px; } }

@media (max-width: 1000px) {
  .tags { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .notes { grid-template-columns: 1fr 1fr; }
  .visit { grid-template-columns: 1fr 1fr; }
  .v-photo { grid-column: 1 / -1; }
  .seasons { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .lepek-g, .kava-g, .cafes-g, .ig-g { grid-template-columns: 1fr; }
  .kava-ph img { max-height: 460px; }
  .week { grid-template-columns: 1fr; gap: 6px; }
  .wd { min-height: 52px; flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 16px; }
  .wd b { font-size: 22px; }
  .wd.we { border: 2px solid var(--steel-9); }
  .today-b { position: static; order: 2; margin-left: auto; margin-right: 12px; }
  .wd span { order: 3; }
}
@media (max-width: 560px) {
  .tags { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .season { grid-template-columns: 1fr; }
  .season > img, .semla { min-height: 0; height: 240px; }
  .stag h3 { font-size: 30px; }
}

/* reveal + hover transitions together on swinging tags and taped notes */
html.js .stag.rv { transition: transform .5s var(--ease), opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s); }
html.js .rnote.rv { transition: rotate .4s var(--ease), opacity .7s var(--ease) var(--d, 0s), translate .7s var(--ease) var(--d, 0s); }